@salutejs/plasma-new-hope 0.131.1-canary.1396.10560424945.0 → 0.132.0-canary.1368.10558535646.0

package/styled-components/cjs/examples/sds_engineer/components/Popup/Popup.stories.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useRef } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+import { SSRProvider } from '@salutejs/plasma-core';
+
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+
+import { Popup, popupClasses, PopupProvider } from './Popup';
+
+const meta: Meta<typeof Popup> = {
+    title: 'sds_engineer/Popup',
+    decorators: [WithTheme],
+    argTypes: {
+        placement: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPopupProps = ComponentProps<typeof Popup> & { placement: string; offsetX: number; offsetY: number };
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+const OtherContent = styled.div`
+    width: 50%;
+    height: 50%;
+    background: var(--plasma-colors-surface-solid03);
+    position: absolute;
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+
+    top: 10rem;
+    right: 0;
+`;
+
+const Content = styled.div`
+    background: var(--plasma-colors-surface-solid02);
+    padding: 1rem;
+`;
+
+const StyledPopupAnimation = styled(Popup)`
+    && > .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} > .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+`;
+
+const StyledPopupTransition = styled(Popup)`
+    && > .${popupClasses.root} {
+        opacity: 1;
+        transition: opacity 0.5s 0.1s;
+    }
+
+    &&.${popupClasses.endTransition} > .${popupClasses.root} {
+        opacity: 0;
+        transition: opacity 0.5s 0.1s;
+    }
+`;
+
+const StoryPopupDemo = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                    </div>
+                    <StyledPopupAnimation
+                        id="popupA"
+                        frame={ref}
+                        withAnimation
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </StyledPopupAnimation>
+                    <OtherContent ref={ref}>
+                        <>Frame</>
+                    </OtherContent>
+                    <StyledPopupTransition
+                        id="popupB"
+                        frame="theme-root"
+                        withAnimation
+                        opened={isOpenB}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </StyledPopupTransition>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+export const PopupDemo: StoryObj<StoryPopupProps> = {
+    args: {
+        placement: 'center',
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryPopupDemo {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Progress/Progress.config.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Progress = /*#__PURE__*/require("../../../../components/Progress");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-solid-tertiary);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-accent-gradient);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-positive);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-warning);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor),
+      error: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], _Progress.progressTokens.trackBackgroundColor, _Progress.progressTokens.progressFilledBackgroundColor, _Progress.progressTokens.valueColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.125rem;", ":0.375rem;", ":0.375rem;", ":0.5rem;"], _Progress.progressTokens.trackHeight, _Progress.progressTokens.trackBorderRadius, _Progress.progressTokens.progressFilledHeight, _Progress.progressTokens.progressFilledBorderRadius, _Progress.progressTokens.valueMarginLeft)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Progress/Progress.js

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

package/styled-components/cjs/examples/sds_engineer/components/Progress/Progress.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Progress } from './Progress';
+
+const views = ['default', 'secondary', 'primary', 'accent', 'success', 'warning', 'error'];
+
+const meta: Meta<typeof Progress> = {
+    title: 'sds_engineer/Progress',
+    component: Progress,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<ComponentProps<typeof Progress>> = {
+    args: {
+        value: 25,
+        view: 'default',
+        displayValue: true,
+    },
+};

package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Radiobox = /*#__PURE__*/require("../../../../components/Radiobox");
+var config = exports.config = {
+  defaults: {
+    view: 'accent',
+    focused: 'true'
+  },
+  variations: {
+    /**
+     * Размер контрола.
+     */
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":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);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":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);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":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);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":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);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight)
+    },
+    /**
+     * Вид контрола.
+     */
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Radiobox.radioboxTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);"], _Radiobox.radioboxTokens.focusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.js

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

