Merge pull request #608 from kartverket/komp-333-card

Komp-333-card

apps/storybook/stories/components/data-display/card/Card.mdx

@@ -1,5 +1,6 @@
-import { Meta, Canvas, Story, Controls, Source } from "@storybook/blocks";
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
 import * as CardStories from "./Card.stories";
+import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory, Feedback } from "../../../templates";
 import {
   CardString,
   CardVariantsString,
@@ -8,81 +9,108 @@ import {
   CardCenteringString,
   CardHorizontalString,
 } from "./srcStrings.ts";
-import { Card, CardBody } from "@kvib/react/src";
+import { Card, CardBody, Text, Code, Box, Alert, AlertIcon, AlertDescription } from "@kvib/react/src";
 
 <Meta title="Komponenter/Data Display/Card" />
 
 # Card
 
 Card er et fleksibelt komponent som brukes til å gruppere og vise innhold i et klart og konsist format.
 
-## Ta i bruk
-
 ```jsx
 import { Card, CardHeader, CardBody, CardFooter } from "@kvib/react";
 ```
 
-## Props
+<DocsContainer>
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.Card} />
-  </CardBody>
-</Card>
+**Egnet til:**
 
-<Source code={CardString} dark />
-<Controls of={CardStories.Card} />
+- Gruppere innhold
+- Gruppere innhold og handlinger som hører sammen
+- Inngangspunkt til mer kompleks og detaljert informasjon
+
+**Uegnet til:**
+
+- Kompleks og detaljert informasjon som krever mye plass
 
-## Varianter
+<Feedback component="Card" />
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.CardVariants} />
-  </CardBody>
-</Card>
+</DocsContainer>
 
-<Source code={CardVariantsString} dark />
+<DocsHeading>Kontekst</DocsHeading>
 
-## Størrelser
+<DocsContainer>
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.CardSizes} />
-  </CardBody>
-</Card>
+**Card er bygget opp av fire komponenter:**
 
-<Source code={CardSizesString} dark />
+- Card
+- CardHeader
+- CardBody
+- CardFooter.
 
-## Card med bilde og knapper
+`Card` skal alltid være ytterst. `CardBody` skal inneholde hoveddelen av innholdet. `CardHeader` og `CardFooter` er valgfrie.
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.CardImage} />
-  </CardBody>
-</Card>
+</DocsContainer>
 
-<Source code={CardImageString} dark />
+<DocsHeading>Alternativer</DocsHeading>
 
-## Sentrering av innhold
+<Alert status="info" padding="0.3rem 1rem">
+<AlertIcon />
+<AlertDescription>
+  Kodevisningen viser `<CardHeader2>`/`<CardBody2>`/`<CardFooter2>` - dette skal være `<CardHeader>`/`<CardBody>`/`<CardFooter>` i faktisk bruk av komponentet.
+</AlertDescription>
+</Alert>
 
-Sentrering av innhold gjøres ved å sette `align="center"` på Card.
+<DocsContainer>
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.CardCentering} />
-  </CardBody>
-</Card>
+<DocsStory
+  title="Utseende"
+  description={
+    <Text>
+      Det er mulig å velge mellom fire forskjellige varianter av Card. Disse er elevated, outline, filled og unstyled. I
+      de fleste tilfeller vil elevated outline være passende. Det er tre forskjellige størrelser fra sm til lg. Her vil
+      md passe i de fleste tilfeller.
+    </Text>
+  }
+  story={<Canvas of={CardStories.CardVariants} />}
+/>
 
-<Source code={CardCenteringString} dark />
+<DocsStory
+  title="Komposisjon"
+  description={
+    <Box>
+      <Text>
+        Du kan komponere Card med komponenter som <Code>Button</Code>, <Code>Image</Code> og <Code>Divider</Code> for et
+        mer avansert oppsett.
+      </Text>
 
-## Horisontalt innhold
+      <Text>
+        Dersom du skal ha padding på elementer må de plasseres inne i en av child elementene til Card. Vil du derimot
+        at bildet skal ta hele bredden til Card må du plassere det rett under
+        <Code>Card</Code>. Actions som <Code>Button</Code> skal plasseres i <Code>CardFooter</Code>.
+      </Text>
+    </Box>
 
-For å vise innhold horisontalt settes `direction="row"` på Card.
+}
+story={<Canvas of={CardStories.CardComposition} />}
+/>
 
