@salutejs/sdds-serv 0.314.0-canary.2021.15824070198.0 → 0.314.0-canary.2022.15754718552.0

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

@@ -0,0 +1,125 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+import { IconKeyFill, IconKeyOutline, IconLockFill } from '@salutejs/plasma-icons';
+import { ratingClasses } from '@salutejs/plasma-new-hope/emotion';
+
+import { Rating } from './Rating';
+
+const views = ['default', 'accent'];
+const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS'];
+const scorePrecision = [1, 2];
+const valuePlacements = ['before', 'after'];
+const iconsCount = [1, 5, 10];
+const helperTextStretching = ['fixed', 'filled'];
+
+const meta: Meta<typeof Rating> = {
+    title: 'Data Display/Rating',
+    component: Rating,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        value: {
+            control: {
+                type: 'number',
+            },
+        },
+        precision: {
+            options: scorePrecision,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hasValue', truthy: true },
+        },
+        valuePlacement: {
+            options: valuePlacements,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hasValue', truthy: true },
+        },
+        hasIcons: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'hasValue', truthy: true },
+        },
+        iconQuantity: {
+            options: iconsCount,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        helperTextStretching: {
+            options: helperTextStretching,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'helperText', neq: '' },
+        },
+        ...disableProps(['iconSlot', 'iconSlotOutline', 'iconSlotHalf']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Rating> & {
+    hasValue?: boolean;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        hasValue: true,
+        value: 3.8,
+        precision: 1,
+        valuePlacement: 'before',
+        hasIcons: true,
+        iconQuantity: 5,
+        helperText: 'Helper text',
+        helperTextStretching: 'filled',
+    },
+    render: ({ hasIcons, hasValue, ...args }) => (
+        <Rating hasIcons={hasValue ? hasIcons : true} hasValue={hasValue} {...args} />
+    ),
+};
+
+export const CustomIcons: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        ...disableProps(['size', 'view']),
+    },
+    args: {
+        view: 'default',
+        size: 'l',
+        hasValue: true,
+        value: 3.8,
+        precision: 1,
+        valuePlacement: 'before',
+        hasIcons: true,
+        iconQuantity: 5,
+        helperText: 'Helper text',
+        helperTextStretching: 'filled',
+    },
+    render: ({ hasIcons, hasValue, ...args }) => (
+        <Rating
+            hasIcons={hasValue ? hasIcons : true}
+            hasValue={hasValue}
+            iconSlot={<IconKeyFill size="s" className={ratingClasses.customIconSizing} />}
+            iconSlotOutline={<IconLockFill size="s" className={ratingClasses.customIconSizing} />}
+            iconSlotHalf={<IconKeyOutline size="s" className={ratingClasses.customIconSizing} />}
+            {...args}
+        />
+    ),
+};

package/emotion/es/components/Rating/index.js

@@ -1,2 +1,2 @@
 export { Rating } from './Rating';
-export { ratingTokens, ratingClasses } from '@salutejs/plasma-new-hope/emotion';
+export { ratingTokens, ratingClasses } from '@salutejs/plasma-new-hope/emotion';

package/emotion/es/components/SSRProvider/index.js

@@ -1 +1 @@
-export { SSRProvider } from '@salutejs/plasma-new-hope/emotion';
+export { SSRProvider } from '@salutejs/plasma-new-hope/emotion';

package/emotion/es/components/Segment/Segment.js

@@ -1,14 +1,19 @@
 import { segmentItemConfig, segmentGroupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config as configSegmentItem } from './SegmentItem.config';
 import { config as configSegmentGroup } from './SegmentGroup.config';
