feat(new-hope): Add disabled, change function and more props

salute-developers · Jun 17, 2024 · 5a7ef14 · 5a7ef14
1 parent 4d4b98f
commit 5a7ef14
Show file tree

Hide file tree

Showing 22 changed files with 446 additions and 231 deletions.
diff --git a/...s/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png b/...s/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png
diff --git a/...s/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png b/...s/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -300,8 +300,11 @@ fixed: string;
 }> & {
 view: string;
 size?: string | undefined;
-once?: boolean | 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>>;

diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx
@@ -9,34 +9,17 @@ const meta: Meta<typeof Accordion> = {
     title: 'Content/Accordion',
     component: Accordion,
     args: {
-        once: true,
+        singleActive: false,
         view: 'default',
         size: 'm',
         stretching: 'filled',
-        pin: 'square-square',
         type: 'arrow',
         title: 'Как оплатить заправку бонусами СберСпасибо?',
         body:
             'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива',
     },
     argTypes: {
         ...disableProps(['text']),
-        pin: {
-            options: [
-                'square-square',
-                'square-clear',
-                'clear-square',
-                'clear-clear',
-                'clear-circle',
-                'circle-clear',
-                'circle-circle',
-                '',
-            ],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-        },
         stretching: {
             options: ['filled', 'fixed'],
             control: {
@@ -60,9 +43,15 @@ export const Default: StoryObj<ComponentProps<typeof Accordion>> = {
 
         return (
             <Accordion {...args}>
-                <AccordionItem type={args.type} pin={args.pin} title={args.title} body={args.body} />
-                <AccordionItem type={args.type} pin={args.pin} title={args.title} body={args.body} />
-                <AccordionItem type={args.type} pin={args.pin} title={args.title} body={args.body} />
+                <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>
         );
     },

diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.tsx
@@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(accordionConfig, config);
 const AccordionComponent = component(mergedConfig);
 
 /**
- * Cell
+ * Accordion
  */
 export const Accordion = AccordionComponent;
diff --git a/packages/plasma-new-hope/src/components/Accordion/Accordion.styles.ts b/packages/plasma-new-hope/src/components/Accordion/Accordion.styles.ts
@@ -10,10 +10,10 @@ export const base = css`
     height: auto;
     background: var(${tokens.accordionBackground});
 
-    &&.${classes.fixedStretching} {
+    &.${classes.fixedStretching} {
         width: var(${tokens.accordionWidth});
     }
-    &&.${classes.filledStretching} {
+    &.${classes.filledStretching} {
         width: 100%;
     }
 `;
diff --git a/packages/plasma-new-hope/src/components/Accordion/Accordion.tokens.ts b/packages/plasma-new-hope/src/components/Accordion/Accordion.tokens.ts
@@ -6,6 +6,7 @@ export const classes = {
     clearAccordionItem: 'clear-accordion-item',
     accordionItemShowBody: 'accordion-item-show-body',
     accordionPlusAnimationElement: 'accordion-plus-animation-element',
+    accordionDisabled: 'accordion-disabled',
 };
 
 export const tokens = {

diff --git a/packages/plasma-new-hope/src/components/Accordion/Accordion.tsx b/packages/plasma-new-hope/src/components/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
-import React, { Children, forwardRef, useMemo, useState } from 'react';
+import React, { Children, forwardRef, useState } from 'react';
 
-import { RootProps } from '../../engines';
+import { RootPropsOmitOnChange } from '../../engines';
 import { cx } from '../../utils';
 
 import type { AccordionProps } from './Accordion.types';
@@ -10,33 +10,53 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { getChildren } from './utils';
 
-export const accordionRoot = (Root: RootProps<HTMLDivElement, AccordionProps>) =>
+export const accordionRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, AccordionProps>) =>
     forwardRef<HTMLDivElement, AccordionProps>(
-        ({ size, view, stretching = 'filled', children, className, once }, outerRootRef) => {
+        (
+            {
+                size,
+                view,
+                stretching = 'filled',
+                defaultActiveEventKey = [],
+                children,
+                disabled,
+                className,
+                singleActive,
+                onChange,
+            },
+            outerRootRef,
+        ) => {
             const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];
 
-            const [activeIndex, setActiveIndex] = useState<number | undefined>();
+            const [activeIndex, setActiveIndex] = useState<number[]>(defaultActiveEventKey);
 
-            const updateValue = (index?: number, value?: boolean) => {
-                value && setActiveIndex(index);
+            const updateValue = (index: number, value?: boolean) => {
+                if (onChange) {
+                    onChange(index, value);
+                }
+                if (singleActive) {
+                    if (value) {
+                        setActiveIndex([index]);
+                    } else {
+                        setActiveIndex([]);
+                    }
+                } else if (value) {
+                    setActiveIndex([index, ...activeIndex]);
+                } else {
+                    const updatedActiveIndex = activeIndex.filter((i) => i !== index);
+                    setActiveIndex(updatedActiveIndex);
+                }
             };
 
-            const childrenArray = useMemo(() => Children.toArray(children), [children]) as React.ReactElement[];
-
-            const childrenMemo = useMemo(() => getChildren(childrenArray, activeIndex, updateValue), [
-                activeIndex,
-                updateValue,
-                childrenArray,
-            ]);
-
+            const childrenArray = Children.toArray(children) as React.ReactElement[];
             return (
                 <Root
                     ref={outerRootRef}
                     size={size}
                     view={view}
                     className={cx(stretchingClass, classes.accordionRoot, className)}
                 >
-                    {once ? childrenMemo : children}
+                    {getChildren(childrenArray, activeIndex, disabled, updateValue)}
                 </Root>
             );
         },

diff --git a/packages/plasma-new-hope/src/components/Accordion/Accordion.types.ts b/packages/plasma-new-hope/src/components/Accordion/Accordion.types.ts
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 type CustomAccordionProps = {
     /**
-     * Тип аккордиона
+     * Тип аккордеона
      */
     view: string;
 
@@ -12,19 +12,30 @@ type CustomAccordionProps = {
     size?: string;
 
     /**
-     * Возможность раскрытия всех элементов или только одного
+     * Возможность раскрытия всех элементов или только одногo
      */
-    once?: boolean;
+    singleActive?: boolean;
+
+    /**
+     * Индекс элемента, который должен быть изначально раскрыт
+     */
+    defaultActiveEventKey?: number[];
+
+    /**
+     * Блокировка всех элементов
+     */
+    disabled?: boolean;
 
     /**
      * Ширина
-     * @description
-     * Может принимать два значения:
-     * fixed - кнопка фиксированной ширины;
-     * filled - кнопка занимает всю доступную ширину
      */
     stretching?: 'fixed' | 'filled';
 
+    /**
+     * Коллбэк при открытии или закрытии элемента аккордеона
+     */
+    onChange?: (index?: number, value?: boolean) => void;
+
     children?: ReactNode;
     className?: string;
 };

diff --git a/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.styles.ts b/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.styles.ts
@@ -7,29 +7,39 @@ import { addFocus } from '../../../../mixins';
 export const StyledAccordionItem = styled.div`
     background: var(${tokens.accordionItemBackground});
     border-bottom: var(${tokens.accordionItemBorderBottom});
-    &:focus {
-        outline: none;
-    }
-
-    ${addFocus({
-        outlineOffset: '0.125rem',
-        outlineSize: '0.125rem',
-        outlineRadius: '0',
-        outlineColor: `var(${tokens.accordionItemFocus})`,
-    })}
 
     &:last-child {
         border-bottom: none;
     }
 `;
 
-export const StyledAccordionHeader = styled.div`
+export const StyledAccordionHeader = styled.button`
+    width: 100%;
+    border: none;
     padding: var(${tokens.accordionItemPadding});
     display: flex;
     gap: var(${tokens.accordionItemGap});
     justify-content: space-between;
     align-items: center;
+    background: none;
+    box-sizing: border-box;
     cursor: pointer;
+
+    &.${classes.accordionDisabled} {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    ${addFocus({
+        outlineOffset: '0.125rem',
+        outlineSize: '0.125rem',
+        outlineRadius: '0',
+        outlineColor: `var(${tokens.accordionItemFocus})`,
+    })}
 `;
 
 export const StyledAccordionHeaderLeft = styled.div`
@@ -43,7 +53,7 @@ export const StyledAccordionContentRight = styled.div`
     transition: 0.2s;
     transform: rotate(90deg);
 
-    &&.${classes.accordionItemShowBody} {
+    &.${classes.accordionItemShowBody} {
         transition: 0.2s;
         transform: rotate(0deg);
     }
@@ -54,7 +64,7 @@ export const StyledAccordionContentLeft = styled.div`
     display: flex;
     align-items: center;
 
-    &&.${classes.accordionItemShowBody} {
+    &.${classes.accordionItemShowBody} {
         transition: 0.2s;
         transform: rotate(180deg);
     }
@@ -76,7 +86,7 @@ export const StyledAccordionBodyAnimate = styled.div`
     transition: grid-template-rows 0.2s ease-out;
     overflow: hidden;
 
-    &&.${classes.accordionItemShowBody} {
+    &.${classes.accordionItemShowBody} {
         grid-template-rows: 1fr;
         padding-bottom: var(${tokens.accordionItemPaddingVertical});
 
@@ -116,12 +126,12 @@ export const StyledMinus = styled(IconMinus)`
     top: 0;
     left: 0;
 
-    &&.${classes.accordionPlusAnimationElement} {
+    &.${classes.accordionPlusAnimationElement} {
         transition: 0.2s;
         transform: rotate(90deg);
     }
 
-    &&.${classes.accordionItemShowBody} {
+    &.${classes.accordionItemShowBody} {
         transition: 0.2s;
         transform: rotate(0deg);
     }