Skip to content

Commit

Permalink
feat(sdds-*): update stories and configs for Badge
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Nov 7, 2024
1 parent 6a5e547 commit f7472a0
Show file tree
Hide file tree
Showing 10 changed files with 89 additions and 49 deletions.
8 changes: 5 additions & 3 deletions packages/sdds-cs/src/components/Badge/Badge.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export const config = {
s: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.5rem;
${badgeTokens.paddingRight}: 0.5rem;
${badgeTokens.paddingLeft}: 0.5rem;
${badgeTokens.padding}: 0 0.5rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
Expand All @@ -65,7 +65,9 @@ export const config = {
true: css``,
},
clear: {
true: css``,
true: css`
${badgeTokens.backgroundClear}: var(--surface-clear);
`,
},
},
};
10 changes: 8 additions & 2 deletions packages/sdds-cs/src/components/Badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const meta: Meta<typeof Badge> = {
control: { type: 'boolean' },
if: { arg: 'clear', truthy: false },
},
text: {
control: { type: 'text' },
if: { arg: 'enableText', truthy: true },
},
...disableProps(['contentLeft', 'contentRight', 'transparent', 'size']),
},
};
Expand All @@ -34,6 +38,7 @@ export default meta;
type StoryProps = ComponentProps<typeof Badge> & {
enableContentLeft: boolean;
enableContentRight: boolean;
enableText: boolean;
};
type Story = StoryObj<StoryProps>;

Expand All @@ -54,13 +59,14 @@ export const Default: Story = {
},
enableContentRight: {
control: { type: 'boolean' },
if: { arg: 'enableContentLeft', truthy: false },
if: { arg: 'enableText', truthy: true },
},
},
args: {
text: 'Hello',
view: 'default',
size: 's',
enableText: true,
text: 'Hello',
enableContentLeft: false,
enableContentRight: false,
clear: false,
Expand Down
20 changes: 11 additions & 9 deletions packages/sdds-dfa/src/components/Badge/Badge.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export const config = {
l: css`
${badgeTokens.borderRadius}: 0.5rem;
${badgeTokens.height}: 1.75rem;
${badgeTokens.paddingRight}: 0.6875rem;
${badgeTokens.paddingLeft}: 0.6875rem;
${badgeTokens.padding}: 0 0.6875rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
Expand All @@ -94,8 +94,8 @@ export const config = {
m: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.5rem;
${badgeTokens.paddingRight}: 0.5625rem;
${badgeTokens.paddingLeft}: 0.5625rem;
${badgeTokens.padding}: 0 0.5625rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -113,8 +113,8 @@ export const config = {
s: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.25rem;
${badgeTokens.paddingRight}: 0.4375rem;
${badgeTokens.paddingLeft}: 0.4375rem;
${badgeTokens.padding}: 0 0.4375rem;
${badgeTokens.paddingIconOnly}: 0 0.25rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -132,8 +132,8 @@ export const config = {
xs: css`
${badgeTokens.borderRadius}: 0.25rem;
${badgeTokens.height}: 1rem;
${badgeTokens.paddingRight}: 0.25rem;
${badgeTokens.paddingLeft}: 0.25rem;
${badgeTokens.padding}: 0 0.25rem;
${badgeTokens.paddingIconOnly}: 0 0.188rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -158,7 +158,9 @@ export const config = {
true: css``,
},
clear: {
true: css``,
true: css`
${badgeTokens.backgroundClear}: var(--surface-clear);
`,
},
},
};
10 changes: 8 additions & 2 deletions packages/sdds-dfa/src/components/Badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const meta: Meta<typeof Badge> = {
control: { type: 'boolean' },
if: { arg: 'clear', truthy: false },
},
text: {
control: { type: 'text' },
if: { arg: 'enableText', truthy: true },
},
...disableProps(['contentLeft', 'contentRight']),
},
};
Expand All @@ -38,6 +42,7 @@ export default meta;
type StoryProps = ComponentProps<typeof Badge> & {
enableContentLeft: boolean;
enableContentRight: boolean;
enableText: boolean;
};
type Story = StoryObj<StoryProps>;

