Skip to content

Commit

Permalink
✨ mon-pix: change yield names for pix toggle button
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreiaPena
AndreiaPena authored Dec 6, 2024
1 parent 6b33853 commit 85021b1
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 58 deletions.
8 changes: 4 additions & 4 deletions addon/components/pix-toggle-button.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
type="button"
{{on "click" this.onToggle}}
>
<span class="pix-toggle-button__on{{if @useIcons ' pix-toggle-button__with-icon'}}">
{{yield to="on"}}
<span class="pix-toggle-button__view-a{{if @useIcons ' pix-toggle-button__with-icon'}}">
{{yield to="viewA"}}
</span>
<span class="pix-toggle-button__off{{if @useIcons ' pix-toggle-button__with-icon'}}">
{{yield to="off"}}
<span class="pix-toggle-button__view-b{{if @useIcons ' pix-toggle-button__with-icon'}}">
{{yield to="viewB"}}
</span>
</button>
</div>
17 changes: 6 additions & 11 deletions addon/styles/_pix-toggle-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,37 +25,32 @@
}
}

&__with-icon > svg {
width: 1.4rem;
height: 1.4rem;
}

&__on,
&__off {
&__view-a,
&__view-b {
display: inline-block;
padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
border-radius: 4px;
}

&__on {
&__view-a {
color: var(--pix-neutral-800);
font-weight: var(--pix-font-normal);
}

&__off {
&__view-b {
color: var(--pix-neutral-20);
background-color: var(--pix-neutral-800);
}

&--pressed {
.pix-toggle-button {
&__on {
&__view-a {
color: var(--pix-neutral-20);
font-weight: inherit;
background-color: var(--pix-neutral-800);
}

&__off {
&__view-b {
color: var(--pix-neutral-800);
font-weight: var(--pix-font-normal);
background-color: transparent;
Expand Down
6 changes: 3 additions & 3 deletions app/stories/pix-toggle-button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ Affiche un bouton à deux états.
<PixToggleButton>

<:label>Mon super toggle</:label>
<:on>Option 1</:on>
<:off>Option 2</:off>
<:viewA>Option 1</:viewA>
<:viewB>Option 2</:viewB>

</PixToggleButton>
```
Expand All @@ -32,7 +32,7 @@ Affiche un bouton à deux états.

## WithYields

<Story of={ComponentStories.WithYields} height={200} />
<Story of={ComponentStories.WithIcons} height={200} />

## Arguments

Expand Down
42 changes: 20 additions & 22 deletions app/stories/pix-toggle-button.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,13 @@ export default {
description: "Définit si l'on utilise des icons dans le PixToggleButton",
type: { name: 'boolean', required: true },
},
onLabel: {
name: 'onLabel',
description: "Le label de l'état actif du PixToggleButton à placer dans les yield <:on>",
type: { name: 'string', required: false },
viewALabel: {
name: '<:viewA>',
description: "Yield où l'on place le label ou l'icône de l'état actif du PixToggleButton",
},
offLabel: {
name: 'offLabel',
description: "Le label de l'état non actif du PixToggleButton à placer dans les yield <:off>",
type: { name: 'string', required: false },
viewBLabel: {
name: '<:viewB>',
description: "Yield où l'on place le label ou l'icône de l'état non actif du PixToggleButton",
},
toggled: {
name: 'toggled',
Expand Down Expand Up @@ -85,22 +83,22 @@ const Template = (args) => {
@screenReaderOnly={{this.screenReaderOnly}}
>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`,
context: args,
};
};

const TemplateWithYields = (args) => {
const TemplateWithIcons = (args) => {
return {
template: hbs`<PixToggleButton @toggled={{this.toggled}} @onChange={{this.onChange}} @useIcons={{this.useIcons}}>
<:label>{{this.label}}</:label>
{{! template-lint-disable no-inline-styles }}
<:on><PixIcon @name='eye' /></:on>
<:viewA><PixIcon @name='eye' /></:viewA>
{{! template-lint-disable no-inline-styles }}
<:off><PixIcon @name='eyeOff' /></:off>
<:viewB><PixIcon @name='eyeOff' /></:viewB>
</PixToggleButton>`,
context: args,
};
Expand All @@ -109,18 +107,18 @@ const TemplateWithYields = (args) => {
export const Default = Template.bind({});
Default.args = {
label: 'Mon toggle',
onLabel: 'Option A',
offLabel: 'Option B',
viewALabel: 'Option A',
viewBLabel: 'Option B',
toggled: false,
onChange: action('onChange'),
};

export const Inline = Template.bind({});
Inline.args = {
inline: true,
inlineLabel: true,
label: 'Mon toggle',
onLabel: 'Option A',
offLabel: 'Option B',
viewALabel: 'Option A',
viewBLabel: 'Option B',
toggled: false,
onChange: action('onChange'),
};
Expand All @@ -129,14 +127,14 @@ export const ScreenReaderOnly = Template.bind({});
ScreenReaderOnly.args = {
screenReaderOnly: true,
label: 'Mon toggle',
onLabel: 'Option A',
offLabel: 'Option B',
viewALabel: 'Option A',
viewBLabel: 'Option B',
toggled: false,
onChange: action('onChange'),
};

export const WithYields = TemplateWithYields.bind({});
WithYields.args = {
export const WithIcons = TemplateWithIcons.bind({});
WithIcons.args = {
label: 'Mon toggle',
toggled: false,
useIcons: true,
Expand Down
36 changes: 18 additions & 18 deletions tests/integration/components/pix-toggle-button-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@ module('Integration | Component | PixToggleButton', function (hooks) {
setupRenderingTest(hooks);

this.label = 'Mon bouton toggle';
this.onLabel = 'Oui';
this.offLabel = 'Non';
this.viewALabel = 'Oui';
this.viewBLabel = 'Non';

test('it renders PixToggleButton', async function (assert) {
// given & when
const screen = await render(hbs`<PixToggleButton>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

assert.dom(screen.getByText(this.label)).exists();
assert.dom(screen.getByText(this.onLabel)).exists();
assert.dom(screen.getByText(this.offLabel)).exists();
assert.dom(screen.getByText(this.viewALabel)).exists();
assert.dom(screen.getByText(this.viewBLabel)).exists();
});

test('it pressed PixToggleButton', async function (assert) {
// given & when
const screen = await render(hbs`<PixToggleButton @toggled={{true}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

// then
Expand All @@ -42,8 +42,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
// given & when
const screen = await render(hbs`<PixToggleButton @toggled={{false}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

// then
Expand All @@ -56,8 +56,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {

const screen = await render(hbs`<PixToggleButton @toggled={{false}} @onChange={{this.onChange}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

Expand All @@ -74,8 +74,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {

const screen = await render(hbs`<PixToggleButton @toggled={{true}} @onChange={{this.onChange}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

await click(screen.getByRole('button'));
Expand All @@ -91,8 +91,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {

const screen = await render(hbs`<PixToggleButton @onChange={{this.onChange}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

Expand All @@ -109,8 +109,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {

const screen = await render(hbs`<PixToggleButton @onChange={{this.onChange}}>
<:label>{{this.label}}</:label>
<:on>{{this.onLabel}}</:on>
<:off>{{this.offLabel}}</:off>
<:viewA>{{this.viewALabel}}</:viewA>
<:viewB>{{this.viewBLabel}}</:viewB>
</PixToggleButton>`);

Expand Down

0 comments on commit 85021b1

Please sign in to comment.