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/CornerRadius.tsx

@@ -0,0 +1,99 @@
+/* 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 CornerRadiusProps = {
+  theme: Theme
+}
+
+function copyToClipboard(text: string) {
+  copy(text)
+}
+
+export function CornerRadius({ theme }: CornerRadiusProps) {
+  // Filter corner radius tokens
+  const cornerRadiusTokens: Theme = {}
+  for (const [k, v] of Object.entries(theme)) {
+    if (k.startsWith('Corner radius/')) {
+      cornerRadiusTokens[k] = v as ThemeValue
+    }
+  }
+
+  // Sort by value
+  const sortedTokens = Object.entries(cornerRadiusTokens).sort((a, b) => {
+    const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0
+    const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0
+    return aValue - bValue
+  })
+
+  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}>Pixels</th>
+              <th className={tableStyles.tableHeaderCell}>
+                Visual representation
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedTokens.map(([k, v]) => {
+              const value = typeof v.resolved === 'number' ? v.resolved : 0
+              const valuePx = `${value}px`
+
+              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}>
+                    <code
+                      className={tableStyles.value}
+                      onClick={() => {
+                        copyToClipboard(valuePx)
+                      }}
+                      title="Click to copy"
+                    >
+                      {valuePx}
+                    </code>
+                  </td>
+                  <td className={tableStyles.tableCell}>
+                    <div
+                      className={tableStyles.borderRadiusPreview}
+                      style={{
+                        borderRadius: `${value}px`,
+                      }}
+                    >
+                      {valuePx}
+                    </div>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}