Merged in feat/SW-3636-storybook-structure (pull request #3309)

feat(SW-3636): Storybook structure

* New sections in Storybook sidebar

* Group Storybook content files and add token files for spacing, border radius and shadows


Approved-by: Joakim Jäderberg

packages/design-system/.storybook/content/Shadow.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import copy from 'copy-to-clipboard'
+
+import { kebabify } from '../../generate/utils'
+
+import tableStyles from './tokens.module.css'
+
+type ThemeValue = {
+  resolved: string | number
+  alias?: string | number
+}
+
+type Theme = Record<string, ThemeValue>
+
+type ShadowProps = {
+  theme: Theme
+}
+
+function copyToClipboard(text: string) {
+  copy(text)
+}
+
+export function Shadow({ theme }: ShadowProps) {
+  // Filter shadow tokens
+  const shadowTokens: Theme = {}
+  for (const [k, v] of Object.entries(theme)) {
+    if (k.startsWith('BoxShadow-')) {
+      shadowTokens[k] = v as ThemeValue
+    }
+  }
+
+  // Sort by level
+  const sortedTokens = Object.entries(shadowTokens).sort((a, b) => {
+    const aLevel = parseInt(a[0].match(/\d+/)?.[0] || '0')
+    const bLevel = parseInt(b[0].match(/\d+/)?.[0] || '0')
+    return aLevel - bLevel
+  })
+
+  return (
+    <div>
+      <div className={tableStyles.tableContainer}>
+        <table className={tableStyles.table}>
+          <thead className={tableStyles.tableHeader}>
+            <tr>
+              <th className={tableStyles.tableHeaderCell}>Token</th>
+              <th className={tableStyles.tableHeaderCell}>Level</th>
+              <th className={tableStyles.tableHeaderCell}>Value</th>
+              <th className={tableStyles.tableHeaderCell}>
+                Visual representation
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedTokens.map(([k, v]) => {
+              const shadowValue =
+                typeof v.resolved === 'string' ? v.resolved : ''
+              const level = k.match(/\d+/)?.[0] || '0'
+
+              return (
+                <tr key={k} className={tableStyles.tableRow}>
+                  <td className={tableStyles.tableCell}>
+                    <code
+                      className={tableStyles.tokenName}
+                      onClick={() => {
+                        copyToClipboard(`var(--${kebabify(k)})`)
+                      }}
+                      title="Click to copy CSS variable"
+                    >
+                      {kebabify(k)}
+                    </code>
+                  </td>
+                  <td className={tableStyles.tableCell}>
+                    <span className={tableStyles.value}>Level {level}</span>
+                  </td>
+                  <td className={tableStyles.tableCell}>
+                    <code
+                      className={tableStyles.value}
+                      onClick={() => {
+                        copyToClipboard(shadowValue)
+                      }}
+                      title="Click to copy"
+                      style={{
+                        fontSize: '0.75rem',
+                        wordBreak: 'break-all',
+                      }}
+                    >
+                      {shadowValue}
+                    </code>
+                  </td>
+                  <td className={tableStyles.tableCell}>
+                    <div
+                      className={tableStyles.shadowPreview}
+                      style={{
+                        boxShadow: shadowValue,
+                      }}
+                    />
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}