@salutejs/sdds-cs 0.318.1-canary.1741.15821189176.0 → 0.318.1-canary.2018.15641070716.0

package/emotion/cjs/components/Rating/Rating.config.js

@@ -1,122 +1,25 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-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-primary);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-secondary);\n                // TODO: change with token data-yellow, when it will be added to theme\n                ",
-        ": var(--text-warning);\n                ",
-        ": var(--text-tertiary);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.25rem;\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 1rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.25rem;\n\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 0.125rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 1.25rem;\n\n                ",
-        ": 0.125rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 1.25rem;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        size: 's'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n            "])), _emotion.ratingTokens.color, _emotion.ratingTokens.helperTextColor, _emotion.ratingTokens.iconColor, _emotion.ratingTokens.outlineIconColor),
+      accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                // TODO: change with token data-yellow, when it will be added to theme\n                ", ": var(--text-warning);\n                ", ": var(--text-tertiary);\n            "])), _emotion.ratingTokens.color, _emotion.ratingTokens.helperTextColor, _emotion.ratingTokens.iconColor, _emotion.ratingTokens.outlineIconColor)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.ratingTokens.color, _emotion.ratingTokens.helperTextColor, _emotion.ratingTokens.iconColor, _emotion.ratingTokens.outlineIconColor),
-            accent: (0, _emotion.css)(_templateObject1(), _emotion.ratingTokens.color, _emotion.ratingTokens.helperTextColor, _emotion.ratingTokens.iconColor, _emotion.ratingTokens.outlineIconColor)
-        },
-        size: {
-            s: (0, _emotion.css)(_templateObject2(), _emotion.ratingTokens.gap, _emotion.ratingTokens.fontFamily, _emotion.ratingTokens.fontSize, _emotion.ratingTokens.fontStyle, _emotion.ratingTokens.fontWeight, _emotion.ratingTokens.letterSpacing, _emotion.ratingTokens.lineHeight, _emotion.ratingTokens.helperTextFontFamily, _emotion.ratingTokens.helperTextFontSize, _emotion.ratingTokens.helperTextFontStyle, _emotion.ratingTokens.helperTextFontWeight, _emotion.ratingTokens.helperTextLetterSpacing, _emotion.ratingTokens.helperTextLineHeight, _emotion.ratingTokens.contentGap, _emotion.ratingTokens.singleIconContentGap, _emotion.ratingTokens.starsWrapperGap, _emotion.ratingTokens.iconSize),
-            h4: (0, _emotion.css)(_templateObject3(), _emotion.ratingTokens.gap, _emotion.ratingTokens.fontFamily, _emotion.ratingTokens.fontSize, _emotion.ratingTokens.fontStyle, _emotion.ratingTokens.fontWeight, _emotion.ratingTokens.letterSpacing, _emotion.ratingTokens.lineHeight, _emotion.ratingTokens.helperTextFontFamily, _emotion.ratingTokens.helperTextFontSize, _emotion.ratingTokens.helperTextFontStyle, _emotion.ratingTokens.helperTextFontWeight, _emotion.ratingTokens.helperTextLetterSpacing, _emotion.ratingTokens.helperTextLineHeight, _emotion.ratingTokens.contentGap, _emotion.ratingTokens.singleIconContentGap, _emotion.ratingTokens.starsWrapperGap, _emotion.ratingTokens.iconMarginBottom, _emotion.ratingTokens.iconSizeLarge, _emotion.ratingTokens.iconSizeMedium, _emotion.ratingTokens.iconSizeSmall, _emotion.ratingTokens.singleIconMarginBottom, _emotion.ratingTokens.singleIconSizeLarge, _emotion.ratingTokens.singleIconSizeMedium, _emotion.ratingTokens.singleIconSizeSmall)
-        }
+    size: {
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-bold-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n            "])), _emotion.ratingTokens.gap, _emotion.ratingTokens.fontFamily, _emotion.ratingTokens.fontSize, _emotion.ratingTokens.fontStyle, _emotion.ratingTokens.fontWeight, _emotion.ratingTokens.letterSpacing, _emotion.ratingTokens.lineHeight, _emotion.ratingTokens.helperTextFontFamily, _emotion.ratingTokens.helperTextFontSize, _emotion.ratingTokens.helperTextFontStyle, _emotion.ratingTokens.helperTextFontWeight, _emotion.ratingTokens.helperTextLetterSpacing, _emotion.ratingTokens.helperTextLineHeight, _emotion.ratingTokens.contentGap, _emotion.ratingTokens.singleIconContentGap, _emotion.ratingTokens.starsWrapperGap, _emotion.ratingTokens.iconSize),
+      h4: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-bold-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0.625rem;\n                ", ": 0.25rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 1.25rem;\n\n                ", ": 0.125rem;\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 1.25rem;\n            "])), _emotion.ratingTokens.gap, _emotion.ratingTokens.fontFamily, _emotion.ratingTokens.fontSize, _emotion.ratingTokens.fontStyle, _emotion.ratingTokens.fontWeight, _emotion.ratingTokens.letterSpacing, _emotion.ratingTokens.lineHeight, _emotion.ratingTokens.helperTextFontFamily, _emotion.ratingTokens.helperTextFontSize, _emotion.ratingTokens.helperTextFontStyle, _emotion.ratingTokens.helperTextFontWeight, _emotion.ratingTokens.helperTextLetterSpacing, _emotion.ratingTokens.helperTextLineHeight, _emotion.ratingTokens.contentGap, _emotion.ratingTokens.singleIconContentGap, _emotion.ratingTokens.starsWrapperGap, _emotion.ratingTokens.iconMarginBottom, _emotion.ratingTokens.iconSizeLarge, _emotion.ratingTokens.iconSizeMedium, _emotion.ratingTokens.iconSizeSmall, _emotion.ratingTokens.singleIconMarginBottom, _emotion.ratingTokens.singleIconSizeLarge, _emotion.ratingTokens.singleIconSizeMedium, _emotion.ratingTokens.singleIconSizeSmall)
     }
