@salutejs/plasma-new-hope 0.78.0-canary.1185.8915022482.0 → 0.78.0-canary.1194.8928068974.0

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { dropdownConfig } from '../../../../../components/Dropdown';
+import { Button } from '../../Button/Button';
+import { Radiobox } from '../../Radiobox/Radiobox';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
+
+import { Dropdown, DropdownItem } from './Dropdown';
+import { config } from './Dropdown.config';
+
+const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<DropdownTrigger> = ['click', 'hover'];
+
+type StoryDropdownPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Dropdown',
+    decorators: [WithTheme],
+    component: Dropdown,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
+    },
+    args: {
+        placement: 'bottom',
+        trigger: 'click',
+        closeOnOverlayClick: false,
+        closeOnEsc: true,
+        isFocusTrapped: true,
+        skidding: 0,
+        distance: 0,
+    },
+};
+
+export default meta;
+
+const onSelect = action('onSelect');
+const onClick = action('onClick');
+const onChange = action('onChange');
+
+const getDropdownItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StyledRadiobox = styled(Radiobox)`
+    margin-right: 0.5rem;
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+    margin-left: auto;
+`;
+
+const StyledDisclosureRightIcon = styled.div`
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: auto;
+`;
+
+const DisclosureRightIcon = (props) => (
+    <StyledDisclosureRightIcon>
+        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
+                fill="currentColor"
+            />
+        </svg>
+    </StyledDisclosureRightIcon>
+);
+
+const StoryTight = (args: StoryDropdownProps) => {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
+
+    const { skidding, distance, placement, ...rest } = args;
+
+    const onMainClose = () => {
+        setIsOpen(false);
+        setIsOpenDropdown2(false);
+    };
+
+    const onMainToggle = (openValue: boolean) => {
+        setIsOpen(openValue);
+
+        if (!openValue) {
+            onMainClose();
+        }
+    };
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        onSelect(value, text);
+        setIsOpen(false);
+    };
+
+    return (
+        <div>
+            <h3>This is header</h3>
+            <Dropdown
+                target={<Button>Target</Button>}
+                isOpen={isOpen}
+                onToggle={onMainToggle}
+                offset={[Number(skidding), Number(distance)]}
+                placement={placement}
+                {...rest}
+            >
+                {getDropdownItems('item', 6).map((item) => (
+                    <DropdownItem
+                        key={item.value}
+                        isSelected={Boolean(item.value === selected)}
+                        onSelect={() => handleSelect(item.value, item.child)}
+                        onClick={onClick}
+                        value={item.value}
+                    >
+                        {item.child}
+                    </DropdownItem>
+                ))}
+                <Dropdown
+                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    onToggle={(is) => setIsOpenDropdown2(is)}
+                    isOpen={isOpenDropdown2}
+                    offset={[0, 0]}
+                    isNested
+                    {...rest}
+                >
+                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    {getDropdownItems('nested', 4).map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={Boolean(item.value === selected)}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            onClick={onClick}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="1"
+                        onChange={onChange}
+                        text="Radiobox 1"
+                    />
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="2"
+                        onChange={onChange}
+                        text="Radiobox 2"
+                    />
+                </Dropdown>
+
+                <DropdownItem
+                    isSelected={selected === 'disabled'}
+                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onClick={onClick}
+                    value="disabled"
+                    disabled
+                >
+                    disabled
+                </DropdownItem>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Tight: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryTight {...args} />,
+};

package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Slider = /*#__PURE__*/require("../../../../components/Slider");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-solid-default);", ":var(--surface-solid-tertiary);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent);", ":var(--surface-solid-tertiary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor),
+      gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+var _Slider = /*#__PURE__*/require("../../../../components/Slider");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Slider2 = /*#__PURE__*/require("./Slider.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
+var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Slider } from './Slider';
+
+const sizes = ['l', 'm', 's'];
+const views = ['default', 'accent', 'gradient'];
+const labelPlacements = ['outer', 'inner'];
+const rangeValuesPlacement = ['outer', 'inner'];
+
+const meta: Meta<typeof Slider> = {
+    title: 'plasma_b2c/Slider',
+    component: Slider,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps([
+            'value',
+            'onChangeCommitted',
+            'ariaLabel',
+            'onChange',
+            'fontSizeMultiplier',
+            'gap',
+            'settings',
+            'hasHoverAnimation',
+        ]),
+    },
+};
+
+export default meta;
+
+type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
+type StorySingleProps = StoryProps;
+
+type StorySingle = StoryObj<StorySingleProps>;
+type StoryDouble = StoryObj<StoryProps>;
+
+const SliderWrapper = styled.div`
+    width: 25rem;
+`;
+
+const StoryDefault = (args: StorySingleProps) => {
+    const [value, setValue] = useState(30);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const Default: StorySingle = {
+    argTypes: {
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        rangeValuesPlacement: {
+            options: rangeValuesPlacement,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        ariaLabel: 'Цена товара',
+        multipleStepSize: 10,
+        label: 'Цена товара',
+        labelPlacement: 'outer',
+        rangeValuesPlacement: 'outer',
+        showRangeValues: true,
+        showCurrentValue: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryMultipleValues = (args: StoryProps) => {
+    const [value, setValue] = useState([10, 80]);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const MultipleValues: StoryDouble = {
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        label: 'Цена товара',
+        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
+        multipleStepSize: 10,
+    },
+    render: (args) => <StoryMultipleValues {...args} />,
+};

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Dropdown = /*#__PURE__*/require("../../../../../components/Dropdown");
+var dropdownSizeCommon = /*#__PURE__*/"\n    ".concat(_Dropdown.dropdownTokens.width, ": 12.5rem;\n    ").concat(_Dropdown.dropdownTokens.height, ": auto;\n    ").concat(_Dropdown.dropdownTokens.borderRadius, ": 0.5rem;\n    ").concat(_Dropdown.dropdownTokens.paddingTop, ": 0.125rem;\n    ").concat(_Dropdown.dropdownTokens.paddingRight, ": 0.0625rem;\n    ").concat(_Dropdown.dropdownTokens.paddingBottom, ": 0.125rem;\n    ").concat(_Dropdown.dropdownTokens.paddingLeft, ": 0.125rem;\n");
+var dropdownItemSizeCommon = /*#__PURE__*/"\n    ".concat(_Dropdown.dropdownTokens.itemWidth, ": auto;\n    ").concat(_Dropdown.dropdownTokens.itemHeight, ": auto;\n    ").concat(_Dropdown.dropdownTokens.itemMarginTop, ": 0;\n    ").concat(_Dropdown.dropdownTokens.itemMarginRight, ": 0;\n    ").concat(_Dropdown.dropdownTokens.itemMarginBottom, ": 0;\n    ").concat(_Dropdown.dropdownTokens.itemMarginLeft, ": 0;\n");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownItem = exports.Dropdown = void 0;
+var _Dropdown = /*#__PURE__*/require("../../../../../components/Dropdown");
+var _engines = /*#__PURE__*/require("../../../../../engines");
+var _Dropdown2 = /*#__PURE__*/require("./Dropdown.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownConfig, _Dropdown2.config);
+var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownItemConfig);
+var DropdownItem = exports.DropdownItem = /*#__PURE__*/(0, _engines.component)(mergedItemConfig);

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { dropdownConfig } from '../../../../../components/Dropdown';
+import { Button } from '../../Button/Button';
+import { Radiobox } from '../../Radiobox/Radiobox';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
+
+import { Dropdown, DropdownItem } from './Dropdown';
+import { config } from './Dropdown.config';
+
+const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<DropdownTrigger> = ['click', 'hover'];
+
+type StoryDropdownPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_web/Dropdown',
+    decorators: [WithTheme],
+    component: Dropdown,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
+    },
+    args: {
+        placement: 'bottom',
+        trigger: 'click',
+        closeOnOverlayClick: false,
+        closeOnEsc: true,
+        isFocusTrapped: true,
+        skidding: 0,
+        distance: 0,
+    },
+};
+
+export default meta;
+
+const onSelect = action('onSelect');
+const onClick = action('onClick');
+const onChange = action('onChange');
+
+const getDropdownItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StyledRadiobox = styled(Radiobox)`
+    margin-right: 0.5rem;
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+    margin-left: auto;
+`;
+
+const StyledDisclosureRightIcon = styled.div`
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: auto;
+`;
+
+const DisclosureRightIcon = (props) => (
+    <StyledDisclosureRightIcon>
+        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
+                fill="currentColor"
+            />
+        </svg>
+    </StyledDisclosureRightIcon>
+);
+
+const StoryNormal = (args: StoryDropdownProps) => {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
+
+    const { skidding, distance, placement, ...rest } = args;
+
+    const onMainClose = () => {
+        setIsOpen(false);
+        setIsOpenDropdown2(false);
+    };
+
+    const onMainToggle = (openValue: boolean) => {
+        setIsOpen(openValue);
+
+        if (!openValue) {
+            onMainClose();
+        }
+    };
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        onSelect(value, text);
+        setIsOpen(false);
+    };
+
+    return (
+        <div>
+            <h3>This is header</h3>
+            <Dropdown
+                target={<Button>Target</Button>}
+                isOpen={isOpen}
+                onToggle={onMainToggle}
+                offset={[Number(skidding), Number(distance)]}
+                placement={placement}
+                {...rest}
+            >
+                {getDropdownItems('item', 6).map((item) => (
+                    <DropdownItem
+                        key={item.value}
+                        isSelected={Boolean(item.value === selected)}
+                        onSelect={() => handleSelect(item.value, item.child)}
+                        onClick={onClick}
+                        value={item.value}
+                    >
+                        {item.child}
+                    </DropdownItem>
+                ))}
+                <Dropdown
+                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    onToggle={(is) => setIsOpenDropdown2(is)}
+                    isOpen={isOpenDropdown2}
+                    offset={[0, 0]}
+                    isNested
+                    {...rest}
+                >
+                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    {getDropdownItems('nested', 4).map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={Boolean(item.value === selected)}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            onClick={onClick}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="1"
+                        onChange={onChange}
+                        text="Radiobox 1"
+                    />
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="2"
+                        onChange={onChange}
+                        text="Radiobox 2"
+                    />
+                </Dropdown>
+
+                <DropdownItem
+                    isSelected={selected === 'disabled'}
+                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onClick={onClick}
+                    value="disabled"
+                    disabled
+                >
+                    disabled
+                </DropdownItem>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
+};