@salutejs/sdds-cs 0.319.0-canary.2021.15821149221.0 → 0.319.0-canary.2021.15824070198.0

package/emotion/cjs/components/Typography/Typography.stories.tsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import {
-    DsplL,
-    DsplM,
-    DsplS,
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    BodyL,
-    BodyM,
-    BodyS,
-    BodyXS,
-    BodyXXS,
-    TextL,
-    TextM,
-    TextS,
-    TextXS,
-} from '.';
-
-const meta: Meta = {
-    title: 'Data Display/Typography',
-    component: DsplL,
-    argTypes: {
-        ...disableProps(['size', 'bold', 'medium', 'as', 'forwardedAs', 'isNumeric']),
-        color: {
-            control: {
-                type: 'color',
-            },
-        },
-    },
-    args: {
-        noWrap: false,
-        breakWord: true,
-    },
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Dspl: Story = {
-    render: (props) => (
-        <>
-            <DsplL bold={false} {...props}>
-                DsplL
-            </DsplL>
-            <DsplL {...props}>DsplL Bold</DsplL>
-            <DsplL medium {...props}>
-                DsplL Medium
-            </DsplL>
-            <DsplL bold={false} isNumeric {...props}>
-                1234567890
-            </DsplL>
-            <DsplM bold={false} {...props}>
-                DsplM
-            </DsplM>
-            <DsplM {...props}>DsplM Bold</DsplM>
-            <DsplM medium {...props}>
-                DsplM Medium
-            </DsplM>
-            <DsplM bold={false} isNumeric {...props}>
-                1234567890
-            </DsplM>
-            <DsplS bold={false} {...props}>
-                DsplS
-            </DsplS>
-            <DsplS {...props}>DsplS Bold</DsplS>
-            <DsplS medium {...props}>
-                DsplS Medium
-            </DsplS>
-            <DsplS bold={false} isNumeric {...props}>
-                1234567890
-            </DsplS>
-        </>
-    ),
-};
-
-export const H: Story = {
-    render: (props) => (
-        <>
-            <H1 bold={false} {...props}>
-                H1
-            </H1>
-            <H1 {...props}>H1 Bold</H1>
-            <H1 medium {...props}>
-                H1 Medium
-            </H1>
-            <H1 bold={false} isNumeric {...props}>
-                1234567890
-            </H1>
-            <H2 bold={false} {...props}>
-                H2
-            </H2>
-            <H2 {...props}>H2 Bold</H2>
-            <H2 medium {...props}>
-                H2 Medium
-            </H2>
-            <H2 bold={false} isNumeric {...props}>
-                1234567890
-            </H2>
-            <H3 bold={false} {...props}>
-                H3
-            </H3>
-            <H3 {...props}>H3 Bold</H3>
-            <H3 medium {...props}>
-                H3 Medium
-            </H3>
-            <H3 bold={false} isNumeric {...props}>
-                1234567890
-            </H3>
-            <H4 bold={false} {...props}>
-                H4
-            </H4>
-            <H4 {...props}>H4 Bold</H4>
-            <H4 medium {...props}>
-                H4 Medium
-            </H4>
-            <H4 bold={false} isNumeric {...props}>
-                1234567890
-            </H4>
-            <H5 bold={false} {...props}>
-                H5
-            </H5>
-            <H5 {...props}>H5 Bold</H5>
-            <H5 medium {...props}>
-                H5 Medium
-            </H5>
-            <H5 bold={false} isNumeric {...props}>
-                1234567890
-            </H5>
-        </>
-    ),
-};
-
-export const Body: Story = {
-    render: (props) => (
-        <>
-            <BodyL {...props}>BodyL</BodyL>
-            <BodyL bold {...props}>
-                BodyL Bold
-            </BodyL>
-            <BodyL medium {...props}>
-                BodyL Medium
-            </BodyL>
-            <BodyL isNumeric {...props}>
-                1234567890
-            </BodyL>
-            <BodyM {...props}>BodyM</BodyM>
-            <BodyM bold {...props}>
-                BodyM Bold
-            </BodyM>
-            <BodyM medium {...props}>
-                BodyM Medium
-            </BodyM>
-            <BodyM isNumeric {...props}>
-                1234567890
-            </BodyM>
-            <BodyS {...props}>BodyS</BodyS>
-            <BodyS bold {...props}>
-                BodyS Bold
-            </BodyS>
-            <BodyS medium {...props}>
-                BodyS Medium
-            </BodyS>
-            <BodyS isNumeric {...props}>
-                1234567890
-            </BodyS>
-            <BodyXS {...props}>BodyXS</BodyXS>
-            <BodyXS bold {...props}>
-                BodyXS Bold
-            </BodyXS>
-            <BodyXS medium {...props}>
-                BodyXS Medium
-            </BodyXS>
-            <BodyXS isNumeric {...props}>
-                1234567890
-            </BodyXS>
-            <BodyXXS {...props}>BodyXXS</BodyXXS>
-            <BodyXXS bold {...props}>
-                BodyXXS Bold
-            </BodyXXS>
-            <BodyXXS medium {...props}>
-                BodyXXS Medium
-            </BodyXXS>
-            <BodyXXS isNumeric {...props}>
-                1234567890
-            </BodyXXS>
-        </>
-    ),
-};
-
-export const Text: Story = {
-    render: (props) => (
-        <>
-            <TextL {...props}>TextL</TextL>
-            <TextL bold {...props}>
-                TextL Bold
-            </TextL>
-            <TextL medium {...props}>
-                TextL Medium
-            </TextL>
-            <TextL isNumeric {...props}>
-                1234567890
-            </TextL>
-            <TextM {...props}>TextM</TextM>
-            <TextM bold {...props}>
-                TextM Bold
-            </TextM>
-            <TextM medium {...props}>
-                TextM Medium
-            </TextM>
-            <TextM isNumeric {...props}>
-                1234567890
-            </TextM>
-            <TextS {...props}>TextS</TextS>
-            <TextS bold {...props}>
-                TextS Bold
-            </TextS>
-            <TextS medium {...props}>
-                TextS Medium
-            </TextS>
-            <TextS isNumeric {...props}>
-                1234567890
-            </TextS>
-            <TextXS {...props}>TextXS</TextXS>
-            <TextXS bold {...props}>
-                TextXS Bold
-            </TextXS>
-            <TextXS medium {...props}>
-                TextXS Medium
-            </TextXS>
-            <TextXS isNumeric {...props}>
-                1234567890
-            </TextXS>
-        </>
-    ),
-};

package/emotion/es/components/Accordion/Accordion.stories.tsx

@@ -1,159 +0,0 @@
-import React, { useState, ComponentProps, ReactNode } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-import { IconPlus } from '@salutejs/plasma-icons';
-
-import { IconButton } from '../IconButton/IconButton';
-
-import { Accordion, AccordionItem } from './Accordion';
-
-type AccordionItemCustomProps = {
-    type: 'arrow' | 'sign' | 'clear';
-    title: string;
-    body: ReactNode;
-    pin?:
-        | 'square-square'
-        | 'square-clear'
-        | 'clear-square'
-        | 'clear-clear'
-        | 'clear-circle'
-        | 'circle-clear'
-        | 'circle-circle';
-};
-
-type AccordionProps = ComponentProps<typeof Accordion> & AccordionItemCustomProps;
-
-const meta: Meta<AccordionProps> = {
-    title: 'Data Display/Accordion',
-    decorators: [InSpacingDecorator],
-    component: Accordion,
-    args: {
-        singleActive: false,
-        view: 'default',
-        size: 's',
-        stretching: 'filled',
-        disabled: false,
-        type: 'arrow',
-        pin: undefined,
-        title: 'Как оплатить заправку бонусами СберСпасибо?',
-        body:
-            'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива',
-    },
-    argTypes: {
-        ...disableProps(['text', 'size']),
-        view: {
-            options: ['default', 'clear'],
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: ['filled', 'fixed'],
-            control: {
-                type: 'select',
-            },
-        },
-        type: {
-            options: ['arrow', 'sign', 'clear'],
-            control: {
-                type: 'select',
-            },
-        },
-        pin: {
-            options: [
-                'square-square',
-                'square-clear',
-                'clear-square',
-                'clear-clear',
-                'clear-circle',
-                'circle-clear',
-                'circle-circle',
-            ],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-export const Default: StoryObj<AccordionProps> = {
-    render: (props: AccordionProps) => {
-        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>
-        );
-    },
-};
-
-const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
-
-const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
-    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<ComponentProps<typeof Accordion>> = {
-    render: (props: ComponentProps<typeof Accordion>) => ControlledAccordion(props),
-};

package/emotion/es/components/Attach/Attach.stories.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconPlasma } from '@salutejs/plasma-icons';
-
-import { Attach } from './Attach';
-
-const viewOptions = ['accent', 'secondary', 'clear'];
-const helperTextViewOptions = ['default', 'negative'];
-
-const flowOptions = ['horizontal', 'vertical', 'auto'];
-const fileFormatOptions = ['all', '.doc', '.xls', '.pdf', '.csv', '.txt'];
-const sizeOptions = ['s'];
-
-type StoryAttachProps = ComponentProps<typeof Attach> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-    buttonText?: string;
-    buttonValue?: string;
-    fileFormat?: string;
-    width?: string;
-};
-
-const meta: Meta<StoryAttachProps> = {
-    title: 'Data Entry/Attach',
-    decorators: [InSpacingDecorator],
-    component: Attach,
-    argTypes: {
-        fileFormat: {
-            options: fileFormatOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        flow: {
-            options: flowOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizeOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: viewOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        helperTextView: {
-            options: helperTextViewOptions,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-const StoryButton = (props: StoryAttachProps) => {
-    return <Attach {...props} />;
-};
-
-export const Button: StoryObj<StoryAttachProps> = {
-    args: {
-        fileFormat: 'all',
-        flow: 'horizontal',
-        hasAttachment: true,
-        width: '400px',
-        buttonText: 'Загрузить файл',
-        buttonValue: '',
-        helperText: 'Подсказка',
-        enableContentLeft: false,
-        enableContentRight: false,
-        size: 's',
-        view: 'accent',
-        helperTextView: 'default',
-    },
-    render: (args) => {
-        const {
-            buttonText,
-            buttonValue,
-            width,
-            size,
-            fileFormat,
-            enableContentLeft,
-            enableContentRight,
-            ...rest
-        } = args;
-        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
-        const iconSize = size === 'xs' ? 'xs' : 's';
-
-        return (
-            <StoryButton
-                style={{ width }}
-                size={size}
-                buttonType="button"
-                contentLeft={enableContentLeft ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                contentRight={enableContentRight ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                acceptedFileFormats={accepted}
-                text={buttonText}
-                value={buttonValue}
-                {...rest}
-            />
-        );
-    },
-};
-
-const StoryIconButton = (props: StoryAttachProps) => {
-    return <Attach {...props} />;
-};
-
-export const IconButton: StoryObj<StoryAttachProps> = {
-    args: {
-        fileFormat: 'all',
-        flow: 'horizontal',
-        hasAttachment: true,
-        width: '400px',
-        helperText: 'Подсказка',
-        size: 's',
-        view: 'accent',
-        helperTextView: 'default',
-    },
-    render: (args) => {
-        const {
-            buttonText,
-            buttonValue,
-            width,
-            size,
-            fileFormat,
-            enableContentLeft,
-            enableContentRight,
-            ...rest
-        } = args;
-        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
-        const iconSize = size === 'xs' ? 'xs' : 's';
-
-        return (
-            <StoryIconButton
-                style={{ width }}
-                size={size}
-                buttonType="iconButton"
-                contentLeft={enableContentLeft ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                contentRight={enableContentRight ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                acceptedFileFormats={accepted}
-                text={buttonText}
-                value={buttonValue}
-                {...rest}
-            />
-        );
-    },
-};