diff --git a/.changeset/heavy-shoes-pay.md b/.changeset/heavy-shoes-pay.md new file mode 100644 index 0000000000..1c174878de --- /dev/null +++ b/.changeset/heavy-shoes-pay.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Loader: Har nå riktig `ref`-type. diff --git a/.eslintrc.js b/.eslintrc.js index e74d923c60..1ff46b63bb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -39,6 +39,7 @@ module.exports = { files: ["**/*.ts?(x)"], extends: ["plugin:@typescript-eslint/recommended"], rules: { + "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true } "@typescript-eslint/no-explicit-any": "off", // Temporary }, }, diff --git a/@navikt/aksel-icons/CHANGELOG.md b/@navikt/aksel-icons/CHANGELOG.md index 41542f0512..7e855ad24e 100644 --- a/@navikt/aksel-icons/CHANGELOG.md +++ b/@navikt/aksel-icons/CHANGELOG.md @@ -1,5 +1,9 @@ # @navikt/aksel-icons +## 5.7.4 + +## 5.7.3 + ## 5.7.2 ## 5.7.1 diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json index 83bc7e2760..359338e866 100644 --- a/@navikt/aksel-icons/package.json +++ b/@navikt/aksel-icons/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/aksel-icons", - "version": "5.7.2", + "version": "5.7.4", "author": "Aksel | NAV", "homepage": "https://aksel.nav.no/ikoner", "repository": { diff --git a/@navikt/aksel-stylelint/CHANGELOG.md b/@navikt/aksel-stylelint/CHANGELOG.md index 18656360a9..e10cc260eb 100644 --- a/@navikt/aksel-stylelint/CHANGELOG.md +++ b/@navikt/aksel-stylelint/CHANGELOG.md @@ -1,5 +1,9 @@ # @navikt/aksel-stylelint +## 5.7.4 + +## 5.7.3 + ## 5.7.2 ## 5.7.1 diff --git a/@navikt/aksel-stylelint/package.json b/@navikt/aksel-stylelint/package.json index 2214776a1b..72e7b75e60 100644 --- a/@navikt/aksel-stylelint/package.json +++ b/@navikt/aksel-stylelint/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/aksel-stylelint", - "version": "5.7.2", + "version": "5.7.4", "author": "Aksel | NAV", "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint", "repository": { @@ -35,8 +35,8 @@ "dev": "yarn watch:lint" }, "devDependencies": { - "@navikt/ds-css": "^5.7.2", - "@navikt/ds-tokens": "^5.7.2", + "@navikt/ds-css": "^5.7.4", + "@navikt/ds-tokens": "^5.7.4", "@types/jest": "^29.0.0", "concurrently": "7.2.1", "copyfiles": "2.4.1", diff --git a/@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts b/@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts index dd2b8ce527..970b52e124 100644 --- a/@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts +++ b/@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts @@ -1,7 +1,7 @@ -import stylelint from "stylelint"; -import valueParser from "postcss-value-parser"; import { readFileSync } from "node:fs"; import { Node as PostCSSNode } from "postcss"; +import valueParser from "postcss-value-parser"; +import stylelint from "stylelint"; import { isCustomProperty, tokenExists } from "../../utils"; @@ -34,7 +34,6 @@ export const messages = stylelint.utils.ruleMessages(ruleName, { }); const checkDeclValue = ( - controlledPrefixes: string[], value: string, postcssResult: stylelint.PostcssResult, rootNode: PostCSSNode @@ -58,7 +57,6 @@ const checkDeclValue = ( }; const checkDeclProp = ( - controlledPrefixes: string[], prop: string, postcssResult: stylelint.PostcssResult, rootNode: PostCSSNode @@ -81,8 +79,8 @@ const checkDeclProp = ( const ruleFunction: stylelint.Rule = () => { return (postcssRoot, postcssResult) => { postcssRoot.walkDecls((node) => { - checkDeclValue(controlledPrefixes, node.value, postcssResult, node); - checkDeclProp(controlledPrefixes, node.prop, postcssResult, node); + checkDeclValue(node.value, postcssResult, node); + checkDeclProp(node.prop, postcssResult, node); }); }; }; diff --git a/@navikt/aksel-stylelint/src/utils.ts b/@navikt/aksel-stylelint/src/utils.ts index e39c67548c..67458e8a27 100644 --- a/@navikt/aksel-stylelint/src/utils.ts +++ b/@navikt/aksel-stylelint/src/utils.ts @@ -92,16 +92,6 @@ const tokenJsonFile = "./tokens.json"; const allowedTokenNames = []; -export const addTokens = ( - tokenJSONFile: string, - allowedTokenNames: string[] -) => { - const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`); - const fileString = jsonFileBuffer.toString(); - const flattened = flattenObject(JSON.parse(fileString)); - flattened.forEach((token) => allowedTokenNames.push(token)); -}; - export const tokenExists = ( controlledPrefixes: string[], inputToken: string @@ -110,7 +100,6 @@ export const tokenExists = ( if (!allowedTokenNames.length) { const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`); const cssFileString = cssFileBuffer.toString(); - valueParser(cssFileString).walk((node) => { if ( node.type === "word" && @@ -121,7 +110,9 @@ export const tokenExists = ( } }); - addTokens(tokenJsonFile, allowedTokenNames); + const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJsonFile}`); + const flattened = flattenObject(JSON.parse(jsonFileBuffer.toString())); + flattened.forEach((token) => allowedTokenNames.push(token)); } return allowedTokenNames.includes(inputToken); diff --git a/@navikt/aksel/CHANGELOG.md b/@navikt/aksel/CHANGELOG.md index 2ab5a164bd..0c1ec2534c 100644 --- a/@navikt/aksel/CHANGELOG.md +++ b/@navikt/aksel/CHANGELOG.md @@ -1,5 +1,19 @@ # @navikt/aksel +## 5.7.4 + +### Patch Changes + +- Updated dependencies []: + - @navikt/ds-css@5.7.4 + +## 5.7.3 + +### Patch Changes + +- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96), [`d8a4097c8`](https://github.com/navikt/aksel/commit/d8a4097c82ceee95bd216b36e1dc8eb99e75d7ee), [`a6b673386`](https://github.com/navikt/aksel/commit/a6b67338612b7944dc4e6b3d541244f521e94500)]: + - @navikt/ds-css@5.7.3 + ## 5.7.2 ### Patch Changes diff --git a/@navikt/aksel/package.json b/@navikt/aksel/package.json index b866e51712..0989b9e902 100644 --- a/@navikt/aksel/package.json +++ b/@navikt/aksel/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/aksel", - "version": "5.7.2", + "version": "5.7.4", "description": "Aksel command line interface. Handles css-imports, codemods and more", "author": "Aksel | NAV designsystem team", "license": "MIT", @@ -29,7 +29,7 @@ }, "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje", "dependencies": { - "@navikt/ds-css": "5.7.2", + "@navikt/ds-css": "5.7.4", "axios": "1.3.6", "chalk": "4.1.0", "clipboardy": "^2.3.0", diff --git a/@navikt/aksel/src/codemod/migrations.ts b/@navikt/aksel/src/codemod/migrations.ts index 50874dc1af..15eafd6519 100644 --- a/@navikt/aksel/src/codemod/migrations.ts +++ b/@navikt/aksel/src/codemod/migrations.ts @@ -111,9 +111,9 @@ export function getMigrationNames() { export function getMigrationString() { let str = ""; - Object.entries(migrations).forEach(([version, migrations]) => { + Object.entries(migrations).forEach(([version, vMigrations]) => { str += `\n${chalk.underline(version)}\n`; - migrations.forEach((migration) => { + vMigrations.forEach((migration) => { str += `${chalk.blue(migration.value)}: ${migration.description}\n`; }); }); diff --git a/@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts b/@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts index bead84719b..3a63f7a26a 100644 --- a/@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts +++ b/@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts @@ -13,10 +13,10 @@ export default function transformer(file, api) { function addMigrationTag(node) { const attributes = node.openingElement.attributes; const isMigrated = attributes.find( - (node) => - node.type === "JSXAttribute" && - node.name.name === "data-version" && - node.value.value === "v1" + (attr) => + attr.type === "JSXAttribute" && + attr.name.name === "data-version" && + attr.value.value === "v1" ); if (!isMigrated) { @@ -30,7 +30,7 @@ export default function transformer(file, api) { function addExplicitStandardProp(node) { const attributes = node.openingElement.attributes; const variant = attributes.find( - (node) => node.type === "JSXAttribute" && node.name.name === "size" + (attr) => attr.type === "JSXAttribute" && attr.name.name === "size" ); if (!variant) { diff --git a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts index 9d020bc15e..bd038dca9a 100644 --- a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts +++ b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts @@ -1,12 +1,12 @@ import type { JSCodeshift } from "jscodeshift"; +import { tokens } from "../../../tokens-map.mjs"; import { getImportSpecifier, getImportSpecifierName, renameImportSpecifier, } from "../../../utils/imports"; -import { translateToken } from "../../../utils/translate-token"; -import { tokens } from "../../../tokens-map.mjs"; import { getLineTerminator } from "../../../utils/lineterminator"; +import { translateToken } from "../../../utils/translate-token"; /** * @param {import('jscodeshift').FileInfo} file @@ -29,9 +29,9 @@ export default function transformer(file: JSCodeshift, api) { return src; } - tokens.forEach((x) => { - const name = translateToken(x[0], "js"); - const out = translateToken(x[1], "js"); + tokens.forEach((token) => { + const name = translateToken(token[0], "js"); + const out = translateToken(token[1], "js"); let foundName: string = ""; diff --git a/@navikt/core/css/CHANGELOG.md b/@navikt/core/css/CHANGELOG.md index 049d7baf3f..29a9acaeec 100644 --- a/@navikt/core/css/CHANGELOG.md +++ b/@navikt/core/css/CHANGELOG.md @@ -1,5 +1,17 @@ # @navikt/ds-css +## 5.7.4 + +## 5.7.3 + +### Patch Changes + +- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370)) + +- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383)) + +- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376)) + ## 5.7.2 ## 5.7.1 diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css index b3a7142c8e..51b98098e7 100644 --- a/@navikt/core/css/chips.css +++ b/@navikt/core/css/chips.css @@ -160,11 +160,11 @@ } .navds-chips--icon-left { - padding-left: 0.375rem; + padding-left: var(--a-spacing-1-alt); } .navds-chips--icon-right { - padding-right: 0.375rem; + padding-right: var(--a-spacing-1-alt); } .navds-chips--small .navds-chips--icon-right { diff --git a/@navikt/core/css/copybutton.css b/@navikt/core/css/copybutton.css index 9a88188fda..03ca04c1ad 100644 --- a/@navikt/core/css/copybutton.css +++ b/@navikt/core/css/copybutton.css @@ -175,7 +175,7 @@ } .navds-copybutton--small > .navds-copybutton__content { - gap: 0.375rem; + gap: var(--a-spacing-1-alt); } .navds-copybutton--xsmall > .navds-copybutton__content { diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css index 3787b27eca..f8a138c6b6 100644 --- a/@navikt/core/css/form/radio-checkbox.css +++ b/@navikt/core/css/form/radio-checkbox.css @@ -61,7 +61,7 @@ .navds-checkbox--small > .navds-checkbox__label, .navds-radio--small > .navds-radio__label { - padding: 0.375rem 0; + padding: var(--a-spacing-1-alt) 0; } .navds-checkbox--small > .navds-checkbox__label::before, @@ -104,7 +104,7 @@ content: ""; position: absolute; top: 50%; - transform: translate(0.375rem, -50%); + transform: translate(var(--a-spacing-1-alt), -50%); background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default)); width: 0.75rem; height: 0.25rem; @@ -129,7 +129,7 @@ color: var(--ac-radio-checkbox-bg, var(--a-surface-default)); position: absolute; height: 1.5rem; - transform: translate(0.375rem); + transform: translate(var(--a-spacing-1-alt)); pointer-events: none; } diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css index 834c8d3c99..1e8a65a5ba 100644 --- a/@navikt/core/css/form/select.css +++ b/@navikt/core/css/form/select.css @@ -43,6 +43,7 @@ right: var(--a-spacing-2); pointer-events: none; align-self: center; + color: var(--ac-select-text, var(--a-text-default)); } .navds-form-field--small .navds-select__input { @@ -51,7 +52,7 @@ } .navds-form-field--small .navds-select__chevron { - right: 0.375rem; + right: var(--a-spacing-1-alt); } /** diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css index a613808518..7e0b8761e6 100644 --- a/@navikt/core/css/form/textarea.css +++ b/@navikt/core/css/form/textarea.css @@ -62,7 +62,7 @@ } .navds-form-field--small .navds-textarea__input { - padding: 0.375rem; + padding: var(--a-spacing-1-alt); } .navds-form-field--small .navds-textarea--counter.navds-textarea__input { diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css index e31a01a408..4ed9d3c826 100644 --- a/@navikt/core/css/help-text.css +++ b/@navikt/core/css/help-text.css @@ -1,6 +1,5 @@ .navds-help-text__button { margin: 0; - padding: 0; border: 0; cursor: pointer; background-color: transparent; @@ -9,17 +8,19 @@ justify-content: center; align-items: center; color: var(--ac-help-text-button-color, var(--a-surface-action)); - font-size: 1.5rem; + font-size: 1.25rem; + padding: calc(var(--a-spacing-1) / 2); } .navds-help-text__button:focus-visible { - box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); + outline: none; + box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); } @supports not selector(:focus-visible) { .navds-help-text__button:focus { outline: none; - box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); + box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); } } diff --git a/@navikt/core/css/package.json b/@navikt/core/css/package.json index 40a5ae4531..4200425eb1 100644 --- a/@navikt/core/css/package.json +++ b/@navikt/core/css/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/ds-css", - "version": "5.7.2", + "version": "5.7.4", "description": "CSS for NAV Designsystem", "author": "Aksel | NAV designsystem team", "keywords": [ @@ -27,7 +27,7 @@ "css:get-version": "node config/get-version.js" }, "devDependencies": { - "@navikt/ds-tokens": "^5.7.2", + "@navikt/ds-tokens": "^5.7.4", "cssnano": "6.0.0", "fast-glob": "3.2.11", "lodash": "4.17.21", diff --git a/@navikt/core/css/pagination.css b/@navikt/core/css/pagination.css index e540f2c48a..dc1317f684 100644 --- a/@navikt/core/css/pagination.css +++ b/@navikt/core/css/pagination.css @@ -52,8 +52,7 @@ } .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) { - padding-left: 0.375rem; - padding-right: 0.375rem; + padding-inline: var(--a-spacing-1-alt); } .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) { diff --git a/@navikt/core/css/tabs.css b/@navikt/core/css/tabs.css index 97aa9492bd..9aac4d0ce8 100644 --- a/@navikt/core/css/tabs.css +++ b/@navikt/core/css/tabs.css @@ -37,7 +37,7 @@ } .navds-tabs--small .navds-tabs__scroll-button { - padding: 0.375rem var(--a-spacing-4); + padding: var(--a-spacing-1-alt) var(--a-spacing-4); width: 2rem; } @@ -93,7 +93,7 @@ .navds-tabs__tab--small { min-height: 2rem; - padding: 0.375rem var(--a-spacing-4); + padding: var(--a-spacing-1-alt) var(--a-spacing-4); } .navds-tabs__tab-icon--top, diff --git a/@navikt/core/css/tag.css b/@navikt/core/css/tag.css index 3854e74d8f..4a843f8135 100644 --- a/@navikt/core/css/tag.css +++ b/@navikt/core/css/tag.css @@ -11,7 +11,7 @@ .navds-tag--small { min-height: 1.5rem; - padding: 0 0.375rem; + padding: 0 var(--a-spacing-1-alt); } .navds-tag--xsmall { diff --git a/@navikt/core/react/CHANGELOG.md b/@navikt/core/react/CHANGELOG.md index b1195575c4..f4aa18bf7b 100644 --- a/@navikt/core/react/CHANGELOG.md +++ b/@navikt/core/react/CHANGELOG.md @@ -1,5 +1,27 @@ # @navikt/ds-react +## 5.7.4 + +### Patch Changes + +- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400)) + +- Updated dependencies []: + - @navikt/ds-tokens@5.7.4 + - @navikt/aksel-icons@5.7.4 + +## 5.7.3 + +### Patch Changes + +- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372)) + +- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376)) + +- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96)]: + - @navikt/ds-tokens@5.7.3 + - @navikt/aksel-icons@5.7.3 + ## 5.7.2 ### Patch Changes diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json index 1603252f04..86b1e9e215 100644 --- a/@navikt/core/react/package.json +++ b/@navikt/core/react/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/ds-react", - "version": "5.7.2", + "version": "5.7.4", "description": "Aksel react-components for NAV designsystem", "author": "Aksel | NAV designsystem team", "license": "MIT", @@ -38,8 +38,8 @@ }, "dependencies": { "@floating-ui/react": "0.25.4", - "@navikt/aksel-icons": "^5.7.2", - "@navikt/ds-tokens": "^5.7.2", + "@navikt/aksel-icons": "^5.7.4", + "@navikt/ds-tokens": "^5.7.4", "@radix-ui/react-tabs": "1.0.0", "@radix-ui/react-toggle-group": "1.0.0", "clsx": "^1.2.1", diff --git a/@navikt/core/react/src/chips/chips.stories.tsx b/@navikt/core/react/src/chips/chips.stories.tsx index a2e5dac6d7..4ce53cffbd 100644 --- a/@navikt/core/react/src/chips/chips.stories.tsx +++ b/@navikt/core/react/src/chips/chips.stories.tsx @@ -1,24 +1,12 @@ +import { Meta } from "@storybook/react"; import React, { useState } from "react"; import { Chips } from "."; -export default { +const meta: Meta = { title: "ds-react/Chips", component: Chips, - argTypes: { - type: { - control: { - type: "radio", - options: ["toggle", "removable"], - }, - }, - size: { - control: { - type: "radio", - options: ["medium", "small"], - }, - }, - }, }; +export default meta; const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"]; @@ -61,6 +49,16 @@ export const Default = (props) => { ); }; +Default.argTypes = { + type: { + control: { type: "radio" }, + options: ["toggle", "removable"], + }, + size: { + control: { type: "radio" }, + options: ["medium", "small"], + }, +}; export const Toggle = () => { const [selected, setSelected] = useState([2, 4]); diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx index cce82ccd2c..04673fd7b4 100644 --- a/@navikt/core/react/src/date/datepicker/DatePicker.tsx +++ b/@navikt/core/react/src/date/datepicker/DatePicker.tsx @@ -97,17 +97,17 @@ export const DatePicker = forwardRef( const mode = rest.mode ?? ("single" as any); /** - * @param selected Date | Date[] | DateRange | undefined + * @param newSelected Date | Date[] | DateRange | undefined */ - const handleSelect = (selected) => { - setSelectedDates(selected); + const handleSelect = (newSelected) => { + setSelectedDates(newSelected); if (rest.mode === "single") { - selected && (onClose?.() ?? setOpen(false)); + newSelected && (onClose?.() ?? setOpen(false)); } else if (rest.mode === "range") { - selected?.from && selected?.to && (onClose?.() ?? setOpen(false)); + newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false)); } - rest?.onSelect?.(selected); + rest?.onSelect?.(newSelected); }; return ( diff --git a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx index 1be16599c2..e458eea4c2 100644 --- a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx +++ b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx @@ -71,11 +71,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef< const mode = rest.mode ?? ("single" as any); /** - * @param selected Date | Date[] | DateRange | undefined + * @param newSelected Date | Date[] | DateRange | undefined */ - const handleSelect = (selected) => { - setSelectedDates(selected); - onSelect?.(selected); + const handleSelect = (newSelected) => { + setSelectedDates(newSelected); + onSelect?.(newSelected); }; return ( diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx index 707ce2490d..241962b6cf 100644 --- a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx +++ b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx @@ -1,10 +1,11 @@ /* eslint-disable react-hooks/rules-of-hooks */ import { Meta, StoryObj } from "@storybook/react"; +import isSameDay from "date-fns/isSameDay"; import React, { useId, useState } from "react"; import { useDatepicker, useRangeDatepicker } from ".."; -import { Button, HGrid, VStack } from "../.."; +import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../.."; + import DatePicker, { DatePickerProps } from "./DatePicker"; -import isSameDay from "date-fns/isSameDay"; const disabledDays = [ new Date("Oct 10 2022"), @@ -432,3 +433,42 @@ export const WeekDayClick = () => { ); }; + +export const ModalDemo = () => { + const { datepickerProps, inputProps } = useDatepicker({ + fromDate: new Date("Aug 23 2019"), + toDate: new Date("Feb 23 2024"), + onDateChange: console.log, + }); + + return ( + + + + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi + incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque + animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae + molestias. + + + + + + + + + + + + + + + + ); +}; diff --git a/@navikt/core/react/src/date/hooks/useDatepicker.tsx b/@navikt/core/react/src/date/hooks/useDatepicker.tsx index 3887776ff7..b2041499bc 100644 --- a/@navikt/core/react/src/date/hooks/useDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useDatepicker.tsx @@ -164,9 +164,10 @@ export const useDatepicker = ( const [inputValue, setInputValue] = useState(defaultInputValue); const handleOpen = useCallback( - (open: boolean) => { - setOpen(open); - open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today); + (newOpen: boolean) => { + setOpen(newOpen); + newOpen && + setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today); }, [defaultMonth, defaultSelected, selectedDay, today] ); @@ -310,7 +311,7 @@ export const useDatepicker = ( const datepickerProps = { month, - onMonthChange: (month) => setMonth(month), + onMonthChange: setMonth, onDayClick: handleDayClick, selected: selectedDay ?? new Date("Invalid date"), locale: _locale, diff --git a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx index fb69c0c3e6..39b74badc5 100644 --- a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx +++ b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx @@ -161,9 +161,10 @@ export const useMonthpicker = ( const [inputValue, setInputValue] = useState(defaultInputValue); const handleOpen = useCallback( - (open: boolean) => { - setOpen(open); - open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today); + (newOpen: boolean) => { + setOpen(newOpen); + newOpen && + setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today); }, [defaultSelected, defaultYear, selectedMonth, today] ); diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx index 704a03b1cb..394dcd2e43 100644 --- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx @@ -1,5 +1,5 @@ import differenceInCalendarDays from "date-fns/differenceInCalendarDays"; -import isBefore from "date-fns/isBefore"; +import checkIsBefore from "date-fns/isBefore"; import isWeekend from "date-fns/isWeekend"; import React, { useRef, useState } from "react"; import { DateRange, isMatch } from "react-day-picker"; @@ -382,7 +382,7 @@ export const useRangeDatepicker = ( const prevToRange = !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to; - const resetTo = isBefore(prevToRange, range?.from); + const resetTo = checkIsBefore(prevToRange, range?.from); range?.from ? setFromInputValue( @@ -535,7 +535,7 @@ export const useRangeDatepicker = ( const datepickerProps = { month, - onMonthChange: (month) => setMonth(month), + onMonthChange: setMonth, onSelect: handleSelect, selected: selectedRange, locale: _locale, diff --git a/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx b/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx index 7a98a67639..63e4ab99b0 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx @@ -1,14 +1,14 @@ import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons"; +import { isAfter, isBefore } from "date-fns"; import setYear from "date-fns/setYear"; import startOfMonth from "date-fns/startOfMonth"; import startOfYear from "date-fns/startOfYear"; import React from "react"; import { useDayPicker } from "react-day-picker"; -import { useSharedMonthContext } from "../context"; -import { labelNextYear, labelPrevYear } from "../utils"; -import { isAfter, isBefore } from "date-fns"; import { Button } from "../../button"; import { Select } from "../../form/Select"; +import { useSharedMonthContext } from "../context"; +import { labelNextYear, labelPrevYear } from "../utils"; export const MonthCaption = () => { const { @@ -24,9 +24,9 @@ export const MonthCaption = () => { if (hasDropdown && fromDate && toDate) { const fromYear = fromDate.getFullYear(); - const toYear = toDate.getFullYear(); - for (let year = fromYear; year <= toYear; year++) { - years.push(setYear(startOfYear(new Date()), year)); + const toDateYear = toDate.getFullYear(); + for (let currYear = fromYear; currYear <= toDateYear; currYear++) { + years.push(setYear(startOfYear(new Date()), currYear)); } if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) { @@ -75,9 +75,9 @@ export const MonthCaption = () => { onChange={handleYearChange} className="navds-date__caption__year" > - {years.map((year) => ( - ))} diff --git a/@navikt/core/react/src/date/utils/__tests__/get-month-weeks.test.ts b/@navikt/core/react/src/date/utils/__tests__/get-month-weeks.test.ts index 1a8332819e..4607685b1f 100644 --- a/@navikt/core/react/src/date/utils/__tests__/get-month-weeks.test.ts +++ b/@navikt/core/react/src/date/utils/__tests__/get-month-weeks.test.ts @@ -1,13 +1,12 @@ /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */ -import { nb, enGB } from "date-fns/locale"; +import { enGB, nb } from "date-fns/locale"; import { getMonthWeeks } from "../get-month-weeks"; describe('when using the "nB" locale', () => { const locale = nb; describe("when getting the weeks for January 2022", () => { - const date = new Date(2022, 0); - const weeks = getMonthWeeks(date, { locale }); + const weeks = getMonthWeeks(new Date(2022, 0), { locale }); test("the first week should be the last of the previous year", () => { const weekNumbers = weeks.map((week) => week.weekNumber); expect(weekNumbers[0]).toEqual(52); @@ -29,8 +28,10 @@ describe('when using the "enGB" locale', () => { describe("when using fixed weeks", () => { const useFixedWeeks = true; describe("when getting the weeks for December 2022", () => { - const date = new Date(2022, 11); - const weeks = getMonthWeeks(date, { useFixedWeeks, locale }); + const weeks = getMonthWeeks(new Date(2022, 11), { + useFixedWeeks, + locale, + }); test("should return 48 - 1 week numbers", () => { const weekNumbers = weeks.map((week) => week.weekNumber); const expectedResult = [48, 49, 50, 51, 52, 1]; @@ -67,8 +68,10 @@ describe('when using the "nb" locale', () => { describe("when using fixed weeks", () => { const useFixedWeeks = true; describe("when getting the weeks for December 2022", () => { - const date = new Date(2022, 11); - const weeks = getMonthWeeks(date, { useFixedWeeks, locale }); + const weeks = getMonthWeeks(new Date(2022, 11), { + useFixedWeeks, + locale, + }); test("should return 48 - 1 week numbers", () => { const weekNumbers = weeks.map((week) => week.weekNumber); const expectedResult = [48, 49, 50, 51, 52, 1]; diff --git a/@navikt/core/react/src/date/utils/navigation.ts b/@navikt/core/react/src/date/utils/navigation.ts index 5005a7e90b..b296793d29 100644 --- a/@navikt/core/react/src/date/utils/navigation.ts +++ b/@navikt/core/react/src/date/utils/navigation.ts @@ -15,27 +15,27 @@ export const nextEnabled = ( const currentIndex = currentMonth.getMonth(); if (key === "Home") { - const nextEnabled = nextOnRow( + const nextDate = nextOnRow( currentIndex, months, yearState, disabled, "home" ); - if (nextEnabled) { - return nextEnabled; + if (nextDate) { + return nextDate; } } if (key === "End") { - const nextEnabled = nextOnRow( + const nextDate = nextOnRow( currentIndex, months, yearState, disabled, "end" ); - if (nextEnabled) { - return nextEnabled; + if (nextDate) { + return nextDate; } } if (key === "PageUp") { diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx index b3bcc21733..d5e71c9e45 100644 --- a/@navikt/core/react/src/form/Select.tsx +++ b/@navikt/core/react/src/form/Select.tsx @@ -136,7 +136,7 @@ export const Select = forwardRef( className={cl( "navds-select__input", "navds-body-short", - `navds-body--${size ?? "medium"}` + `navds-body-short--${size ?? "medium"}` )} size={htmlSize} > diff --git a/@navikt/core/react/src/form/TextField.tsx b/@navikt/core/react/src/form/TextField.tsx index 3be335c850..676c00636b 100644 --- a/@navikt/core/react/src/form/TextField.tsx +++ b/@navikt/core/react/src/form/TextField.tsx @@ -116,7 +116,7 @@ export const TextField = forwardRef( className={cl( "navds-text-field__input", "navds-body-short", - `navds-body-${size ?? "medium"}` + `navds-body-short--${size ?? "medium"}` )} size={htmlSize} /> diff --git a/@navikt/core/react/src/form/Textarea.tsx b/@navikt/core/react/src/form/Textarea.tsx index c4fc768aee..a6988151d7 100644 --- a/@navikt/core/react/src/form/Textarea.tsx +++ b/@navikt/core/react/src/form/Textarea.tsx @@ -162,7 +162,7 @@ export const Textarea = forwardRef( className={cl( "navds-textarea__input", "navds-body-short", - `navds-body-${size ?? "medium"}`, + `navds-body-short--${size ?? "medium"}`, { "navds-textarea--counter": hasMaxLength, } diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx index 0f69c24c6e..4a8639567a 100644 --- a/@navikt/core/react/src/form/combobox/Input/Input.tsx +++ b/@navikt/core/react/src/form/combobox/Input/Input.tsx @@ -176,7 +176,7 @@ const Input = forwardRef( inputClassName, "navds-combobox__input", "navds-body-short", - `navds-body-${size}` + `navds-body-short--${size}` )} /> ); diff --git a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx index 8ee0080043..40a8e6a176 100644 --- a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx +++ b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx @@ -8,8 +8,8 @@ import React, { useRef, useState, } from "react"; -import { useFormField, FormFieldType } from "../../useFormField"; import { useClientLayoutEffect } from "../../../util"; +import { FormFieldType, useFormField } from "../../useFormField"; interface InputContextType extends FormFieldType { clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void; @@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => { const onChange = useCallback( (event: ChangeEvent) => { - const value = event.currentTarget.value; - externalValue ?? setInternalValue(value); + const newValue = event.currentTarget.value; + externalValue ?? setInternalValue(newValue); externalOnChange?.(event); - setSearchTerm(value); + setSearchTerm(newValue); }, [externalValue, externalOnChange] ); diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx index 576d957318..8435bb08cb 100644 --- a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +++ b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx @@ -7,8 +7,8 @@ import React, { } from "react"; import usePrevious from "../../../util/usePrevious"; import { useInputContext } from "../Input/inputContext"; -import { ComboboxProps } from "../types"; import { useCustomOptionsContext } from "../customOptionsContext"; +import { ComboboxProps } from "../types"; type SelectedOptionsContextType = { addSelectedOption: (option: string) => void; @@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({ allowNewValues && addCustomOption(option); !isMultiSelect && setSelectedOptions([]); } else if (isMultiSelect) { - setSelectedOptions((prevSelectedOptions) => [ - ...prevSelectedOptions, + setSelectedOptions((oldSelectedOptions) => [ + ...oldSelectedOptions, option, ]); } else { @@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({ if (isCustomOption) { removeCustomOption(option); } else { - setSelectedOptions((prevSelectedOptions) => - prevSelectedOptions.filter( + setSelectedOptions((oldSelectedOptions) => + oldSelectedOptions.filter( (selectedOption) => selectedOption !== option ) ); diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx index 64132b3038..03d1b6d254 100644 --- a/@navikt/core/react/src/form/search/Search.tsx +++ b/@navikt/core/react/src/form/search/Search.tsx @@ -212,7 +212,7 @@ export const Search = forwardRef( `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", - `navds-body-${size}` + `navds-body-short--${size}` )} {...(htmlSize ? { size: Number(htmlSize) } : {})} /> diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx index 1cd7a84332..9e848e64b2 100644 --- a/@navikt/core/react/src/form/stories/textarea.stories.tsx +++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx @@ -1,52 +1,36 @@ -import { Meta } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { Textarea } from "../index"; -export default { + +const meta: Meta = { title: "ds-react/Textarea", component: Textarea, - argTypes: { - size: { - control: { - type: "radio", - options: ["medium", "small"], - }, - }, - description: { - type: "string", - }, - error: { - type: "string", - }, - hideLabel: { - type: "boolean", - }, - disabled: { - type: "boolean", - }, - maxRows: { - type: "number", - }, - minRows: { - type: "number", - }, - }, -} as Meta; +}; +export default meta; -export const Default = { +export const Default: StoryObj = { render: (props) => { - return ( -