Fikser styling i alle stories

kartverket · Oct 23, 2024 · c624ef6 · c624ef6
1 parent 7c94595
commit c624ef6
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 44 deletions.
diff --git a/apps/storybook/.storybook/docs-root.css b/apps/storybook/.storybook/docs-root.css
@@ -258,12 +258,7 @@ input[type="range"]::-webkit-slider-thumb:active {
   }
 }
 
-
-.docs-story {
-  padding: 1.25rem;
-}
-
-.docs-story > :first-child {
+ .fullwidth > :first-child > :first-child {
   display: inline-table;
   width: 100%;
 }
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
@@ -20,6 +20,7 @@ module.exports = {
         },
       },
     },
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
 
   typescript: {

diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -130,6 +130,7 @@ export const argTypes = {
 
 const preview: Preview = {
   parameters: parameters,
+  tags: ["autodocs"],
 };
 
 export default preview;
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -25,14 +25,14 @@
     "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-mdx-gfm": "^8.3.6",
     "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/blocks": "^8.3.2",
+    "@storybook/blocks": "^8.3.6",
     "@storybook/cli": "^8.3.6",
     "@storybook/manager-api": "^8.3.6",
     "@storybook/react": "^8.3.6",
     "@storybook/react-vite": "^8.3.6",
     "@storybook/test": "^8.3.6",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.2",
+    "@storybook/theming": "^8.3.6",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.3.1",
     "axe-playwright": "^2.0.1",
@@ -41,7 +41,7 @@
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.3.2",
+    "storybook": "^8.3.6",
     "typescript": "^5.4.2"
   },
   "dependencies": {

diff --git a/apps/storybook/stories/components/sideelementer/divider/Divider.mdx b/apps/storybook/stories/components/sideelementer/divider/Divider.mdx
@@ -24,7 +24,7 @@ import { Divider } from "@kvib/react";
       Bruk <code>variant</code> prop for å endre <code>Divider</code> varianten.
     </Text>
   }
-  story={<Canvas of={DividerStories.DividerVariants} sourceState="hidden" />}
+  story={<Canvas of={DividerStories.DividerVariants} sourceState="hidden" className="fullwidth" />}
 />
 
 <DocsStory
@@ -35,7 +35,7 @@ import { Divider } from "@kvib/react";
       <code>borderWidth</code> prop.
     </Text>
   }
-  story={<Canvas of={DividerStories.DividerColorsWidths} sourceState="hidden" />}
+  story={<Canvas of={DividerStories.DividerColorsWidths} sourceState="hidden" className="fullwidth" />}
 />
 
 <DocsStory
@@ -45,7 +45,7 @@ import { Divider } from "@kvib/react";
       Bruk <code>orientation</code>prop for å sette vertikal <code>Divider</code>.
     </Text>
   }
-  story={<Canvas of={DividerStories.DividerVertical} sourceState="hidden" />}
+  story={<Canvas of={DividerStories.DividerVertical} sourceState="hidden" className="fullwidth" />}
 />
 
 <DocsStory
@@ -56,7 +56,7 @@ import { Divider } from "@kvib/react";
       <code>AbsoluteCenter</code> og <code>Text</code> komponenter.
     </Text>
   }
-  story={<Canvas of={DividerStories.DividerContent} sourceState="hidden" />}
+  story={<Canvas of={DividerStories.DividerContent} sourceState="hidden" className="fullwidth" />}
 />
 
 <DocsStory
@@ -65,7 +65,7 @@ import { Divider } from "@kvib/react";
   description={""}
   story={
     <>
-      <Canvas of={DividerStories.Preview} />
+      <Canvas of={DividerStories.Preview} className="fullwidth" />
       <Controls of={DividerStories.Preview} />
     </>
   }

