Komp-178-card

apps/storybook/stories/components/data-display/badge/Badge.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<typeof KvibBadge> = {
       control: "radio",
     },
     colorScheme: {
-      description: "The variant of the badge",
+      description: "The visual color appearance of the badge",
       table: {
         type: { summary: "green | blue | red | gray" },
         defultValue: { summary: "gray" },

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

@@ -1,13 +1,43 @@
-import { Meta } from "@storybook/blocks";
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as CardStories from "./Card.stories";
 
 <Meta title="Komponenter/Data Display/Card" />
 
 # Card
 
-Se [https://chakra-ui.com/docs/components/card](https://chakra-ui.com/docs/components/card) for eksempler og dokumentasjon.
+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
+
+<Canvas of={CardStories.Card} />
+<Controls of={CardStories.Card} />
+
+## Varianter
+
+<Canvas of={CardStories.CardVariants} />
+
+## Størrelser
+
+<Canvas of={CardStories.CardSizes} />
+
+## Card med bilde og knapper
+
+<Canvas of={CardStories.CardImage} />
+
+## Sentrering av innhold
+
+Sentrering av innhold gjøres ved å sette `align="center"` på Card.
+
+<Canvas of={CardStories.CardCentering} />
+
+## Horisontalt innhold
+
+For å vise innhold horisontalt settes `direction="row"` på Card.
+
+<Canvas of={CardStories.CardHorizontal} />

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

@@ -0,0 +1,191 @@
+import {
+  Card as KvibCard,
+  CardHeader as KvibCardHeader,
+  CardBody as KvibCardBody,
+  CardFooter as KvibCardFooter,
+  Stack as KvibStack,
+  Text as KvibText,
+  Image as KvibImage,
+  Heading as KvibHeading,
+  Divider as KvibDivider,
+  ButtonGroup as KvibButtonGroup,
+  Button as KvibButton,
+} from "@kvib/react/src/";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof KvibCard> = {
+  title: "Komponenter/Data Display/Card",
+  component: KvibCard,
+  parameters: {
+    docs: {
+      story: { inline: true },
+      canvas: { sourceState: "shown" },
+    },
+  },
+  argTypes: {
+    direction: {
+      table: { type: { summary: String } },
+      control: "text",
+    },
+    align: {
+      table: { type: { summary: String } },
+      control: "text",
+    },
+    justify: {
+      table: { type: { summary: String } },
+      control: "text",
+    },
+    size: {
+      description: "Size of the Card",
+      table: {
+        type: { summary: "sm | md | lg" },
+        defaultValue: { summary: "md" },
+      },
+      options: ["sm", "md", "lg"],
+      control: { type: "radio" },
+    },
+    variant: {
+      description: "The variant of the Card",
+      table: {
+        type: { summary: "elevated | outline | filled | unstyled" },
+        defaultValue: { summary: "elevated" },
+      },
+      options: ["elevated", "outline", "filled", "unstyled"],
+      control: "radio",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KvibCard>;
+
+export const Card: Story = {
+  args: {},
+  render: (args) => (
+    <KvibCard {...args}>
+      <KvibCardBody>
+        <KvibText>Se alle endringer på eiendomsgrenser i år.</KvibText>
+      </KvibCardBody>
+    </KvibCard>
+  ),
+};
+
+export const CardVariants: Story = {
+  args: {},
+  render: (args) => (
+    <KvibStack spacing="4">
+      {["elevated", "outline", "filled", "unstyled"].map((variant) => (
+        <KvibCard {...args} key={variant} variant={variant}>
+          <KvibCardHeader>
+            <KvibHeading size="md">{variant}</KvibHeading>
+          </KvibCardHeader>
+          <KvibCardBody>
+            <KvibText>variant = {variant}</KvibText>
+          </KvibCardBody>
+        </KvibCard>
+      ))}
+    </KvibStack>
+  ),
+};
+
+export const CardSizes: Story = {
+  args: {},
+  render: (args) => (
+    <KvibStack spacing="4">
+      {["sm", "md", "lg"].map((size) => (
+        <KvibCard {...args} key={size} size={size}>
+          <KvibCardHeader>
+            <KvibHeading size="md">{size}</KvibHeading>
+          </KvibCardHeader>
+          <KvibCardBody>
+            <KvibText>size = {size}</KvibText>
+          </KvibCardBody>
+        </KvibCard>
+      ))}
+    </KvibStack>
+  ),
+};
+
+export const CardImage: Story = {
+  args: {},
+  render: (args) => (
+    <KvibCard {...args} maxW="sm">
+      <KvibCardBody>
+        <KvibImage
+          src="https://images.unsplash.com/photo-1575520973439-9b31e3e0b6f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
+          alt="Boat dock with small boats"
+          borderRadius="md"
+        />
+        <KvibStack mt="6" spacing="3">
+          <KvibHeading size="md">Digitalt løft i havn</KvibHeading>
+          <KvibText>
+            Kystverket har tildelt 10,5 millioner kroner til prosjektet «Digital tvilling i havn» for å styrke
+            digitaliseringen av havneinfrastrukturen. Dette legger grunnlaget for en mer moderne og smartere
+            havnevirksomhet.
+          </KvibText>
+        </KvibStack>
+      </KvibCardBody>
+      <KvibDivider />
+      <KvibCardFooter>
+        <KvibButtonGroup spacing="2">
+          <KvibButton variant="solid" colorScheme="blue">
+            Les artikkel
+          </KvibButton>
+          <KvibButton variant="ghost" colorScheme="blue">
+            Legg til i leseliste
+          </KvibButton>
+        </KvibButtonGroup>
+      </KvibCardFooter>
+    </KvibCard>
+  ),
+};
+
+export const CardCentering: Story = {
+  args: {},
+  render: (args) => (
+    <KvibCard {...args} align="center">
+      <KvibCardHeader>
+        <KvibHeading size="md">Kundeportal</KvibHeading>
+      </KvibCardHeader>
+      <KvibCardBody>
+        <KvibText>Se et utdrag av bruk den siste måneden.</KvibText>
+      </KvibCardBody>
+      <KvibCardFooter>
+        <KvibButton colorScheme="blue">Se utdrag</KvibButton>
+      </KvibCardFooter>
+    </KvibCard>
+  ),
+};
+
+export const CardHorizontal: Story = {
+  args: {},
+  render: (args) => (
+    <KvibCard {...args} direction="row" overflow="hidden" variant="outline">
+      <KvibImage
+        objectFit="cover"
+        maxW={{ base: "100%", sm: "200px" }}
+        src="https://images.unsplash.com/photo-1575520973439-9b31e3e0b6f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
+        alt="Boat dock with small boats"
+      />
+
+      <KvibStack>
+        <KvibCardBody>
+          <KvibHeading size="md">Digitalt løft i havn</KvibHeading>
+
+          <KvibText py="2">
+            Kystverket har tildelt 10,5 millioner kroner til prosjektet «Digital tvilling i havn» for å styrke
+            digitaliseringen av havneinfrastrukturen. Dette legger grunnlaget for en mer moderne og smartere
+            havnevirksomhet.
+          </KvibText>
+        </KvibCardBody>
+
+        <KvibCardFooter>
+          <KvibButton variant="solid" colorScheme="blue">
+            Les artikkel
+          </KvibButton>
+        </KvibCardFooter>
+      </KvibStack>
+    </KvibCard>
+  ),
+};

packages/react/src/card/Card.tsx

@@ -0,0 +1,5 @@
+import { Card as ChakraCard, CardProps as ChakraCardProps, forwardRef } from "@chakra-ui/react";
+
+export const Card = forwardRef<ChakraCardProps, "div">(({ ...props }, ref) => {
+  return <ChakraCard {...props} ref={ref} />;
+});

packages/react/src/card/index.ts

@@ -1,2 +1,3 @@
-export { Card, CardHeader, CardBody, CardFooter } from "@chakra-ui/react";
+export * from "./Card";
+export { CardHeader, CardBody, CardFooter } from "@chakra-ui/react";
 export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from "@chakra-ui/react";