Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
93 commits
Select commit Hold shift + click to select a range
d28e7d2
Added new component Smart ToggleButtons
nathalieArnoux Jun 9, 2025
3507fde
Added hover
nathalieArnoux Jun 9, 2025
d827c2d
removed empty css rule
nathalieArnoux Jun 10, 2025
19218cd
Added Smart Button component
nathalieArnoux Jun 12, 2025
3e2e464
Fixed initial PR feedback
nathalieArnoux Jun 13, 2025
f95347a
Removed redundant color variables
nathalieArnoux Jun 16, 2025
cc84036
Added new Smart Skeleton component
nathalieArnoux Jun 16, 2025
46a32d9
[WIP] Smart immersive input component: Add new component & resize bas…
aprentout Jun 23, 2025
7bc5e67
Smart immersive input component: Add tests & cleanup code
aprentout Jun 23, 2025
5a5e8b0
Smart immersive input component: Move css in separated file & rollbac…
aprentout Jun 23, 2025
2e01106
Dummy app: Reword smart immersive input section
aprentout Jun 24, 2025
3959353
feat: added smart input component
OwenCoogan Jun 23, 2025
d7ec283
fix: fixed broken tests
OwenCoogan Jun 23, 2025
07c45f9
fix: cleanup
OwenCoogan Jun 23, 2025
9badf8a
fix: fixes post review
OwenCoogan Jun 25, 2025
79129ca
fix: added fixes post review
OwenCoogan Jun 25, 2025
de8b29f
wip: added feedback component
OwenCoogan Jun 23, 2025
08cef27
fix: added story & fixed styling
OwenCoogan Jun 24, 2025
356ba6a
fix: remove unused method
OwenCoogan Jun 24, 2025
b5511d5
fix: added fixes post review
OwenCoogan Jun 25, 2025
0736a88
fix: added fixes post review
OwenCoogan Jun 25, 2025
8166fca
fix: push uncommited file
OwenCoogan Jun 25, 2025
ffd4d86
fix: removed unused class
OwenCoogan Jun 25, 2025
a6b4afe
WIP
nathalieArnoux Jun 20, 2025
8dddb60
Added Smart Immersive Currency Input component
nathalieArnoux Jun 24, 2025
b64c17e
Fixed animation colors and tests
nathalieArnoux Jun 24, 2025
dcee9f8
Fixed PR feedback
nathalieArnoux Jun 25, 2025
525807a
Added new OSS::Pill and Smart::Pill components
nathalieArnoux Jun 26, 2025
689dc79
Removed unnecessary onChange action
nathalieArnoux Jun 27, 2025
776fb02
wip: immersive logo
OwenCoogan Jun 25, 2025
6b8aa2f
wip: smart logo
OwenCoogan Jun 25, 2025
fab5646
feat: fixed loading animation
OwenCoogan Jun 26, 2025
438f25c
fix: css cleanup
OwenCoogan Jun 26, 2025
7818afe
fix: added test
OwenCoogan Jun 26, 2025
b338d45
fix: added fixes post review
OwenCoogan Jun 27, 2025
1a43aa5
fix: cleanup & unstaged files
OwenCoogan Jun 30, 2025
14897b7
fix: added fixes post review
OwenCoogan Jun 30, 2025
385e744
fix: renamed onClick arg to onEdit
OwenCoogan Jul 1, 2025
71ce1cd
Added @icon arg on OSS::Pill & Smart::Pill
nathalieArnoux Jul 2, 2025
0f4a328
Added icon helpers
nathalieArnoux Jul 2, 2025
53cb7ad
FA duotone
nathalieArnoux Jul 16, 2025
43535b2
Scrollable-panel: Add new offset params
aprentout Jul 24, 2025
8babe1b
Smart immersive select: Add new smart component & add skin on infinit…
aprentout Jul 23, 2025
1f72275
Smart immersive select: Add tests
aprentout Jul 23, 2025
46bef5c
Fix pr feedback
aprentout Jul 24, 2025
c0a130f
Added Smart::Tag & Smart::TagInput components
nathalieArnoux Jul 24, 2025
ccd8227
Fixed tag lg size
nathalieArnoux Jul 24, 2025
48df82f
Fixed PR feedback
nathalieArnoux Jul 25, 2025
0341ad1
Added test and doc for placeholder arg on tag input
nathalieArnoux Jul 25, 2025
984c0ef
Fixed additional PR feedback
nathalieArnoux Jul 25, 2025
04fe4d3
Smart component: Fix input css issue
aprentout Aug 12, 2025
42e3fd9
Remove unused css
aprentout Aug 13, 2025
8cb1ff7
Smart infinite-select: Rework style
aprentout Aug 19, 2025
297c041
Fix pr feedback
aprentout Aug 20, 2025
b43a623
Smart Textarea: Add new component
aprentout Aug 18, 2025
c81a3c4
Smart Textarea: Fix test
aprentout Aug 18, 2025
e355309
Smart Textarea: Fix pr feedbacks
aprentout Aug 18, 2025
9ca5eb0
Fix pr feedback
aprentout Aug 19, 2025
958f873
Fix pr feedback
aprentout Aug 20, 2025
d1c7dbb
[WIP] Wizard container: Step properly adjust to content size
aprentout Aug 27, 2025
f091d18
Step-wrapper: Add scroll tolerance & improve css
aprentout Aug 28, 2025
96c7bdb
Wizard-container: Remove the scrollable section
aprentout Aug 29, 2025
3a74c86
Updated: tweaks & additions on smart components
Miexil Sep 3, 2025
e8ba4e8
Updated: Smart::Logo use more precise class names to prevent clashes …
Miexil Sep 3, 2025
f0b008a
Updated: WizardManager - do not focus on error step when it's the cur…
Miexil Sep 3, 2025
008b47f
Updated: Smart::Select paddings and dropdown position
Miexil Sep 3, 2025
3009d9a
Wizard-manager: Find first focusable step not hidden
aprentout Sep 4, 2025
79754c4
Updated: Smart::Immersive::Select input format and types
Miexil Sep 9, 2025
2342bb3
Updated: Smart::TagInput delay on-clickoutside
Miexil Sep 9, 2025
bfee8e8
Updated: Wizard::BaseStep re-assign stepValidator in constructor ever…
Miexil Sep 9, 2025
d4f746d
Update smart select & logo components
aprentout Sep 9, 2025
3187555
Smart immersive select: Trigger search reset on click outside
aprentout Sep 9, 2025
d39e770
Smart immersive logo: Replace campaign wording
aprentout Sep 9, 2025
c1b36c2
Updated: fixed ts error
Miexil Sep 10, 2025
567afde
Updated: Smart::TagInput with splattributes
Miexil Sep 10, 2025
199dbc7
Smart pill: Enable rotating gradient animation only when pill is sele…
aprentout Sep 11, 2025
16fea0c
Updated: Focus and display each step in between when changing step
Miexil Sep 22, 2025
76eb030
Fixed: allow focusing step when no focused step is configured
Miexil Sep 25, 2025
c953752
Updated: better handle first step focus for initialization
Miexil Sep 25, 2025
d0c5f30
Added: Wizard option to disable/enable scrollwheel
Miexil Sep 25, 2025
5cd80c5
Updated: Option to prevent wizard scroll from html class
Miexil Sep 29, 2025
01afa7d
Updated: wizard manager method to mark step as incomplete
Miexil Sep 29, 2025
cf24ac7
Added: default gray background on logo
Miexil Sep 29, 2025
f203e0d
Updated: SmartCurrencyInput floating dropdown
Miexil Sep 29, 2025
7530bcc
Smart immersive input: Handle suffix/prefix name block
aprentout Sep 30, 2025
1a8e9d9
wip: added number input
OwenCoogan Oct 3, 2025
97c7de2
fix: fixed tests
OwenCoogan Oct 6, 2025
40f79f1
fix: fixed css issue
OwenCoogan Oct 7, 2025
15bbffa
fix: fixed styles
OwenCoogan Oct 7, 2025
e3e3b4f
Updated: smart button side paddings set at 18px
Miexil Oct 16, 2025
cd32b0b
Updated: run step validation in sequence instead of in bulk
Miexil Oct 22, 2025
e8b786f
Updated: bypass stepValidation for hidden steps
Miexil Oct 23, 2025
f0e811d
Updated: computed hidden state on step-wrapper
Miexil Oct 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions addon/components/o-s-s/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const SQUARE_CLASS = 'upf-square-btn';
const DEFAULT_COUNTER_TIME = 5000;
const DEFAULT_STEP_COUNTER_TIME = 1000;

