@salutejs/plasma-new-hope 0.113.0-canary.1331.10163315465.0 → 0.113.1-canary.1325.10178064945.0

package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -19,6 +19,7 @@ const onChangeSecondValue = action('onChangeSecondValue');
 const sizes = ['l', 'm', 's', 'xs'];
 const views = ['default'];
 const dividers = ['none', 'dash', 'icon'];
+const labelPlacements = ['outer', 'inner'];
 
 const meta: Meta = {
     title: 'plasma_b2c/DatePicker',
@@ -95,6 +96,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'date',
             },
         },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -102,6 +109,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         placeholder: '30.05.2024',
         size: 'l',
         view: 'default',
+        labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),

package/emotion/cjs/examples/plasma_b2c/components/Header/Header.config.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _react = /*#__PURE__*/require("@emotion/react");
+var _Header = /*#__PURE__*/require("../../../../components/Header");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _react.css)(_Header.headerTokens.headerArrowButtonColor, ":var(--text-primary);", _Header.headerTokens.headerArrowButtonBackgroundColor, ":var(--surface-clear);", _Header.headerTokens.headerArrowTransition, ":transform 0.15s ease-in-out;", _Header.headerTokens.headerTitleColor, ":var(--plasma-colors-primary);", _Header.headerTokens.headerBigTitleColor, ":var(--plasma-colors-primary);", _Header.headerTokens.headerBiggerTitleColor, ":var(--plasma-colors-primary);", _Header.headerTokens.headerLabelColor, ":var(--plasma-colors-secondary);", _Header.headerTokens.headerSubTitleColor, ":var(--plasma-colors-secondary);", _Header.headerTokens.headerCaptionColor, ":var(--plasma-colors-secondary);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9IZWFkZXIvSGVhZGVyLmNvbmZpZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXd0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vZXhhbXBsZXMvcGxhc21hX2IyYy9jb21wb25lbnRzL0hlYWRlci9IZWFkZXIuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBoZWFkZXJUb2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL0hlYWRlcic7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgICAgICBzaXplOiAnbScsXG4gICAgfSxcbiAgICB2YXJpYXRpb25zOiB7XG4gICAgICAgIHZpZXc6IHtcbiAgICAgICAgICAgIGRlZmF1bHQ6IGNzc2BcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJBcnJvd0J1dHRvbkNvbG9yfTogdmFyKC0tdGV4dC1wcmltYXJ5KTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJBcnJvd0J1dHRvbkJhY2tncm91bmRDb2xvcn06IHZhcigtLXN1cmZhY2UtY2xlYXIpO1xuXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dUcmFuc2l0aW9ufTogdHJhbnNmb3JtIDAuMTVzIGVhc2UtaW4tb3V0O1xuXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyVGl0bGVDb2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtcHJpbWFyeSk7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQmlnVGl0bGVDb2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtcHJpbWFyeSk7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQmlnZ2VyVGl0bGVDb2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtcHJpbWFyeSk7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyTGFiZWxDb2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtc2Vjb25kYXJ5KTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJTdWJUaXRsZUNvbG9yfTogdmFyKC0tcGxhc21hLWNvbG9ycy1zZWNvbmRhcnkpO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckNhcHRpb25Db2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtc2Vjb25kYXJ5KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgICAgIHNpemU6IHtcbiAgICAgICAgICAgIG06IGNzc2BcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJIZWlnaHR9OiAyLjI1cmVtO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlclBhZGRpbmdUb3B9OiAxLjYyNXJlbTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJQYWRkaW5nQm90dG9tfTogMC42MjVyZW07XG5cbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJMb2dvTWFyZ2luUmlnaHR9OiAwLjc1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dNYXJnaW5SaWdodH06IDFyZW07XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dJY29uU2l6ZX06IDEuNXJlbTtcblxuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlclRpdGxlTWFyZ2lufTogMC4xMjVyZW0gMDtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJCaWdUaXRsZU1hcmdpbn06IDAuNXJlbSAwO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckJpZ2dlclRpdGxlTWFyZ2lufTogMC41cmVtIDA7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyTGFiZWxNYXJnaW59OiAwLjM3NXJlbSAwO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlclN1YlRpdGxlTWFyZ2lufTogMC4xMjVyZW0gMDtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJDYXB0aW9uTWFyZ2lufTogMC4yNXJlbSAwO1xuXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dIZWlnaHR9OiAyLjI1cmVtO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckFycm93UGFkZGluZ306IDAuNXJlbTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+    },
+    size: {
+      m: /*#__PURE__*/(0, _react.css)(_Header.headerTokens.headerHeight, ":2.25rem;", _Header.headerTokens.headerPaddingTop, ":1.625rem;", _Header.headerTokens.headerPaddingBottom, ":0.625rem;", _Header.headerTokens.headerLogoMarginRight, ":0.75rem;", _Header.headerTokens.headerArrowMarginRight, ":1rem;", _Header.headerTokens.headerArrowIconSize, ":1.5rem;", _Header.headerTokens.headerTitleMargin, ":0.125rem 0;", _Header.headerTokens.headerBigTitleMargin, ":0.5rem 0;", _Header.headerTokens.headerBiggerTitleMargin, ":0.5rem 0;", _Header.headerTokens.headerLabelMargin, ":0.375rem 0;", _Header.headerTokens.headerSubTitleMargin, ":0.125rem 0;", _Header.headerTokens.headerCaptionMargin, ":0.25rem 0;", _Header.headerTokens.headerArrowHeight, ":2.25rem;", _Header.headerTokens.headerArrowPadding, ":0.5rem;;label:plasma-new-hope__m;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9IZWFkZXIvSGVhZGVyLmNvbmZpZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQmtCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9IZWFkZXIvSGVhZGVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgaGVhZGVyVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9IZWFkZXInO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICAgICAgc2l6ZTogJ20nLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dCdXR0b25Db2xvcn06IHZhcigtLXRleHQtcHJpbWFyeSk7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQXJyb3dCdXR0b25CYWNrZ3JvdW5kQ29sb3J9OiB2YXIoLS1zdXJmYWNlLWNsZWFyKTtcblxuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckFycm93VHJhbnNpdGlvbn06IHRyYW5zZm9ybSAwLjE1cyBlYXNlLWluLW91dDtcblxuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlclRpdGxlQ29sb3J9OiB2YXIoLS1wbGFzbWEtY29sb3JzLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckJpZ1RpdGxlQ29sb3J9OiB2YXIoLS1wbGFzbWEtY29sb3JzLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckJpZ2dlclRpdGxlQ29sb3J9OiB2YXIoLS1wbGFzbWEtY29sb3JzLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckxhYmVsQ29sb3J9OiB2YXIoLS1wbGFzbWEtY29sb3JzLXNlY29uZGFyeSk7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyU3ViVGl0bGVDb2xvcn06IHZhcigtLXBsYXNtYS1jb2xvcnMtc2Vjb25kYXJ5KTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJDYXB0aW9uQ29sb3J9OiB2YXIoLS1wbGFzbWEtY29sb3JzLXNlY29uZGFyeSk7XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgICAgICBzaXplOiB7XG4gICAgICAgICAgICBtOiBjc3NgXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVySGVpZ2h0fTogMi4yNXJlbTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJQYWRkaW5nVG9wfTogMS42MjVyZW07XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyUGFkZGluZ0JvdHRvbX06IDAuNjI1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyTG9nb01hcmdpblJpZ2h0fTogMC43NXJlbTtcblxuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckFycm93TWFyZ2luUmlnaHR9OiAxcmVtO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckFycm93SWNvblNpemV9OiAxLjVyZW07XG5cbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJUaXRsZU1hcmdpbn06IDAuMTI1cmVtIDA7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQmlnVGl0bGVNYXJnaW59OiAwLjVyZW0gMDtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJCaWdnZXJUaXRsZU1hcmdpbn06IDAuNXJlbSAwO1xuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckxhYmVsTWFyZ2lufTogMC4zNzVyZW0gMDtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJTdWJUaXRsZU1hcmdpbn06IDAuMTI1cmVtIDA7XG4gICAgICAgICAgICAgICAgJHtoZWFkZXJUb2tlbnMuaGVhZGVyQ2FwdGlvbk1hcmdpbn06IDAuMjVyZW0gMDtcblxuICAgICAgICAgICAgICAgICR7aGVhZGVyVG9rZW5zLmhlYWRlckFycm93SGVpZ2h0fTogMi4yNXJlbTtcbiAgICAgICAgICAgICAgICAke2hlYWRlclRva2Vucy5oZWFkZXJBcnJvd1BhZGRpbmd9OiAwLjVyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
+    }
+  }
+};

