Komp-186-stat (#348)

* Oppdaterer dokumentasjonen til stat

* Legger til changeset

.changeset/rich-apes-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@kvib/react": minor
+---
+
+Oppdaterer dokumentasjon for Stat.

apps/storybook/stories/components/data-display/stat/Stat.mdx

@@ -1,13 +1,22 @@
-import { Meta } from "@storybook/blocks";
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as StatStories from "./Stat.stories";
 
 <Meta title="Komponenter/Data Display/Stat" />
 
 # Stat
 
-Se [https://chakra-ui.com/docs/components/stat](https://chakra-ui.com/docs/components/stat) for eksempler og dokumentasjon.
+Stat-komponentet brukes til å vise frem statistikk.
 
 ## Ta i bruk
 
 ```jsx
 import { Stat, StatLabel, StatNumber, StatHelpText, StatArrow, StatGroup } from "@kvib/react";
 ```
+
+## Props
+
+<Canvas of={StatStories.Stat} />
+
+## Stat med indikator
+
+<Canvas of={StatStories.StatIndicator} />

apps/storybook/stories/components/data-display/stat/Stat.stories.tsx

@@ -0,0 +1,59 @@
+import {
+  Stat as KvibStat,
+  StatLabel as KvibStatLabel,
+  StatNumber as KvibStatNumber,
+  StatHelpText as KvibStatHelpText,
+  StatArrow as KvibStatArrow,
+  StatGroup as KvibStatGroup,
+} from "@kvib/react/src";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof KvibStat> = {
+  title: "Komponenter/Data Display/Stat",
+  component: KvibStat,
+  parameters: {
+    docs: {
+      story: { inline: true },
+      canvas: { sourceState: "shown" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KvibStat>;
+
+export const Stat: Story = {
+  args: {},
+  render: (args) => (
+    <KvibStat {...args}>
+      <KvibStatLabel>Utgifter</KvibStatLabel>
+      <KvibStatNumber>3200kr</KvibStatNumber>
+      <KvibStatHelpText>Feb 12 - Feb 28</KvibStatHelpText>
+    </KvibStat>
+  ),
+};
+
+export const StatIndicator: Story = {
+  args: {},
+  render: (args) => (
+    <KvibStatGroup>
+      <KvibStat {...args}>
+        <KvibStatLabel>Sendt</KvibStatLabel>
+        <KvibStatNumber>345,670</KvibStatNumber>
+        <KvibStatHelpText>
+          <KvibStatArrow type="increase" />
+          23.36%
+        </KvibStatHelpText>
+      </KvibStat>
+
+      <KvibStat {...args}>
+        <KvibStatLabel>Klikk</KvibStatLabel>
+        <KvibStatNumber>45</KvibStatNumber>
+        <KvibStatHelpText>
+          <KvibStatArrow type="decrease" />
+          9.05%
+        </KvibStatHelpText>
+      </KvibStat>
+    </KvibStatGroup>
+  ),
+};