interface ButtonArgs {
export interface OSSButtonArgs {
skin?: string;
size?: string;
loading?: boolean;
Expand All @@ -87,15 +87,17 @@ interface ButtonArgs {
};
}

export default class OSSButton extends Component<ButtonArgs> {
export default class OSSButton<T extends OSSButtonArgs> extends Component<T> {
@tracked DOMElement: HTMLElement | undefined;
@tracked intervalID: ReturnType<typeof setInterval> | undefined;
@tracked intervalState: boolean = false;
@tracked counterTimeLeft: number = 0;

constructor(owner: unknown, args: ButtonArgs) {
constructor(owner: unknown, args: OSSButtonArgs, preventDefaultAssertions?: boolean) {
super(owner, args);

if (preventDefaultAssertions) return;

assert(
'[component][OSS::Button] You must pass either a @label, an @icon or an @iconUrl argument.',
args.label || args.icon || args.iconUrl
Expand Down
8 changes: 5 additions & 3 deletions addon/components/o-s-s/currency-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export type Currency = {
symbol: string;
};

interface OSSCurrencyInputArgs {
export interface OSSCurrencyInputArgs {
currency: string;
value: number;
onChange(currency: string, value: number): void;
Expand Down Expand Up @@ -70,16 +70,18 @@ const AUTHORIZED_INPUTS = [
'ArrowDown'
];

export default class OSSCurrencyInput extends Component<OSSCurrencyInputArgs> {
export default class OSSCurrencyInput<T extends OSSCurrencyInputArgs> extends Component<T> {
private currencies = this.args.allowedCurrencies ?? PLATFORM_CURRENCIES;

@tracked currencySelectorShown: boolean = false;
@tracked filteredCurrencies: Currency[] = this.currencies;
@tracked localValue: number = this.args.value;

constructor(owner: unknown, args: OSSCurrencyInputArgs) {
constructor(owner: unknown, args: OSSCurrencyInputArgs, preventDefaultAssertions?: boolean) {
super(owner, args);

if (preventDefaultAssertions) return;

if (!this.args.value && !this.args.placeholder) {
this.localValue = 0;
}
Expand Down
5 changes: 4 additions & 1 deletion addon/components/o-s-s/infinite-select.hbs
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div
id={{this.elementId}}
data-internal-id={{this.elementId}}
class="fx-col fx-gap-px-12 upf-infinite-select {{unless this.inline 'upf-infinite-select--absolute'}}"
class="fx-col fx-gap-px-12 upf-infinite-select
{{unless this.inline 'upf-infinite-select--absolute'}}
upf-infinite-select--{{this.skin}}"
{{did-insert this.onRender}}
...attributes
>
Expand All @@ -10,6 +12,7 @@
@value={{this._searchKeyword}}
@placeholder={{this.searchPlaceholder}}
@onChange={{this.updateSearchKeyword}}
class="upf-infinite-select--search"
{{on "keydown" this.handleKeyEventInput}}
{{did-insert this.initSearchInput}}
/>
Expand Down
17 changes: 16 additions & 1 deletion addon/components/o-s-s/infinite-select.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const FAKE_DATA = [
{ superhero: 'Spider Man', characters: 'Peter Parker' }
];

const SkinTypes = ['default', 'smart'];

export default {
title: 'Components/OSS::InfiniteSelect',
component: 'infinite-select',
Expand Down Expand Up @@ -56,6 +58,17 @@ export default {
},
control: { type: 'boolean' }
},
skin: {
description: 'Adjust the skin of the badge',
table: {
type: {
summary: SkinTypes.join('|')
},
defaultValue: { summary: 'default' }
},
options: SkinTypes,
control: { type: 'select' }
},
loading: {
type: { name: 'boolean' },
description: 'Whether or not the initial content is loading',
Expand Down Expand Up @@ -159,6 +172,7 @@ const defaultArgs = {
loadingMore: false,
inline: false,
enableKeyboard: false,
skin: 'default',
onSelect: action('onSelect'),
onSearch: action('onSearch'),
onBottomReached: action('onBottomReached'),
Expand All @@ -171,7 +185,8 @@ const Template = (args) => ({
@items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
@searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
@loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}}
@didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} class="upf-align--absolute-center"/>
@skin={{this.skin}} @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}}
class="upf-align--absolute-center"/>
`,
context: args
});
Expand Down
5 changes: 5 additions & 0 deletions addon/components/o-s-s/infinite-select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface InfiniteSelectArgs {
items: InfinityItem[];
inline: boolean;
enableKeyboard?: boolean;
skin?: 'default' | 'smart';

onSelect: (item: InfinityItem) => void;
onSearch?: (keyword: string) => void;
Expand Down Expand Up @@ -71,6 +72,10 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
return this.args.inline ?? false;
}

get skin(): 'default' | 'smart' {
return this.args.skin ?? 'default';
}

@action
onRender(): void {
this.args.didRender?.();
Expand Down
4 changes: 2 additions & 2 deletions addon/components/o-s-s/input-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export type FeedbackMessage = {
value: string;
};

interface OSSInputContainerArgs {
export interface OSSInputContainerArgs {
value?: string;
disabled?: boolean;
feedbackMessage?: FeedbackMessage;
Expand All @@ -21,7 +21,7 @@ interface OSSInputContainerArgs {

export const AutocompleteValues = ['on', 'off'];

export default class OSSInputContainer extends Component<OSSInputContainerArgs> {
export default class OSSInputContainer<T extends OSSInputContainerArgs> extends Component<T> {
get feedbackMessage(): FeedbackMessage | undefined {
if (this.args.feedbackMessage && ['error', 'warning', 'success'].includes(this.args.feedbackMessage.type)) {
return this.args.feedbackMessage;
Expand Down
4 changes: 2 additions & 2 deletions addon/components/o-s-s/number-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

interface OSSNumberInputArgs {
export interface OSSNumberInputArgs {
value?: number;
min?: number;
max?: number;
Expand All @@ -21,7 +21,7 @@ const DECREASE_VALUE_KEYS = ['ArrowDown', 'ArrowLeft'];
const BASE_INPUT_PIXEL_WIDTH = 40;
const CHAR_PIXEL_WIDTH = 7;

export default class OSSNumberInput extends Component<OSSNumberInputArgs> {
export default class OSSNumberInput<T extends OSSNumberInputArgs> extends Component<T> {
@tracked localValue: number = this.args.value || DEFAULT_VALUE;
@tracked reachedTooltip: string | null = null;
@tracked inputElement: HTMLElement | null = null;
Expand Down
17 changes: 15 additions & 2 deletions addon/components/o-s-s/scrollable-panel.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@ export default {
type: 'boolean'
}
},
offset: {
description: 'Offset in pixels from which the scrollable panel will be considered as scrolled',
table: {
type: { summary: 'number' },
defaultValue: { summary: '0' }
},
control: {
type: 'number'
}
},
onBottomReached: {
description: 'Function to be called when the scroll hits the bottom',
table: {
Expand All @@ -68,6 +78,7 @@ const defaultArgs = {
plain: false,
disableShadows: false,
hideScrollbar: false,
offset: 0,
onBottomReached: action('onBottomReached')
};

Expand All @@ -83,7 +94,8 @@ const Template = (args) => ({
@disableShadows={{this.disableShadows}}
@onBottomReached={{this.onBottomReached}}
@hideScrollbar={{this.hideScrollbar}}
@horizontal={{this.horizontal}} >
@horizontal={{this.horizontal}}
@offset={{this.offset}} >
<div class="fx-col fx-gap-px-12 padding-px-12">
<div class="background-color-gray-200" style="height: 50px; width: 100%;" />
<div class="background-color-gray-200" style="height: 50px; width: 100%;" />
Expand All @@ -105,7 +117,8 @@ const TemplateHorizontal = (args) => ({
@disableShadows={{this.disableShadows}}
@onBottomReached={{this.onBottomReached}}
@hideScrollbar={{this.hideScrollbar}}
@horizontal={{this.horizontal}} >
@horizontal={{this.horizontal}}
@offset={{this.offset}} >
<div class="fx-row fx-gap-px-12 padding-px-12" style="width: fit-content">
<div class="background-color-gray-200" style="height: 50px; width: 100px;" />
<div class="background-color-gray-200" style="height: 50px; width: 100px;" />
Expand Down
19 changes: 15 additions & 4 deletions addon/components/o-s-s/scrollable-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface OSSScrollablePanelComponentSignature {
disableShadows?: boolean;
horizontal?: boolean;
hideScrollbar?: boolean;
offset?: number;
onBottomReached?: () => void;
}

Expand All @@ -19,6 +20,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable

resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));

get offset(): number {
return this.args.offset ?? 0;
}

@action
initScrollListener(element: HTMLElement): void {
this.parentElement = element;
Expand Down Expand Up @@ -54,7 +59,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
}

private scrollListener(): void {
if (this.parentElement.scrollTop > 0) {
if (this.parentElement.scrollTop - this.offset > 0) {
this.shadowTopVisible = true;
} else {
this.shadowTopVisible = false;
Expand All @@ -63,15 +68,18 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
}

private displayBottomShadow(): void {
if (this.parentElement.scrollTop + this.parentElement.clientHeight >= this.parentElement.scrollHeight - 1) {
if (
this.parentElement.scrollTop + this.parentElement.clientHeight + this.offset >=
this.parentElement.scrollHeight - 1
) {
this.shadowBottomVisible = false;
} else {
this.shadowBottomVisible = true;
}
}

private horizontalScrollListener(): void {
if (this.parentElement.scrollLeft > 0) {
if (this.parentElement.scrollLeft - this.offset > 0) {
this.shadowLeftVisible = true;
} else {
this.shadowLeftVisible = false;
Expand All @@ -80,7 +88,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
}

private displayRightShadow(): void {
if (this.parentElement.scrollLeft + this.parentElement.clientWidth >= this.parentElement.scrollWidth - 1) {
if (
this.parentElement.scrollLeft + this.parentElement.clientWidth + this.offset >=
this.parentElement.scrollWidth - 1
) {
this.shadowRightVisible = false;
} else {
this.shadowRightVisible = true;
Expand Down
8 changes: 5 additions & 3 deletions addon/components/o-s-s/skeleton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { htmlSafe } from '@ember/template';

interface OSSSkeletonArgs {
export interface OSSSkeletonArgs {
width?: number | string;
height?: number | string;
multiple?: number;
Expand All @@ -13,10 +13,12 @@ interface OSSSkeletonArgs {

const RANGE_PERCENTAGE: number = 15;

export default class OSSSkeleton extends Component<OSSSkeletonArgs> {
constructor(owner: unknown, args: OSSSkeletonArgs) {
export default class OSSSkeleton<T extends OSSSkeletonArgs> extends Component<T> {
constructor(owner: unknown, args: OSSSkeletonArgs, preventDefaultAssertions?: boolean) {
super(owner, args);

if (preventDefaultAssertions) return;

if (this.args.direction) {
assert(
`[component][OSS::Skeleton] The @direction argument should be a value of ${['row', 'column', 'col']}`,
Expand Down
26 changes: 26 additions & 0 deletions addon/components/o-s-s/smart/button.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{{! template-lint-disable u-template-lint/no-bare-button}}
<div class="upf-smart-btn-container fx-row" ...attributes>
<button
type="button"
class={{this.computedSmartClasses}}
disabled={{@disabled}}
{{did-insert this.didInsert}}
{{on "click" this.onclick}}
>
{{#if this.loadingState}}
<OSS::Icon @style="solid" @icon="fa-spinner-third fa-spin" />
{{#if (and @label @loadingOptions.showLabel)}}
<span class="margin-left-px-6">{{@label}}</span>
{{/if}}
{{else}}
{{#if @icon}}
<OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}} />
{{else if @iconUrl}}
<img src={{@iconUrl}} alt="icon" />
{{/if}}
{{#if (and @label (not this.isCircle))}}
<span class={{if (or @icon @iconUrl) "margin-left-px-6"}}>{{@label}}</span>
{{/if}}
{{/if}}
</button>
</div>
Loading
Loading