@salutejs/sdds-cs 0.318.1-canary.2030.15843645408.0 → 0.318.1-canary.2036.15817315131.0

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

@@ -0,0 +1,243 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import {
+    DsplL,
+    DsplM,
+    DsplS,
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    BodyL,
+    BodyM,
+    BodyS,
+    BodyXS,
+    BodyXXS,
+    TextL,
+    TextM,
+    TextS,
+    TextXS,
+} from '.';
+
+const meta: Meta = {
+    title: 'Data Display/Typography',
+    component: DsplL,
+    argTypes: {
+        ...disableProps(['size', 'bold', 'medium', 'as', 'forwardedAs', 'isNumeric']),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Dspl: Story = {
+    render: (props) => (
+        <>
+            <DsplL bold={false} {...props}>
+                DsplL
+            </DsplL>
+            <DsplL {...props}>DsplL Bold</DsplL>
+            <DsplL medium {...props}>
+                DsplL Medium
+            </DsplL>
+            <DsplL bold={false} isNumeric {...props}>
+                1234567890
+            </DsplL>
+            <DsplM bold={false} {...props}>
+                DsplM
+            </DsplM>
+            <DsplM {...props}>DsplM Bold</DsplM>
+            <DsplM medium {...props}>
+                DsplM Medium
+            </DsplM>
+            <DsplM bold={false} isNumeric {...props}>
+                1234567890
+            </DsplM>
+            <DsplS bold={false} {...props}>
+                DsplS
+            </DsplS>
+            <DsplS {...props}>DsplS Bold</DsplS>
+            <DsplS medium {...props}>
+                DsplS Medium
+            </DsplS>
+            <DsplS bold={false} isNumeric {...props}>
+                1234567890
+            </DsplS>
+        </>
+    ),
+};
+
+export const H: Story = {
+    render: (props) => (
+        <>
+            <H1 bold={false} {...props}>
+                H1
+            </H1>
+            <H1 {...props}>H1 Bold</H1>
+            <H1 medium {...props}>
+                H1 Medium
+            </H1>
+            <H1 bold={false} isNumeric {...props}>
+                1234567890
+            </H1>
+            <H2 bold={false} {...props}>
+                H2
+            </H2>
+            <H2 {...props}>H2 Bold</H2>
+            <H2 medium {...props}>
+                H2 Medium
+            </H2>
+            <H2 bold={false} isNumeric {...props}>
+                1234567890
+            </H2>
+            <H3 bold={false} {...props}>
+                H3
+            </H3>
+            <H3 {...props}>H3 Bold</H3>
+            <H3 medium {...props}>
+                H3 Medium
+            </H3>
+            <H3 bold={false} isNumeric {...props}>
+                1234567890
+            </H3>
+            <H4 bold={false} {...props}>
+                H4
+            </H4>
+            <H4 {...props}>H4 Bold</H4>
+            <H4 medium {...props}>
+                H4 Medium
+            </H4>
+            <H4 bold={false} isNumeric {...props}>
+                1234567890
+            </H4>
+            <H5 bold={false} {...props}>
+                H5
+            </H5>
+            <H5 {...props}>H5 Bold</H5>
+            <H5 medium {...props}>
+                H5 Medium
+            </H5>
+            <H5 bold={false} isNumeric {...props}>
+                1234567890
+            </H5>
+        </>
+    ),
+};
+
+export const Body: Story = {
+    render: (props) => (
+        <>
+            <BodyL {...props}>BodyL</BodyL>
+            <BodyL bold {...props}>
+                BodyL Bold
+            </BodyL>
+            <BodyL medium {...props}>
+                BodyL Medium
+            </BodyL>
+            <BodyL isNumeric {...props}>
+                1234567890
+            </BodyL>
+            <BodyM {...props}>BodyM</BodyM>
+            <BodyM bold {...props}>
+                BodyM Bold
+            </BodyM>
+            <BodyM medium {...props}>
+                BodyM Medium
+            </BodyM>
+            <BodyM isNumeric {...props}>
+                1234567890
+            </BodyM>
+            <BodyS {...props}>BodyS</BodyS>
+            <BodyS bold {...props}>
+                BodyS Bold
+            </BodyS>
+            <BodyS medium {...props}>
+                BodyS Medium
+            </BodyS>
+            <BodyS isNumeric {...props}>
+                1234567890
+            </BodyS>
+            <BodyXS {...props}>BodyXS</BodyXS>
+            <BodyXS bold {...props}>
+                BodyXS Bold
+            </BodyXS>
+            <BodyXS medium {...props}>
+                BodyXS Medium
+            </BodyXS>
+            <BodyXS isNumeric {...props}>
+                1234567890
+            </BodyXS>
+            <BodyXXS {...props}>BodyXXS</BodyXXS>
+            <BodyXXS bold {...props}>
+                BodyXXS Bold
+            </BodyXXS>
+            <BodyXXS medium {...props}>
+                BodyXXS Medium
+            </BodyXXS>
+            <BodyXXS isNumeric {...props}>
+                1234567890
+            </BodyXXS>
+        </>
+    ),
+};
+
+export const Text: Story = {
+    render: (props) => (
+        <>
+            <TextL {...props}>TextL</TextL>
+            <TextL bold {...props}>
+                TextL Bold
+            </TextL>
+            <TextL medium {...props}>
+                TextL Medium
+            </TextL>
+            <TextL isNumeric {...props}>
+                1234567890
+            </TextL>
+            <TextM {...props}>TextM</TextM>
+            <TextM bold {...props}>
+                TextM Bold
+            </TextM>
+            <TextM medium {...props}>
+                TextM Medium
+            </TextM>
+            <TextM isNumeric {...props}>
+                1234567890
+            </TextM>
+            <TextS {...props}>TextS</TextS>
+            <TextS bold {...props}>
+                TextS Bold
+            </TextS>
+            <TextS medium {...props}>
+                TextS Medium
+            </TextS>
+            <TextS isNumeric {...props}>
+                1234567890
+            </TextS>
+            <TextXS {...props}>TextXS</TextXS>
+            <TextXS bold {...props}>
+                TextXS Bold
+            </TextXS>
+            <TextXS medium {...props}>
+                TextXS Medium
+            </TextXS>
+            <TextXS isNumeric {...props}>
+                1234567890
+            </TextXS>
+        </>
+    ),
+};

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

@@ -1,64 +1,108 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    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 BodyL () {
-        return _Typography.BodyL;
-    },
-    get BodyM () {
-        return _Typography.BodyM;
-    },
-    get BodyS () {
-        return _Typography.BodyS;
-    },
-    get BodyXS () {
-        return _Typography.BodyXS;
-    },
-    get BodyXXS () {
-        return _Typography.BodyXXS;
-    },
-    get DsplL () {
-        return _Typography.DsplL;
-    },
-    get DsplM () {
-        return _Typography.DsplM;
-    },
-    get DsplS () {
-        return _Typography.DsplS;
-    },
-    get H1 () {
-        return _Typography.H1;
-    },
-    get H2 () {
-        return _Typography.H2;
-    },
-    get H3 () {
-        return _Typography.H3;
-    },
-    get H4 () {
-        return _Typography.H4;
-    },
-    get H5 () {
-        return _Typography.H5;
-    },
-    get TextL () {
-        return _Typography.TextL;
-    },
-    get TextM () {
-        return _Typography.TextM;
-    },
-    get TextS () {
-        return _Typography.TextS;
-    },
-    get TextXS () {
-        return _Typography.TextXS;
-    }
-});
-var _Typography = require("./Typography");
+  value: true
+});
+Object.defineProperty(exports, "BodyL", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.BodyL;
+  }
+});
+Object.defineProperty(exports, "BodyM", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.BodyM;
+  }
+});
+Object.defineProperty(exports, "BodyS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.BodyS;
+  }
+});
+Object.defineProperty(exports, "BodyXS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.BodyXS;
+  }
+});
+Object.defineProperty(exports, "BodyXXS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.BodyXXS;
+  }
+});
+Object.defineProperty(exports, "DsplL", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.DsplL;
+  }
+});
+Object.defineProperty(exports, "DsplM", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.DsplM;
+  }
+});
+Object.defineProperty(exports, "DsplS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.DsplS;
+  }
+});
+Object.defineProperty(exports, "H1", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H1;
+  }
+});
+Object.defineProperty(exports, "H2", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H2;
+  }
+});
+Object.defineProperty(exports, "H3", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H3;
+  }
+});
+Object.defineProperty(exports, "H4", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H4;
+  }
+});
+Object.defineProperty(exports, "H5", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H5;
+  }
+});
+Object.defineProperty(exports, "TextL", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.TextL;
+  }
+});
+Object.defineProperty(exports, "TextM", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.TextM;
+  }
+});
+Object.defineProperty(exports, "TextS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.TextS;
+  }
+});
+Object.defineProperty(exports, "TextXS", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.TextXS;
+  }
+});
+var _Typography = /*#__PURE__*/require("./Typography");

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

@@ -1,50 +1,18 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _sdds_cs = /*#__PURE__*/require("@salutejs/sdds-themes/tokens/sdds_cs");
+var _templateObject, _templateObject2;
+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 = {
+  variations: {
+    view: {
+      onLight: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", "\n            "])), _sdds_cs.viewContainer.light),
+      onDark: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", "\n            "])), _sdds_cs.viewContainer.dark)
     }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
-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                ",
-        "\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        "\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    variations: {
-        view: {
-            onLight: (0, _emotion.css)(_templateObject(), _sdds_cs.viewContainer.light),
-            onDark: (0, _emotion.css)(_templateObject1(), _sdds_cs.viewContainer.dark)
-        }
-    }
-};
+  }
+};

package/emotion/cjs/components/ViewContainer/ViewContainer.js

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

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

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "ViewContainer", {
-    enumerable: true,
-    get: function() {
-        return _ViewContainer.ViewContainer;
-    }
+  enumerable: true,
+  get: function get() {
+    return _ViewContainer.ViewContainer;
+  }
 });
-var _ViewContainer = require("./ViewContainer");
+var _ViewContainer = /*#__PURE__*/require("./ViewContainer");