From 0464c45ff3eecfb4a352dde93f3085f9630a4798 Mon Sep 17 00:00:00 2001 From: Pio Rasch-Halvorsen Date: Tue, 10 Sep 2024 16:15:29 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20oppdater=20card=20til=20=C3=A5=20matche?= =?UTF-8?q?=20nyeste=20versjon=20i=20Figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../documentation/FakturainfoExample.tsx | 16 ++-- .../documentation/StatuskortExample.tsx | 16 ++-- packages/card-react/src/Card.test.tsx | 8 +- packages/card-react/src/Card.tsx | 33 +++---- packages/card/card.scss | 88 ++++++++----------- 5 files changed, 70 insertions(+), 91 deletions(-) diff --git a/packages/card-react/documentation/FakturainfoExample.tsx b/packages/card-react/documentation/FakturainfoExample.tsx index c7e6f964ffd..5d0cd8642fa 100644 --- 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 ( - +

@@ -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 index 69c3076c66b..5dd0f998342 100644 --- 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,7 +17,7 @@ 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 ( @@ -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 index 14072656d69..395802ef020 100644 --- 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(Hello, world); + render(Hello, world); 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( - +

diff --git a/packages/card-react/src/Card.tsx b/packages/card-react/src/Card.tsx index ac4652d43c9..fd223ee3f69 100644 --- a/packages/card-react/src/Card.tsx +++ b/packages/card-react/src/Card.tsx @@ -7,10 +7,10 @@ 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 = PolymorphicPropsWithRef< ElementType, @@ -18,15 +18,15 @@ export type CardProps = PolymorphicPropsW 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. `` eller en `` fra @@ -55,8 +55,8 @@ export const Card = React.forwardRef(function Card ); diff --git a/packages/card/card.scss b/packages/card/card.scss index ecc8de86748..30cb04a6728 100644 --- 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);