Skip to content

Commit

Permalink
docs(sbb-card): cleanup stories and visual tests (#3225)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeripeierSBB
jeripeierSBB authored Nov 21, 2024
1 parent 23d1fea commit dd8d644
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 221 deletions.
203 changes: 2 additions & 201 deletions src/elements/card/card/card.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,17 +66,6 @@ const TemplateCardAction = ({ size, color, label, ...args }: Args): TemplateResu
</sbb-card>
`;

const TemplateCardActionFixedHeight = ({
size,
color,
label,
...args
}: Args): TemplateResult => html`
<sbb-card ${sbbSpread({ size, color })} style=${styleMap({ height: '250px' })}>
${TemplateAction({ label, ...args })} ${Content()}
</sbb-card>
`;

const TemplateCardActionWithBadge = ({ size, color, label, ...args }: Args): TemplateResult => html`
<sbb-card ${sbbSpread({ size, color })}>
${TemplateAction({ label, ...args })}
Expand Down Expand Up @@ -264,107 +253,15 @@ const defaultArgsButton = {
value: 'Value',
};

// TODO: Stories can be simplified

export const ColorWhite: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
},
};

export const ColorMilk: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
color: color.options![1],
},
};

export const ColorTransparent: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
color: color.options![2],
},
};

export const ColorTransparentBorderedDashed: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
color: color.options![3],
},
};

export const SizeXS: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![0],
},
};

export const SizeS: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![1],
},
};

export const SizeM: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![2],
},
};

export const SizeL: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![3],
},
};

export const SizeXL: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![4],
},
};

export const SizeXXL: StoryObj = {
export const Default: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![5],
},
};

export const SizeXXXL: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![6],
},
};

export const SizeMWithBadge: StoryObj = {
export const WithBadge: StoryObj = {
render: TemplateWithBadge,
argTypes: defaultArgTypes,
args: {
Expand All @@ -373,42 +270,6 @@ export const SizeMWithBadge: StoryObj = {
},
};

export const SizeLWithBadge: StoryObj = {
render: TemplateWithBadge,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![3],
},
};

export const SizeXLWithBadge: StoryObj = {
render: TemplateWithBadge,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![4],
},
};

export const SizeXXLWithBadge: StoryObj = {
render: TemplateWithBadge,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![5],
},
};

export const SizeXXXLWithBadge: StoryObj = {
render: TemplateWithBadge,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
size: size.options![6],
},
};

export const Link: StoryObj = {
render: TemplateCardAction,
argTypes: defaultArgTypesLink,
Expand All @@ -421,66 +282,6 @@ export const Button: StoryObj = {
args: { ...defaultArgsButton },
};

export const ButtonActive: StoryObj = {
render: TemplateCardAction,
argTypes: defaultArgTypesButton,
args: { ...defaultArgsButton, active: true },
};

export const ButtonActiveMilk: StoryObj = {
render: TemplateCardAction,
argTypes: defaultArgTypesButton,
args: {
...defaultArgsButton,
color: color.options![1],
active: true,
},
};

export const ButtonActiveTransparentBordered: StoryObj = {
render: TemplateCardAction,
argTypes: defaultArgTypesButton,
args: {
...defaultArgsButton,
color: color.options![2],
active: true,
},
};

export const ButtonActiveTransparentBorderedDashed: StoryObj = {
render: TemplateCardAction,
argTypes: defaultArgTypesButton,
args: {
...defaultArgsButton,
color: color.options![3],
active: true,
},
};

export const ButtonWithSbbBadge: StoryObj = {
render: TemplateCardActionWithBadge,
argTypes: defaultArgTypesButton,
args: { ...defaultArgsButton },
};

export const LinkWithSbbBadge: StoryObj = {
render: TemplateCardActionWithBadge,
argTypes: defaultArgTypesLink,
args: { ...defaultArgsLink },
};

export const LinkActiveWithSbbBadge: StoryObj = {
render: TemplateCardActionWithBadge,
argTypes: defaultArgTypesLink,
args: { ...defaultArgsLink, active: true },
};

export const FixedHeight: StoryObj = {
render: TemplateCardActionFixedHeight,
argTypes: defaultArgTypesButton,
args: { ...defaultArgsButton },
};

export const Multiple: StoryObj = {
render: TemplateCardActionMultipleCards,
argTypes: defaultArgTypesLink,
Expand Down
67 changes: 47 additions & 20 deletions src/elements/card/card/card.visual.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ describe(`sbb-card`, () => {
badge: ['none', 'charcoal', 'white'],
};

const sizeCases = ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
const sizeCases = {
size: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'],
badge: ['none', 'charcoal'],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
// Main test cases
Expand Down Expand Up @@ -49,34 +52,58 @@ describe(`sbb-card`, () => {
});

it(
visualDiffDefault.name,
'',
visualDiffDefault.with((setup) => {
setup.withSnapshotElement(root);
}),
);
});

// Size test cases
for (const size of sizeCases) {
it(
`size=${size}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`
<sbb-card size=${size}>
<span class="sbb-text-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
</span>
describeEach(sizeCases, ({ size, badge }) => {
beforeEach(async function () {
root = await visualRegressionFixture(
html`
<sbb-card size=${size}>
<span class="sbb-text-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
</span>
<sbb-card-badge>
<span>% from CHF 19.99</span>
</sbb-card-badge>
</sbb-card>
`,
{ backgroundColor: 'var(--sbb-color-milk)' },
);
${badge !== 'none'
? html`
<sbb-card-badge color=${badge}>
<span>% from CHF 19.99</span>
</sbb-card-badge>
`
: nothing}
</sbb-card>
`,
{
backgroundColor: 'var(--sbb-color-milk)',
},
);
});

it(
'',
visualDiffDefault.with((setup) => {
setup.withSnapshotElement(root);
}),
);
}
});

it(
'fixed height',
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`
<sbb-card style="height: 250px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
</sbb-card>
`,
{ backgroundColor: 'var(--sbb-color-milk)' },
);
}),
);
});
});

0 comments on commit dd8d644

Please sign in to comment.