diff --git a/apps/storybook/stories/components/skjemaelementer/button/Button.stories.tsx b/apps/storybook/stories/components/skjemaelementer/button/Button.stories.tsx
@@ -176,7 +176,7 @@ export const ButtonGroup: Story = {
   args: { children: "Klikk her" },
   render: args => (
     <VStack divider={<StackDivider borderColor="gray.200" />}>
-      <KvibButtonGroup orientation="vertical" variant="secondary" spacing="4" size="sm">
+      <KvibButtonGroup orientation="vertical" variant="secondary" spacing="4" size="sm" w="100%">
         <KvibButton {...args}>{args.children}</KvibButton>
         <KvibButton {...args}>{args.children}</KvibButton>
       </KvibButtonGroup>

diff --git a/apps/storybook/stories/components/skjemaelementer/range-slider/RangeSlider.mdx b/apps/storybook/stories/components/skjemaelementer/range-slider/RangeSlider.mdx
@@ -19,23 +19,23 @@ import { RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb
 
 <Feedback component="RangeSlider" />
 
-<DocsStory title={"Farger"} description={""} story={<Canvas of={RangeSliderStories.RangeSliderColors} />} isVertical />
+<DocsStory title={"Farger"} description={""} story={<Canvas of={RangeSliderStories.RangeSliderColors} className="fullwidth" />} isVertical />
 <DocsStory
   title={"Vertikal Range Slider"}
   description={""}
-  story={<Canvas of={RangeSliderStories.RangeSliderOrientation} />}
+  story={<Canvas of={RangeSliderStories.RangeSliderOrientation} className="fullwidth" />}
   isVertical
 />
 <DocsStory
   title={"Tilpasset Range Slider"}
   description={""}
-  story={<Canvas of={RangeSliderStories.RangeSliderCustomizing} />}
+  story={<Canvas of={RangeSliderStories.RangeSliderCustomizing} className="fullwidth" />}
   isVertical
 />
 <DocsStory
   title={"Discrete Range Slider"}
   description={""}
-  story={<Canvas of={RangeSliderStories.RangeSliderDiscrete} />}
+  story={<Canvas of={RangeSliderStories.RangeSliderDiscrete} className="fullwidth" />}
   isVertical
 />
 
@@ -49,7 +49,7 @@ import { RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb
 />
 
 <DocsHeading light>Props</DocsHeading>
-<Canvas of={RangeSliderStories.Preview} />
+<Canvas of={RangeSliderStories.Preview} className="fullwidth" />
 <Controls of={RangeSliderStories.Preview} />
 
 </DocsContainer>
diff --git a/apps/storybook/stories/components/skjemaelementer/slider/Slider.mdx b/apps/storybook/stories/components/skjemaelementer/slider/Slider.mdx
@@ -37,24 +37,25 @@ import { Slider, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark } from
 <DocsStory
   title={"Diskret slider med step"}
   description={""}
-  story={<Canvas of={SliderStories.SliderDiscrete} sourceState="hidden" />}
+  story={<Canvas of={SliderStories.SliderDiscrete} sourceState="hidden" className="fullwidth" />}
   isVertical
 />
 
+
 <DocsStory
   title={"Slider med tooltip og marks"}
   description={""}
   story={
     <>
-      <Canvas of={SliderStories.SliderTooltip} sourceState={"none"} />
+      <Canvas of={SliderStories.SliderTooltip} sourceState={"none"} className="fullwidth" />
       <Source code={SliderStrings} dark />
     </>
   }
   isVertical
 />
 
 <DocsHeading light>Props</DocsHeading>
-<Canvas of={SliderStories.Preview} />
+<Canvas of={SliderStories.Preview} className="fullwidth" />
 <Controls of={SliderStories.Preview} />
 
 </DocsContainer>
diff --git a/apps/storybook/stories/components/tilbakemelding/progress/Progress.mdx b/apps/storybook/stories/components/tilbakemelding/progress/Progress.mdx
@@ -26,9 +26,9 @@ import { Progress } from "@kvib/react";
     <DocsStory
         title="Utseende"
         story={
-            <Canvas>
-                <Story of={ProgressStories.ProgressLook} />
-            </Canvas>
+            <Canvas of={ProgressStories.ProgressLook}
+            className="fullwidth"
+             />
         }
         description={<Text>Progress har fem farger å velge mellom: <Code>green</Code>, <Code>blue</Code>, <Code>red</Code>, <Code>yellow</Code> og <Code>gray</Code>.
             Velg farge med tanke på kontekst og kontrast.
@@ -41,7 +41,9 @@ import { Progress } from "@kvib/react";
     description="Progress har noen ekstra props for utseende. hasStripe og isAnimated kan gi brukeren følelse
     at prosessen ikke står stille. isIndeterminate bruker du hvis du ikke vet hvor lenge det tar å laste, eller hvis det
     er usikkert hvor lang tid lastingen vil ta, basert på nettforhold og lignende."
-    story={<Canvas of={ProgressStories.ProgressVariation}/>}
+    story={<Canvas of={ProgressStories.ProgressVariation}
+            className="fullwidth"
+    />}
     />
 
 </DocsContainer>
@@ -59,5 +61,7 @@ import { Progress } from "@kvib/react";
 
 <DocsHeading light>Props</DocsHeading>
 
-<Canvas of={ProgressStories.Preview} />
+<Canvas of={ProgressStories.Preview}
+            className="fullwidth"
+ />
 <Controls of={ProgressStories.Preview} />
diff --git a/apps/storybook/stories/components/tilbakemelding/progress/Progress.stories.tsx b/apps/storybook/stories/components/tilbakemelding/progress/Progress.stories.tsx
@@ -1,4 +1,4 @@
-import { Progress as KvibProgress, Stack as KvibStack } from "@kvib/react/src";
+import { Box, Progress as KvibProgress, Stack as KvibStack } from "@kvib/react/src";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof KvibProgress> = {
@@ -97,17 +97,21 @@ export default meta;
 type Story = StoryObj<typeof KvibProgress>;
 
 export const Preview: Story = {
-  args: { value: 80, h: "1rem", w: "16rem" },
-  render: args => <KvibProgress {...args} aria-label="progress bar" />,
+  args: { value: 80 },
+  render: args => (
+    <Box w="100%">
+      <KvibProgress {...args} aria-label="progress bar" />
+    </Box>
+  ),
 };
 
 export const ProgressStripe: Story = {
-  args: { value: 60, hasStripe: true, h: "1rem", w: "16rem" },
+  args: { value: 60, hasStripe: true },
   render: args => <KvibProgress {...args} aria-label="progress bar striped" />,
 };
 
 export const ProgressStripeAnimated: Story = {
-  args: { value: 60, hasStripe: true, isAnimated: true, h: "1rem", w: "16rem" },
+  args: { value: 60, hasStripe: true, isAnimated: true },
   render: args => <KvibProgress {...args} aria-label="progress bar striped animated" />,
 };
 
@@ -137,7 +141,7 @@ export const ProgressColors: Story = {
 };
 
 export const ProgressLook: Story = {
-  args: { value: 40, size: "md", h: "1rem", w: "16rem" },
+  args: { value: 40 },
   render: args => (
     <KvibStack spacing={5}>
       <KvibProgress {...args} colorScheme="blue" aria-label="progress bar blue" />
@@ -153,7 +157,7 @@ export const ProgressLook: Story = {
 };
 
 export const ProgressVariation: Story = {
-  args: { size: "md", h: "1rem", w: "16rem" },
+  args: { size: "md" },
   render: args => (
     <KvibStack>
       <KvibProgress {...args} isIndeterminate aria-label="progress bar indeterminate" />,

diff --git a/apps/storybook/stories/components/tilbakemelding/skeleton/Skeleton.mdx b/apps/storybook/stories/components/tilbakemelding/skeleton/Skeleton.mdx
@@ -23,32 +23,44 @@ import { Skeleton, SkeletonCircle, SkeletonText } from "@kvib/react";
   isVertical
   title="Wrapped rundt andre komponenter"
   description={""}
-  story={<Canvas of={SkeletonStories.SkeletonWrapped} sourceState="hidden" />}
+  story={<Canvas of={SkeletonStories.SkeletonWrapped}
+            className="fullwidth"
+
+  sourceState="hidden" />}
 />
 
 <DocsStory
   isVertical
   title="Sirkel og tekst Skeleton"
   description={""}
-  story={<Canvas of={SkeletonStories.SkeletonCircle} sourceState="hidden" />}
+  story={<Canvas of={SkeletonStories.SkeletonCircle}
+            className="fullwidth"
+  sourceState="hidden" />}
 />
 
 <DocsStory
   isVertical
   title="Farger"
   description={""}
-  story={<Canvas of={SkeletonStories.SkeletonColors} sourceState="hidden" />}
+  story={<Canvas of={SkeletonStories.SkeletonColors}
+
+            className="fullwidth"
+  sourceState="hidden" />}
 />
 
 <DocsStory
   isVertical
   title="Ferdiglastet Skeleton"
   description={""}
-  story={<Canvas of={SkeletonStories.SkeletonLoaded} sourceState="hidden" />}
+  story={<Canvas of={SkeletonStories.SkeletonLoaded}
+            className="fullwidth"
+  sourceState="hidden" />}
 />
 
 <DocsHeading light children="Props" />
-<Canvas of={SkeletonStories.Preview} />
+<Canvas of={SkeletonStories.Preview}
+            className="fullwidth"
+/>
 <Controls of={SkeletonStories.Preview} />
 
 </DocsContainer>
diff --git a/apps/storybook/stories/components/tilbakemelding/skeleton/Skeleton.stories.tsx b/apps/storybook/stories/components/tilbakemelding/skeleton/Skeleton.stories.tsx
@@ -87,7 +87,6 @@ export const Preview: Story = {
 };
 
 export const SkeletonWrapped: Story = {
-  args: { fitContent: true },
   render: args => (
     <KvibSkeleton {...args}>
       <div>Det som er wrapped i Skeleton</div>

diff --git a/package-lock.json b/package-lock.json