package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.stories.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Link } from '../Link/Link';
+
+import { config } from './Radiobox.config';
+import { Radiobox } from './Radiobox';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const meta: Meta<typeof Radiobox> = {
+    title: 'sds_engineer/Radiobox',
+    decorators: [WithTheme],
+    component: Radiobox,
+    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
+    args: {
+        view: 'accent',
+        size: 'm',
+        disabled: false,
+        focused: true,
+    },
+};
+
+export default meta;
+
+type RadioboxProps = ComponentProps<typeof Radiobox>;
+
+const langName = 'language';
+
+const items = [
+    {
+        langName,
+        value: 'c',
+        label: 'C',
+        disabled: false,
+        description: (
+            <div>
+                A general-purpose, procedural computer programming <Link href="/#">language</Link>{' '}
+            </div>
+        ),
+    },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+    { langName, value: 'elixir', label: 'Elixir', disabled: true },
+];
+
+const StoryDefault = (props: RadioboxProps) => {
+    const value = 0;
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <>
+            <Radiobox
+                name="item.name"
+                value={value}
+                singleLine
+                label="Label"
+                description="Description"
+                checked={checked}
+                onChange={(event) => {
+                    event.persist();
+
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+            <Radiobox
+                name="item.name"
+                value={value}
+                singleLine
+                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                checked={checked}
+                onChange={(event) => {
+                    event.persist();
+
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+        </>
+    );
+};
+
+export const Default: StoryObj<RadioboxProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryComplex = (props: RadioboxProps) => {
+    const [value, setValue] = useState('c');
+
+    return (
+        <RadioGroup>
+            <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                Radiogroup Title
+            </div>
+            {items.map((item) => (
+                <Radiobox
+                    key={item.value}
+                    name={item.langName}
+                    value={item.value}
+                    label={item.label}
+                    disabled={item.disabled}
+                    checked={value[item.value]}
+                    description={item.description}
+                    onChange={(event) => {
+                        setValue(item.value);
+                        onChange(event);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    {...props}
+                />
+            ))}
+        </RadioGroup>
+    );
+};
+
+export const Complex: StoryObj<RadioboxProps> = {
+    render: (args) => <StoryComplex {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Segment/Segment.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentItem = exports.SegmentGroup = void 0;
+var _Segment = /*#__PURE__*/require("../../../../components/Segment");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _SegmentGroup = /*#__PURE__*/require("./SegmentGroup.config");
+var _SegmentItem = /*#__PURE__*/require("./SegmentItem.config");
+var mergedSegmentGroupConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Segment.segmentGroupConfig, _SegmentGroup.config);
+var mergedSegmentItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Segment.segmentItemConfig, _SegmentItem.config);
+var SegmentGroup = exports.SegmentGroup = /*#__PURE__*/(0, _engines.component)(mergedSegmentGroupConfig);
+var SegmentItem = exports.SegmentItem = /*#__PURE__*/(0, _engines.component)(mergedSegmentItemConfig);

package/styled-components/cjs/examples/sds_engineer/components/Segment/Segment.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { segmentGroupConfig } from '../../../../components/Segment';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
+
+import { config } from './SegmentGroup.config';
+import { SegmentItem, SegmentGroup } from './Segment';
+
+const segmentItemViews = ['clear', 'default', 'secondary'];
+
+type CustomStorySegmentProps = {
+    segmentItemView?: string;
+    contentItemsNumber?: number;
+};
+
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
+
+const meta: Meta<StorySegmentProps> = {
+    title: 'sds_engineer/Segment',
+    decorators: [WithTheme],
+    component: SegmentGroup,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
+        selectionMode: {
+            options: ['single', 'multiple'],
+            control: {
+                type: 'select',
+            },
+        },
+        segmentItemView: {
+            options: segmentItemViews,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
+    const contentItems = Array(contentItemsNumber).fill(0);
+
+    return (
+        <>
+            <h3>Segment with auto width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+
+            <h3>Segment with fixed width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+        </>
+    );
+};
+
+export const Default: StoryObj<StorySegmentProps> = {
+    args: {
+        view: 'clear',
+        size: 'xs',
+        segmentItemView: 'clear',
+        selectionMode: 'single',
+        contentItemsNumber: 11,
+        pilled: false,
+        filledBackground: false,
+        disabled: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Segment/SegmentGroup.config.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Segment = /*#__PURE__*/require("../../../../components/Segment");
+var config = exports.config = {
+  defaults: {
+    view: 'clear',
+    size: 'xs'
+  },
+  variations: {
+    view: {
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
+    },
+    pilled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.groupPilledBorderRadius)
+    },
+    filledBackground: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Segment/SegmentItem.config.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Segment = /*#__PURE__*/require("../../../../components/Segment");
+var config = exports.config = {
+  defaults: {
+    view: 'clear',
+    size: 'xs'
+  },
+  variations: {
+    view: {
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
+    },
+    pilled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
+    }
+  }
+};