docs: 📝 Add Designsystemet data attr controls to Showcase in Storybook (

#2689) fixes #2690 Any suggestions on labeling for the `ToggleGroup`?
digdir · Oct 30, 2024 · 35049eb · 35049eb
1 parent 42fc24c
commit 35049eb
Show file tree

Hide file tree

Showing 3 changed files with 341 additions and 306 deletions.
diff --git a/apps/storybook/.storybook/manager-head.html b/apps/storybook/.storybook/manager-head.html
@@ -44,6 +44,10 @@
     font-family: 'Inter', sans-serif;
   }
 
+  iframe {
+    color-scheme: auto;
+  }
+
   .ds-focus:focus-visible {
     --dsc-focus-border-width: 3px;
 

diff --git a/packages/react/stories/showcase.module.css b/packages/react/stories/showcase.module.css
@@ -7,7 +7,20 @@
   margin: 0 auto;
   background-color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
-  padding: 1rem;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  grid-template-rows: auto;
+  gap: var(--ds-spacing-4);
+  padding-bottom: var(--ds-spacing-2);
+  align-items: baseline;
+}
+
+.controls code {
+  background: var(--ds-color-neutral-background-subtle);
+  padding: var(--ds-spacing-1);
 }
 
 .card {