feat(plasma-web-docs): Switch between b2b and b2c

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",

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]}
+`;

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 (
         <>
             <Header>
-                <Translate id="theme.Playground.result" description="The result label of the live codeblocks">
-                    Result
-                </Translate>
+                <Button
+                    size="s"
+                    text="B2B"
+                    onClick={() => setPackage('b2b')}
+                    view={pckg === 'b2b' ? 'primary' : 'secondary'}
+                />
+                <Button
+                    size="s"
+                    text="B2C"
+                    onClick={() => setPackage('b2c')}
+                    view={pckg === 'b2c' ? 'primary' : 'secondary'}
+                />
             </Header>
-            <LivePreview Component={StyledPreview} theme={isDarkTheme ? 'dark' : 'light'} />
+            <LivePreview Component={PlaygroundPreview} theme={isDarkTheme ? 'dark' : 'light'} pckg={pckg} />
             <LiveError />
         </>
     );