package/emotion/cjs/examples/plasma_b2c/components/Header/Header.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderArrow = void 0;
+Object.defineProperty(exports, "HeaderContent", {
+  enumerable: true,
+  get: function get() {
+    return _Header.HeaderContent;
+  }
+});
+exports.HeaderRoot = exports.HeaderLogo = void 0;
+Object.defineProperty(exports, "HeaderTitle", {
+  enumerable: true,
+  get: function get() {
+    return _Header.HeaderTitle;
+  }
+});
+exports.HeaderTitleWrapper = void 0;
+var _Header = /*#__PURE__*/require("../../../../components/Header");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Header2 = /*#__PURE__*/require("./Header.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Header.headerRootConfig, _Header2.config);
+var mergedLogoConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Header.headerLogoConfig);
+var mergedArrowConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Header.headerArrowConfig);
+var mergedTitleWrapperConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Header.headerTitleWrapperConfig);
+var HeaderRoot = exports.HeaderRoot = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var HeaderLogo = exports.HeaderLogo = /*#__PURE__*/(0, _engines.component)(mergedLogoConfig);
+var HeaderArrow = exports.HeaderArrow = /*#__PURE__*/(0, _engines.component)(mergedArrowConfig);
+var HeaderTitleWrapper = exports.HeaderTitleWrapper = /*#__PURE__*/(0, _engines.component)(mergedTitleWrapperConfig);

