@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/theme/Grid.stories.ts

@@ -0,0 +1,302 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Grid',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Grid column utilities for defining the number of columns in a grid layout.
+ * Use for responsive multi-column layouts like card grids and dashboards.
+ */
+export const Columns: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Columns</h2>
+          <p class="text-sm text-content-on-surface-muted">Control the number of grid columns. Click class name to copy.</p>
+        </div>
+        
+        <div class="space-y-8">
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid grid-cols-2', this)">grid grid-cols-2</code>
+            <div class="grid grid-cols-2 gap-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid grid-cols-3', this)">grid grid-cols-3</code>
+            <div class="grid grid-cols-3 gap-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">6</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid grid-cols-4', this)">grid grid-cols-4</code>
+            <div class="grid grid-cols-4 gap-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">6</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">7</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">8</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Column span utilities for items that need to span multiple columns.
+ * Use for featured content, headers, or elements that need more horizontal space.
+ */
+export const ColumnSpan: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Column Span</h2>
+          <p class="text-sm text-content-on-surface-muted">Make items span multiple columns. Click class name to copy.</p>
+        </div>
+        
+        <div class="space-y-8">
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('col-span-2', this)">col-span-2</code>
+            <div class="grid grid-cols-4 gap-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 col-span-2 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">span-2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 col-span-2 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">span-2</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('col-span-full', this)">col-span-full</code>
+            <div class="grid grid-cols-4 gap-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 col-span-full bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">span-full</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Grid gap utilities for controlling spacing between grid items.
+ * Use consistent gap values for visual harmony across grid layouts.
+ */
+export const Gap: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Gap</h2>
+          <p class="text-sm text-content-on-surface-muted">Control spacing between grid items. Click class name to copy.</p>
+        </div>
+        
+        <div class="space-y-8">
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid gap-1', this)">grid gap-1</code>
+            <div class="grid grid-cols-3 gap-1 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid gap-4', this)">grid gap-4</code>
+            <div class="grid grid-cols-3 gap-4 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid gap-8', this)">grid gap-8</code>
+            <div class="grid grid-cols-3 gap-8 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid gap-x-4 gap-y-2', this)">grid gap-x-4 gap-y-2</code>
+            <div class="grid grid-cols-3 gap-x-4 gap-y-2 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
+              <div class="h-16 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">6</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Auto-fit and auto-fill grid templates for responsive layouts.
+ * Creates flexible grids that automatically adjust the number of columns based on available space.
+ */
+export const AutoColumns: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Auto Columns</h2>
+          <p class="text-sm text-content-on-surface-muted">Create responsive grids with auto-fit. Click class name to copy.</p>
+        </div>
+        
+        <div class="space-y-8">
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))]', this)">grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))]</code>
+            <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4 p-4 bg-background-surface-muted rounded-md">
+              <div class="h-24 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="h-24 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="h-24 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+              <div class="h-24 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">4</div>
+              <div class="h-24 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">5</div>
+            </div>
+            <p class="text-sm text-content-on-surface-muted mt-2">Resize the window to see columns adjust automatically.</p>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Place items utilities for positioning all grid items at once.
+ * Combines justify and align for quick centering and positioning.
+ */
+export const PlaceItems: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Place Items</h2>
+          <p class="text-sm text-content-on-surface-muted">Position all grid items at once. Click class name to copy.</p>
+        </div>
+        
+        <div class="space-y-8">
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid place-items-center', this)">grid place-items-center</code>
+            <div class="grid grid-cols-3 place-items-center gap-4 p-4 bg-background-surface-muted rounded-md h-48">
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid place-items-start', this)">grid place-items-start</code>
+            <div class="grid grid-cols-3 place-items-start gap-4 p-4 bg-background-surface-muted rounded-md h-48">
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+          
+          <div>
+            <code class="copy-btn text-xs text-content-on-surface-muted block mb-2 px-1 py-0.5 rounded w-fit" onclick="copyToClipboard('grid place-items-end', this)">grid place-items-end</code>
+            <div class="grid grid-cols-3 place-items-end gap-4 p-4 bg-background-surface-muted rounded-md h-48">
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">1</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">2</div>
+              <div class="w-12 h-12 bg-background-accent-default rounded flex items-center justify-center text-content-on-accent-default">3</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/theme/Overlay.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Overlay',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Surface overlay colors for modal backdrops and scrim layers.
+ * Modal-overlay dims content behind dialogs, transparent is for invisible overlay areas.
+ */
+export const Surface: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">surface</h2>
+          <p class="text-sm text-content-on-surface-muted">Overlay colors for modals and backdrops. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-surface-modal-overlay border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">modal-overlay</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-modal-overlay', this)">bg-overlay-surface-modal-overlay</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-surface-transparent border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">transparent</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-transparent', this)">bg-overlay-surface-transparent</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Hover overlay colors applied to interactive elements on mouse hover.
+ * These create visual feedback without changing the element's background color.
+ */
+export const Hover: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">hover</h2>
+          <p class="text-sm text-content-on-surface-muted">Overlay colors for hover states on interactive elements. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-primary-button-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary-button-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-primary-button-hover', this)">bg-overlay-hover-primary-button-hover</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-secondary-button-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary-button-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-secondary-button-hover', this)">bg-overlay-hover-secondary-button-hover</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-default-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-default-hover', this)">bg-overlay-hover-default-hover</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};