From 6e25ca85737d0b87d37ff3c9173a78642fa0248f Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Sep 2023 13:20:41 +0200 Subject: [PATCH 1/6] :art: Dynamisk stack by breakpoint --- @navikt/core/css/primitives/stack.css | 52 ++++++++++++++----- @navikt/core/react/src/layout/stack/Stack.tsx | 16 +++--- yarn.lock | 38 +++++++------- 3 files changed, 66 insertions(+), 40 deletions(-) diff --git a/@navikt/core/css/primitives/stack.css b/@navikt/core/css/primitives/stack.css index 20f4eb535b..0ae53ea9b7 100644 --- a/@navikt/core/css/primitives/stack.css +++ b/@navikt/core/css/primitives/stack.css @@ -1,14 +1,29 @@ .navds-stack { - --__ac-stack-align: initial; - --__ac-stack-justify: initial; - --__ac-stack-direction: initial; --__ac-stack-wrap: initial; --__ac-stack-gap-xs: initial; - --__ac-stack-gap-sm: initial; - --__ac-stack-gap-md: initial; - --__ac-stack-gap-lg: initial; - --__ac-stack-gap-xl: initial; + --__ac-stack-gap-sm: var(--__ac-stack-gap-xs); + --__ac-stack-gap-md: var(--__ac-stack-gap-md); + --__ac-stack-gap-lg: var(--__ac-stack-gap-lg); + --__ac-stack-gap-xl: var(--__ac-stack-gap-xl); --__ac-stack-gap: var(--__ac-stack-gap-xs); + --__ac-stack-justify-xs: initial; + --__ac-stack-justify-sm: var(--__ac-stack-justify-xs); + --__ac-stack-justify-md: var(--__ac-stack-justify-md); + --__ac-stack-justify-lg: var(--__ac-stack-justify-lg); + --__ac-stack-justify-xl: var(--__ac-stack-justify-xl); + --__ac-stack-justify: var(--__ac-stack-justify-xs); + --__ac-stack-align-xs: initial; + --__ac-stack-align-sm: var(--__ac-stack-align-xs); + --__ac-stack-align-md: var(--__ac-stack-align-md); + --__ac-stack-align-lg: var(--__ac-stack-align-lg); + --__ac-stack-align-xl: var(--__ac-stack-align-xl); + --__ac-stack-align: var(--__ac-stack-align-xs); + --__ac-stack-direction-xs: initial; + --__ac-stack-direction-sm: var(--__ac-stack-direction-xs); + --__ac-stack-direction-md: var(--__ac-stack-direction-md); + --__ac-stack-direction-lg: var(--__ac-stack-direction-lg); + --__ac-stack-direction-xl: var(--__ac-stack-direction-xl); + --__ac-stack-direction: var(--__ac-stack-direction-xs); gap: var(--__ac-stack-gap); display: flex; @@ -33,27 +48,36 @@ @media (min-width: 480px) { .navds-stack { - --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)); + --__ac-stack-gap: var(--__ac-stack-gap-sm); + --__ac-stack-align: var(--__ac-stack-align-sm); + --__ac-stack-justify: var(--__ac-stack-justify-sm); + --__ac-stack-direction: var(--__ac-stack-direction-sm); } } @media (min-width: 768px) { .navds-stack { - --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))); + --__ac-stack-gap: var(--__ac-stack-gap-md); + --__ac-stack-align: var(--__ac-stack-align-md); + --__ac-stack-justify: var(--__ac-stack-justify-md); + --__ac-stack-direction: var(--__ac-stack-direction-md); } } @media (min-width: 1024px) { .navds-stack { - --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)))); + --__ac-stack-gap: var(--__ac-stack-gap-lg); + --__ac-stack-align: var(--__ac-stack-align-lg); + --__ac-stack-justify: var(--__ac-stack-justify-lg); + --__ac-stack-direction: var(--__ac-stack-direction-lg); } } @media (min-width: 1280px) { .navds-stack { - --__ac-stack-gap: var( - --__ac-stack-gap-xl, - var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)))) - ); + --__ac-stack-gap: var(--__ac-stack-gap-xl); + --__ac-stack-align: var(--__ac-stack-align-xl); + --__ac-stack-justify: var(--__ac-stack-justify-xl); + --__ac-stack-direction: var(--__ac-stack-direction-xl); } } diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index db12743d59..5014948b43 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -3,6 +3,7 @@ import React, { forwardRef, HTMLAttributes } from "react"; import { OverridableComponent } from "../../util/OverridableComponent"; import { getResponsiveProps, + getResponsiveValue, ResponsiveProp, SpacingScale, } from "../utilities/css"; @@ -12,17 +13,18 @@ export interface StackProps extends HTMLAttributes { /** * Justify-content */ - justify?: + justify?: ResponsiveProp< | "start" | "center" | "end" | "space-around" | "space-between" - | "space-evenly"; + | "space-evenly" + >; /** * Align-items */ - align?: "start" | "center" | "end" | "baseline" | "stretch"; + align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">; /** * flex-wrap */ @@ -33,7 +35,7 @@ export interface StackProps extends HTMLAttributes { * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} */ gap?: ResponsiveProp; - direction: "row" | "column"; + direction: ResponsiveProp<"row" | "column">; } export const Stack: OverridableComponent = @@ -54,11 +56,11 @@ export const Stack: OverridableComponent = ) => { const style: React.CSSProperties = { ..._style, - "--__ac-stack-direction": direction, - "--__ac-stack-align": align, - "--__ac-stack-justify": justify, "--__ac-stack-wrap": wrap ? "wrap" : "nowrap", ...getResponsiveProps(`stack`, "gap", "spacing", gap), + ...getResponsiveValue(`stack`, "direction", direction), + ...getResponsiveValue(`stack`, "align", align), + ...getResponsiveValue(`stack`, "justify", justify), }; return ( diff --git a/yarn.lock b/yarn.lock index 21dacc60bb..e31e81bb19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3585,7 +3585,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^5.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^5.5.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3612,8 +3612,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^5.4.1 - "@navikt/ds-tokens": ^5.4.1 + "@navikt/ds-css": ^5.5.0 + "@navikt/ds-tokens": ^5.5.0 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -3631,7 +3631,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 5.4.1 + "@navikt/ds-css": 5.5.0 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -3655,11 +3655,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@5.4.1, @navikt/ds-css@^5.4.1, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@5.5.0, @navikt/ds-css@^5.5.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^5.4.1 + "@navikt/ds-tokens": ^5.5.0 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3672,13 +3672,13 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@5.4.1, @navikt/ds-react@^5.4.1, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@5.5.0, @navikt/ds-react@^5.5.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.24.1 - "@navikt/aksel-icons": ^5.4.1 - "@navikt/ds-tokens": ^5.4.1 + "@navikt/aksel-icons": ^5.5.0 + "@navikt/ds-tokens": ^5.5.0 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3712,11 +3712,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^5.4.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^5.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^5.4.1 + "@navikt/ds-tokens": ^5.5.0 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3727,7 +3727,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^5.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^5.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8657,11 +8657,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^5.4.1 - "@navikt/ds-css": ^5.4.1 - "@navikt/ds-react": ^5.4.1 - "@navikt/ds-tailwind": ^5.4.1 - "@navikt/ds-tokens": ^5.4.1 + "@navikt/aksel-icons": ^5.5.0 + "@navikt/ds-css": ^5.5.0 + "@navikt/ds-react": ^5.5.0 + "@navikt/ds-tailwind": ^5.5.0 + "@navikt/ds-tokens": ^5.5.0 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -23786,8 +23786,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 5.4.1 - "@navikt/ds-react": 5.4.1 + "@navikt/ds-css": 5.5.0 + "@navikt/ds-react": 5.5.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^3.1.0 From 1b37c47d94f7aff959e7fe8e3af0e81fddbd3131 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Sep 2023 13:24:41 +0200 Subject: [PATCH 2/6] :bug: tokens inherited feil tken --- @navikt/core/css/primitives/stack.css | 24 ++++++++++---------- @navikt/core/react/src/layout/stack/index.ts | 1 + 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/@navikt/core/css/primitives/stack.css b/@navikt/core/css/primitives/stack.css index 0ae53ea9b7..73ad2efed8 100644 --- a/@navikt/core/css/primitives/stack.css +++ b/@navikt/core/css/primitives/stack.css @@ -2,27 +2,27 @@ --__ac-stack-wrap: initial; --__ac-stack-gap-xs: initial; --__ac-stack-gap-sm: var(--__ac-stack-gap-xs); - --__ac-stack-gap-md: var(--__ac-stack-gap-md); - --__ac-stack-gap-lg: var(--__ac-stack-gap-lg); - --__ac-stack-gap-xl: var(--__ac-stack-gap-xl); + --__ac-stack-gap-md: var(--__ac-stack-gap-sm); + --__ac-stack-gap-lg: var(--__ac-stack-gap-md); + --__ac-stack-gap-xl: var(--__ac-stack-gap-lg); --__ac-stack-gap: var(--__ac-stack-gap-xs); --__ac-stack-justify-xs: initial; --__ac-stack-justify-sm: var(--__ac-stack-justify-xs); - --__ac-stack-justify-md: var(--__ac-stack-justify-md); - --__ac-stack-justify-lg: var(--__ac-stack-justify-lg); - --__ac-stack-justify-xl: var(--__ac-stack-justify-xl); + --__ac-stack-justify-md: var(--__ac-stack-justify-sm); + --__ac-stack-justify-lg: var(--__ac-stack-justify-md); + --__ac-stack-justify-xl: var(--__ac-stack-justify-lg); --__ac-stack-justify: var(--__ac-stack-justify-xs); --__ac-stack-align-xs: initial; --__ac-stack-align-sm: var(--__ac-stack-align-xs); - --__ac-stack-align-md: var(--__ac-stack-align-md); - --__ac-stack-align-lg: var(--__ac-stack-align-lg); - --__ac-stack-align-xl: var(--__ac-stack-align-xl); + --__ac-stack-align-md: var(--__ac-stack-align-sm); + --__ac-stack-align-lg: var(--__ac-stack-align-md); + --__ac-stack-align-xl: var(--__ac-stack-align-lg); --__ac-stack-align: var(--__ac-stack-align-xs); --__ac-stack-direction-xs: initial; --__ac-stack-direction-sm: var(--__ac-stack-direction-xs); - --__ac-stack-direction-md: var(--__ac-stack-direction-md); - --__ac-stack-direction-lg: var(--__ac-stack-direction-lg); - --__ac-stack-direction-xl: var(--__ac-stack-direction-xl); + --__ac-stack-direction-md: var(--__ac-stack-direction-sm); + --__ac-stack-direction-lg: var(--__ac-stack-direction-md); + --__ac-stack-direction-xl: var(--__ac-stack-direction-lg); --__ac-stack-direction: var(--__ac-stack-direction-xs); gap: var(--__ac-stack-gap); diff --git a/@navikt/core/react/src/layout/stack/index.ts b/@navikt/core/react/src/layout/stack/index.ts index 3cca62e4af..8baddaeab0 100644 --- a/@navikt/core/react/src/layout/stack/index.ts +++ b/@navikt/core/react/src/layout/stack/index.ts @@ -1,3 +1,4 @@ export { HStack, type HStackProps } from "./HStack"; export { VStack, type VStackProps } from "./VStack"; +export { Stack, type StackProps } from "./Stack"; export { Spacer } from "./Spacer"; From 6f20d48f7703053d1fc0f967f5117f889c7ad439 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Sep 2023 14:03:54 +0200 Subject: [PATCH 3/6] :art: responsive demo --- @navikt/core/react/src/layout/stack/Stack.tsx | 8 +++++-- .../react/src/layout/stack/stack.stories.tsx | 24 ++++++++++++++++++- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index 5014948b43..71f85b50ac 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -35,7 +35,11 @@ export interface StackProps extends HTMLAttributes { * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} */ gap?: ResponsiveProp; - direction: ResponsiveProp<"row" | "column">; + /** + * flex-direction + * @default "row" + */ + direction?: ResponsiveProp<"row" | "column">; } export const Stack: OverridableComponent = @@ -49,7 +53,7 @@ export const Stack: OverridableComponent = wrap = true, gap, style: _style, - direction, + direction = "row", ...rest }, ref diff --git a/@navikt/core/react/src/layout/stack/stack.stories.tsx b/@navikt/core/react/src/layout/stack/stack.stories.tsx index aea1e5b7b6..28944cea35 100644 --- a/@navikt/core/react/src/layout/stack/stack.stories.tsx +++ b/@navikt/core/react/src/layout/stack/stack.stories.tsx @@ -1,6 +1,7 @@ import React from "react"; import type { Meta } from "@storybook/react"; -import { HStack, VStack, Spacer } from "."; +import { HStack, VStack, Spacer, Stack } from "."; +import { Box } from "../box"; export default { title: "ds-react/Primitives/Stack", @@ -133,6 +134,27 @@ export const DividerDemo = { ), }; +export const ResponsiveDirection = { + render: () => ( + + + + + + + + + ), +}; + function Placeholders({ count, children, From 3d9f795093a7b3bdf38ab77b3793a0337c3fde57 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Sep 2023 14:27:36 +0200 Subject: [PATCH 4/6] :memo: Stack-docs --- @navikt/core/css/primitives/stack.css | 3 -- .../h-stack/responsive-direction.tsx | 36 +++++++++++++++++++ .../pages/eksempler/h-stack/spacer.tsx | 2 +- 3 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 aksel.nav.no/website/pages/eksempler/h-stack/responsive-direction.tsx diff --git a/@navikt/core/css/primitives/stack.css b/@navikt/core/css/primitives/stack.css index 73ad2efed8..1c11d5c9eb 100644 --- a/@navikt/core/css/primitives/stack.css +++ b/@navikt/core/css/primitives/stack.css @@ -40,9 +40,6 @@ .navds-stack > .navds-stack__spacer { margin-block-start: calc(var(--__ac-stack-gap) * -1); -} - -.navds-hstack > .navds-stack__spacer { margin-inline-start: calc(var(--__ac-stack-gap) * -1); } diff --git a/aksel.nav.no/website/pages/eksempler/h-stack/responsive-direction.tsx b/aksel.nav.no/website/pages/eksempler/h-stack/responsive-direction.tsx new file mode 100644 index 0000000000..25fb82ff3d --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/h-stack/responsive-direction.tsx @@ -0,0 +1,36 @@ +import { Stack } from "@navikt/ds-react"; +import { withDsExample } from "components/website-modules/examples/withDsExample"; + +const Example = () => { + return ( + + + + + + + ); +}; + +export default withDsExample(Example, { + showBreakpoints: true, + variant: "full", +}); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 7, + desc: "Ønsker du å endre fra 'row' til 'column' ved et brekkpunkt kan du bruke 'Stack'-komponenten. Husk å også oppdatere 'align' og 'justify' samtidig.", +}; + +const Placeholder = () => { + return
; +}; diff --git a/aksel.nav.no/website/pages/eksempler/h-stack/spacer.tsx b/aksel.nav.no/website/pages/eksempler/h-stack/spacer.tsx index b18e3eb886..9284afab9c 100644 --- a/aksel.nav.no/website/pages/eksempler/h-stack/spacer.tsx +++ b/aksel.nav.no/website/pages/eksempler/h-stack/spacer.tsx @@ -24,7 +24,7 @@ export const Demo = { }; export const args = { - index: 7, + index: 99, desc: "Spacer lar deg lett legge inn automatisk stretch mellom elementer. Dette kan komme inn nyttig når man f.eks skal plassere knapper i 'InternalHeader'.", }; From 254b8cedb03fd83c7655331be8194175cb756ac4 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Sep 2023 14:31:06 +0200 Subject: [PATCH 5/6] :memo: Changeset --- .changeset/rich-squids-shout.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/rich-squids-shout.md diff --git a/.changeset/rich-squids-shout.md b/.changeset/rich-squids-shout.md new file mode 100644 index 0000000000..5f684eea48 --- /dev/null +++ b/.changeset/rich-squids-shout.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +Stack: Kan nå endre flex-direction ved brekkpunkt From f12666ee9564cef6c3330fd3e219765575a1720b Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Mon, 18 Sep 2023 15:04:05 +0200 Subject: [PATCH 6/6] Update .changeset/rich-squids-shout.md --- .changeset/rich-squids-shout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rich-squids-shout.md b/.changeset/rich-squids-shout.md index 5f684eea48..f5d4b86e3c 100644 --- a/.changeset/rich-squids-shout.md +++ b/.changeset/rich-squids-shout.md @@ -3,4 +3,4 @@ "@navikt/ds-css": patch --- -Stack: Kan nå endre flex-direction ved brekkpunkt +Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`.