package/emotion/cjs/examples/plasma_b2c/components/Header/Header.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '../Button/Button';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { mergeConfig } from '../../../../engines';
+import { headerRootConfig } from '../../../../components/Header';
+import { IconMic } from '../../../../components/_Icon';
+
+import { config } from './Header.config';
+import { HeaderRoot, HeaderLogo, HeaderArrow, HeaderTitleWrapper, HeaderTitle, HeaderContent } from './Header';
+
+const meta: Meta<typeof HeaderRoot> = {
+    title: 'plasma_b2c/Header',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+type ContentComponentProps = {
+    contentType: string;
+    contentItemsNumber: number;
+    enableIcons: boolean;
+};
+
+type CustomAssemblyProps = {
+    variant: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    gradientColor: string;
+};
+
+const StyledContentGrid = styled.div<{ $colCount: number }>`
+    display: grid;
+    grid-template-columns: ${({ $colCount }) => `repeat(${$colCount}, max-content)`};
+    grid-column-gap: 0.75rem;
+`;
+
+const Content = ({ contentItemsNumber, enableIcons }: ContentComponentProps) => {
+    const contentItems = Array(contentItemsNumber).fill(0);
+
+    return (
+        <StyledContentGrid $colCount={contentItems.length}>
+            {contentItems.map((_, i) => (
+                <Button
+                    key={`item:${i}`}
+                    size="s"
+                    view="clear"
+                    contentLeft={enableIcons && <IconMic color="inherit" size="s" />}
+                    text="Button"
+                />
+            ))}
+        </StyledContentGrid>
+    );
+};
+
+const StoryCustomAssembly = ({
+    variant,
+    title,
+    subtitle,
+    label,
+    gradientColor,
+    ...rest
+}: CustomAssemblyProps & ContentComponentProps) => {
+    const [isBack, setIsBack] = useState(true);
+
+    const onBackClick = () => {
+        action('onBackClick')();
+        setIsBack(false);
+    };
+
+    const onMinimizeClick = () => {
+        action('onMinimizeClick')();
+        setIsBack(true);
+    };
+
+    return (
+        <HeaderRoot gradientColor={gradientColor} {...rest} style={{ marginLeft: '40px' }}>
+            {isBack ? (
+                <HeaderArrow onClick={onBackClick} />
+            ) : (
+                <HeaderArrow arrow="minimize" onClick={onMinimizeClick} />
+            )}
+            <HeaderLogo src="./images/320_320_9.jpg" alt="Logo" />
+            {variant === 'title+subtitle' && (
+                <>
+                    <HeaderTitleWrapper title={title} subTitle={subtitle} />
+                </>
+            )}
+            {variant === 'label+title' && (
+                <>
+                    <HeaderTitleWrapper title={title} label={label} />
+                </>
+            )}
+            {variant === 'title' && <HeaderTitle>{title}</HeaderTitle>}
+            <HeaderContent>
+                <Content {...rest} />
+            </HeaderContent>
+        </HeaderRoot>
+    );
+};
+
+export const CustomAssembly: StoryObj<CustomAssemblyProps & ContentComponentProps> = {
+    argTypes: {
+        variant: {
+            options: ['title+subtitle', 'label+title', 'title'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(headerRootConfig, config)),
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        variant: 'title+subtitle',
+        title: 'Header title text',
+        subtitle: 'Subtitle text',
+        label: 'Label text',
+        gradientColor: '#F69555',
+        contentItemsNumber: 3,
+        enableIcons: true,
+    },
+    render: (args) => <StoryCustomAssembly {...args} />,
+};