Expand All @@ -58,13 +63,14 @@ export const Default: Story = {
},
enableContentRight: {
control: { type: 'boolean' },
if: { arg: 'enableContentLeft', truthy: false },
if: { arg: 'enableText', truthy: true },
},
},
args: {
text: 'Hello',
view: 'default',
size: 'm',
enableText: true,
text: 'Hello',
enableContentLeft: false,
enableContentRight: false,
clear: false,
Expand Down
20 changes: 11 additions & 9 deletions packages/sdds-finportal/src/components/Badge/Badge.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export const config = {
l: css`
${badgeTokens.borderRadius}: 0.5rem;
${badgeTokens.height}: 1.75rem;
${badgeTokens.paddingRight}: 0.6875rem;
${badgeTokens.paddingLeft}: 0.6875rem;
${badgeTokens.padding}: 0 0.6875rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
Expand All @@ -94,8 +94,8 @@ export const config = {
m: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.5rem;
${badgeTokens.paddingRight}: 0.5625rem;
${badgeTokens.paddingLeft}: 0.5625rem;
${badgeTokens.padding}: 0 0.5625rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -113,8 +113,8 @@ export const config = {
s: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.25rem;
${badgeTokens.paddingRight}: 0.4375rem;
${badgeTokens.paddingLeft}: 0.4375rem;
${badgeTokens.padding}: 0 0.4375rem;
${badgeTokens.paddingIconOnly}: 0 0.25rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -132,8 +132,8 @@ export const config = {
xs: css`
${badgeTokens.borderRadius}: 0.25rem;
${badgeTokens.height}: 1rem;
${badgeTokens.paddingRight}: 0.25rem;
${badgeTokens.paddingLeft}: 0.25rem;
${badgeTokens.padding}: 0 0.25rem;
${badgeTokens.paddingIconOnly}: 0 0.188rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -158,7 +158,9 @@ export const config = {
true: css``,
},
clear: {
true: css``,
true: css`
${badgeTokens.backgroundClear}: var(--surface-clear);
`,
},
},
};
10 changes: 8 additions & 2 deletions packages/sdds-finportal/src/components/Badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const meta: Meta<typeof Badge> = {
control: { type: 'boolean' },
if: { arg: 'clear', truthy: false },
},
text: {
control: { type: 'text' },
if: { arg: 'enableText', truthy: true },
},
...disableProps(['contentLeft', 'contentRight']),
},
};
Expand All @@ -38,6 +42,7 @@ export default meta;
type StoryProps = ComponentProps<typeof Badge> & {
enableContentLeft: boolean;
enableContentRight: boolean;
enableText: boolean;
};
type Story = StoryObj<StoryProps>;

