diff --git a/.changeset/five-icons-yawn.md b/.changeset/five-icons-yawn.md new file mode 100644 index 0000000000..154954b72f --- /dev/null +++ b/.changeset/five-icons-yawn.md @@ -0,0 +1,9 @@ +--- +"@navikt/ds-react": minor +--- + +:recycle: Refaktorering og småfikser + +- Refaktorering som følge av nye ESLint-regler +- AccordionItem/ToggleGroup: Støtte for 'id'-prop +- MonthPicker: Mer presis type for 'onMonthSelect' prop diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..eaa4a7a8fe --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +!.storybook \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000..886b53dc8a --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,93 @@ +// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide +module.exports = { + env: { + browser: true, + es6: true, + node: true, + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + //"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform + "plugin:react-hooks/recommended", + "plugin:jsx-a11y/recommended", + "plugin:import/recommended", + "plugin:import/typescript", + "plugin:storybook/recommended", + // TODO: Look into opinionated stylistic plugin + // TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked + ], + settings: { react: { version: "detect" } }, + rules: { + "import/no-unresolved": "off", + "react/jsx-curly-brace-presence": [ + "error", + { propElementValues: "always" }, + ], + // TODO add: "object-shorthand": "error", + // TODO: Consider adding the rule "id-length" + // Temporary: + "react/prop-types": "off", + "react/display-name": "off", + "import/no-named-as-default": "off", + }, + reportUnusedDisableDirectives: true, + overrides: [ + { + files: ["**/*.ts?(x)"], + extends: ["plugin:@typescript-eslint/recommended"], + rules: { + "@typescript-eslint/no-explicit-any": "off", // Temporary + }, + }, + { + files: ["**/*.test.*", "**/__tests__/*"], + extends: ["plugin:jest/recommended", "plugin:testing-library/react"], + }, + { + files: ["aksel.nav.no/website/**"], + env: { + browser: true, + es2021: true, + }, + extends: ["plugin:@next/next/recommended"], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 12, + sourceType: "module", + }, + rules: { + "react/no-unknown-property": [2, { ignore: ["jsx", "global"] }], + "react/react-in-jsx-scope": "off", + "@next/next/no-html-link-for-pages": [ + "error", + "aksel.nav.no/website/pages/", + ], + "@typescript-eslint/ban-ts-comment": "off", // Temporary + }, + }, + { + files: ["aksel.nav.no/website/pages/eksempler/**"], + rules: { + "jsx-a11y/anchor-is-valid": "off", + }, + }, + ], + globals: { + Locale: "readonly", + JSX: "readonly", + }, + ignorePatterns: [ + "node_modules", + "lib", + "public", + "examples", + "esm", + "cjs", + "dist", + "**/codemod/**/*.js", + ], +}; diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 2c91b91d4f..f919a4b8c4 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,3 +1,4 @@ +import React from "react"; import "@navikt/ds-css/index.css"; import "./layout.css"; diff --git a/@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts b/@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts index fc98352f48..873c2cf9e5 100644 --- a/@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts +++ b/@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/no-anonymous-default-export */ import fs from "fs"; import { Plugin } from "vite"; diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/init.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/init.ts deleted file mode 100644 index ce682e6043..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/init.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable no-restricted-globals */ -/* eslint-disable no-undef */ -import * as Networker from "monorepo-networker"; -import { NetworkMessages } from "@common/network/messages"; -import { NetworkSide } from "@common/network/sides"; - -export const initializeNetwork = Networker.createInitializer({ - messagesRegistry: NetworkMessages.registry, - - initTransports: function (register) { - register(NetworkSide.PLUGIN, NetworkSide.UI, (message) => { - // @ts-ignore - figma.ui.postMessage(message); - }); - - register(NetworkSide.UI, NetworkSide.PLUGIN, (message) => { - // @ts-ignore - parent.postMessage({ pluginMessage: message }, "*"); - }); - }, -}); diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/messages.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/messages.ts deleted file mode 100644 index da3fc6ab03..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/messages.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { CreateRectMessage } from "@common/network/messages/CreateRectMessage"; -import { HelloMessage } from "@common/network/messages/HelloMessage"; -import { PingMessage } from "@common/network/messages/PingMessage"; -import { NetworkSide } from "@common/network/sides"; -import * as Networker from "monorepo-networker"; - -export namespace NetworkMessages { - export const registry = new Networker.MessageTypeRegistry(); - - export const PING = registry.register(new PingMessage("ping")); - - export const HELLO_PLUGIN = registry.register( - new HelloMessage(NetworkSide.PLUGIN) - ); - - export const HELLO_UI = registry.register(new HelloMessage(NetworkSide.UI)); - - export const CREATE_RECT = registry.register( - new CreateRectMessage("create-rect") - ); -} diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/CreateRectMessage.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/messages/CreateRectMessage.ts deleted file mode 100644 index 90b7a3074a..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/CreateRectMessage.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* eslint-disable no-undef */ -import { NetworkSide } from "@common/network/sides"; -import * as Networker from "monorepo-networker"; - -interface Payload { - width: number; - height: number; -} - -export class CreateRectMessage extends Networker.MessageType { - public receivingSide(): Networker.Side { - return NetworkSide.PLUGIN; - } - - public handle(payload: Payload, from: Networker.Side): void { - // @ts-ignore - if (figma.editorType === "figma") { - // @ts-ignore - const rect = figma.createRectangle(); - rect.x = 0; - rect.y = 0; - rect.name = "Plugin Rectangle # " + Math.floor(Math.random() * 9999); - rect.fills = [ - { - type: "SOLID", - color: { - r: Math.random(), - g: Math.random(), - b: Math.random(), - }, - }, - ]; - rect.resize(payload.width, payload.height); - // @ts-ignore - figma.currentPage.appendChild(rect); - // @ts-ignore - figma.viewport.scrollAndZoomIntoView([rect]); - // @ts-ignore - figma.closePlugin(); - } - } -} diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/HelloMessage.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/messages/HelloMessage.ts deleted file mode 100644 index 5a7eb868b3..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/HelloMessage.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as Networker from "monorepo-networker"; - -interface Payload { - text: string; -} - -export class HelloMessage extends Networker.MessageType { - constructor(private side: Networker.Side) { - super("hello-" + side.getName()); - } - - receivingSide(): Networker.Side { - return this.side; - } - - handle(payload: Payload, from: Networker.Side) { - console.log(`${from.getName()} said "${payload.text}"`); - } -} diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/PingMessage.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/messages/PingMessage.ts deleted file mode 100644 index 60a9617e9b..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/messages/PingMessage.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as Networker from "monorepo-networker"; -import { NetworkSide } from "@common/network/sides"; - -interface Payload {} - -type Response = string; - -export class PingMessage extends Networker.MessageType { - receivingSide(): Networker.Side { - return NetworkSide.PLUGIN; - } - - handle(payload: Payload, from: Networker.Side): string { - console.log(from.getName(), "has pinged us!"); - return `Pong, ${from.getName()}!`; - } -} diff --git a/@navikt/aksel-icons/figma-plugin/src/common/network/sides.ts b/@navikt/aksel-icons/figma-plugin/src/common/network/sides.ts deleted file mode 100644 index e840eb57a8..0000000000 --- a/@navikt/aksel-icons/figma-plugin/src/common/network/sides.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable no-undef */ -import * as Networker from "monorepo-networker"; - -export namespace NetworkSide { - export const PLUGIN = Networker.Side.register( - new Networker.Side>("Plugin", { - // @ts-ignore - attachListener: (callback) => figma.ui.on("message", callback), - // @ts-ignore - detachListener: (callback) => figma.ui.off("message", callback), - }) - ); - - export const UI = Networker.Side.register( - new Networker.Side("UI", { - shouldHandle: (event) => event.data?.pluginId != null, - messageGetter: (event) => event.data.pluginMessage, - attachListener: (callback) => - window.addEventListener("message", callback), - detachListener: (callback) => - window.removeEventListener("message", callback), - }) - ); -} diff --git a/@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts b/@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts index 95714f6fb1..d9572c1bff 100644 --- a/@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts +++ b/@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts @@ -1,5 +1,3 @@ -/* eslint-disable no-undef */ - figma.showUI(__html__, { width: 480, height: 600 }); figma.ui.onmessage = (msg) => { diff --git a/@navikt/aksel-icons/figma-plugin/src/ui/App.tsx b/@navikt/aksel-icons/figma-plugin/src/ui/App.tsx index 69c0589e55..d0e23181a1 100644 --- a/@navikt/aksel-icons/figma-plugin/src/ui/App.tsx +++ b/@navikt/aksel-icons/figma-plugin/src/ui/App.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/react-in-jsx-scope */ import { Heading, Search, ToggleGroup } from "@navikt/ds-react"; import Fuse from "fuse.js"; import { useEffect, useMemo, useState } from "react"; @@ -59,9 +60,8 @@ const App = () => { }, [toggle, query, strokeIcons, fillIcons]); const onCreate = (id: string, name: string) => { - let svg = document.getElementById(id)?.outerHTML; - let size = 24; - // eslint-disable-next-line no-restricted-globals + const svg = document.getElementById(id)?.outerHTML; + const size = 24; parent.postMessage( { pluginMessage: { @@ -154,7 +154,7 @@ const App = () => {
{sub.icons.map((i) => { - const T = Icons[`${i.id}Icon`]; + const T = Icons[`${i.id}Icon`]; // eslint-disable-line import/namespace if (T === undefined) { console.log(i); return null; diff --git a/@navikt/aksel-icons/util/useId.ts b/@navikt/aksel-icons/util/useId.ts index 5bd54abbea..47c87c6e28 100644 --- a/@navikt/aksel-icons/util/useId.ts +++ b/@navikt/aksel-icons/util/useId.ts @@ -18,10 +18,8 @@ function useGlobalId(idOverride?: string): string | undefined { return id; } -// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814 const maybeReactUseId: undefined | (() => string) = (React as any)[ - // eslint-disable-next-line no-useless-concat - "useId" + "" + "useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814 ]; /** * diff --git a/@navikt/aksel-stylelint/src/utils.ts b/@navikt/aksel-stylelint/src/utils.ts index d2d1a8cdf8..e39c67548c 100644 --- a/@navikt/aksel-stylelint/src/utils.ts +++ b/@navikt/aksel-stylelint/src/utils.ts @@ -90,7 +90,7 @@ export const flattenObject = (obj) => { const tokenCSSFile = "./index.css"; const tokenJsonFile = "./tokens.json"; -let allowedTokenNames = []; +const allowedTokenNames = []; export const addTokens = ( tokenJSONFile: string, diff --git a/@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts b/@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts index ce61613dd3..ead18e31e4 100644 --- a/@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts +++ b/@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts @@ -5,7 +5,7 @@ import renameProps from "../../../utils/rename-props"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options) { +export default function transformer(file, api) { const j = api.jscodeshift; let localName = "SpeechBubble"; 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 713ee7aadc..bead84719b 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 @@ -4,7 +4,7 @@ import { getLineTerminator } from "../../../utils/lineterminator"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options) { +export default function transformer(file, api) { const j = api.jscodeshift; let localName = "Pagination"; @@ -62,7 +62,7 @@ export default function transformer(file, api, options) { (x) => x.name.name === "data-version" && x.value.value === "v1" ); - parent.value.openingElement?.attributes.forEach((x, index) => { + parent.value.openingElement?.attributes.forEach((x) => { let didUpdate = false; if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) { /* addExplicitStandardProp */ diff --git a/@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts b/@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts index 4bfa47456d..3fa70d0561 100644 --- a/@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts +++ b/@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts @@ -6,10 +6,10 @@ import transformPagination from "../pagination/pagination"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options) { - file.source = transformTabs(file, api, options); - file.source = transformChat(file, api, options); - file.source = transformPagination(file, api, options); +export default function transformer(file, api) { + file.source = transformTabs(file, api); + file.source = transformChat(file, api); + file.source = transformPagination(file, api); return file.source; } diff --git a/@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts b/@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts index 925f5766a5..a1fa02ad69 100644 --- a/@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts +++ b/@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts @@ -5,7 +5,7 @@ import renameProps from "../../../utils/rename-props"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options) { +export default function transformer(file, api) { const j = api.jscodeshift; let localName = "Tabs"; let iconPositionProp = null; diff --git a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts index 05c9d4eb6c..4e8b856c7a 100644 --- a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts +++ b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts @@ -4,11 +4,10 @@ import { tokens } from "../../../tokens-map.mjs"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api) { +export default function transformer(file) { let src = file.source; tokens.forEach((tok) => { - // eslint-disable-next-line no-useless-concat const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm"); src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`); }); 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 6c9dd6676b..9d020bc15e 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 @@ -13,7 +13,7 @@ import { getLineTerminator } from "../../../utils/lineterminator"; * @param {import('jscodeshift').API} api */ export default function transformer(file: JSCodeshift, api) { - let src = file.source; + const src = file.source; const j = api.jscodeshift as JSCodeshift; diff --git a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts index f1370177e4..b05f83a265 100644 --- a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts +++ b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts @@ -5,7 +5,7 @@ import { tokens } from "../../../tokens-map.mjs"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api) { +export default function transformer(file) { let src = file.source; tokens.forEach((tok) => { diff --git a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts index 2484914b71..401b1adbd7 100644 --- a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts +++ b/@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts @@ -5,7 +5,7 @@ import { tokens } from "../../../tokens-map.mjs"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api) { +export default function transformer(file) { let src = file.source; tokens.forEach((tok) => { diff --git a/@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts b/@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts index 8da5a25ac4..a510f29ff1 100644 --- a/@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts +++ b/@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts @@ -7,7 +7,7 @@ import { getLineTerminator } from "../../../utils/lineterminator"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options, ...rest) { +export default function transformer(file, api) { const j = api.jscodeshift; let root: any; diff --git a/@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts b/@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts index d52ca4c162..77bde9988a 100644 --- a/@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts +++ b/@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts @@ -5,7 +5,7 @@ import moveAndRenameImport from "../../../utils/moveAndRenameImport"; * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ -export default function transformer(file, api, options, ...rest) { +export default function transformer(file, api) { const j = api.jscodeshift; let root: any; diff --git a/@navikt/aksel/src/codemod/utils/check.ts b/@navikt/aksel/src/codemod/utils/check.ts index 6ce4765ee0..a07056635a 100644 --- a/@navikt/aksel/src/codemod/utils/check.ts +++ b/@navikt/aksel/src/codemod/utils/check.ts @@ -3,7 +3,7 @@ import path from "node:path"; import prettier from "prettier"; -const applyTransform = require("jscodeshift/dist/testUtils").applyTransform; +import { applyTransform } from "jscodeshift/dist/testUtils"; interface TestT { fixture: string; diff --git a/@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts b/@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts index 305bf87ff5..b7fe9bed79 100644 --- a/@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts +++ b/@navikt/aksel/src/codemod/utils/tests/translate-token.test.ts @@ -1,7 +1,5 @@ import { translateToken } from "../translate-token"; -export {}; - jest.autoMockOff(); const tokens = [ diff --git a/@navikt/aksel/src/css-imports/index.ts b/@navikt/aksel/src/css-imports/index.ts index 9dc65d2275..f8c43b7b63 100644 --- a/@navikt/aksel/src/css-imports/index.ts +++ b/@navikt/aksel/src/css-imports/index.ts @@ -10,7 +10,7 @@ import { getDirectories } from "./get-directories"; import { getAllVersions } from "./get-version"; export async function cssImportsCommand() { - let answers: AnswersT = { + const answers: AnswersT = { "config-type": "regular", cdn: "no", version: "0.0.0", diff --git a/@navikt/core/react/src/accordion/AccordionItem.tsx b/@navikt/core/react/src/accordion/AccordionItem.tsx index d329479ca6..025ad15e7e 100644 --- a/@navikt/core/react/src/accordion/AccordionItem.tsx +++ b/@navikt/core/react/src/accordion/AccordionItem.tsx @@ -7,6 +7,7 @@ import React, { useState, } from "react"; import { AccordionContext } from "./AccordionContext"; +import { omit } from "../util"; export interface AccordionItemProps extends React.HTMLAttributes { @@ -36,10 +37,7 @@ export const AccordionItemContext = createContext(null); const AccordionItem = forwardRef( - ( - { children, className, open, defaultOpen = false, onClick, id, ...rest }, - ref - ) => { + ({ children, className, open, defaultOpen = false, ...rest }, ref) => { const [internalOpen, setInternalOpen] = useState(defaultOpen); const context = useContext(AccordionContext); @@ -64,7 +62,7 @@ const AccordionItem = forwardRef( "navds-accordion__item--no-animation": !shouldAnimate.current, })} ref={ref} - {...rest} + {...omit(rest, ["onClick"])} > { - return ( -
- {sizes.map((element) => ( - - ))} -
- ); - }, - - args: { - variant: "neutral", - }, -}; - -export const HeadingSize = { - render: ({ ...props }) => { - return ( -
- {headingSizes.map((element) => ( - - ))} -
- ); - }, +export const Size = (props) => ( +
+ {sizes.map((size) => ( + + ))} +
+); - args: { - variant: "neutral", - }, -}; +export const HeadingSize = (props) => ( +
+ {headingSizes.map((size) => ( + + ))} +
+); diff --git a/@navikt/core/react/src/alert/alert.stories.tsx b/@navikt/core/react/src/alert/alert.stories.tsx index 83f1610e5f..4e204dc8eb 100644 --- a/@navikt/core/react/src/alert/alert.stories.tsx +++ b/@navikt/core/react/src/alert/alert.stories.tsx @@ -140,7 +140,7 @@ export const Heading = () => { export const Links = () => { return (
- {variants.map((variant, i) => ( + {variants.map((variant) => ( Id elit esse enim reprehenderit @@ -156,7 +156,7 @@ const AlertWithCloseButton = ({ size?: "medium" | "small"; children?: React.ReactNode; }) => { - let [show, setShow] = React.useState(true); + const [show, setShow] = React.useState(true); return show ? ( { - const [selected, setSelected] = useState(["Dansk", "Svensk"]); - const [filter, setFilter] = useState(options); - - if (props.type === "toggle") { - return ( - - {options.map((c) => ( - - setSelected( - selected.includes(c) - ? selected.filter((x) => x !== c) - : [...selected, c] - ) - } - > - {c} - - ))} - - ); - } +export const Default = (props) => { + const [selected, setSelected] = useState(["Dansk", "Svensk"]); + const [filter, setFilter] = useState(options); + if (props.type === "toggle") { return ( - {filter.map((c) => ( - ( + setFilter((x) => x.filter((y) => y !== c))} + onClick={() => + setSelected( + selected.includes(c) + ? selected.filter((x) => x !== c) + : [...selected, c] + ) + } > {c} - + ))} ); - }, + } + + return ( + + {filter.map((c) => ( + setFilter((x) => x.filter((y) => y !== c))} + > + {c} + + ))} + + ); }; export const Toggle = () => { diff --git a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx index d7b5af9de3..2622c1532b 100644 --- a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx +++ b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx @@ -44,7 +44,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef< >( ( { - children, className, locale = "nb", dropdownCaption, @@ -52,7 +51,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef< disableWeekends = false, showWeekNumber = false, selected, - id, defaultSelected, onSelect, fixedWeeks = true, @@ -121,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef< showWeekNumber={showWeekNumber} fixedWeeks={fixedWeeks} showOutsideDays - {...omit(rest, ["onSelect"])} + {...omit(rest, ["onSelect", "children", "id"])} />
); diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx index 7821e72dfa..073662e98b 100644 --- a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx +++ b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx @@ -311,7 +311,7 @@ export const UseRangedDatepickerValidation = () => { ); }; -export const defaultShownMonth = () => { +export const DefaultShownMonth = () => { const { datepickerProps, inputProps } = useDatepicker({ fromDate: new Date("Aug 23 2019"), onDateChange: console.log, diff --git a/@navikt/core/react/src/date/datepicker/datepicker.test.tsx b/@navikt/core/react/src/date/datepicker/datepicker.test.tsx index 28006efeda..43a77069db 100644 --- a/@navikt/core/react/src/date/datepicker/datepicker.test.tsx +++ b/@navikt/core/react/src/date/datepicker/datepicker.test.tsx @@ -1,5 +1,4 @@ -/* eslint-disable react/jsx-pascal-case */ -import { act, render } from "@testing-library/react"; +import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import React from "react"; import { DatePicker, useDatepicker } from ".."; @@ -18,11 +17,13 @@ const App = () => { }; describe("Render datepicker", () => { + // eslint-disable-next-line jest/expect-expect it("Should not crash when e.target is window", async () => { - const utils = render(); + render(); + // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning await act(async () => { - await userEvent.click(utils.getByText("Velg dato")); + await userEvent.click(screen.getByText("Velg dato")); }); }); }); diff --git a/@navikt/core/react/src/date/hooks/useDatepicker.tsx b/@navikt/core/react/src/date/hooks/useDatepicker.tsx index 1e9faf88b5..3887776ff7 100644 --- a/@navikt/core/react/src/date/hooks/useDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useDatepicker.tsx @@ -207,7 +207,7 @@ export const useDatepicker = ( return; } !open && openOnFocus && handleOpen(true); - let day = parseDate( + const day = parseDate( e.target.value, today, locale, @@ -227,7 +227,7 @@ export const useDatepicker = ( }; const handleBlur: React.FocusEventHandler = (e) => { - let day = parseDate( + const day = parseDate( e.target.value, today, locale, diff --git a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx index d92b22431e..c1a128055e 100644 --- a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx +++ b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx @@ -204,7 +204,7 @@ export const useMonthpicker = ( return; } !open && openOnFocus && handleOpen(true); - let day = parseDate( + const day = parseDate( e.target.value, today, locale, @@ -223,7 +223,7 @@ export const useMonthpicker = ( }; const handleBlur: React.FocusEventHandler = (e) => { - let day = parseDate( + const day = parseDate( e.target.value, today, locale, diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.test.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.test.tsx index 465a0a3982..b42deb1283 100644 --- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.test.tsx +++ b/@navikt/core/react/src/date/hooks/useRangeDatepicker.test.tsx @@ -1,5 +1,5 @@ -/* eslint-disable react/jsx-pascal-case */ -import { act, render } from "@testing-library/react"; +/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */ +import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import React from "react"; import { DatePicker, useRangeDatepicker } from ".."; @@ -23,15 +23,15 @@ const RangeDemo = () => { describe("Writing in input sets correct values", () => { it("useRangeDatepicker same date", async () => { - const utils = render(); + render(); - const fraInput = utils.getByRole("textbox", { name: "Fra" }); - const tilInput = utils.getByRole("textbox", { name: "Til" }); + const fraInput = screen.getByRole("textbox", { name: "Fra" }); + const tilInput = screen.getByRole("textbox", { name: "Til" }); await act(async () => { await userEvent.type(fraInput, "03.08.2022"); await userEvent.type(tilInput, "03.08.2022"); }); - const res = utils.getByTitle("res"); + const res = screen.getByTitle("res"); expect(res.innerHTML).toEqual( JSON.stringify({ from: "2022-08-03T00:00:00.000Z", @@ -40,16 +40,16 @@ describe("Writing in input sets correct values", () => { ); }); - it("useRangeDatepicker before after to ", async () => { - const utils = render(); + it("useRangeDatepicker before after to", async () => { + render(); - const fraInput = utils.getByRole("textbox", { name: "Fra" }); - const tilInput = utils.getByRole("textbox", { name: "Til" }); + const fraInput = screen.getByRole("textbox", { name: "Fra" }); + const tilInput = screen.getByRole("textbox", { name: "Til" }); await act(async () => { await userEvent.type(fraInput, "03.08.2022"); await userEvent.type(tilInput, "02.08.2022"); }); - const res = utils.getByTitle("res"); + const res = screen.getByTitle("res"); expect(res.innerHTML).toEqual( JSON.stringify({ from: "2022-08-03T00:00:00.000Z", diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx index 120e48f1ba..6c1f0cbcaf 100644 --- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx @@ -325,7 +325,7 @@ export const useRangeDatepicker = ( return; } !open && openOnFocus && setOpen(true); - let day = parseDate( + const day = parseDate( e.target.value, today, locale, @@ -349,7 +349,7 @@ export const useRangeDatepicker = ( }; const handleBlur = (e, src: RangeT) => { - let day = parseDate( + const day = parseDate( e.target.value, today, locale, @@ -379,7 +379,7 @@ export const useRangeDatepicker = ( if (range?.from && range?.to) { setOpen(false); } - let prevToRange = + const prevToRange = !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to; const resetTo = isBefore(prevToRange, range?.from); diff --git a/@navikt/core/react/src/date/monthpicker/MonthButton.tsx b/@navikt/core/react/src/date/monthpicker/MonthButton.tsx index a831ab5fc9..16f2fff43d 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthButton.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthButton.tsx @@ -13,9 +13,9 @@ interface MonthType { month: Date; months: Date[]; focus: Date | undefined; - setFocus: Function; + setFocus: (date?: Date) => void; tabRoot?: Date; - setTabRoot: Function; + setTabRoot: (date?: Date) => void; } const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => { diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx index d73abdef39..edaa269408 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx @@ -70,7 +70,7 @@ export interface MonthPickerProps extends React.HTMLAttributes { /** * Callback for user-controlled state */ - onMonthSelect?: Function; + onMonthSelect?: (month?: Date) => void; /** * Used to set visible year programmatically. Component controlled by default */ diff --git a/@navikt/core/react/src/date/monthpicker/MonthSelector.tsx b/@navikt/core/react/src/date/monthpicker/MonthSelector.tsx index e464cd4c27..04b6afdd67 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthSelector.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthSelector.tsx @@ -62,9 +62,9 @@ export const MonthSelector = () => { return ( - {tableMonths.map((x, y) => ( - - {x.map((month: Date, y) => { + {tableMonths.map((months, i) => ( + + {months.map((month: Date) => { return ( { +export const DropdownCaption = () => { return ( { ) ).toBeFalsy(); }); - test("Default selected should not be valid (false)", () => { - expect( - isSameYear( - new Date("Oct 4 2021"), - getInitialYear({ - defaultMonth: new Date("Aug 4 2020"), - /* toDate: new Date("Oct 4 2021"), */ - /* fromDate: new Date("Oct 4 2021"), */ - }) - ) - ).toBeFalsy(); - }); test("Default selected should be valid with fromDate", () => { expect( isSameYear( diff --git a/@navikt/core/react/src/date/utils/__tests__/is-match.test.ts b/@navikt/core/react/src/date/utils/__tests__/is-match.test.ts index 1d85e5b837..4994364b19 100644 --- a/@navikt/core/react/src/date/utils/__tests__/is-match.test.ts +++ b/@navikt/core/react/src/date/utils/__tests__/is-match.test.ts @@ -13,13 +13,13 @@ describe("Returns if date is disabled", () => { test("Date should be disabled type Date[] (true)", () => { expect(isMatch(new Date("Dec 4 2011"), disabled)).toBeTruthy(); }); - test("Date should be disabled type Range (true)", () => { + test("Date should be disabled type Range (false)", () => { expect(isMatch(new Date("Sep 5 2023"), disabled)).toBeTruthy(); }); test("Date should be disabled type Range (true)", () => { expect(isMatch(new Date("Sep 3 2023"), disabled)).toBeTruthy(); }); - test("Date should be disabled type After (true)", () => { + test("Date should be disabled type After (same month)(true)", () => { expect( isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }]) ).toBeTruthy(); @@ -34,7 +34,7 @@ describe("Returns if date is disabled", () => { isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }]) ).toBeTruthy(); }); - test("Date should be disabled type Before (true)", () => { + test("Date should be disabled type Before (false)", () => { expect( isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }]) ).toBeTruthy(); diff --git a/@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts b/@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts index 698cc914cc..9892a87538 100644 --- a/@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts +++ b/@navikt/core/react/src/date/utils/__tests__/parse-dates.test.ts @@ -1,12 +1,14 @@ -import { parseDate } from ".."; -import { isValidDate } from ".."; +/* eslint-disable jest/expect-expect */ +import { parseDate, isValidDate } from ".."; import nb from "date-fns/locale/nb"; import getMonth from "date-fns/getMonth"; const check = (inp: string) => + // eslint-disable-next-line jest/valid-expect expect(isValidDate(parseDate(inp, new Date(), nb, "date", false))); const checkTwoDigit = (inp: string) => + // eslint-disable-next-line jest/valid-expect expect(isValidDate(parseDate(inp, new Date(), nb, "date", true))); const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false); diff --git a/@navikt/core/react/src/date/utils/navigation.ts b/@navikt/core/react/src/date/utils/navigation.ts index 15e8bcb878..5005a7e90b 100644 --- a/@navikt/core/react/src/date/utils/navigation.ts +++ b/@navikt/core/react/src/date/utils/navigation.ts @@ -6,7 +6,7 @@ export const nextEnabled = ( key: string, disabled: Matcher[], currentMonth: Date, - setYearState: Function, + setYearState: (date: Date) => void, yearState: Date, dropdownCaption: boolean, fromDate?: Date, @@ -148,7 +148,7 @@ const loopBack = ( months: Date[], disabled: Matcher[], yearState: Date, - setYearState: Function, + setYearState: (date: Date) => void, rowCheck: boolean, dropdownCaption: boolean, fromDate?: Date, @@ -191,7 +191,7 @@ const loopForward = ( currentIndex: number, months: Date[], yearState: Date, - setYearState: Function, + setYearState: (date: Date) => void, disabled: Matcher[], rowCheck: boolean, dropdownCaption: boolean, diff --git a/@navikt/core/react/src/dropdown/Toggle.tsx b/@navikt/core/react/src/dropdown/Toggle.tsx index 8f083851a7..f44e97f283 100644 --- a/@navikt/core/react/src/dropdown/Toggle.tsx +++ b/@navikt/core/react/src/dropdown/Toggle.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, useContext } from "react"; import cl from "clsx"; -import { DropdownContext } from "."; +import { DropdownContext } from "./Dropdown"; export interface ToggleProps extends React.ButtonHTMLAttributes { diff --git a/@navikt/core/react/src/dropdown/dropdown.stories.tsx b/@navikt/core/react/src/dropdown/dropdown.stories.tsx index 87cc2bd8ea..2483ec763e 100644 --- a/@navikt/core/react/src/dropdown/dropdown.stories.tsx +++ b/@navikt/core/react/src/dropdown/dropdown.stories.tsx @@ -60,32 +60,29 @@ export const DefaultOpen = { args: { chromatic: { delay: 300 } }, }; -export const ControlledOpen = { - render: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [openState, setOpenState] = useState(true); - return ( - console.log(event)} open={openState}> - - console.log("ONCLOSE CONTROLLED")} - > - - - Systemer og oppslagsverk - - console.log("GroupedList.Item-click")} - > - Gosys - - - - - ); - }, - args: { chromatic: { delay: 300 } }, +export const ControlledOpen = () => { + const [openState, setOpenState] = useState(true); + return ( + console.log(event)} open={openState}> + + console.log("ONCLOSE CONTROLLED")} + > + + + Systemer og oppslagsverk + + console.log("GroupedList.Item-click")} + > + Gosys + + + + + ); }; +ControlledOpen.args = { chromatic: { delay: 300 } }; diff --git a/@navikt/core/react/src/dropdown/index.ts b/@navikt/core/react/src/dropdown/index.ts index da671d1601..6879060314 100644 --- a/@navikt/core/react/src/dropdown/index.ts +++ b/@navikt/core/react/src/dropdown/index.ts @@ -1,2 +1 @@ -export { default as Dropdown } from "./Dropdown"; -export * from "./Dropdown"; +export { default as Dropdown, type DropdownProps } from "./Dropdown"; diff --git a/@navikt/core/react/src/expansion-card/expansion-card.stories.tsx b/@navikt/core/react/src/expansion-card/expansion-card.stories.tsx index 17c58aaea1..f2d01d59f8 100644 --- a/@navikt/core/react/src/expansion-card/expansion-card.stories.tsx +++ b/@navikt/core/react/src/expansion-card/expansion-card.stories.tsx @@ -1,14 +1,12 @@ import { PlantIcon } from "@navikt/aksel-icons"; +import { Meta, StoryFn } from "@storybook/react"; import React, { useState } from "react"; -import { ExpansionCard } from "."; +import { ExpansionCard, ExpansionCardProps } from "."; import { BodyLong } from "../typography"; -import ExpansionCardContent from "./ExpansionCardContent"; -import ExpansionCardHeader from "./ExpansionCardHeader"; -export default { +const meta: Meta = { title: "ds-react/ExpansionCard", component: ExpansionCard, - subcomponents: [ExpansionCardHeader, ExpansionCardContent], decorators: [ (Story) => (
( @@ -59,42 +58,54 @@ const Content = () => ( ); -export const Default = { - render: (props) => { - return ( - - - Arbeidstakere - {props.description && ( - - For at yrkesskadedekningen skal gjelde, er det som hovedregel krav - til tid, sted og arbeidsoppgaver - - )} - - - - ); - }, - args: { - open: false, - size: "medium", - description: false, - variant: "neutral", - }, - argTypes: { - size: { control: "select", options: ["medium", "small"] }, - }, +type DefaultStoryProps = ExpansionCardProps & { description: boolean }; +type DefaultStory = StoryFn; +export const Default: DefaultStory = (props: DefaultStoryProps) => { + return ( + + + Arbeidstakere + {props.description && ( + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav + til tid, sted og arbeidsoppgaver + + )} + + + + ); +}; +Default.args = { + open: false, + size: "medium", + description: false, }; +Default.argTypes = { + size: { control: "radio", options: ["medium", "small"] }, +}; + +export const Description = () => ( + + + Arbeidstakere + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til + tid, sted og arbeidsoppgaver + + + + +); -export const Description = { - render: () => ( - +export const Sizes = () => ( + <> +

Medium

+ Arbeidstakere @@ -104,16 +115,41 @@ export const Description = { - ), -}; + + + Arbeidstakere + + + +

Small

+ + + Arbeidstakere + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til + tid, sted og arbeidsoppgaver + + + + + + + Arbeidstakere + + + + +); -export const Sizes = { - render: () => ( - <> -

Medium

- +export const HeadingSizing = () => ( + <> + {(["large", "medium", "small"] as const).map((size) => ( + - Arbeidstakere + {size} For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til tid, sted og arbeidsoppgaver @@ -121,58 +157,31 @@ export const Sizes = { - - - Arbeidstakere - - - -

Small

- - - Arbeidstakere - - For at yrkesskadedekningen skal gjelde, er det som hovedregel krav - til tid, sted og arbeidsoppgaver - - - - - - - Arbeidstakere - - - - - ), -}; + ))} + +); -export const HeadingSizing = { - render: () => ( - <> - {(["large", "medium", "small"] as const).map((x) => ( - - - {x} - - For at yrkesskadedekningen skal gjelde, er det som hovedregel krav - til tid, sted og arbeidsoppgaver - - - - - ))} - - ), -}; +export const DefaultOpen = () => ( + + + Arbeidstakere + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til + tid, sted og arbeidsoppgaver + + + + +); -export const DefaultOpen = { - render: () => ( - +export const ControlledState = () => { + const [open, setOpen] = useState(false); + return ( + Arbeidstakere @@ -182,77 +191,51 @@ export const DefaultOpen = { - ), -}; - -export const ControlledState = { - render: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [open, setOpen] = useState(false); - return ( - - - Arbeidstakere - - For at yrkesskadedekningen skal gjelde, er det som hovedregel krav - til tid, sted og arbeidsoppgaver - - - - - ); - }, + ); }; -export const Customization = { - render: () => ( -
- - - Arbeidstakere - - For at yrkesskadedekningen skal gjelde, er det som hovedregel krav - til tid, sted og arbeidsoppgaver - - - - +export const Customization = () => ( +
+ + + Arbeidstakere + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til + tid, sted og arbeidsoppgaver + + + + - -
- ), -}; +
+); -export const Icon = { - render: () => ( -
- - -
-
- -
-
- Arbeidstakere - - For at yrkesskadedekningen skal gjelde, er det som hovedregel - krav til tid, sted og arbeidsoppgaver - -
+export const Icon = () => ( +
+ + +
+
+
- - - +
+ Arbeidstakere + + For at yrkesskadedekningen skal gjelde, er det som hovedregel krav + til tid, sted og arbeidsoppgaver + +
+
+ + + - -
- ), -}; +
+); diff --git a/@navikt/core/react/src/form/ConfirmationPanel.test.tsx b/@navikt/core/react/src/form/ConfirmationPanel.test.tsx index ad18026221..22c7feb941 100644 --- a/@navikt/core/react/src/form/ConfirmationPanel.test.tsx +++ b/@navikt/core/react/src/form/ConfirmationPanel.test.tsx @@ -1,14 +1,14 @@ import React from "react"; -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import faker from "faker"; import { ConfirmationPanel } from "."; test("omits error id from input", async () => { const label = faker.datatype.string(); - const { getByLabelText } = render( - - ); + render(); - expect(getByLabelText(label).getAttribute("errorid")).toBeNull(); + const elm = screen.getByLabelText(label); + expect(elm).toBeInTheDocument(); + expect(elm.getAttribute("errorid")).toBeNull(); }); diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx index a2b6581849..8d3b5dc391 100644 --- a/@navikt/core/react/src/form/Select.tsx +++ b/@navikt/core/react/src/form/Select.tsx @@ -138,7 +138,7 @@ export const Select = forwardRef( "navds-body-short", `navds-body--${size ?? "medium"}` )} - size={props.htmlSize} + size={htmlSize} > {children} diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.test.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.test.tsx index 662039f731..ad84b01a53 100644 --- a/@navikt/core/react/src/form/checkbox/Checkbox.test.tsx +++ b/@navikt/core/react/src/form/checkbox/Checkbox.test.tsx @@ -1,21 +1,17 @@ import React from "react"; -import { act, fireEvent, render, screen } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import faker from "faker"; import { Checkbox, CheckboxGroup } from "."; const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0]; -test("checkbox with error id does not give type error", () => { - child; -}); - test("checkbox group chains onChange calls", async () => { const onGroupChange = jest.fn(); const onChange = jest.fn(); const value = faker.datatype.string(); const label = faker.datatype.string(); - const { getByLabelText } = render( + render( {label} @@ -23,13 +19,11 @@ test("checkbox group chains onChange calls", async () => { ); - await act(async () => { - fireEvent.click(getByLabelText(label)); - }); + fireEvent.click(screen.getByLabelText(label)); - expect(onGroupChange).toBeCalledTimes(1); - expect(onGroupChange).toBeCalledWith([value]); - expect(onChange).toBeCalledTimes(1); + expect(onGroupChange).toHaveBeenCalledTimes(1); + expect(onGroupChange).toHaveBeenCalledWith([value]); + expect(onChange).toHaveBeenCalledTimes(1); expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true); }); @@ -42,14 +36,10 @@ describe("Checkbox handles controlled-state correctly", () => { ); test("Checkbox is still checked after click when controlled", async () => { - const { getByLabelText } = render( - - ); + render(); - await act(async () => { - fireEvent.click(getByLabelText("label1")); - fireEvent.click(getByLabelText("label2")); - }); + fireEvent.click(screen.getByLabelText("label1")); + fireEvent.click(screen.getByLabelText("label2")); expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe( true @@ -63,20 +53,18 @@ describe("Checkbox handles controlled-state correctly", () => { test("onChange called with expected values", async () => { const onGroupChange = jest.fn(); - const { getByLabelText } = render( + render( ); - await act(async () => { - fireEvent.click(getByLabelText("label1")); - expect(onGroupChange).lastCalledWith(["value2"]); + fireEvent.click(screen.getByLabelText("label1")); + expect(onGroupChange).toHaveBeenLastCalledWith(["value2"]); - fireEvent.click(getByLabelText("label2")); - expect(onGroupChange).lastCalledWith(["value1"]); - }); + fireEvent.click(screen.getByLabelText("label2")); + expect(onGroupChange).toHaveBeenLastCalledWith(["value1"]); }); test("Checkboxes updates after value-prop change", () => { diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx index 3c885cd343..56ad23d663 100644 --- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx +++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx @@ -1,86 +1,81 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { Meta } from "@storybook/react"; import React, { useState } from "react"; import { Checkbox, CheckboxGroup } from "../../index"; -export default { +const meta: Meta = { title: "ds-react/Checkbox", component: Checkbox, - subcomponents: { - CheckboxGroup, - }, argTypes: { - size: { control: { type: "select", options: ["medium", "small"] } }, + size: { + options: ["medium", "small"], + control: { type: "radio" }, + }, }, -} as Meta; +}; +export default meta; -export const Default = { - render: (props) => { - const [state, setState] = useState(["checkbox1"]); +export const Default = (props) => { + const [state, setState] = useState(["checkbox1"]); - return ( -
- + + + {props.children || "Apple"} + + - - {props.children || "Apple"} - - - {props.children || "Orange"} - - - {props.children || "Banana"} - - - {props.children || "Melon"} - - -
- ); - }, - - args: { - controlled: false, - legend: "Legend-tekst", - checkboxDescription: false, - hideLabel: false, - hideLegend: false, - errorSingle: false, - errorGroup: false, - children: "", - description: "", - }, + {props.children || "Orange"} + + + {props.children || "Banana"} + + + {props.children || "Melon"} + + +
+ ); +}; +Default.args = { + controlled: false, + legend: "Legend-tekst", + checkboxDescription: false, + hideLabel: false, + hideLegend: false, + errorSingle: false, + errorGroup: false, + children: "", + description: "", }; export const Group = () => ( diff --git a/@navikt/core/react/src/form/checkbox/useCheckbox.ts b/@navikt/core/react/src/form/checkbox/useCheckbox.ts index 40bbe84ba8..9588252b6e 100644 --- a/@navikt/core/react/src/form/checkbox/useCheckbox.ts +++ b/@navikt/core/react/src/form/checkbox/useCheckbox.ts @@ -1,17 +1,16 @@ import { useContext } from "react"; -import { CheckboxProps } from "../.."; +import { CheckboxProps, omit } from "../.."; import { useFormField } from "../useFormField"; import { CheckboxGroupContext } from "./CheckboxGroup"; -import { omit } from "../.."; /** * Handles props for Checkboxes in context with Fieldset and CheckboxGroup */ -const useCheckbox = ({ children, ...props }: CheckboxProps) => { +const useCheckbox = (props: CheckboxProps) => { const checkboxGroup = useContext(CheckboxGroupContext); const { inputProps, readOnly, ...rest } = useFormField( - omit(props, ["description"]), + omit(props, ["description", "children"]), "checkbox" ); diff --git a/@navikt/core/react/src/form/combobox/Combobox.tsx b/@navikt/core/react/src/form/combobox/Combobox.tsx index 48f47b4051..c1907f3186 100644 --- a/@navikt/core/react/src/form/combobox/Combobox.tsx +++ b/@navikt/core/react/src/form/combobox/Combobox.tsx @@ -14,11 +14,9 @@ import Input from "./Input/Input"; export const Combobox = forwardRef< HTMLInputElement, - Omit + Omit >((props, ref) => { const { - value: externalValue, - onClear, className, hideLabel = false, description, @@ -87,6 +85,7 @@ export const Combobox = forwardRef< )}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
, "value"> { ref: React.Ref; inputClassName?: string; - errorId?: string; value?: string; - error?: React.ReactNode; } const Input = forwardRef( - ({ inputClassName, error, errorId, ...rest }, ref) => { + ({ inputClassName, ...rest }, ref) => { const { clearInput, inputProps, onChange, size, value } = useInputContext(); const { selectedOptions, diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx index 24001d65f0..4a6a2981a2 100644 --- a/@navikt/core/react/src/form/combobox/combobox.stories.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { Meta, StoryFn, StoryObj } from "@storybook/react"; import React, { useState, useId, useMemo } from "react"; import { userEvent, within } from "@storybook/testing-library"; @@ -286,28 +285,26 @@ export const ComboboxSizes = () => ( ); -export const WithError: StoryObject = { - args: { - error: "Du må velge en favorittfrukt.", - }, - render: (props) => { - const [hasSelectedValue, setHasSelectedValue] = useState(false); - const [isLoading, setIsLoading] = useState(false); - return ( - { - setIsLoading(true); - setTimeout(() => setIsLoading(false), 2000); - }} - onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)} - /> - ); - }, +export const WithError: StoryFunction = (props) => { + const [hasSelectedValue, setHasSelectedValue] = useState(false); + const [isLoading, setIsLoading] = useState(false); + return ( + { + setIsLoading(true); + setTimeout(() => setIsLoading(false), 2000); + }} + onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)} + /> + ); +}; +WithError.args = { + error: "Du må velge en favorittfrukt.", }; function sleep(ms: number) { diff --git a/@navikt/core/react/src/form/combobox/combobox.test.tsx b/@navikt/core/react/src/form/combobox/combobox.test.tsx index 1e923ed98f..4693be071a 100644 --- a/@navikt/core/react/src/form/combobox/combobox.test.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.test.tsx @@ -1,5 +1,5 @@ -/* eslint-disable react/jsx-pascal-case */ -import { render } from "@testing-library/react"; +/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */ +import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import React, { useId } from "react"; import { UNSAFE_Combobox } from ".."; @@ -38,54 +38,58 @@ const App = (props) => { describe("Render combobox", () => { describe("with multi select", () => { it("Should be able to search, select and remove selections", async () => { - const utils = render(); + render(); await act(async () => { await userEvent.click( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) + screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) ); }); await act(async () => { await userEvent.type( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }), + screen.getByRole("combobox", { + name: "Hva er dine favorittfrukter?", + }), "apple" ); }); await act(async () => { await userEvent.click( - await utils.findByRole("option", { name: "apple" }) + await screen.findByRole("option", { name: "apple" }) ); }); expect( - await utils.findByRole("option", { name: "apple", selected: true }) + await screen.findByRole("option", { name: "apple", selected: true }) ).toBeInTheDocument(); await act(async () => { await userEvent.click( - await utils.findByRole("button", { name: "apple slett" }) + await screen.findByRole("button", { name: "apple slett" }) ); }); }); }); it("Should show loading icon when loading (used for async search)", async () => { - const utils = render(); + render(); - expect(await utils.findByRole("option", { name: "venter..." })); + expect( + await screen.findByRole("option", { name: "venter..." }) + ).toBeInTheDocument(); }); }); describe("Combobox state-handling", () => { it("Should not select previous focused element when closes", async () => { - const utils = render(); + render(); await act(async () => { await userEvent.click( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) + screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) ); }); await act(async () => { await userEvent.type( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }), + screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }), "ban" ); await userEvent.keyboard("{ArrowDown}"); @@ -93,22 +97,20 @@ describe("Combobox state-handling", () => { await userEvent.keyboard("{Enter}"); }); - expect( - await utils.queryByRole("button", { name: "banana slett" }) - ).toBeNull(); + expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull(); }); it("Should reset list when resetting input (ESC)", async () => { - const utils = render(); + render(); await act(async () => { await userEvent.click( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) + screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }) ); }); await act(async () => { await userEvent.type( - utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }), + screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }), "apple" ); await userEvent.keyboard("{ArrowDown}"); @@ -117,7 +119,7 @@ describe("Combobox state-handling", () => { }); expect( - await utils.findByRole("option", { name: "banana" }) + await screen.findByRole("option", { name: "banana" }) ).toBeInTheDocument(); }); }); diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx index 5444a9e83f..7e172f7651 100644 --- a/@navikt/core/react/src/form/radio/radio.stories.tsx +++ b/@navikt/core/react/src/form/radio/radio.stories.tsx @@ -1,58 +1,53 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { Meta } from "@storybook/react"; import React, { useState } from "react"; import { Radio, RadioGroup } from "../../index"; -export default { +const meta: Meta = { title: "ds-react/Radio", component: Radio, - subcomponents: { - RadioGroup, - }, argTypes: { - size: { control: { type: "select", options: ["medium", "small"] } }, + size: { + options: ["medium", "small"], + control: { type: "radio" }, + }, }, -} as Meta; +}; +export default meta; -export const Default = { - render: (props) => { - const [state, setState] = useState("radio1"); +export const Default = (props) => { + const [state, setState] = useState("radio1"); - return ( - + {props.children || "Apple"} + - {props.children || "Apple"} - - {props.children || "Orange"} - - {props.children || "Banana"} - {props.children || "Melon"} - - ); - }, - - args: { - controlled: false, - error: false, - size: "medium", - legend: "Legend-tekst", - radioDescription: false, - hideLegend: false, - children: "", - description: "", - }, + {props.children || "Orange"} + + {props.children || "Banana"} + {props.children || "Melon"} + + ); +}; +Default.args = { + controlled: false, + error: false, + size: "medium", + legend: "Legend-tekst", + radioDescription: false, + hideLegend: false, + children: "", + description: "", }; export const Group = () => ( diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx index f822f96c44..7744f71a03 100644 --- a/@navikt/core/react/src/form/search/Search.tsx +++ b/@navikt/core/react/src/form/search/Search.tsx @@ -153,6 +153,7 @@ export const Search = forwardRef( }; return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ if (e.key !== "Escape") { diff --git a/@navikt/core/react/src/form/search/search.stories.tsx b/@navikt/core/react/src/form/search/search.stories.tsx index 8a7481b8a4..8097238bdc 100644 --- a/@navikt/core/react/src/form/search/search.stories.tsx +++ b/@navikt/core/react/src/form/search/search.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { Meta } from "@storybook/react"; import React, { useState } from "react"; @@ -32,31 +31,28 @@ export default { }, } as Meta; -export const Default = { - render: (props) => { - const [state, setState] = useState(""); - return ( -
- -
- ); - }, - - args: { - controlled: false, - darkmode: false, - hideLabel: true, - }, +export const Default = (props) => { + const [state, setState] = useState(""); + return ( +
+ +
+ ); +}; +Default.args = { + controlled: false, + darkmode: false, + hideLabel: true, }; export const Small = () => ( diff --git a/@navikt/core/react/src/form/stories/fieldset.stories.tsx b/@navikt/core/react/src/form/stories/fieldset.stories.tsx index 22270c72e3..3029487ee7 100644 --- a/@navikt/core/react/src/form/stories/fieldset.stories.tsx +++ b/@navikt/core/react/src/form/stories/fieldset.stories.tsx @@ -114,7 +114,7 @@ export const Disabled = () => (
); -export const hideLegend = () => ( +export const HideLegend = () => (
{content}
diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 6e4cea1ea1..ace954a992 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -1,7 +1,6 @@ import cl from "clsx"; import React, { forwardRef } from "react"; import { OverridableComponent } from "../../util/OverridableComponent"; -import { BorderRadiiToken } from "../utilities/types"; import { SpaceDelimitedAttribute, ResponsiveProp, @@ -12,6 +11,7 @@ import { BackgroundToken, BorderColorToken, ShadowToken, + BorderRadiiToken, } from "../utilities/types"; export interface BoxProps extends React.HTMLAttributes { diff --git a/@navikt/core/react/src/layout/utilities/css.ts b/@navikt/core/react/src/layout/utilities/css.ts index f534d2a931..d608a82d40 100644 --- a/@navikt/core/react/src/layout/utilities/css.ts +++ b/@navikt/core/react/src/layout/utilities/css.ts @@ -29,7 +29,6 @@ export type SpaceDelimitedAttribute = | `${T} ${T} ${T} ${T}`; type FixedResponsiveT = { - // eslint-disable-next-line no-unused-vars [Breakpoint in BreakpointsAlias]?: T; }; diff --git a/@navikt/core/react/src/loader/Loader.tsx b/@navikt/core/react/src/loader/Loader.tsx index 30a313948d..bbcd3860b8 100644 --- a/@navikt/core/react/src/loader/Loader.tsx +++ b/@navikt/core/react/src/loader/Loader.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, SVGProps } from "react"; import cl from "clsx"; -import { useId } from ".."; +import { omit, useId } from ".."; export interface LoaderProps extends SVGProps { /** @@ -52,7 +52,6 @@ export type LoaderType = React.ForwardRefExoticComponent< export const Loader: LoaderType = forwardRef( ( { - children, className, size = "medium", title = "venter...", @@ -81,7 +80,7 @@ export const Loader: LoaderType = forwardRef( focusable="false" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid" - {...rest} + {...omit(rest, ["children"])} > {title} { - const [page, setPage] = useState(props.page); - return ; - }, - - args: { - page: 2, - count: 8, - siblingCount: 1, - boundaryCount: 1, - prevNextTexts: false, - }, +export const Default = (props: any) => { + const [page, setPage] = useState(props.page); + return ; +}; +Default.args = { + page: 2, + count: 8, + siblingCount: 1, + boundaryCount: 1, + prevNextTexts: false, }; export const PrevNextText = () => { @@ -86,32 +82,29 @@ export const XSmall = () => { ); }; -export const AsLink = { - render: () => { - const [page, setPage] = useState(1); - const props = { - page: 1, - count: 8, - siblingCount: 1, - boundaryCount: 1, - }; - return ( - ( - - )} - /> - ); - }, - - decorators: [ - (Story) => ( - - - - ), - ], +export const AsLink = () => { + const [page, setPage] = useState(1); + const props = { + page: 1, + count: 8, + siblingCount: 1, + boundaryCount: 1, + }; + return ( + ( + + )} + /> + ); }; +AsLink.decorators = [ + (Story) => ( + + + + ), +]; diff --git a/@navikt/core/react/src/popover/Popover.test.tsx b/@navikt/core/react/src/popover/Popover.test.tsx index af514f2a90..dba334fbcd 100644 --- a/@navikt/core/react/src/popover/Popover.test.tsx +++ b/@navikt/core/react/src/popover/Popover.test.tsx @@ -1,11 +1,11 @@ -import { act, cleanup, fireEvent } from "@testing-library/react"; +import { act, fireEvent, screen } from "@testing-library/react"; import React from "react"; import { renderWithStyles as render } from "../../tests/utils"; import Popover from "./Popover"; describe("Popover", () => { test("open", () => { - const { getByTestId } = render( + render( { ); - expect(getByTestId("popover-id")).toBeVisible(); - cleanup(); + expect(screen.getByTestId("popover-id")).toBeVisible(); }); test("should be hidden", () => { - const { getByTestId } = render( + render( { ); - expect(getByTestId("popover-id")).not.toBeVisible(); - cleanup(); + expect(screen.getByTestId("popover-id")).not.toBeVisible(); }); it("outsideClick", async () => { const fn = jest.fn(); - const { getByRole, getByTestId } = render( + render(
{ ); await act(async () => { - expect(getByTestId("popover-id")).toBeVisible(); - getByRole("link").focus(); + expect(screen.getByTestId("popover-id")).toBeVisible(); + screen.getByRole("link").focus(); }); expect(fn).toHaveBeenCalled(); - - cleanup(); }); it("escape", async () => { const fn = jest.fn(); - const { container, getByTestId } = render( + const { container } = render(
{
); - await act(async () => { - expect(getByTestId("popover-id")).toBeVisible(); - fireEvent.keyDown( - // Should work anywhere - container, - { key: "Escape" } - ); - }); + expect(screen.getByTestId("popover-id")).toBeVisible(); + fireEvent.keyDown( + // Should work anywhere + container, + { key: "Escape" } + ); expect(fn).toHaveBeenCalled(); - - cleanup(); }); it("keep open on popover-focus", async () => { const fn = jest.fn(); - const { getByTestId } = render( + render(
{ ); await act(async () => { - expect(getByTestId("popover-id")).toBeVisible(); - getByTestId("popover-id").focus(); + expect(screen.getByTestId("popover-id")).toBeVisible(); + screen.getByTestId("popover-id").focus(); }); expect(fn).toHaveBeenCalledTimes(0); - - cleanup(); }, 20000); it("keep open on popover-click", async () => { const fn = jest.fn(); - const { getByTestId } = render( + render(
{
); - await act(async () => { - expect(getByTestId("popover-id")).toBeVisible(); - fireEvent.click(getByTestId("popover-id")); - }); + expect(screen.getByTestId("popover-id")).toBeVisible(); + fireEvent.click(screen.getByTestId("popover-id")); expect(fn).toHaveBeenCalledTimes(0); - - cleanup(); }); }); diff --git a/@navikt/core/react/src/popover/popover.stories.tsx b/@navikt/core/react/src/popover/popover.stories.tsx index b3b3829d7a..8182fa8d49 100644 --- a/@navikt/core/react/src/popover/popover.stories.tsx +++ b/@navikt/core/react/src/popover/popover.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import React, { useState } from "react"; import { Popover } from "../index"; import { Button } from "../button"; @@ -25,60 +24,45 @@ export default { }, argTypes: { open: { - control: { - type: "boolean", - }, + control: { type: "boolean" }, }, arrow: { - control: { - type: "boolean", - }, + control: { type: "boolean" }, }, offset: { - control: { - type: "number", - }, + control: { type: "number" }, }, strategy: { defaultValue: "absolute", - control: { - type: "radio", - options: ["fixed", "absolute"], - }, + options: ["fixed", "absolute"], + control: { type: "radio" }, }, placement: { defaultValue: "right", - control: { - type: "radio", - options: placements, - }, + options: placements, + control: { type: "radio" }, }, }, }; -export const Default = { - render: (props: any) => { - const [anchorEl, setAnchorEl] = useState(); - const [open, setOpen] = useState(false); - return ( -
- - setOpen(e)} - > - Velit in consequat - -
- ); - }, +export const Default = (props: any) => { + const [anchorEl, setAnchorEl] = useState(); + const [open, setOpen] = useState(false); + return ( +
+ + setOpen(e)} + > + Velit in consequat + +
+ ); }; const Template = (props) => { diff --git a/@navikt/core/react/src/react-css.d.ts b/@navikt/core/react/src/react-css.d.ts index ebb9007a39..3ab509857c 100644 --- a/@navikt/core/react/src/react-css.d.ts +++ b/@navikt/core/react/src/react-css.d.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line react/no-typos import "react"; declare module "react" { diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx index a40c311f8a..5dcf10440a 100644 --- a/@navikt/core/react/src/read-more/readmore.stories.tsx +++ b/@navikt/core/react/src/read-more/readmore.stories.tsx @@ -1,43 +1,42 @@ -/* eslint-disable react-hooks/rules-of-hooks */ +import { Meta, StoryFn } from "@storybook/react"; import React, { useState } from "react"; import { ReadMore } from "."; -export default { +const meta: Meta = { title: "ds-react/ReadMore", component: ReadMore, - argTypes: { - size: { - control: { - type: "radio", - options: ["medium", "small"], - }, - }, - }, }; +export default meta; -export const Default = { - render: (props) => { - const [state, setState] = useState(false); - - return ( - setState((x) => !x)} - header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg" - size={props.size} - > -
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, - tempore corporis exercitationem minus dignissimos eius aspernatur - fugiat iusto. -
- - ); - }, +export const Default: StoryFn<{ + controlled: boolean; + size: "medium" | "small"; +}> = (props) => { + const [state, setState] = useState(false); - args: { - controlled: false, - size: "medium", + return ( + setState((x) => !x)} + header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg" + size={props.size} + > +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, + tempore corporis exercitationem minus dignissimos eius aspernatur fugiat + iusto. +
+ + ); +}; +Default.args = { + controlled: false, + size: "medium", +}; +Default.argTypes = { + size: { + options: ["medium", "small"], + control: { type: "radio" }, }, }; @@ -46,8 +45,8 @@ export const Small = () => ( header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg" size="small" > - Command station, this is ST 321. Code Clearance Blue. We're starting our - approach. Deactivate the security shield. + Command station, this is ST 321. Code Clearance Blue. We're starting + our approach. Deactivate the security shield. ); @@ -56,7 +55,7 @@ export const Open = () => ( header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg" defaultOpen > - Command station, this is ST 321. Code Clearance Blue. We're starting our - approach. Deactivate the security shield. + Command station, this is ST 321. Code Clearance Blue. We're starting + our approach. Deactivate the security shield. ); diff --git a/@navikt/core/react/src/stepper/stepper.stories.tsx b/@navikt/core/react/src/stepper/stepper.stories.tsx index 3de2c95533..25fb084726 100644 --- a/@navikt/core/react/src/stepper/stepper.stories.tsx +++ b/@navikt/core/react/src/stepper/stepper.stories.tsx @@ -1,26 +1,22 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import { Meta } from "@storybook/react"; import React, { useState } from "react"; import { BodyLong } from ".."; import Stepper from "./Stepper"; -export default { +const meta: Meta = { title: "ds-react/Stepper", component: Stepper, argTypes: { orientation: { - control: { - type: "radio", - }, + control: { type: "radio" }, options: ["horizontal", "vertical"], }, activeStep: { - control: { - type: "number", - }, + control: { type: "number" }, }, }, -} as Meta; +}; +export default meta; const storyTexts = [ "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.", @@ -32,51 +28,48 @@ const storyTexts = [ "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.", ]; -export const Default = { - render: ({ asButton, ...props }) => { - const [activeStep, setActiveStep] = useState(1); - - const newProps = { - onClick: (e) => e.preventDefault(), - ...(asButton ? { as: "button" } : { href: "#" }), - }; +export const Default = ({ asButton, ...props }) => { + const [activeStep, setActiveStep] = useState(1); - return ( -
- - - Start søknad - - Personopplysninger - - Saksopplysninger - - - Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives - og forklares i sitt fulle i denne labelen - - Vedlegg - Oppsummering - Innsending - - - {storyTexts[activeStep]} - -
- ); - }, + const newProps = { + onClick: (e) => e.preventDefault(), + ...(asButton ? { as: "button" } : { href: "#" }), + }; - args: { - asButton: false, - interactive: true, - completed: false, - }, + return ( +
+ + + Start søknad + + Personopplysninger + + Saksopplysninger + + + Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og + forklares i sitt fulle i denne labelen + + Vedlegg + Oppsummering + Innsending + + + {storyTexts[activeStep]} + +
+ ); +}; +Default.args = { + asButton: false, + interactive: true, + completed: false, }; export const Horizontal = () => { diff --git a/@navikt/core/react/src/table/stories/table-expandable.stories.tsx b/@navikt/core/react/src/table/stories/table-expandable.stories.tsx index 2fa9152935..9cd83456fd 100644 --- a/@navikt/core/react/src/table/stories/table-expandable.stories.tsx +++ b/@navikt/core/react/src/table/stories/table-expandable.stories.tsx @@ -147,7 +147,7 @@ const data = [ status: "Inaktiv", content: ( <> - Ola Conny Brakkestad sier "hei". Her er litt innhold med en{" "} + Ola Conny Brakkestad sier hei. Her er litt innhold med en{" "} link. ), @@ -162,7 +162,7 @@ const data = [ status: Hissig, content: ( <> - Henriette Kristensen sier "hei". Her er litt innhold med en{" "} + Henriette Kristensen sier hei. Her er litt innhold med en{" "} lenke. I forhold til en betydelig avveining synliggjøres potensialet med sikte på satsingsområdet. Gitt en manglende avveining synliggjøres instrumentet på bakgrunn av forholdene. @@ -183,7 +183,7 @@ const data = [ status: "Deaktivert", content: ( <> - Suki Clydesdale sier "hei". Her er litt innhold med en{" "} + Suki Clydesdale sier hei. Her er litt innhold med en{" "} link. ), @@ -198,7 +198,7 @@ const data = [ status: Starter, content: ( <> - Hans-Hermann Hoppe sier "hei". Her er litt innhold med en{" "} + Hans-Hermann Hoppe sier hei. Her er litt innhold med en{" "} link. ), @@ -213,7 +213,7 @@ const data = [ status: Eksplodert, content: ( <> - Max Kraft sier "hei". Her er litt innhold med en{" "} + Max Kraft sier hei. Her er litt innhold med en{" "} link. ), @@ -228,7 +228,7 @@ const data = [ status: Gunstig, content: ( <> - Pat Ole sier "hei". Her er litt innhold med en{" "} + Pat Ole sier hei. Her er litt innhold med en{" "} lenke. ), @@ -265,62 +265,58 @@ export const ExpandableOpen = () => { ); }; -export const ClickableRow = { - render: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [isRowOpen1, setIsRowOpen1] = useState(false); - // eslint-disable-next-line react-hooks/rules-of-hooks - const [isRowOpen2, setIsRowOpen2] = useState(false); +export const ClickableRow = () => { + const [isRowOpen1, setIsRowOpen1] = useState(false); + const [isRowOpen2, setIsRowOpen2] = useState(false); - return ( - <> - - - - Navn - Info - - - - - placeholder row 1} - togglePlacement="right" - onOpenChange={setIsRowOpen1} - data-testid="row1" - open={isRowOpen1} - expandOnRowClick - > - Ola - - - - - placeholder row 2} - togglePlacement="right" - onOpenChange={setIsRowOpen2} - data-testid="row2" - open={isRowOpen2} - expandOnRowClick - > - Hans - - - Sett - - - - -
- - ); - }, + return ( + <> + + + + Navn + Info + + + + + placeholder row 1} + togglePlacement="right" + onOpenChange={setIsRowOpen1} + data-testid="row1" + open={isRowOpen1} + expandOnRowClick + > + Ola + + + + + placeholder row 2} + togglePlacement="right" + onOpenChange={setIsRowOpen2} + data-testid="row2" + open={isRowOpen2} + expandOnRowClick + > + Hans + + + Sett + + + + +
+ + ); }; diff --git a/@navikt/core/react/src/tabs/TabList.tsx b/@navikt/core/react/src/tabs/TabList.tsx index 4b19e8384d..e25e73e0fa 100644 --- a/@navikt/core/react/src/tabs/TabList.tsx +++ b/@navikt/core/react/src/tabs/TabList.tsx @@ -34,13 +34,10 @@ export const TabList = forwardRef( debounce(() => { if (!listRef?.current) return; const { scrollWidth, clientWidth } = listRef.current; - let showStartScroll; - let showEndScroll; - - const scrollLeft = listRef?.current?.scrollLeft; + const scrollLeft = listRef.current.scrollLeft; // use 1 for the potential rounding error with browser zooms. - showStartScroll = scrollLeft > 1; - showEndScroll = scrollLeft < scrollWidth - clientWidth - 1; + const showStartScroll = scrollLeft > 1; + const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1; setDisplayScroll((displayScroll) => showStartScroll === displayScroll.start && @@ -89,6 +86,7 @@ export const TabList = forwardRef( dir: 1 | -1; hidden: boolean; }) => ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
; const Panel = () => { return ( diff --git a/@navikt/core/react/src/tag/tag.stories.tsx b/@navikt/core/react/src/tag/tag.stories.tsx index 41d4a18f69..3951979a03 100644 --- a/@navikt/core/react/src/tag/tag.stories.tsx +++ b/@navikt/core/react/src/tag/tag.stories.tsx @@ -66,7 +66,7 @@ export const Default = { export const Small = () => { return (
- {variants.map((variant, i) => ( + {variants.map((variant) => ( {variant} @@ -75,10 +75,10 @@ export const Small = () => { ); }; -export const xSmall = () => { +export const XSmall = () => { return (
- {variants.map((variant, i) => ( + {variants.map((variant) => ( {variant} @@ -90,7 +90,7 @@ export const xSmall = () => { export const Variants = () => { return (
- {variants.map((variant, i) => ( + {variants.map((variant) => ( {variant} diff --git a/@navikt/core/react/src/timeline/TimelineRow.tsx b/@navikt/core/react/src/timeline/TimelineRow.tsx index c5db3d46f6..6724a5b3ae 100644 --- a/@navikt/core/react/src/timeline/TimelineRow.tsx +++ b/@navikt/core/react/src/timeline/TimelineRow.tsx @@ -70,6 +70,7 @@ export const TimelineRow = forwardRef( "navds-timeline__row--active": active, })} > + {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
    ( width={width} left={horizontalPosition} icon={icon} - children={children} isActive={isActive} statusLabel={statusLabel} restProps={restProps} - /> + > + {children} + ) : ( { label="Row 1" icon={} > - {row1.map((p: any, i) => { + {row1.map((p: any) => { return ( { label="Row 2" icon={} > - {row2.map((p: any, i) => { + {row2.map((p: any) => { return ( { label="Row 1" icon={} > - {row1.map((p: any, i) => { + {row1.map((p: any) => { return ( { label="Row 2" icon={} > - {row2.map((p: any, i) => { + {row2.map((p: any) => { return ( { label="Row 1" icon={} > - {row1.map((p: any, i) => { + {row1.map((p: any) => { return ( { label="Row 2" icon={} > - {row2.map((p: any, i) => { + {row2.map((p: any) => { return ( { label="Rad 1" icon={} > - {row1.map((p: any, i) => { + {row1.map((p: any) => { return ( { })} - {row2.map((p: any, i) => { + {row2.map((p: any) => { return ( { label="Rad 1" icon={} > - {row1.map((p: any, i) => { + {row1.map((p: any) => { return ( { })} - {row2.map((p: any, i) => { + {row2.map((p: any) => { return ( { - let parsedChildren: ParsedChild[] = []; + const parsedChildren: ParsedChild[] = []; rowChildren?.forEach((r: React.ReactNode) => { - let periods: ParsedChild["periods"] = []; + const periods: ParsedChild["periods"] = []; if (React.isValidElement(r) && r?.props?.children) { if (Array.isArray(r.props.children)) { for (let i = 0; i < r.props.children.length; i++) { @@ -72,7 +72,7 @@ export const parseRows = (rowChildren: ReactNode[]) => { label: r.props.label, icon: r.props.icon, headingTag: r.props.headingTag, - periods: periods, + periods, restProps: omit(r.props, ["label", "icon", "headingTag"]), ref: (r as any)?.ref, }); diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx index 2e83bde7ea..b9e6adfebf 100644 --- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx +++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react-hooks/rules-of-hooks */ - import { EnvelopeClosedIcon, EnvelopeOpenIcon, @@ -8,24 +6,24 @@ import { import { Meta } from "@storybook/react"; import React, { useState } from "react"; import { ToggleGroup } from "../index"; -export default { + +const meta: Meta = { title: "ds-react/ToggleGroup", component: ToggleGroup, argTypes: { size: { + options: ["medium", "small"], control: { type: "radio", - options: ["medium", "small"], }, }, variant: { - control: { - type: "radio", - options: ["action", "neutral"], - }, + options: ["action", "neutral"], + control: { type: "radio" }, }, }, -} as Meta; +}; +export default meta; const Items = (icon?: boolean, both?: boolean) => ( <> @@ -59,26 +57,24 @@ const Items = (icon?: boolean, both?: boolean) => ( ); -export const Default = { - render: (props) => { - const [activeValue, setActiveValue] = useState("ulest"); - return ( - - {Items(!!props?.icon, !!props?.text && props.icon)} - - ); - }, - - args: { - icon: true, - text: true, - label: false, - }, +export const Default = (props) => { + const [activeValue, setActiveValue] = useState("ulest"); + return ( + + {Items(props.icon, props.text && props.icon)} + + ); +}; +Default.args = { + icon: true, + text: true, + label: false, }; export const Compositions = () => { diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx index 4616831994..efaf310f9b 100644 --- a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx +++ b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx @@ -88,7 +88,6 @@ export const ToggleGroup = forwardRef( label, value, defaultValue, - id, "aria-describedby": desc, variant = "action", ...rest diff --git a/@navikt/core/react/src/tooltip/Tooltip.test.tsx b/@navikt/core/react/src/tooltip/Tooltip.test.tsx index 6a3dcc25e5..daffd06fe8 100644 --- a/@navikt/core/react/src/tooltip/Tooltip.test.tsx +++ b/@navikt/core/react/src/tooltip/Tooltip.test.tsx @@ -1,13 +1,16 @@ -import { act, cleanup, fireEvent } from "@testing-library/react"; +import { act, fireEvent, screen } from "@testing-library/react"; import React from "react"; -import { focusVisible, simulatePointerDown } from "../../tests/utils"; +import { + focusVisible, + simulatePointerDown, + renderWithStyles as render, +} from "../../tests/utils"; import userEvent from "@testing-library/user-event"; import Tooltip from "./Tooltip"; -import { renderWithStyles as render } from "../../tests/utils"; describe("Tooltip", () => { test("controlled open", () => { - const { getByRole } = render( + render(
); - simulatePointerDown(getByRole("button")); - focusVisible(getByRole("button")); + simulatePointerDown(screen.getByRole("button")); + focusVisible(screen.getByRole("button")); await act(async () => { - expect(getByRole("tooltip")).toBeVisible(); - getByRole("link").focus(); + expect(screen.getByRole("tooltip")).toBeVisible(); + screen.getByRole("link").focus(); }); - expect(queryByRole("tooltip")).toBeNull(); - - cleanup(); + expect(screen.queryByRole("tooltip")).toBeNull(); }); it("keep open on tooltip-click", async () => { - const { getByRole } = render( + render(
); - simulatePointerDown(getByRole("button")); - focusVisible(getByRole("button")); + simulatePointerDown(screen.getByRole("button")); + focusVisible(screen.getByRole("button")); - await act(async () => { - expect(getByRole("tooltip")).toBeVisible(); - fireEvent.click(getByRole("tooltip")); - }); + expect(screen.getByRole("tooltip")).toBeVisible(); + fireEvent.click(screen.getByRole("tooltip")); - expect(getByRole("tooltip")).toBeVisible(); - - cleanup(); + expect(screen.getByRole("tooltip")).toBeVisible(); }); it("close on focus-loss", async () => { - const { getByRole, queryByRole } = render( + render(
); - simulatePointerDown(getByRole("button")); - focusVisible(getByRole("button")); + simulatePointerDown(screen.getByRole("button")); + focusVisible(screen.getByRole("button")); await act(async () => { - expect(getByRole("tooltip")).toBeVisible(); - getByRole("link").focus(); + expect(screen.getByRole("tooltip")).toBeVisible(); + screen.getByRole("link").focus(); }); - expect(queryByRole("tooltip")).toBeNull(); - - cleanup(); + expect(screen.queryByRole("tooltip")).toBeNull(); }); }); diff --git a/@navikt/core/react/src/typography/Heading.tsx b/@navikt/core/react/src/typography/Heading.tsx index 4f5abcd150..33c9201db7 100644 --- a/@navikt/core/react/src/typography/Heading.tsx +++ b/@navikt/core/react/src/typography/Heading.tsx @@ -52,7 +52,7 @@ export const Heading: OverridableComponent = }, ref ) => { - let HeadingTag = as ?? (`h${level}` as React.ElementType); + const HeadingTag = as ?? (`h${level}` as React.ElementType); return ( AllIcons[key]); export const RandomIcon = () => { diff --git a/@navikt/core/react/src/util/useId.ts b/@navikt/core/react/src/util/useId.ts index 03a8d88bef..fbe7fefc07 100644 --- a/@navikt/core/react/src/util/useId.ts +++ b/@navikt/core/react/src/util/useId.ts @@ -18,10 +18,8 @@ function useGlobalId(idOverride?: string): string | undefined { return id; } -// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814 const maybeReactUseId: undefined | (() => string) = (React as any)[ - // eslint-disable-next-line no-useless-concat - "useId" + "" + "useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814 ]; /** * diff --git a/@navikt/core/react/tests/utils.ts b/@navikt/core/react/tests/utils.ts index 37c513ed51..b39ecd8920 100644 --- a/@navikt/core/react/tests/utils.ts +++ b/@navikt/core/react/tests/utils.ts @@ -1,6 +1,5 @@ // https://github.com/mui/material-ui/blob/d14be1cb1e4c7275a1f356dec98667c7ad491983/test/utils/focusVisible.ts#L3 -import { act, fireEvent } from "@testing-library/react"; -import { render } from "@testing-library/react"; +import { act, fireEvent, render } from "@testing-library/react"; import fs from "fs"; import path from "path"; import { ReactElement } from "react"; diff --git a/@navikt/core/tailwind/src/index.ts b/@navikt/core/tailwind/src/index.ts index 4f529395d5..be31210890 100644 --- a/@navikt/core/tailwind/src/index.ts +++ b/@navikt/core/tailwind/src/index.ts @@ -1,4 +1,3 @@ -// @ts-ignore import * as TokensBuild from "@navikt/ds-tokens/dist/tokens"; import { writeFileSync } from "fs"; import { getColors } from "./colors"; diff --git a/@navikt/core/tailwind/src/kebabCase.ts b/@navikt/core/tailwind/src/kebabCase.ts index b441c26d43..ed10578b11 100644 --- a/@navikt/core/tailwind/src/kebabCase.ts +++ b/@navikt/core/tailwind/src/kebabCase.ts @@ -1,4 +1,4 @@ -const _ = require("lodash"); +import _ from "lodash"; const kebabCase = (string) => _.kebabCase(string).replace(/(^|-)(\d+)-(x[ls])/g, "$1$2$3"); diff --git a/@navikt/core/tokens/config/tests/validate-docs.test.js b/@navikt/core/tokens/config/tests/validate-docs.test.js index 953f1a379d..bbb8a522ea 100644 --- a/@navikt/core/tokens/config/tests/validate-docs.test.js +++ b/@navikt/core/tokens/config/tests/validate-docs.test.js @@ -10,7 +10,7 @@ const wrongValues = []; describe("Validate tokens dokumentation", () => { flatten.forEach((x) => { - it(`${x} should be documented`, () => { + it(`${x.name} should be documented`, () => { expect( Object.keys(DsTokens).find( (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name @@ -21,16 +21,10 @@ describe("Validate tokens dokumentation", () => { Object.entries(DsTokens).forEach(([key, val]) => { const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-"); - it(`${formatedKey} should exist in docs`, () => { + it(`${formatedKey} should exist in docs and have correct value`, () => { const tokenInDoc = flatten.find((x) => x.name === formatedKey); expect(tokenInDoc).toBeDefined(); - }); - - it(`${formatedKey} should have correct value ${val}`, () => { - const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-"); - - const tokenInDoc = flatten.find((x) => x.name === formatedKey); - expect(tokenInDoc?.value).toEqual(val); + expect(tokenInDoc.value).toEqual(val); }); }); }); diff --git a/@navikt/core/tokens/stories/border-radius.stories.tsx b/@navikt/core/tokens/stories/border-radius.stories.tsx index 9a77e54354..41a3196604 100644 --- a/@navikt/core/tokens/stories/border-radius.stories.tsx +++ b/@navikt/core/tokens/stories/border-radius.stories.tsx @@ -22,5 +22,5 @@ const Border = ({ token }) => ( export const Small = () => ; export const Medium = () => ; export const Large = () => ; -export const xLarge = () => ; +export const XLarge = () => ; export const Full = () => ; diff --git a/@navikt/core/tokens/stories/colors.stories.tsx b/@navikt/core/tokens/stories/colors.stories.tsx index 5d4c823f47..aa46292f84 100644 --- a/@navikt/core/tokens/stories/colors.stories.tsx +++ b/@navikt/core/tokens/stories/colors.stories.tsx @@ -13,12 +13,13 @@ const ColorGroups = ({ prefix }: { prefix: string }) => ( .map(([group, groupTokens]) => { const groupName = group.replace(prefix, ""); return ( -
+

{groupName.charAt(0).toLocaleUpperCase() + groupName.substring(1)}

{groupTokens.map((color) => (
{
{Object.entries(sortObject).map(([key, val]) => (
( { autoCorrect="off" autoCapitalize="off" spellCheck={false} - autoFocus id="aksel-search-input" clearButton={false} placeholder="Søk gjennom hele aksel" diff --git a/aksel.nav.no/website/components/layout/header/search/Results.tsx b/aksel.nav.no/website/components/layout/header/search/Results.tsx index c01c766e15..1d095b5dee 100644 --- a/aksel.nav.no/website/components/layout/header/search/Results.tsx +++ b/aksel.nav.no/website/components/layout/header/search/Results.tsx @@ -39,9 +39,9 @@ export const Results = () => { aria-live="polite" aria-atomic > - {`Ingen treff på "`} + Ingen treff på " {query} - " + " {tags.length > 0 && ( {` i ${tags .map((x) => searchOptions[x].display.toLowerCase()) diff --git a/aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx b/aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx index c6b8140b4c..66bd0a5a62 100644 --- a/aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx +++ b/aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @next/next/no-img-element */ import { Heading } from "@navikt/ds-react"; import Nextlink from "next/link"; import cl from "clsx"; diff --git a/aksel.nav.no/website/components/sanity-modules/Video.tsx b/aksel.nav.no/website/components/sanity-modules/Video.tsx index c58ad9b73c..0c5830ca67 100644 --- a/aksel.nav.no/website/components/sanity-modules/Video.tsx +++ b/aksel.nav.no/website/components/sanity-modules/Video.tsx @@ -14,6 +14,7 @@ const Video = ({ node }: { node: VideoT }) => { /* https://www.w3.org/WAI/PF/HTML/wiki/Media_Alt_Technologies#1:_Use_.40aria-label_for_the_text_description_of_player */ return (
+ {/* eslint-disable-next-line jsx-a11y/media-has-caption */}