plasma-*: Add accordion

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -6,6 +6,8 @@
 
 /// <reference types="react" />
 
+import { AccordionItem } from '@salutejs/plasma-new-hope/styled-components';
+import { AccordionProps } from '@salutejs/plasma-new-hope/styled-components';
 import { addFocus } from '@salutejs/plasma-core';
 import { addNotification } from '@salutejs/plasma-new-hope/styled-components';
 import { AlignProp } from '@salutejs/plasma-new-hope/types/components/Cell/Cell.types';
@@ -279,6 +281,38 @@ import { WithAutoFocusProps } from '@salutejs/plasma-core';
 import { withSkeleton } from '@salutejs/plasma-new-hope/styled-components';
 import { WithSkeletonProps } from '@salutejs/plasma-new-hope/styled-components';
 
+// @public
+export const Accordion: FunctionComponent<PropsType<    {
+view: {
+default: string;
+clear: string;
+};
+size: {
+l: string;
+m: string;
+s: string;
+xs: string;
+};
+stretching: {
+filled: string;
+fixed: string;
+};
+}> & {
+view: string;
+size?: string | undefined;
+singleActive?: boolean | undefined;
+defaultActiveEventKey?: number[] | undefined;
+disabled?: boolean | undefined;
+stretching?: "fixed" | "filled" | undefined;
+onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
+children?: ReactNode;
+className?: string | undefined;
+} & RefAttributes<HTMLDivElement>>;
+
+export { AccordionItem }
+
+export { AccordionProps }
+
 export { addFocus }
 
 export { addNotification }
@@ -825,11 +859,11 @@ l: string;
 view: {
 default: string;
 };
-}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type" | "target" | "size" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
+}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value" | "type" | "target" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
 valueType?: "single" | undefined;
 value?: ComboboxPrimitiveValue | undefined;
 onChangeValue?: ((value?: ComboboxPrimitiveValue | undefined) => void) | undefined;
-} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type" | "target" | "size" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
+} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value" | "type" | "target" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
 valueType: "multiple";
 value?: ComboboxPrimitiveValue[] | undefined;
 onChangeValue?: ((value?: ComboboxPrimitiveValue[] | undefined) => void) | undefined;

packages/plasma-b2c/src/components/Accordion/Accordion.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-web/src/components/Accordion/Accordion.component-test.tsx

packages/plasma-b2c/src/components/Accordion/Accordion.config.ts

@@ -0,0 +1,121 @@
+import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'm',
+    },
+    variations: {
+        view: {
+            default: css`
+                ${accordionTokens.accordionGap}: 0.125rem;
+                ${accordionTokens.accordionWidth}: 20rem;
+                ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal});
+                ${accordionTokens.accordionItemBackground}: var(--surface-solid-card);
+                ${accordionTokens.accordionItemTitleColor}: var(--text-primary);
+                ${accordionTokens.accordionItemTextColor}: var(--text-primary);
+                ${accordionTokens.accordionItemFocus}: var(--surface-accent);
+                ${accordionTokens.accordionBackground}: var(--surface-clear);
+                ${accordionTokens.accordionItemBorderBottom}: 0;
+            `,
+            clear: css`
+                ${accordionTokens.accordionGap}: 0.125rem;
+                ${accordionTokens.accordionWidth}: 20rem;
+                ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem;
+                ${accordionTokens.accordionItemBackground}: var(--surface-clear);
+                ${accordionTokens.accordionItemTitleColor}: var(--text-primary);
+                ${accordionTokens.accordionItemTextColor}: var(--text-primary);
+                ${accordionTokens.accordionItemFocus}: var(--surface-accent);
+                ${accordionTokens.accordionItemBorderRadius}: 0rem !important;
+                ${accordionTokens.accordionBackground}: var(--surface-clear);
+                ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary);
+            `,
+        },
+        size: {
+            l: css`
+                ${accordionTokens.accordionItemPaddingVertical}: 1.0625rem;
+                ${accordionTokens.accordionItemPaddingHorizontal}: 1.25rem;
+                ${accordionTokens.accordionItemGap}: 0.5rem;
+                ${accordionTokens.accordionItemBorderRadius}: 0.875rem;
+
+                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size);
+                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-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);
+            `,
+            m: css`
+                ${accordionTokens.accordionItemPaddingVertical}: 0.875rem;
+                ${accordionTokens.accordionItemPaddingHorizontal}: 1.125rem;
+                ${accordionTokens.accordionItemGap}: 0.375rem;
+                ${accordionTokens.accordionItemBorderRadius}: 0.75rem;
+
+                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size);
+                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
+                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-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);
+            `,
+            s: css`
+                ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem;
+                ${accordionTokens.accordionItemPaddingHorizontal}: 0.875rem;
+                ${accordionTokens.accordionItemGap}: 0.375rem;
+                ${accordionTokens.accordionItemBorderRadius}: 0.625rem;
+
+                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size);
+                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size);
+                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height);
+            `,
+            xs: css`
+                ${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
+                ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem;
+                ${accordionTokens.accordionItemGap}: 0.25rem;
+                ${accordionTokens.accordionItemBorderRadius}: 0.5rem;
+
+                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
+                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+            `,
+        },
+        stretching: {
+            filled: css``,
+            fixed: css``,
+        },
+    },
+};

packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Accordion, AccordionItem } from '.';
+
+const meta: Meta<typeof Accordion> = {
+    title: 'Content/Accordion',
+    component: Accordion,
+    args: {
+        singleActive: false,
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+        type: 'arrow',
+        title: 'Как оплатить заправку бонусами СберСпасибо?',
+        body:
+            'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива',
+    },
+    argTypes: {
+        ...disableProps(['text']),
+        stretching: {
+            options: ['filled', 'fixed'],
+            control: {
+                type: 'select',
+            },
+        },
+        type: {
+            options: ['arrow', 'sign', 'clear'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<ComponentProps<typeof Accordion>> = {
+    render: (props: ComponentProps<typeof Accordion>) => {
+        const args = { ...props, text: undefined };
+
+        return (
+            <Accordion {...args}>
+                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
+                    {args.body}
+                </AccordionItem>
+                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
+                    {args.body}
+                </AccordionItem>
+                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
+                    {args.body}
+                </AccordionItem>
+            </Accordion>
+        );
+    },
+};

packages/plasma-b2c/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,11 @@
+import { accordionConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Accordion.config';
+
+const mergedConfig = mergeConfig(accordionConfig, config);
+const AccordionComponent = component(mergedConfig);
+
+/**
+ * Accordion
+ */
+export const Accordion = AccordionComponent;

packages/plasma-b2c/src/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+export { AccordionItem } from '@salutejs/plasma-new-hope/styled-components';
+export { Accordion } from './Accordion';
+
+export type { AccordionProps } from '@salutejs/plasma-new-hope/styled-components';

packages/plasma-b2c/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/Accordion';
 export * from './components/AudioPlayer';
 export * from './components/Badge';
 export * from './components/Button';

packages/plasma-new-hope/src/components/Accordion/Accordion.styles.ts

@@ -0,0 +1,19 @@
+import { css } from '@linaria/core';
+
+import { classes, tokens } from './Accordion.tokens';
+
+export const base = css`
+    display: flex;
+    flex-direction: column;
+    gap: var(${tokens.accordionGap});
+    align-items: stretch;
+    height: auto;
+    background: var(${tokens.accordionBackground});
+
+    &.${classes.fixedStretching} {
+        width: var(${tokens.accordionWidth});
+    }
+    &.${classes.filledStretching} {
+        width: 100%;
+    }
+`;

packages/plasma-new-hope/src/components/Accordion/Accordion.tokens.ts

@@ -0,0 +1,41 @@
+export const classes = {
+    filledStretching: 'accordion-stretching-filled',
+    fixedStretching: 'accordion-stretching-fixed',
+    accordionRoot: 'accordion-root',
+    accordionItem: 'accordion-item',
+    clearAccordionItem: 'clear-accordion-item',
+    accordionItemShowBody: 'accordion-item-show-body',
+    accordionPlusAnimationElement: 'accordion-plus-animation-element',
+    accordionDisabled: 'accordion-disabled',
+};
+
+export const tokens = {
+    accordionGap: '--plasma-accordion-gap',
+    accordionWidth: '--plasma-accordion-width',
+    accordionBackground: '--plasma-accordion-background',
+
+    accordionItemBackground: '--plasma-accordion-item-background',
+    accordionItemBorderRadius: '--plasma-accordion-item-border-radius',
+    accordionItemPadding: '--plasma-accordion-item-padding',
+    accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',
+    accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',
+    accordionItemGap: '--plasma-accordion-item-gap',
+    accordionItemFocus: '--plasma-accordion-item-focus',
+    accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
+
+    accordionItemTitleColor: '--plasma-accordion-item-title-color',
+    accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
+    accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
+    accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',
+    accordionItemTitleFontWeight: '--plasma-accordion-item-title-font-weight',
+    accordionItemTitleLetterSpacing: '--plasma-accordion-item-title-letter-spacing',
+    accordionItemTitleLineHeight: '--plasma-accordion-item-title-line-height',
+
+    accordionItemTextColor: '--plasma-accordion-item-text-color',
+    accordionItemTextFontFamily: '--plasma-accordion-item-text-font-family',
+    accordionItemTextFontSize: '--plasma-accordion-item-text-font-size',
+    accordionItemTextFontStyle: '--plasma-accordion-item-text-font-style',
+    accordionItemTextFontWeight: '--plasma-accordion-item-text-font-weight',
+    accordionItemTextLetterSpacing: '--plasma-accordion-item-text-letter-spacing',
+    accordionItemTextLineHeight: '--plasma-accordion-item-text-line-height',
+};