controls labels

digdir · Oct 25, 2024 · d5a24c2 · d5a24c2
1 parent 703a38f
commit d5a24c2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/react/stories/showcase.module.css b/packages/react/stories/showcase.module.css
@@ -10,9 +10,12 @@
 }
 
 .controls {
-  display: flex;
-  gap: var(--ds-spacing-2);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  gap: var(--ds-spacing-4);
   padding-bottom: var(--ds-spacing-2);
+  align-items: baseline;
 }
 
 .card {

diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
@@ -62,21 +62,34 @@ export const Showcase: StoryFn = () => {
 
   return (
     <div>
-      <div className={classes.controls}>
+      <div className={classes.controls} data-size='sm'>
+        <Heading data-size='2xs'>
+          Størrelse
+          <code>(data-size)</code>
+        </Heading>
         <ToggleGroup value={size} onChange={(val) => setSize(val as Size)}>
           {sizes.map((size) => (
             <ToggleGroup.Item key={size} value={size}>
               {size}
             </ToggleGroup.Item>
           ))}
         </ToggleGroup>
+        <Heading data-size='2xs'>
+          Fargemodus
+          <code>(data-ds-color-mode)</code>
+        </Heading>
+
         <ToggleGroup value={colorMode} onChange={setColorMode}>
           {colorModes.map((colorMode) => (
             <ToggleGroup.Item key={colorMode} value={colorMode}>
               {colorMode}
             </ToggleGroup.Item>
           ))}
         </ToggleGroup>
+        <Heading data-size='2xs'>
+          Typografi
+          <code>(data-ds-typography)</code>
+        </Heading>
         <ToggleGroup value={typographyMode} onChange={setTypographyMode}>
           {typography.map((typographyMode) => (
             <ToggleGroup.Item key={typographyMode} value={typographyMode}>