From bf65083bb5973624a42fa7f1efdd93823e4b05d6 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 1 Mar 2023 12:38:53 +0100 Subject: [PATCH 1/5] :art: Tokens for breakpoints og tailwind-config --- @navikt/core/tailwind/src/getBreakpoints.ts | 11 +++++++++++ @navikt/core/tailwind/src/index.ts | 2 ++ @navikt/core/tokens/src/index.js | 11 +++++++++++ 3 files changed, 24 insertions(+) create mode 100644 @navikt/core/tailwind/src/getBreakpoints.ts diff --git a/@navikt/core/tailwind/src/getBreakpoints.ts b/@navikt/core/tailwind/src/getBreakpoints.ts new file mode 100644 index 00000000000..98d143d4013 --- /dev/null +++ b/@navikt/core/tailwind/src/getBreakpoints.ts @@ -0,0 +1,11 @@ +import Reducer from "./reducer"; + +export const getBreakpoints = (tokens: { [key: string]: string | number }) => { + const breakpoints = Reducer(tokens, ["breakpoint"]); + + return Object.keys(breakpoints) + .filter((key) => !key.includes("xs") && !key.includes("-down")) + .reduce((cur, key) => { + return Object.assign(cur, { [key]: breakpoints[key] }); + }, {}); +}; diff --git a/@navikt/core/tailwind/src/index.ts b/@navikt/core/tailwind/src/index.ts index fa3645b1fef..4f529395d56 100644 --- a/@navikt/core/tailwind/src/index.ts +++ b/@navikt/core/tailwind/src/index.ts @@ -2,6 +2,7 @@ import * as TokensBuild from "@navikt/ds-tokens/dist/tokens"; import { writeFileSync } from "fs"; import { getColors } from "./colors"; +import { getBreakpoints } from "./getBreakpoints"; import kebabCase from "./kebabCase"; import Reducer from "./reducer"; @@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce( const config = { theme: { colors: getColors(tokens), + screen: getBreakpoints(tokens), extend: { spacing: Reducer(tokens, ["spacing"]), zIndex: Reducer(tokens, ["z-index"]), diff --git a/@navikt/core/tokens/src/index.js b/@navikt/core/tokens/src/index.js index d85173622c3..70659416a10 100644 --- a/@navikt/core/tokens/src/index.js +++ b/@navikt/core/tokens/src/index.js @@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`; module.exports = { a: { + breakpoint: { + xs: { value: "0" }, + sm: { value: "480px" }, + "sm-down": { value: "479px" }, + md: { value: "768px" }, + "md-down": { value: "767px" }, + lg: { value: "1024px" }, + "lg-down": { value: "1023px" }, + xl: { value: "1280px" }, + "xl-down": { value: "1279px" }, + }, font: { family: { value: '"Source Sans Pro", Arial, sans-serif' }, line: { From 88c3b8a7645a211cc80a24a08c5e306f00187c5c Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 1 Mar 2023 13:48:16 +0100 Subject: [PATCH 2/5] :memo: Changeset --- .changeset/gorgeous-emus-exercise.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/gorgeous-emus-exercise.md diff --git a/.changeset/gorgeous-emus-exercise.md b/.changeset/gorgeous-emus-exercise.md new file mode 100644 index 00000000000..c2447842e9e --- /dev/null +++ b/.changeset/gorgeous-emus-exercise.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-tailwind": minor +"@navikt/ds-tokens": minor +--- + +Breakpoint-tokens for ds-tokens og ds-tailwind From 42c19883806892d229be59953313912f12d06595 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 1 Mar 2023 13:56:08 +0100 Subject: [PATCH 3/5] :white_check_mark: Tester for nye tokens --- @navikt/core/tokens/docs.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json index 558e916ae88..8a957820e1a 100644 --- a/@navikt/core/tokens/docs.json +++ b/@navikt/core/tokens/docs.json @@ -1,4 +1,15 @@ { + "breakpoints": [ + { "name": "--a-breakpoint-xs", "value": "0" }, + { "name": "--a-breakpoint-sm", "value": "480px" }, + { "name": "--a-breakpoint-sm-down", "value": "479px" }, + { "name": "--a-breakpoint-md", "value": "768px" }, + { "name": "--a-breakpoint-md-down", "value": "767px" }, + { "name": "--a-breakpoint-lg", "value": "1024px" }, + { "name": "--a-breakpoint-lg-down", "value": "1023px" }, + { "name": "--a-breakpoint-xl", "value": "1280px" }, + { "name": "--a-breakpoint-xl-down", "value": "1279px" } + ], "font": [ { "name": "--a-font-family", From e632ba93a7373b67c12df07d550fb11f83138054 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 1 Mar 2023 16:29:25 +0100 Subject: [PATCH 4/5] :arrow_up: yarn.lock --- yarn.lock | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/yarn.lock b/yarn.lock index f115b5a94e5..39dcba040e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3351,7 +3351,7 @@ __metadata: languageName: node linkType: hard -"@navikt/ds-codemod@^2.4.0, @navikt/ds-codemod@workspace:@navikt/codemod": +"@navikt/ds-codemod@^2.4.3, @navikt/ds-codemod@workspace:@navikt/codemod": version: 0.0.0-use.local resolution: "@navikt/ds-codemod@workspace:@navikt/codemod" dependencies: @@ -3378,7 +3378,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css-internal@^2.4.0, @navikt/ds-css-internal@workspace:@navikt/internal/css": +"@navikt/ds-css-internal@^2.4.3, @navikt/ds-css-internal@workspace:@navikt/internal/css": version: 0.0.0-use.local resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css" dependencies: @@ -3389,11 +3389,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@2.4.0, @navikt/ds-css@^2.4.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@2.4.3, @navikt/ds-css@^2.4.3, @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": ^2.4.0 + "@navikt/ds-tokens": ^2.4.3 normalize.css: ^8.0.1 postcss: ^8.4.0 postcss-cli: ^9.0.0 @@ -3402,7 +3402,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-icons@^2.4.0, @navikt/ds-icons@workspace:@navikt/icons": +"@navikt/ds-icons@^2.4.3, @navikt/ds-icons@workspace:@navikt/icons": version: 0.0.0-use.local resolution: "@navikt/ds-icons@workspace:@navikt/icons" dependencies: @@ -3438,8 +3438,8 @@ __metadata: "@babel/preset-env": 7.19.4 "@babel/preset-react": 7.18.6 "@babel/preset-typescript": 7.18.6 - "@navikt/ds-icons": ^2.4.0 - "@navikt/ds-react": ^2.4.0 + "@navikt/ds-icons": ^2.4.3 + "@navikt/ds-react": ^2.4.3 "@rollup/plugin-babel": 6.0.2 "@rollup/plugin-commonjs": 23.0.2 "@rollup/plugin-node-resolve": ^15.0.1 @@ -3464,12 +3464,12 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react-internal@^2.4.0, @navikt/ds-react-internal@workspace:@navikt/internal/react": +"@navikt/ds-react-internal@^2.4.3, @navikt/ds-react-internal@workspace:@navikt/internal/react": version: 0.0.0-use.local resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react" dependencies: - "@navikt/ds-icons": ^2.4.0 - "@navikt/ds-react": ^2.4.0 + "@navikt/ds-icons": ^2.4.3 + "@navikt/ds-react": ^2.4.3 clsx: ^1.1.1 concurrently: 7.2.1 copy-to-clipboard: ^3.3.1 @@ -3485,12 +3485,12 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@2.4.0, @navikt/ds-react@^2.4.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@2.4.3, @navikt/ds-react@^2.4.3, @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.17.0 - "@navikt/ds-icons": ^2.4.0 + "@navikt/ds-icons": ^2.4.3 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3526,11 +3526,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^2.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^2.4.3, @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": ^2.4.0 + "@navikt/ds-tokens": ^2.4.3 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3541,7 +3541,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^2.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^2.4.3, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -7390,14 +7390,14 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/ds-codemod": ^2.4.0 - "@navikt/ds-css": ^2.4.0 - "@navikt/ds-css-internal": ^2.4.0 - "@navikt/ds-icons": ^2.4.0 - "@navikt/ds-react": ^2.4.0 - "@navikt/ds-react-internal": ^2.4.0 - "@navikt/ds-tailwind": ^2.4.0 - "@navikt/ds-tokens": ^2.4.0 + "@navikt/ds-codemod": ^2.4.3 + "@navikt/ds-css": ^2.4.3 + "@navikt/ds-css-internal": ^2.4.3 + "@navikt/ds-icons": ^2.4.3 + "@navikt/ds-react": ^2.4.3 + "@navikt/ds-react-internal": ^2.4.3 + "@navikt/ds-tailwind": ^2.4.3 + "@navikt/ds-tokens": ^2.4.3 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -21749,8 +21749,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 2.4.0 - "@navikt/ds-react": 2.4.0 + "@navikt/ds-css": 2.4.3 + "@navikt/ds-react": 2.4.3 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^2.1.0 From 52334e57c5bfd9f0abcb29ea7be758c430e2b950 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 1 Mar 2023 16:59:05 +0100 Subject: [PATCH 5/5] :art: Migrert til oppdatert breakpoints --- .../website/components/layout/header/Hamburger.tsx | 2 +- .../website/components/layout/header/Header.tsx | 2 +- .../layout/page-templates/AkselPrinsipp.tsx | 6 +++--- .../components/layout/page-templates/WithSidebar.tsx | 6 +++--- .../layout/page-templates/wrappers/NoSidebar.tsx | 2 +- .../website/components/sanity-modules/DoDont.tsx | 2 +- .../components/sanity-modules/bilde/Bilde.tsx | 2 +- .../components/sanity-modules/cards/InnholdsKort.tsx | 2 +- .../sanity-modules/cards/RelatertInnhold.tsx | 2 +- .../sanity-modules/code-examples/Examples.tsx | 2 +- .../sanity-modules/icon-search/ModalContent.tsx | 2 +- .../website/components/sanity-modules/tips/index.tsx | 4 ++-- .../website/components/website-modules/TOCv2.tsx | 2 +- aksel.nav.no/website/pages/god-praksis/[slug].tsx | 2 +- aksel.nav.no/website/pages/index.tsx | 12 ++++++------ aksel.nav.no/website/pages/produktbloggen/[slug].tsx | 4 ++-- aksel.nav.no/website/pages/produktbloggen/index.tsx | 2 +- aksel.nav.no/website/pages/side/[slug].tsx | 2 +- aksel.nav.no/website/styles/layout.css | 6 +++--- aksel.nav.no/website/styles/utilities.css | 10 +++++----- aksel.nav.no/website/tailwind.config.js | 9 --------- 21 files changed, 37 insertions(+), 46 deletions(-) diff --git a/aksel.nav.no/website/components/layout/header/Hamburger.tsx b/aksel.nav.no/website/components/layout/header/Hamburger.tsx index c7b0e13a268..c5936d4fa60 100644 --- a/aksel.nav.no/website/components/layout/header/Hamburger.tsx +++ b/aksel.nav.no/website/components/layout/header/Hamburger.tsx @@ -63,7 +63,7 @@ export const Hamburger = () => { aria={{ modal: true }} overlayClassName="header-modal__overlay" contentLabel="Meny" - className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden" + className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden" >