@salutejs/plasma-new-hope 0.171.0-canary.1459.11400476651.0 → 0.171.0-canary.1484.11400899769.0

package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx

@@ -5,7 +5,6 @@ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconCross } from '../../../../components/_Icon';
-import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
 
@@ -17,29 +16,7 @@ const onChipsChange = action('onChipsChange');
 
 const sizes = ['l', 'm', 's', 'xs'];
 const views = ['default', 'positive', 'warning', 'negative'];
-const hintViews = ['default', 'onDark', 'onLight'];
-const hintSizes = ['m', 's'];
-const hintTriggers = ['hover', 'click'];
 const labelPlacements = ['outer', 'inner'];
-const placements: Array<PopoverPlacement> = [
-    'top',
-    'top-start',
-    'top-end',
-
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-
-    'left',
-    'left-start',
-    'left-end',
-
-    'right',
-    'right-start',
-    'right-end',
-
-    'auto',
-];
 
 const meta: Meta<typeof TextField> = {
     title: 'plasma_b2c/TextField',
@@ -93,46 +70,6 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
-        hintText: {
-            control: { type: 'text' },
-        },
-        hintView: {
-            options: hintViews,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hintText', neq: '' },
-        },
-        hintSize: {
-            options: hintSizes,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hintText', neq: '' },
-        },
-        hintTrigger: {
-            options: hintTriggers,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'hintText', neq: '' },
-        },
-        hintPlacement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hintText', neq: '' },
-            mappers: placements,
-        },
-        hintHasArrow: {
-            control: { type: 'boolean' },
-            if: { arg: 'hintText', neq: '' },
-        },
-        hintWidth: {
-            control: { type: 'text' },
-            if: { arg: 'hintText', neq: '' },
-        },
     },
 };
 
@@ -208,7 +145,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
-        titleCaption: 'Подпись к полю',
         textBefore: '',
         textAfter: '',
         placeholder: 'Заполните поле',
@@ -219,16 +155,9 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         optional: false,
         required: false,
-        requiredPlacement: 'right',
         clear: false,
         hasDivider: false,
-        hintText: 'Текст подсказки',
-        hintTrigger: 'hover',
-        hintView: 'default',
-        hintSize: 'm',
-        hintPlacement: 'auto',
-        hintWidth: '10rem',
-        hintHasArrow: true,
+        requiredPlacement: 'right',
     },
     render: (args) => <StoryDemo {...args} />,
 };
@@ -275,7 +204,6 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeChips={onChipsChange}
-            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };

package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};