+
 /**
  * Провайдер контекста для группы сегментов и хук для доступа к контексту.
- */ export { SegmentProvider, useSegment } from '@salutejs/plasma-new-hope/emotion';
-var mergedSegmentItemConfig = mergeConfig(segmentItemConfig, configSegmentItem);
-var mergedSegmentGroupConfig = mergeConfig(segmentGroupConfig, configSegmentGroup);
+ */
+export { SegmentProvider, useSegment } from '@salutejs/plasma-new-hope/emotion';
+var mergedSegmentItemConfig = /*#__PURE__*/mergeConfig(segmentItemConfig, configSegmentItem);
+var mergedSegmentGroupConfig = /*#__PURE__*/mergeConfig(segmentGroupConfig, configSegmentGroup);
+
 /**
  * Компонент группы сегментов.
- */ export var SegmentGroup = component(mergedSegmentGroupConfig);
+ */
+export var SegmentGroup = /*#__PURE__*/component(mergedSegmentGroupConfig);
 /**
  * Компонент сегмента.
- */ export var SegmentItem = component(mergedSegmentItemConfig);
+ */
+export var SegmentItem = /*#__PURE__*/component(mergedSegmentItemConfig);

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

@@ -0,0 +1,171 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+import { IconMic } from '@salutejs/plasma-icons';
+
+import { Counter } from '../Counter/Counter';
+
+import { SegmentItem, SegmentGroup } from './Segment';
+
+import { SegmentProvider } from '.';
+
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+
+const segmentItemViews = ['default', 'secondary', 'accent'];
+type Size = typeof sizes[number];
+
+type CustomStoryProps = {
+    itemQuantity: number;
+    contentLeft: string;
+    contentRight: string;
+    segmentItemView?: 'default' | 'secondary';
+    singleSelectedRequired?: boolean;
+};
+
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
+
+const sizes = ['xs', 's', 'm', 'l', 'xl'] as const;
+
+const getContentLeft = (contentLeftOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
+};
+
+const getContentRight = (contentRightOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const counterSize = size === 'xs' ? 'xxs' : 'xs';
+
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size={iconSize} color="inherit" />;
+        case 'counter':
+            return <Counter size={counterSize} count={1} view="positive" />;
+        case 'text':
+            return 'Text';
+        default:
+            return undefined;
+    }
+};
+
+const meta: Meta<StorySegmentProps> = {
+    title: 'Data Entry/Segment',
+    decorators: [InSpacingDecorator],
+    component: SegmentGroup,
+    argTypes: {
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip']),
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+        },
+        selectionMode: {
+            options: ['single', 'multiple'],
+            control: {
+                type: 'select',
+            },
+        },
+        segmentItemView: {
+            options: segmentItemViews,
+            control: {
+                type: 'select',
+            },
+        },
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const StoryDefault = (props: StorySegmentProps) => {
+    const {
+        singleSelectedRequired,
+        disabled,
+        itemQuantity,
+        size,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const isVertical = orientation === 'vertical';
+
+    return (
+        <SegmentProvider singleSelectedRequired={singleSelectedRequired}>
+            <SegmentGroup
+                stretch={stretch}
+                disabled={disabled}
+                clip={false}
+                size={size}
+                orientation={orientation}
+                {...args}
+            >
+                {items.map((_, i) => (
+                    <SegmentItem
+                        view={segmentItemView}
+                        label={`Label ${i}`}
+                        value={`label_${i}`}
+                        size={size}
+                        key={`label_${i}`}
+                        contentLeft={getContentLeft(contentLeftOption, size)}
+                        contentRight={getContentRight(contentRightOption, size)}
+                        {...args}
+                    >
+                        {`Label${i + 1}`}
+                    </SegmentItem>
+                ))}
+            </SegmentGroup>
+        </SegmentProvider>
+    );
+};
+
+export const Default: StoryObj<StorySegmentProps> = {
+    args: {
+        itemQuantity: 8,
+        size: 'xs',
+        segmentItemView: 'default',
+        selectionMode: 'single',
+        pilled: false,
+        filledBackground: false,
+        hasBackground: false,
+        disabled: false,
+        stretch: false,
+        singleSelectedRequired: false,
+        orientation: 'horizontal',
+        contentRight: 'none',
+        contentLeft: 'none',
+    },
+    argTypes: {
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip']),
+    },
+    render: (args: StorySegmentProps) => <StoryDefault {...args} />,
+};

package/emotion/es/components/Segment/SegmentGroup.config.js

@@ -1,191 +1,37 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-secondary);\n                ",
-        ": transparent;\n                ",
-        ": var(--text-accent);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-secondary);\n                ",
-        ": transparent;\n                ",
-        ": var(--text-accent);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.625rem;\n                ",
-        ": 1.125rem;\n                ",
-        ": auto;\n                ",
-        ": auto;\n                ",
-        ": 0.25rem 0.75rem;\n                ",
-        ": 0.75rem 0;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.75rem;\n                ",
-        ": 1.375rem;\n                ",
-        ": auto;\n                ",
-        ": auto;\n                ",
-        ": 0.5rem 0.875rem;\n                ",
-        ": 0.875rem 0;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.875rem;\n                ",
-        ": 1.625rem;\n                ",
-        ": auto;\n                ",
-        ": auto;\n                ",
-        ": 0.75rem 1.25rem;\n                ",
-        ": 1.25rem 0;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1rem;\n                ",
-        ": 1.875rem;\n                ",
-        ": auto;\n                ",
-        ": auto;\n                ",
-        ": 1rem 1.375rem;\n                ",
-        ": 1.375rem 0;\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.125rem;\n                // NOTE: change on token when added\n                ",
-        ": 1000px;\n                ",
-        ": auto;\n                ",
-        ": auto;\n                ",
-        ": 1.25rem 1.5rem;\n                ",
-        ": 1.5rem 0;\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.4;\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-transparent-secondary);\n            "
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, segmentTokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'clear',
-        size: 'xs'
+  defaults: {
+    view: 'clear',
+    size: 'xs'
+  },
+  variations: {
+    view: {
+      clear: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": transparent;\n                ", ": var(--text-accent);\n            "])), segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.groupFilledBackgroundColor),
+      filled: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": transparent;\n                ", ": var(--text-accent);\n            "])), segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.groupFilledBackgroundColor)
+    },
+    size: {
+      xs: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.625rem;\n                ", ": 1.125rem;\n                ", ": auto;\n                ", ": auto;\n                ", ": 0.25rem 0.75rem;\n                ", ": 0.75rem 0;\n            "])), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n                ", ": 1.375rem;\n                ", ": auto;\n                ", ": auto;\n                ", ": 0.5rem 0.875rem;\n                ", ": 0.875rem 0;\n            "])), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      m: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.875rem;\n                ", ": 1.625rem;\n                ", ": auto;\n                ", ": auto;\n                ", ": 0.75rem 1.25rem;\n                ", ": 1.25rem 0;\n            "])), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      l: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1rem;\n                ", ": 1.875rem;\n                ", ": auto;\n                ", ": auto;\n                ", ": 1rem 1.375rem;\n                ", ": 1.375rem 0;\n            "])), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      xl: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.125rem;\n                // NOTE: change on token when added\n                ", ": 1000px;\n                ", ": auto;\n                ", ": auto;\n                ", ": 1.25rem 1.5rem;\n                ", ": 1.5rem 0;\n            "])), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), segmentTokens.disabledOpacity)
+    },
+    pilled: {
+      "true": /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral([""])))
+    },
+    stretch: {
+      "true": /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral([""])))
+    },
+    filledBackground: {
+      "true": /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-secondary);\n            "])), segmentTokens.groupFilledBackgroundColor)
     },
-    variations: {
-        view: {
-            clear: css(_templateObject(), segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.groupFilledBackgroundColor),
-            filled: css(_templateObject1(), segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.groupFilledBackgroundColor)
-        },
-        size: {
-            xs: css(_templateObject2(), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
-            s: css(_templateObject3(), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
-            m: css(_templateObject4(), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
-            l: css(_templateObject5(), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
-            xl: css(_templateObject6(), segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding)
-        },
-        disabled: {
-            true: css(_templateObject7(), segmentTokens.disabledOpacity)
-        },
-        pilled: {
-            true: css(_templateObject8())
-        },
-        stretch: {
-            true: css(_templateObject9())
-        },
-        filledBackground: {
-            true: css(_templateObject10(), segmentTokens.groupFilledBackgroundColor)
-        },
-        orientation: {
-            vertical: css(_templateObject11())
-        }
+    orientation: {
+      vertical: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral([""])))
     }
-};
+  }
+};