feat: oppdater card til å matche nyeste versjon i Figma

Justerer antall bakgrunnsfarger og spacinger til å matche oppdatert komponent i Figma BREAKING CHANGE: Fargene "inverted" og "subdued", samt spacingene "none" og "xs", er fjernet ISSUES CLOSED: #4078
fremtind · Sep 16, 2024 · 0464c45 · 0464c45
1 parent 25dd36f
commit 0464c45
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 91 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, CONTAINER_COLORS, type CardPadding, type ContainerColor } from "../src/Card";
+import { Card, CARD_PADDINGS, CARD_TYPES, type CardPadding, type CardType } from "../src/Card";
 
 export const FakturainfoExample = ({ boolValues, choiceValues }: ExampleComponentProps) => {
     const padding = choiceValues?.["Padding"] as CardPadding | undefined;
-    const background = choiceValues?.["Background"] as ContainerColor | undefined;
+    const type = choiceValues?.["Type"] as CardType | undefined;
 
     return (
-        <Card asChild clickable={!!boolValues?.["Clickable"]} padding={padding} background={background}>
+        <Card asChild clickable={!!boolValues?.["Clickable"]} padding={padding} type={type}>
             <a href="#test" className="flex gap-x-40">
                 <div className="flex flex-column gap-4">
                     <p className="jkl-heading-2">
@@ -33,7 +33,7 @@ export const fakturainfoExampleCode = ({ boolValues, choiceValues }: ExampleComp
     asChild
     clickable={${!!boolValues?.["Clickable"]}}
     padding="${choiceValues?.["Padding"]}"
-    background="${choiceValues?.["Background"]}"
+    type="${choiceValues?.["Type"]}"
 >
     {/* Siden vi bruker asChild er det denne lenken som blir rendret.
     Den får også satt alle egenskapene fra Card-komponenten på seg */}
@@ -58,12 +58,12 @@ export const fakturainfoExampleProps: ExampleKnobsProps = {
         {
             name: "Padding",
             values: [...CARD_PADDINGS],
-            defaultValue: 3,
+            defaultValue: 1,
         },
         {
-            name: "Background",
-            values: [...CONTAINER_COLORS],
-            defaultValue: 1,
+            name: "Type",
+            values: [...CARD_TYPES],
+            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, CONTAINER_COLORS, type CardPadding, type ContainerColor } from "../src/Card";
+import { Card, CARD_PADDINGS, CARD_TYPES, type CardPadding, type CardType } 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 background = choiceValues?.["Background"] as ContainerColor | undefined;
+    const type = choiceValues?.["Type"] as CardType | undefined;
 
     return (
         <Card
             as="a"
             href="#"
             clickable={!!boolValues?.["Clickable"]}
             padding={padding}
-            background={background}
+            type={type}
             style={{ maxWidth: "350px" }}
             className="flex flex-column gap-24 items-start"
         >
@@ -64,7 +64,7 @@ export const statuskortExampleCode = ({ boolValues, choiceValues }: ExampleCompo
     href="#"
     clickable={${!!boolValues?.["Clickable"]}}
     padding="${choiceValues?.["Padding"]}"
-    background="${choiceValues?.["Background"]}"
+    type="${choiceValues?.["Type"]}"
     style={{ maxWidth: "350px" }}
     className="flex flex-column gap-24 items-start"
 >
@@ -99,12 +99,12 @@ export const statuskortExampleProps: ExampleKnobsProps = {
         {
             name: "Padding",
             values: [...CARD_PADDINGS],
-            defaultValue: 4,
+            defaultValue: 2,
         },
         {
-            name: "Background",
-            values: [...CONTAINER_COLORS],
-            defaultValue: 1,
+            name: "Type",
+            values: [...CARD_TYPES],
+            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, CONTAINER_COLORS } from "./Card";
+import { Card, CARD_PADDINGS, CARD_TYPES } from "./Card";
 
 describe("Card", () => {
     it("rendrer uten å kræsje", () => {
@@ -16,9 +16,9 @@ describe("Card", () => {
         expect(screen.getByText("Hello world")).toBeInTheDocument();
     });
 
-    CONTAINER_COLORS.forEach((color) => {
+    CARD_TYPES.forEach((color) => {
         it("setter riktig attributt for bakgrunnsfarge", () => {
-            render(<Card background={color}>Hello, world</Card>);
+            render(<Card type={color}>Hello, world</Card>);
             expect(screen.getByText("Hello, world")).toHaveAttribute("data-background", color);
         });
     });
@@ -82,7 +82,7 @@ describe("Card", () => {
 describe("a11y", () => {
     test("card should be a11y compliant", async () => {
         const { container } = render(
-            <Card asChild clickable padding="s" background="high">
+            <Card asChild clickable padding="s" type="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
@@ -7,26 +7,26 @@ import {
 import cn from "classnames";
 import React from "react";
 
-export const CARD_PADDINGS = ["none", "xs", "s", "m", "l", "xl"] as const;
+export const CARD_PADDINGS = ["s", "m", "l", "xl"] as const;
 export type CardPadding = (typeof CARD_PADDINGS)[number];
-export const CONTAINER_COLORS = ["default", "high", "low", "subdued"] as const;
-export type ContainerColor = (typeof CONTAINER_COLORS)[number];
+export const CARD_TYPES = ["outlined", "high", "low"] as const;
+export type CardType = (typeof CARD_TYPES)[number];
 
 export type CardProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<
     ElementType,
     {
         className?: string;
         /**
          * Setter padding på kortet. Tilsvarer samme property i Figma.
-         * @default "none"
+         * @default "s"
          */
         padding?: CardPadding;
         /**
-         * Setter bakgrunnsfarge på kortet til en av bakgrunnsfargene
-         * for "container" i Jøkul.
-         * @default "default" (tilsvarer --jkl-color-background-container)
+         * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast
+         * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.
+         * @default "high"
          */
-        background?: ContainerColor;
+        type?: CardType;
         /**
          * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre
          * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra
@@ -55,33 +55,22 @@ export const Card = React.forwardRef(function Card<ElementType extends React.Ele
     const {
         className,
         clickable = false,
-        padding = "none",
-        background = "default",
+        padding = "s",
+        type = "high",
         asChild,
         as = "div",
         ...componentProps
     } = props;
 
     const Component = asChild ? SlotComponent : as;
 
-    const style = {
-        "--padding": `var(--jkl-card-padding-${padding})`,
-        "--background-color":
-            background === "default"
-                ? "var(--jkl-color-background-container)"
-                : `var(--jkl-color-background-container-${background})`,
-        ...componentProps.style,
-    } as React.CSSProperties;
-
     return (
         <Component
             data-testid="jkl-card"
             data-clickable={clickable}
             data-padding={padding}
-            data-background={background}
-            className={cn("jkl-card", className)}
+            className={cn("jkl-card", `jkl-card--${type}`, className)}
             {...componentProps}
-            style={style}
             ref={ref}
         />
     );

diff --git a/packages/card/card.scss b/packages/card/card.scss
@@ -4,96 +4,86 @@
 @use "nav-card";
 @use "task-card";
 
-@include jkl.comfortable-density-variables {
-    --jkl-card-padding-none: 0;
-    --jkl-card-padding-xs: #{jkl.$spacing-4};
-    --jkl-card-padding-s: #{jkl.$spacing-8};
-    --jkl-card-padding-m: #{jkl.$spacing-12};
-    --jkl-card-padding-l: #{jkl.$spacing-16};
-    --jkl-card-padding-xl: #{jkl.$spacing-24};
-
-    @include jkl.from-medium-device {
-        --jkl-card-padding-none: 0;
-        --jkl-card-padding-xs: #{jkl.$spacing-8};
-        --jkl-card-padding-s: #{jkl.$spacing-12};
-        --jkl-card-padding-m: #{jkl.$spacing-16};
-        --jkl-card-padding-l: #{jkl.$spacing-24};
-        --jkl-card-padding-xl: #{jkl.$spacing-32};
-    }
-}
-
-@include jkl.compact-density-variables {
-    --jkl-card-padding-none: 0;
-    --jkl-card-padding-xs: #{jkl.$spacing-2};
-    --jkl-card-padding-s: #{jkl.$spacing-4};
-    --jkl-card-padding-m: #{jkl.$spacing-8};
-    --jkl-card-padding-l: #{jkl.$spacing-12};
-    --jkl-card-padding-xl: #{jkl.$spacing-16};
-}
-
 .jkl-card {
-    --padding: 0;
+    --padding-s: var(--jkl-spacing-4);
+    --padding-m: var(--jkl-spacing-12);
+    --padding-l: var(--jkl-spacing-16);
+    --padding-xl: var(--jkl-spacing-24);
     --border-radius: #{jkl.rem(4px)};
-    --background-color: var(--jkl-color-background-container);
+    --border-color: transparent;
+    --border-width: #{jkl.rem(1px)};
+    --background-color: transparent;
 
+    position: relative;
     overflow: hidden;
     display: block;
     background-color: var(--background-color);
     border-radius: var(--border-radius);
-    padding: var(--padding);
+    box-sizing: border-box;
+    padding: var(--padding, var(--padding-s));
     text-decoration: none;
     color: var(--jkl-color-text-default);
 
-    &[data-padding="xs"] {
-        --padding: var(--jkl-card-padding-xs);
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: var(--border-radius);
+        border: var(--border-width) solid var(--border-color);
+        @include jkl.motion("standard", "snappy", border-color, border-size);
+    }
+
+    @include jkl.from-medium-device {
+        --padding-s: var(--jkl-spacing-8);
+        --padding-m: var(--jkl-spacing-16);
+        --padding-l: var(--jkl-spacing-24);
+        --padding-xl: var(--jkl-spacing-32);
     }
 
     &[data-padding="s"] {
-        --padding: var(--jkl-card-padding-s);
+        --padding: var(--padding-s);
     }
 
     &[data-padding="m"] {
-        --padding: var(--jkl-card-padding-m);
+        --padding: var(--padding-m);
     }
 
     &[data-padding="l"] {
-        --padding: var(--jkl-card-padding-l);
+        --padding: var(--padding-l);
     }
 
     &[data-padding="xl"] {
-        --padding: var(--jkl-card-padding-xl);
+        --padding: var(--padding-xl);
     }
 
-    &[data-background="high"] {
+    &--high {
         --background-color: var(--jkl-color-background-container-high);
     }
 
-    &[data-background="low"] {
+    &--low {
         --background-color: var(--jkl-color-background-container-low);
     }
 
-    &[data-background="subdued"] {
-        --background-color: var(--jkl-color-background-container-subdued);
-    }
-
-    &[data-background="inverted"] {
-        --background-color: var(--jkl-color-background-container-inverted);
+    &--outlined {
+        --border-color: var(--jkl-color-border-separator);
     }
 
     &[data-clickable="true"] {
-        @include jkl.motion("standard", "productive");
-        transition-property: box-shadow;
-        box-shadow: jkl.$shadow-navigation;
         cursor: pointer;
 
         &:hover {
-            box-shadow: jkl.$shadow-navigation--hover;
+            --border-color: var(--jkl-color-border-separator-hover);
+            --border-width: #{jkl.rem(2px)};
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline;
         }
     }
 }
 
 .jkl-card-image {
-    --margin: calc(var(--padding) * -1); // Sett negativ margin tilsvarende padding (fra Card)
+    --margin: calc(var(--padding, 0) * -1); // Sett negativ margin tilsvarende padding (fra Card)
 
     width: calc(100% + 2 * var(--padding, 0));
     aspect-ratio: var(--image-aspect-ratio, 3/2);