Expand All @@ -58,13 +63,14 @@ export const Default: Story = {
},
enableContentRight: {
control: { type: 'boolean' },
if: { arg: 'enableContentLeft', truthy: false },
if: { arg: 'enableText', truthy: true },
},
},
args: {
text: 'Hello',
view: 'default',
size: 'm',
enableText: true,
text: 'Hello',
enableContentLeft: false,
enableContentRight: false,
clear: false,
Expand Down
20 changes: 11 additions & 9 deletions packages/sdds-insol/src/components/Badge/Badge.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export const config = {
l: css`
${badgeTokens.borderRadius}: 0.5rem;
${badgeTokens.height}: 1.75rem;
${badgeTokens.paddingRight}: 0.6875rem;
${badgeTokens.paddingLeft}: 0.6875rem;
${badgeTokens.padding}: 0 0.6875rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
Expand All @@ -94,8 +94,8 @@ export const config = {
m: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.5rem;
${badgeTokens.paddingRight}: 0.5625rem;
${badgeTokens.paddingLeft}: 0.5625rem;
${badgeTokens.padding}: 0 0.5625rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -113,8 +113,8 @@ export const config = {
s: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.25rem;
${badgeTokens.paddingRight}: 0.4375rem;
${badgeTokens.paddingLeft}: 0.4375rem;
${badgeTokens.padding}: 0 0.4375rem;
${badgeTokens.paddingIconOnly}: 0 0.25rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -132,8 +132,8 @@ export const config = {
xs: css`
${badgeTokens.borderRadius}: 0.25rem;
${badgeTokens.height}: 1rem;
${badgeTokens.paddingRight}: 0.25rem;
${badgeTokens.paddingLeft}: 0.25rem;
${badgeTokens.padding}: 0 0.25rem;
${badgeTokens.paddingIconOnly}: 0 0.188rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -158,7 +158,9 @@ export const config = {
true: css``,
},
clear: {
true: css``,
true: css`
${badgeTokens.backgroundClear}: var(--surface-clear);
`,
},
},
};
10 changes: 8 additions & 2 deletions packages/sdds-insol/src/components/Badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const meta: Meta<typeof Badge> = {
control: { type: 'boolean' },
if: { arg: 'clear', truthy: false },
},
text: {
control: { type: 'text' },
if: { arg: 'enableText', truthy: true },
},
...disableProps(['contentLeft', 'contentRight']),
},
};
Expand All @@ -38,6 +42,7 @@ export default meta;
type StoryProps = ComponentProps<typeof Badge> & {
enableContentLeft: boolean;
enableContentRight: boolean;
enableText: boolean;
};
type Story = StoryObj<StoryProps>;

Expand All @@ -58,13 +63,14 @@ export const Default: Story = {
},
enableContentRight: {
control: { type: 'boolean' },
if: { arg: 'enableContentLeft', truthy: false },
if: { arg: 'enableText', truthy: true },
},
},
args: {
text: 'Hello',
view: 'default',
size: 'm',
enableText: true,
text: 'Hello',
enableContentLeft: false,
enableContentRight: false,
clear: false,
Expand Down
20 changes: 11 additions & 9 deletions packages/sdds-serv/src/components/Badge/Badge.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export const config = {
l: css`
${badgeTokens.borderRadius}: 0.5rem;
${badgeTokens.height}: 1.75rem;
${badgeTokens.paddingRight}: 0.6875rem;
${badgeTokens.paddingLeft}: 0.6875rem;
${badgeTokens.padding}: 0 0.6875rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
Expand All @@ -94,8 +94,8 @@ export const config = {
m: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.5rem;
${badgeTokens.paddingRight}: 0.5625rem;
${badgeTokens.paddingLeft}: 0.5625rem;
${badgeTokens.padding}: 0 0.5625rem;
${badgeTokens.paddingIconOnly}: 0 0.375rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
Expand All @@ -113,8 +113,8 @@ export const config = {
s: css`
${badgeTokens.borderRadius}: 0.375rem;
${badgeTokens.height}: 1.25rem;
${badgeTokens.paddingRight}: 0.4375rem;
${badgeTokens.paddingLeft}: 0.4375rem;
${badgeTokens.padding}: 0 0.4375rem;
${badgeTokens.paddingIconOnly}: 0 0.25rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -132,8 +132,8 @@ export const config = {
xs: css`
${badgeTokens.borderRadius}: 0.25rem;
${badgeTokens.height}: 1rem;
${badgeTokens.paddingRight}: 0.25rem;
${badgeTokens.paddingLeft}: 0.25rem;
${badgeTokens.padding}: 0 0.25rem;
${badgeTokens.paddingIconOnly}: 0 0.188rem;
${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
Expand All @@ -158,7 +158,9 @@ export const config = {
true: css``,
},
clear: {
true: css``,
true: css`
${badgeTokens.backgroundClear}: var(--surface-clear);
`,
},
},
};
Loading

0 comments on commit f7472a0

Please sign in to comment.