fix: endre fra type til variant og oppdater tester

BREAKING CHANGE: Prop-ene "background" og "type" er fjernet. Du bestemmer nå utseendet til kortet med prop-en "variant", som tar inn verdiene "outlined", "high" og "low".
fremtind · Sep 13, 2024 · 0d5050b · 0d5050b
1 parent b06d75a
commit 0d5050b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/packages/card-react/documentation/FakturainfoExample.tsx b/packages/card-react/documentation/FakturainfoExample.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import { ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
 import { formatValuta } from "../../formatters-util/src";
 import { ErrorTag } from "../../tag-react/src";
-import { Card, CARD_PADDINGS, CARD_TYPES, type CardPadding, type CardType } from "../src/Card";
+import { Card, CARD_PADDINGS, CARD_VARIANTS, type CardPadding, type CardVariant } from "../src/Card";
 
 export const FakturainfoExample = ({ boolValues, choiceValues }: ExampleComponentProps) => {
     const padding = choiceValues?.["Padding"] as CardPadding | undefined;
-    const type = choiceValues?.["Type"] as CardType | undefined;
+    const type = choiceValues?.["Type"] as CardVariant | undefined;
 
     return (
-        <Card asChild clickable={!!boolValues?.["Clickable"]} padding={padding} type={type}>
+        <Card asChild clickable={!!boolValues?.["Clickable"]} padding={padding} variant={type}>
             <a href="#test" className="flex gap-x-40">
                 <div className="flex flex-column gap-4">
                     <p className="jkl-heading-2">
@@ -62,7 +62,7 @@ export const fakturainfoExampleProps: ExampleKnobsProps = {
         },
         {
             name: "Type",
-            values: [...CARD_TYPES],
+            values: [...CARD_VARIANTS],
             defaultValue: 0,
         },
     ],

diff --git a/packages/card-react/documentation/StatuskortExample.tsx b/packages/card-react/documentation/StatuskortExample.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
 import { Image } from "../../image-react/src";
 import { SuccessTag } from "../../tag-react/src";
-import { Card, CARD_PADDINGS, CARD_TYPES, type CardPadding, type CardType } from "../src/Card";
+import { Card, CARD_PADDINGS, CARD_VARIANTS, type CardPadding, type CardVariant } from "../src/Card";
 import { CardImage } from "../src/CardImage";
 import grass400 from "./img/grass-400.jpg";
 import grass800 from "./img/grass-800.jpg";
@@ -17,15 +17,15 @@ const imageProps = {
 
 export const StatuskortExample = ({ boolValues, choiceValues }: ExampleComponentProps) => {
     const padding = choiceValues?.["Padding"] as CardPadding | undefined;
-    const type = choiceValues?.["Type"] as CardType | undefined;
+    const type = choiceValues?.["Type"] as CardVariant | undefined;
 
     return (
         <Card
             as="a"
             href="#"
             clickable={!!boolValues?.["Clickable"]}
             padding={padding}
-            type={type}
+            variant={type}
             style={{ maxWidth: "350px" }}
             className="flex flex-column gap-24 items-start"
         >
@@ -103,7 +103,7 @@ export const statuskortExampleProps: ExampleKnobsProps = {
         },
         {
             name: "Type",
-            values: [...CARD_TYPES],
+            values: [...CARD_VARIANTS],
             defaultValue: 0,
         },
     ],

diff --git a/packages/card-react/src/Card.test.tsx b/packages/card-react/src/Card.test.tsx
@@ -3,7 +3,7 @@ import { axe } from "jest-axe";
 import React from "react";
 import { formatValuta } from "../../formatters-util";
 import { ErrorTag } from "../../tag-react";
-import { Card, CARD_PADDINGS, CARD_TYPES } from "./Card";
+import { Card, CARD_PADDINGS, CARD_VARIANTS } from "./Card";
 
 describe("Card", () => {
     it("rendrer uten å kræsje", () => {
@@ -16,10 +16,10 @@ describe("Card", () => {
         expect(screen.getByText("Hello world")).toBeInTheDocument();
     });
 
-    CARD_TYPES.forEach((color) => {
-        it("setter riktig attributt for bakgrunnsfarge", () => {
-            render(<Card type={color}>Hello, world</Card>);
-            expect(screen.getByText("Hello, world")).toHaveAttribute("data-background", color);
+    CARD_VARIANTS.forEach((variant) => {
+        it("setter riktig klasse for variant", () => {
+            render(<Card variant={variant}>Hello, world</Card>);
+            expect(screen.getByText("Hello, world")).toHaveClass(`jkl-card--${variant}`);
         });
     });
 
@@ -82,7 +82,7 @@ describe("Card", () => {
 describe("a11y", () => {
     test("card should be a11y compliant", async () => {
         const { container } = render(
-            <Card asChild clickable padding="s" type="high">
+            <Card asChild clickable padding="s" variant="high">
                 <a href="/faktura/12345" className="flex gap-x-40">
                     <div className="flex flex-column gap-4">
                         <p className="jkl-heading-2">

diff --git a/packages/card-react/src/Card.tsx b/packages/card-react/src/Card.tsx
@@ -9,8 +9,8 @@ import React from "react";
 
 export const CARD_PADDINGS = ["s", "m", "l", "xl"] as const;
 export type CardPadding = (typeof CARD_PADDINGS)[number];
-export const CARD_TYPES = ["outlined", "high", "low"] as const;
-export type CardType = (typeof CARD_TYPES)[number];
+export const CARD_VARIANTS = ["outlined", "high", "low"] as const;
+export type CardVariant = (typeof CARD_VARIANTS)[number];
 
 export type CardProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<
     ElementType,
@@ -26,7 +26,7 @@ export type CardProps<ElementType extends React.ElementType> = PolymorphicPropsW
          * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.
          * @default "high"
          */
-        type?: CardType;
+        variant?: CardVariant;
         /**
          * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre
          * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra
@@ -56,7 +56,7 @@ export const Card = React.forwardRef(function Card<ElementType extends React.Ele
         className,
         clickable = false,
         padding = "s",
-        type = "high",
+        variant = "high",
         asChild,
         as = "div",
         ...componentProps
@@ -69,7 +69,7 @@ export const Card = React.forwardRef(function Card<ElementType extends React.Ele
             data-testid="jkl-card"
             data-clickable={clickable}
             data-padding={padding}
-            className={cn("jkl-card", `jkl-card--${type}`, className)}
+            className={cn("jkl-card", `jkl-card--${variant}`, className)}
             {...componentProps}
             ref={ref}
         />