Endrer docs i henhold til mal for box (#639)

apps/storybook/stories/components/Layout/Box/Box.mdx

@@ -1,39 +1,59 @@
 import { Title, Canvas, Meta, Story, Controls } from "@storybook/blocks";
+import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory, Feedback } from "../../../templates";
+import { Text, Code, Box } from "@kvib/react/src/";
+
 import * as BoxStories from "./Box.stories";
 
 <Meta of={BoxStories} />
 
 # Box
 
-Box er grunnpillaren til alle komponentene i KVIB.
-
-<Canvas of={BoxStories.SimpleBox} />
-
-## Ta i bruk
+Box er grunnpillaren til alle komponentene i Kartverkets Designsystem. Du kan tenke på den som en `<div />` som du kan style med props og design tokens.
 
 ```jsx
 import { Box } from "@kvib/react";
 ```
 
-## Props
+<DocsContainer>
+
+**Egnet til:**
+
+- Enkle containers
+- Wrapper for mer komplekse komponenter
 
-Box-komponenten aksepterer alle styling props man kan sende til en div eller et View.
+**Uegnet til:**
 
-I React-implementasjonen kan man også spesifisere hva slags DOM-element man ønsker rendret.
+- Avanserte layout-justeringer
 
-## Retningslinjer
+<Feedback component="Box" />
 
-Box er en ganske spesiell komponent. Du kan tenke på den som en `<div />` som du kan style med props og design tokens.
+</DocsContainer>
 
-## Flere eksempler
+<DocsHeading>Alternativer</DocsHeading>
+<DocsContainer>
 
-<br />
-### En Box med padding
+<DocsStory
+    title="Props"
+    description={
+      <Text>
+        Box-komponenten aksepterer alle styling props man kan sende til en div eller et View. Dette omfatter en mengde props som dekker de fleste brukstilfeller. Det er også lagt til forkortelser for de vanligste propsene (f.eks. <Code>bg</Code> istedenfor <Code>backgroundColor</Code>).
+      </Text>
+    }
+    story={<Canvas of={BoxStories.BoxExample} />}
 
-<Canvas of={BoxStories.BoxWithPadding} />
+/>
 
-### En Box som egentlig er en lenke
+<DocsStory
+    title="Override med as-prop"
+    description={
+      <Text>
+        Box har en <Code>as</Code>-prop som lar deg overstyre hvilket DOM-element som rendres. Dette kan være nyttig hvis du ønsker å bruke en annen type element enn <Code>div</Code>, men starte fra "scratch" når det kommer til styling av komponentet.
+        Det vil si at det er mulig å dra nytte av egenskapene til en link ("a"), uten å måtte bruke stylingen til <Code>Link</Code>.
+        I de fleste tilfeller vil det være mer hensiktsmessig å bruke en av de andre komponentene som er bygget på Box, men i komplekse situasjoner kan det være nyttig.
+      </Text>
+    }
+    story={<Canvas of={BoxStories.BoxAsLink} />}
 
-<Canvas of={BoxStories.AdvancedBox} />
+/>
 
-Se [Chakra sine dokumentasjonssider](https://chakra-ui.com/docs/components/box) for flere eksempler og info.
+</DocsContainer>

apps/storybook/stories/components/Layout/Box/Box.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof KvibBox> = {
   parameters: {
     docs: {
       story: { inline: true },
-      canvas: { sourceState: "shown" },
+      canvas: { sourceState: "hidden" },
     },
   },
 };
@@ -20,28 +20,24 @@ export const SimpleBox: Story = {
   render: (args) => <KvibBox {...args}>En veldig enkel boks</KvibBox>,
 };
 
-export const BoxWithPadding: Story = {
-  args: { backgroundColor: "blue.50", borderRadius: "md", padding: "30px" },
-  render: (args) => <KvibBox {...args}>En litt mer kreativ boks</KvibBox>,
+export const BoxExample: Story = {
+  args: { bg: "blue.50", borderRadius: "md", p: "20px", color: "green.900" },
+  render: (args) => <KvibBox {...args}>En box med bruk av diverse props</KvibBox>,
 };
 
-export const AdvancedBox: Story = {
-  render: (args) => (
-    <KvibBox
-      {...args}
-      _hover={{
-        backgroundColor: "yellow.200",
-      }}
-      as="a"
-      backgroundColor="yellow.50"
-      border="1px solid"
-      borderColor="gray.200"
-      display="block"
-      href="https://www.youtube.com/watch?v: Zvz6kFVJpwo&list: PLcU9Unqugm6YuG5NM_av57pJajVhgaV7w"
-      padding="2"
-      width="fit-content"
-    >
-      En lenke til en video
-    </KvibBox>
-  ),
+export const BoxAsLink: Story = {
+  args: {
+    _hover: {
+      backgroundColor: "yellow.200",
+    },
+    as: "a",
+    backgroundColor: "yellow.50",
+    border: "1px solid",
+    borderColor: "gray.200",
+    display: "block",
+    href: "https://www.youtube.com/watch?v=Zvz6kFVJpwo&list=PLcU9Unqugm6YuG5NM_av57pJajVhgaV7w",
+    padding: "2",
+    width: "fit-content",
+  },
+  render: (args) => <KvibBox {...args}>En lenke til en video</KvibBox>,
 };