diff --git a/.changeset/rich-apes-sparkle.md b/.changeset/rich-apes-sparkle.md new file mode 100644 index 0000000000..b450bb9d35 --- /dev/null +++ b/.changeset/rich-apes-sparkle.md @@ -0,0 +1,5 @@ +--- +"@kvib/react": minor +--- + +Oppdaterer dokumentasjon for Stat. diff --git a/apps/storybook/stories/components/data-display/stat/Stat.mdx b/apps/storybook/stories/components/data-display/stat/Stat.mdx index 3abf1d2a04..c75ca3d802 100644 --- a/apps/storybook/stories/components/data-display/stat/Stat.mdx +++ b/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"; # 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 + + + +## Stat med indikator + + diff --git a/apps/storybook/stories/components/data-display/stat/Stat.stories.tsx b/apps/storybook/stories/components/data-display/stat/Stat.stories.tsx new file mode 100644 index 0000000000..4b50d77b17 --- /dev/null +++ b/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 = { + title: "Komponenter/Data Display/Stat", + component: KvibStat, + parameters: { + docs: { + story: { inline: true }, + canvas: { sourceState: "shown" }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Stat: Story = { + args: {}, + render: (args) => ( + + Utgifter + 3200kr + Feb 12 - Feb 28 + + ), +}; + +export const StatIndicator: Story = { + args: {}, + render: (args) => ( + + + Sendt + 345,670 + + + 23.36% + + + + + Klikk + 45 + + + 9.05% + + + + ), +};