-};
+  }
+};

package/emotion/cjs/components/Rating/Rating.js

@@ -1,14 +1,10 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Rating", {
-    enumerable: true,
-    get: function() {
-        return Rating;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Ratingconfig = require("./Rating.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.ratingConfig, _Ratingconfig.config);
-var Rating = (0, _emotion.component)(mergedConfig);
+exports.Rating = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Rating = /*#__PURE__*/require("./Rating.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.ratingConfig, _Rating.config);
+var Rating = exports.Rating = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

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

@@ -0,0 +1,125 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps, getConfigVariations } 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';
+import { config } from './Rating.config';
+
+const { views, sizes } = getConfigVariations(config);
+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: 's',
+        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: 's',
+        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/cjs/components/Rating/index.js

@@ -1,23 +1,25 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Rating () {
-        return _Rating.Rating;
-    },
-    get ratingClasses () {
-        return _emotion.ratingClasses;
-    },
-    get ratingTokens () {
-        return _emotion.ratingTokens;
-    }
+Object.defineProperty(exports, "Rating", {
+  enumerable: true,
+  get: function get() {
+    return _Rating.Rating;
+  }
 });
-var _Rating = require("./Rating");
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+Object.defineProperty(exports, "ratingClasses", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.ratingClasses;
+  }
+});
+Object.defineProperty(exports, "ratingTokens", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.ratingTokens;
+  }
+});
+var _Rating = /*#__PURE__*/require("./Rating");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

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

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "SSRProvider", {
-    enumerable: true,
-    get: function() {
-        return _emotion.SSRProvider;
-    }
+  enumerable: true,
+  get: function get() {
+    return _emotion.SSRProvider;
+  }
 });
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

package/emotion/cjs/components/Segment/Segment.js

@@ -1,31 +1,36 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get SegmentGroup () {
-        return SegmentGroup;
-    },
-    get SegmentItem () {
-        return SegmentItem;
-    },
-    get SegmentProvider () {
-        return _emotion.SegmentProvider;
-    },
-    get useSegment () {
-        return _emotion.useSegment;
-    }
+exports.SegmentItem = exports.SegmentGroup = void 0;
+Object.defineProperty(exports, "SegmentProvider", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.SegmentProvider;
+  }
 });
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _SegmentItemconfig = require("./SegmentItem.config");
-var _SegmentGroupconfig = require("./SegmentGroup.config");
-var mergedSegmentItemConfig = (0, _emotion.mergeConfig)(_emotion.segmentItemConfig, _SegmentItemconfig.config);
-var mergedSegmentGroupConfig = (0, _emotion.mergeConfig)(_emotion.segmentGroupConfig, _SegmentGroupconfig.config);
-var SegmentGroup = (0, _emotion.component)(mergedSegmentGroupConfig);
-var SegmentItem = (0, _emotion.component)(mergedSegmentItemConfig);
+Object.defineProperty(exports, "useSegment", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.useSegment;
+  }
+});
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _SegmentItem = /*#__PURE__*/require("./SegmentItem.config");
+var _SegmentGroup = /*#__PURE__*/require("./SegmentGroup.config");
+/**
+ * Провайдер контекста для группы сегментов и хук для доступа к контексту.
+ */
+
+var mergedSegmentItemConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.segmentItemConfig, _SegmentItem.config);
+var mergedSegmentGroupConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.segmentGroupConfig, _SegmentGroup.config);
+
+/**
+ * Компонент группы сегментов.
+ */
+var SegmentGroup = exports.SegmentGroup = /*#__PURE__*/(0, _emotion.component)(mergedSegmentGroupConfig);
+/**
+ * Компонент сегмента.
+ */
+var SegmentItem = exports.SegmentItem = /*#__PURE__*/(0, _emotion.component)(mergedSegmentItemConfig);

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

@@ -0,0 +1,162 @@
+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'];
+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'] 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) => {
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size="xs" color="inherit" />;
+        case 'counter':
+            return <Counter size="s" 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', 'size']),
+        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',
+            },
+        },
+    },
+};
+
+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} />,
+};