From c0abe333a62f8788c427d0562106ea5c1b2b4cb2 Mon Sep 17 00:00:00 2001 From: TitanKuzmich Date: Fri, 24 Jan 2025 15:42:39 +0300 Subject: [PATCH] feat(sdds-*): add Header sizes to configs to Accordion --- .../components/Accordion/Accordion.config.ts | 84 ++++++++++++++++++- .../Accordion/Accordion.stories.tsx | 68 +++++++++++---- .../components/Accordion/Accordion.config.ts | 84 ++++++++++++++++++- .../Accordion/Accordion.stories.tsx | 68 +++++++++++---- .../components/Accordion/Accordion.config.ts | 84 ++++++++++++++++++- .../Accordion/Accordion.stories.tsx | 68 +++++++++++---- .../components/Accordion/Accordion.config.ts | 84 ++++++++++++++++++- .../Accordion/Accordion.stories.tsx | 68 +++++++++++---- 8 files changed, 540 insertions(+), 68 deletions(-) diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts index 51fd77265a..127e905424 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts @@ -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; `, }, @@ -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); + `, }, }, }; diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx index 030b1736d6..c7544193ab 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx @@ -23,6 +23,20 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & 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 = { title: 'Data Display/Accordion', decorators: [InSpacingDecorator], @@ -42,39 +56,31 @@ const meta: Meta = { 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', }, @@ -105,6 +111,24 @@ export const Default: StoryObj = { }; 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) => { const args = { ...props, text: undefined }; @@ -116,7 +140,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveFirst(!activeFirst)}> + setActiveFirst(!activeFirst)} + > } @@ -130,7 +158,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveSecond(!activeSecond)}> + setActiveSecond(!activeSecond)} + > } @@ -144,7 +176,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveThree(!activeThree)}> + setActiveThree(!activeThree)} + > } diff --git a/packages/sdds-finportal/src/components/Accordion/Accordion.config.ts b/packages/sdds-finportal/src/components/Accordion/Accordion.config.ts index 51fd77265a..127e905424 100644 --- a/packages/sdds-finportal/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-finportal/src/components/Accordion/Accordion.config.ts @@ -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; `, }, @@ -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); + `, }, }, }; diff --git a/packages/sdds-finportal/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-finportal/src/components/Accordion/Accordion.stories.tsx index 030b1736d6..c7544193ab 100644 --- a/packages/sdds-finportal/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-finportal/src/components/Accordion/Accordion.stories.tsx @@ -23,6 +23,20 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & 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 = { title: 'Data Display/Accordion', decorators: [InSpacingDecorator], @@ -42,39 +56,31 @@ const meta: Meta = { 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', }, @@ -105,6 +111,24 @@ export const Default: StoryObj = { }; 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) => { const args = { ...props, text: undefined }; @@ -116,7 +140,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveFirst(!activeFirst)}> + setActiveFirst(!activeFirst)} + > } @@ -130,7 +158,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveSecond(!activeSecond)}> + setActiveSecond(!activeSecond)} + > } @@ -144,7 +176,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveThree(!activeThree)}> + setActiveThree(!activeThree)} + > } diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts index 51fd77265a..127e905424 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts @@ -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; `, }, @@ -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); + `, }, }, }; diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx index 030b1736d6..c7544193ab 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx @@ -23,6 +23,20 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & 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 = { title: 'Data Display/Accordion', decorators: [InSpacingDecorator], @@ -42,39 +56,31 @@ const meta: Meta = { 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', }, @@ -105,6 +111,24 @@ export const Default: StoryObj = { }; 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) => { const args = { ...props, text: undefined }; @@ -116,7 +140,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveFirst(!activeFirst)}> + setActiveFirst(!activeFirst)} + > } @@ -130,7 +158,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveSecond(!activeSecond)}> + setActiveSecond(!activeSecond)} + > } @@ -144,7 +176,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveThree(!activeThree)}> + setActiveThree(!activeThree)} + > } diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts index 51fd77265a..127e905424 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts @@ -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; `, }, @@ -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); + `, }, }, }; diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx index 030b1736d6..c7544193ab 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx @@ -23,6 +23,20 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & 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 = { title: 'Data Display/Accordion', decorators: [InSpacingDecorator], @@ -42,39 +56,31 @@ const meta: Meta = { 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', }, @@ -105,6 +111,24 @@ export const Default: StoryObj = { }; 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) => { const args = { ...props, text: undefined }; @@ -116,7 +140,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveFirst(!activeFirst)}> + setActiveFirst(!activeFirst)} + > } @@ -130,7 +158,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveSecond(!activeSecond)}> + setActiveSecond(!activeSecond)} + > } @@ -144,7 +176,11 @@ const ControlledAccordion = (props: ComponentProps) => { setActiveThree(!activeThree)}> + setActiveThree(!activeThree)} + > }