-<Card variant="outline" borderRadius="0">
-  <CardBody>
-    <Story of={CardStories.CardHorizontal} />
-  </CardBody>
-</Card>
+<DocsStory
+  title="Retning og plassering"
+  description={
+    <Text>
+      Card har <Code>display: flex</Code> som standard. Det betyr at du kan sette innholdet horisontalt ved å sette
+      <Code>direction="row"</Code>. Dersom du ønsker å sentrere innholdet vertikalt kan du sette <Code>
+        align="center"
+      </Code> for <Code>Card</Code>.
+    </Text>
+  }
+  story={<Canvas of={CardStories.CardHorizontal} />}
+/>
 
-<Source code={CardHorizontalString} dark />
+</DocsContainer>
+
+<DocsHeading>Props</DocsHeading>
+
+<Canvas of={CardStories.Card} />
+<Controls of={CardStories.Card} />

apps/storybook/stories/components/data-display/card/Card.stories.tsx

@@ -20,20 +20,20 @@ const meta: Meta<typeof KvibCard> = {
   parameters: {
     docs: {
       story: { inline: true },
-      canvas: { sourceState: "shown" },
+      canvas: { sourceState: "hidden" },
     },
   },
   argTypes: {
     direction: {
-      table: { type: { summary: String } },
+      table: { type: { summary: "ResponsiveValue<FlexDirection>" } },
       control: "text",
     },
     align: {
-      table: { type: { summary: String } },
+      table: { type: { summary: "ResponsiveValue<AlignItems>" } },
       control: "text",
     },
     justify: {
-      table: { type: { summary: String } },
+      table: { type: { summary: "ResponsiveValue<JustifyContent>" } },
       control: "text",
     },
     size: {
@@ -62,6 +62,13 @@ type Story = StoryObj<typeof KvibCard>;
 
 export const Card: Story = {
   args: {},
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
   render: (args) => (
     <KvibCard {...args}>
       <KvibCardBody>
@@ -72,7 +79,7 @@ export const Card: Story = {
 };
 
 export const CardVariants: Story = {
-  args: {},
+  args: { size: "sm" },
   render: (args) => (
     <KvibStack spacing="4">
       {["elevated", "outline", "filled", "unstyled"].map((variant) => (
@@ -107,7 +114,7 @@ export const CardSizes: Story = {
   ),
 };
 
-export const CardImage: Story = {
+export const CardComposition: Story = {
   args: {},
   render: (args) => (
     <KvibCard {...args} maxW="sm">
@@ -129,7 +136,7 @@ export const CardImage: Story = {
       <KvibDivider />
       <KvibCardFooter>
         <KvibButtonGroup spacing="2">
-          <KvibButton variant="solid" colorScheme="blue">
+          <KvibButton variant="primary" colorScheme="blue">
             Les artikkel
           </KvibButton>
           <KvibButton variant="ghost" colorScheme="blue">
@@ -181,7 +188,7 @@ export const CardHorizontal: Story = {
         </KvibCardBody>
 
         <KvibCardFooter>
-          <KvibButton variant="solid" colorScheme="blue">
+          <KvibButton variant="primary" colorScheme="blue">
             Les artikkel
           </KvibButton>
         </KvibCardFooter>

apps/storybook/stories/templates/DocsStory.tsx

@@ -4,11 +4,12 @@ type DocsStoryProps = {
   title: string;
   description: string | JSX.Element;
   story: any;
+  isVertical?: boolean;
 };
 
-export const DocsStory = ({ title, description, story }: DocsStoryProps) => {
+export const DocsStory = ({ title, description, story, isVertical }: DocsStoryProps) => {
   return (
-    <SimpleGrid columns={[1, 1, 2]} spacing={[0, 0, "2rem"]}>
+    <SimpleGrid columns={[1, 1, isVertical ? 1 : 2]} spacing={[0, 0, isVertical ? 0 : "2rem"]}>
       <Box marginTop="25px">
         <Heading size="md" as="h3">
           {title}