diff --git a/utils/plasma-docs-ui/package.json b/utils/plasma-docs-ui/package.json
index a372855bb..8850e1959 100644
--- a/utils/plasma-docs-ui/package.json
+++ b/utils/plasma-docs-ui/package.json
@@ -28,9 +28,7 @@
"publishConfig": {
"access": "restricted"
},
- "files": [
- "lib"
- ],
+ "files": ["lib"],
"dependencies": {
"@sberdevices/plasma-core": "1.27.3",
"@sberdevices/plasma-tokens-b2b": "1.1.0",
diff --git a/website/plasma-web-docs/package-lock.json b/website/plasma-web-docs/package-lock.json
index fae14dffa..a3f176615 100644
--- a/website/plasma-web-docs/package-lock.json
+++ b/website/plasma-web-docs/package-lock.json
@@ -2234,11 +2234,12 @@
}
},
"@sberdevices/plasma-docs-ui": {
- "version": "0.5.0",
- "resolved": "https://registry.npmjs.org/@sberdevices/plasma-docs-ui/-/plasma-docs-ui-0.5.0.tgz",
- "integrity": "sha512-uzjhbD9reuZnPy1Av6aNmw/m3deVqGoDt5p7EC7VCAbV9wkxbfIh3tuzmFh20TMFNWPpLoGRKNGHrvaFrxEj6g==",
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/@sberdevices/plasma-docs-ui/-/plasma-docs-ui-0.6.0.tgz",
+ "integrity": "sha512-UeENaQIdCpcrgSF6XgBvWiBnzI6L2blm7vqroPRuAW0z01vOV0SBU7gBTL3XMB/cJFN5vzF17kQSpv8/4PaPpQ==",
"requires": {
"@sberdevices/plasma-core": "1.27.3",
+ "@sberdevices/plasma-tokens-b2b": "1.1.0",
"@sberdevices/plasma-web": "1.73.1",
"@types/marked": "3.0.1",
"codesandbox": "2.2.3",
@@ -2285,9 +2286,9 @@
}
},
"@sberdevices/plasma-icons": {
- "version": "1.71.0",
- "resolved": "https://registry.npmjs.org/@sberdevices/plasma-icons/-/plasma-icons-1.71.0.tgz",
- "integrity": "sha512-o98DLWza1I8+zOgG4Nu382I4mGdp7dFVWg5y93LBlxEqznSXnVGGGO3nKn83cUZ1GxToLyANvFnvdWxxa+Qd7A=="
+ "version": "1.73.0",
+ "resolved": "https://registry.npmjs.org/@sberdevices/plasma-icons/-/plasma-icons-1.73.0.tgz",
+ "integrity": "sha512-geqn+5Jy2s+7S6hzXPYMHo3kh1LtBUaL8s38LDXxmUJNd3W+YCjWxahccp9Pj0ehrR/potTIjX5+ZZAm68mEjg=="
},
"@sberdevices/plasma-tokens-b2b": {
"version": "1.1.0",
@@ -2300,20 +2301,21 @@
"integrity": "sha512-xdrD2tfS79hSYQCgbax8M/XhxITq/EMrJeI0qKNOuRFjjw3PpWp0jWvTSTN7souf8UhlxfObqtICB1/jVliCdA=="
},
"@sberdevices/plasma-web": {
- "version": "1.83.0",
- "resolved": "https://registry.npmjs.org/@sberdevices/plasma-web/-/plasma-web-1.83.0.tgz",
- "integrity": "sha512-3n8q4IxMkx7c8B8atsrNovv4lyB5FSoG2d3zDXY37dyadlXTlW8GYUh/CzUHxlvfylRGDszuuxg7qvHZ5eqQSQ==",
+ "version": "1.90.0",
+ "resolved": "https://registry.npmjs.org/@sberdevices/plasma-web/-/plasma-web-1.90.0.tgz",
+ "integrity": "sha512-BRZTUvGwnsk8J8xxWGh4D7Jdo2Ir9G7zUGfa9wWIbxUxeRKdKxdU8QHnj9a2H+HKchSDvKXwvjzJW/Uez8k2cw==",
"requires": {
"@popperjs/core": "2.9.2",
- "@sberdevices/plasma-core": "1.53.0",
+ "@sberdevices/plasma-core": "1.54.0",
+ "react-focus-lock": "2.8.1",
"react-popper": "2.2.5",
"storeon": "3.1.4"
},
"dependencies": {
"@sberdevices/plasma-core": {
- "version": "1.53.0",
- "resolved": "https://registry.npmjs.org/@sberdevices/plasma-core/-/plasma-core-1.53.0.tgz",
- "integrity": "sha512-EsJV5+npyLUAUKuKBbkHqJ4jL05cxedkj9koQseBLcW+CYnCmdKmqs5UypeqqIQEJndteEQx8qQUNUto0qvzTQ==",
+ "version": "1.54.0",
+ "resolved": "https://registry.npmjs.org/@sberdevices/plasma-core/-/plasma-core-1.54.0.tgz",
+ "integrity": "sha512-dPA7YH9m87uunRWKuolfToD8SyRCqgowTmTgxVYSc5bv3NrhxMmsqxVMIhfaPT1TkjoI/dQqnSG+V/5mozXu6Q==",
"requires": {
"focus-visible": "5.2.0",
"lodash.throttle": "4.1.1"
@@ -4188,9 +4190,9 @@
}
},
"ansi-regex": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
- "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+ "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="
},
"axios": {
"version": "0.18.1",
@@ -5286,6 +5288,11 @@
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
},
+ "detect-node-es": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+ "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+ },
"detect-port": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@@ -6177,6 +6184,14 @@
"fbjs": "^3.0.0"
}
},
+ "focus-lock": {
+ "version": "0.10.2",
+ "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz",
+ "integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==",
+ "requires": {
+ "tslib": "^2.0.3"
+ }
+ },
"focus-visible": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
@@ -7496,9 +7511,9 @@
"integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
},
"ansi-regex": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
- "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+ "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="
},
"chalk": {
"version": "2.4.2",
@@ -10159,6 +10174,14 @@
"pure-color": "^1.2.0"
}
},
+ "react-clientside-effect": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
+ "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
+ "requires": {
+ "@babel/runtime": "^7.12.13"
+ }
+ },
"react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -10303,6 +10326,19 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
+ "react-focus-lock": {
+ "version": "2.8.1",
+ "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz",
+ "integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==",
+ "requires": {
+ "@babel/runtime": "^7.0.0",
+ "focus-lock": "^0.10.2",
+ "prop-types": "^15.6.2",
+ "react-clientside-effect": "^1.2.5",
+ "use-callback-ref": "^1.2.5",
+ "use-sidecar": "^1.0.5"
+ }
+ },
"react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
@@ -12747,6 +12783,11 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
+ "use-callback-ref": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
+ "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
+ },
"use-composed-ref": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
@@ -12768,6 +12809,22 @@
"use-isomorphic-layout-effect": "^1.0.0"
}
},
+ "use-sidecar": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
+ "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
+ "requires": {
+ "detect-node-es": "^1.1.0",
+ "tslib": "^1.9.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+ }
+ }
+ },
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts b/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts
new file mode 100644
index 000000000..9fbf1db9c
--- /dev/null
+++ b/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { PlaygroundPreview as BasePreview } from '@sberdevices/plasma-docs-ui';
+import { light as b2bLight, dark as b2bDark } from '@sberdevices/plasma-tokens-b2b/themes';
+import { light as b2cLight, dark as b2cDark } from '@sberdevices/plasma-tokens-b2c/themes';
+
+const themes = {
+ b2b: {
+ light: b2bLight[':root'],
+ dark: b2bDark[':root'],
+ },
+ b2c: {
+ light: b2cLight[':root'],
+ dark: b2cDark[':root'],
+ },
+};
+
+export const PlaygroundPreview = styled(BasePreview)<{ theme?: 'light' | 'dark'; pckg?: 'b2b' | 'b2c' }>`
+ ${({ theme = 'light', pckg = 'b2b' }) => themes[pckg][theme]}
+`;
diff --git a/website/plasma-web-docs/src/theme/Playground/index.tsx b/website/plasma-web-docs/src/theme/Playground/index.tsx
index 8c80aafa6..c91ad2d46 100644
--- a/website/plasma-web-docs/src/theme/Playground/index.tsx
+++ b/website/plasma-web-docs/src/theme/Playground/index.tsx
@@ -1,25 +1,19 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import styled from 'styled-components';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useIsBrowser from '@docusaurus/useIsBrowser';
import usePrismTheme from '@theme/hooks/usePrismTheme';
import useThemeContext from '@theme/hooks/useThemeContext';
-import { PlaygroundPreview } from '@sberdevices/plasma-docs-ui';
-import { light, dark } from '@sberdevices/plasma-tokens-b2b/themes';
+import { Button } from '@sberdevices/plasma-web';
import Translate from '@docusaurus/Translate';
import clsx from 'clsx';
import { CodeSandbox } from '../../components';
+import { PlaygroundPreview } from './PlaygroundPreview';
import styles from './styles.module.css';
-const lightTheme = light[':root'];
-const darkTheme = dark[':root'];
-const StyledPreview = styled(PlaygroundPreview)<{ theme?: 'light' | 'dark' }>`
- ${({ theme = 'light' }) => (theme === 'light' ? lightTheme : darkTheme)}
-`;
-
const StyledWrap = styled.div`
width: fit-content;
position: absolute;
@@ -44,16 +38,26 @@ const Header: FC = ({ children }) => {
};
const ResultWithHeader: FC = () => {
+ const [pckg, setPackage] = useState('b2b');
const { isDarkTheme } = useThemeContext();
return (
<>
-
- Result
-
+
-
+
);