Skip to content

Commit

Permalink
feat(sdds-*): add Header sizes to configs to Accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Jan 30, 2025
1 parent d05b1b7 commit c0abe33
Show file tree
Hide file tree
Showing 8 changed files with 540 additions and 68 deletions.
84 changes: 83 additions & 1 deletion packages/sdds-dfa/src/components/Accordion/Accordion.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const config = {
${accordionTokens.accordionItemFocus}: var(--surface-accent);
${accordionTokens.accordionItemBorderRadius}: 0rem !important;
${accordionTokens.accordionBackground}: var(--surface-clear);
${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary);
${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary);
${accordionTokens.accordionItemPaddingHorizontalLeft}: 0;
`,
},
Expand Down Expand Up @@ -119,6 +119,88 @@ export const config = {
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height);
`,
h2: css`
${accordionTokens.accordionItemPaddingVertical}: 1rem;
${accordionTokens.accordionItemPaddingHorizontal}: 1.25rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.75rem;
${accordionTokens.accordionItemIconSize}: 1.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
`,
h3: css`
${accordionTokens.accordionItemPaddingVertical}: 0.875rem;
${accordionTokens.accordionItemPaddingHorizontal}: 1.125rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.75rem;
${accordionTokens.accordionItemIconSize}: 1.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
`,
h4: css`
${accordionTokens.accordionItemPaddingVertical}: 0.688rem;
${accordionTokens.accordionItemPaddingHorizontal}: 0.875rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.625rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
`,
h5: css`
${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
`,
},
},
};
68 changes: 52 additions & 16 deletions packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@ type AccordionItemCustomProps = {

type AccordionProps = ComponentProps<typeof Accordion> & AccordionItemCustomProps;

const views = ['default', 'clear'] as const;
const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const;
const stretching = ['filled', 'fixed'] as const;
const types = ['arrow', 'sign', 'clear'] as const;
const pins = [
'square-square',
'square-clear',
'clear-square',
'clear-clear',
'clear-circle',
'circle-clear',
'circle-circle',
] as const;

const meta: Meta<AccordionProps> = {
title: 'Data Display/Accordion',
decorators: [InSpacingDecorator],
Expand All @@ -42,39 +56,31 @@ const meta: Meta<AccordionProps> = {
argTypes: {
...disableProps(['text']),
view: {
options: ['default', 'clear'],
options: views,
control: {
type: 'select',
},
},
size: {
options: ['xs', 's', 'm', 'l'],
options: sizes,
control: {
type: 'select',
},
},
stretching: {
options: ['filled', 'fixed'],
options: stretching,
control: {
type: 'select',
},
},
type: {
options: ['arrow', 'sign', 'clear'],
options: types,
control: {
type: 'select',
},
},
pin: {
options: [
'square-square',
'square-clear',
'clear-square',
'clear-clear',
'clear-circle',
'circle-clear',
'circle-circle',
],
options: pins,
control: {
type: 'select',
},
Expand Down Expand Up @@ -105,6 +111,24 @@ export const Default: StoryObj<AccordionProps> = {
};

const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
const getSizeForIconButton = (size) => {
switch (size) {
case 'l':
case 'h2':
case 'h3':
return 'l';
case 'm':
return 'm';
case 's':
case 'h4':
return 's';
case 'xs':
case 'h5':
return 'xs';
default:
return 'm';
}
};

const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
const args = { ...props, text: undefined };
Expand All @@ -116,7 +140,11 @@ const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
<Accordion {...args}>
<AccordionItem
contentRight={
<IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
<IconButton
view="secondary"
size={getSizeForIconButton(args.size)}
onClick={() => setActiveFirst(!activeFirst)}
>
<IconPlus size={getSizeForIcon(args.size)} />
</IconButton>
}
Expand All @@ -130,7 +158,11 @@ const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
</AccordionItem>
<AccordionItem
contentRight={
<IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
<IconButton
view="secondary"
size={getSizeForIconButton(args.size)}
onClick={() => setActiveSecond(!activeSecond)}
>
<IconPlus size={getSizeForIcon(args.size)} />
</IconButton>
}
Expand All @@ -144,7 +176,11 @@ const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
</AccordionItem>
<AccordionItem
contentRight={
<IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
<IconButton
view="secondary"
size={getSizeForIconButton(args.size)}
onClick={() => setActiveThree(!activeThree)}
>
<IconPlus size={getSizeForIcon(args.size)} />
</IconButton>
}
Expand Down
84 changes: 83 additions & 1 deletion packages/sdds-finportal/src/components/Accordion/Accordion.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const config = {
${accordionTokens.accordionItemFocus}: var(--surface-accent);
${accordionTokens.accordionItemBorderRadius}: 0rem !important;
${accordionTokens.accordionBackground}: var(--surface-clear);
${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary);
${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary);
${accordionTokens.accordionItemPaddingHorizontalLeft}: 0;
`,
},
Expand Down Expand Up @@ -119,6 +119,88 @@ export const config = {
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height);
`,
h2: css`
${accordionTokens.accordionItemPaddingVertical}: 1rem;
${accordionTokens.accordionItemPaddingHorizontal}: 1.25rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.75rem;
${accordionTokens.accordionItemIconSize}: 1.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
`,
h3: css`
${accordionTokens.accordionItemPaddingVertical}: 0.875rem;
${accordionTokens.accordionItemPaddingHorizontal}: 1.125rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.75rem;
${accordionTokens.accordionItemIconSize}: 1.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
`,
h4: css`
${accordionTokens.accordionItemPaddingVertical}: 0.688rem;
${accordionTokens.accordionItemPaddingHorizontal}: 0.875rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.625rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
`,
h5: css`
${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.5rem;
${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height);
${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
`,
},
},
};
Loading

0 comments on commit c0abe33

Please sign in to comment.