chore: update storybook docs

packages/lsd-react/.storybook/preview.tsx

@@ -38,7 +38,7 @@ const useGlobals = () => {
     themeFont: {
       defaultValue: 'sans-serif',
       description: 'Theme font',
-      name: 'Theme Font',
+      name: 'Theme font',
       toolbar: {
         icon: '',
         items: [
@@ -148,6 +148,9 @@ const preview: Preview = {
           typeof meta?.parameters?.docs?.controls === 'undefined' ||
           meta?.parameters?.docs?.controls === true
 
+        const storyId = new URLSearchParams(window.location.search).get(
+          'storyId',
+        ) as string
         const embedded =
           new URLSearchParams(window.location.search).get('embedded') === 'true'
         const globalControls =
@@ -193,7 +196,13 @@ const preview: Preview = {
                   ))}
                 </div>
               )}
-              <Canvas className="canvas" withToolbar={!hideToolbar} />
+              <Canvas
+                className="canvas"
+                withToolbar={!hideToolbar}
+                {...(storyId && stories[storyId]
+                  ? { story: stories[storyId] as any }
+                  : {})}
+              />
               {controls && !hideControls && <Controls />}
             </div>
             <Global

packages/lsd-react/src/components/Theme/ThemeProvider.stories.tsx

@@ -4,7 +4,7 @@ import {
   SpacingDesignTokens,
   TypographyDesignTokens,
 } from '../../docs/components/DesignTokens'
-import { Typography } from '../Typography'
+import { Typography as TypographyComponent } from '../Typography'
 import { ThemeProvider, ThemeProviderProps } from './ThemeProvider'
 
 const subtitle = ``
@@ -28,18 +28,18 @@ export const Root: StoryObj<ThemeProviderProps> = {
   render: (args) => {
     return (
       <div>
-        <Typography variant="h6" component="h2">
+        <TypographyComponent variant="h6" component="h2">
           Colour
-        </Typography>
+        </TypographyComponent>
         <ColorDesignTokens />
-        <Typography variant="h6" component="h2">
+        <TypographyComponent variant="h6" component="h2">
           Spacing
-        </Typography>
+        </TypographyComponent>
         <SpacingDesignTokens />
 
-        <Typography variant="h6" component="h2">
+        <TypographyComponent variant="h6" component="h2">
-          Typography
+          TypographyComponent
-        </Typography>
+        </TypographyComponent>
         <TypographyDesignTokens />
       </div>
     )
@@ -54,3 +54,48 @@ export const Root: StoryObj<ThemeProviderProps> = {
 
   args: {},
 }
+
+export const Colors: StoryObj<ThemeProviderProps> = {
+  render: (args) => {
+    return <ColorDesignTokens />
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+
+  args: {},
+}
+
+export const Spacing: StoryObj<ThemeProviderProps> = {
+  render: (args) => {
+    return <SpacingDesignTokens />
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+
+  args: {},
+}
+
+export const Typography: StoryObj<ThemeProviderProps> = {
+  render: (args) => {
+    return <TypographyDesignTokens />
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+
+  args: {},
+}