Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: oppdater card til å matche nyeste versjon i Figma #4079

Merged
merged 2 commits into from
Sep 16, 2024
Merged

feat: oppdater card til å matche nyeste versjon i Figma #4079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b06d75a
feat: oppdater card til å matche nyeste versjon i Figma
piofinn Sep 10, 2024
0d5050b
fix: endre fra type til variant og oppdater tester
piofinn Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions packages/card-react/documentation/FakturainfoExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS, type CardPadding, type CardVariant } 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 CardVariant | undefined;

return (
<Card asChild clickable={!!boolValues?.["Clickable"]} padding={padding} background={background}>
<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">
Expand All @@ -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 */}
Expand All @@ -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_VARIANTS],
defaultValue: 0,
},
],
};
16 changes: 8 additions & 8 deletions packages/card-react/documentation/StatuskortExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_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";
Expand All @@ -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 CardVariant | undefined;

return (
<Card
as="a"
href="#"
clickable={!!boolValues?.["Clickable"]}
padding={padding}
background={background}
variant={type}
style={{ maxWidth: "350px" }}
className="flex flex-column gap-24 items-start"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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_VARIANTS],
defaultValue: 0,
},
],
};
12 changes: 6 additions & 6 deletions packages/card-react/src/Card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS } from "./Card";

describe("Card", () => {
it("rendrer uten å kræsje", () => {
Expand All @@ -16,10 +16,10 @@ describe("Card", () => {
expect(screen.getByText("Hello world")).toBeInTheDocument();
});

CONTAINER_COLORS.forEach((color) => {
it("setter riktig attributt for bakgrunnsfarge", () => {
render(<Card background={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}`);
});
});

Expand Down Expand Up @@ -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" variant="high">
<a href="/faktura/12345" className="flex gap-x-40">
<div className="flex flex-column gap-4">
<p className="jkl-heading-2">
Expand Down
33 changes: 11 additions & 22 deletions packages/card-react/src/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_VARIANTS = ["outlined", "high", "low"] as const;
export type CardVariant = (typeof CARD_VARIANTS)[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;
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
Expand Down Expand Up @@ -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",
variant = "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--${variant}`, className)}
{...componentProps}
style={style}
ref={ref}
/>
);
Expand Down
88 changes: 39 additions & 49 deletions packages/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading