Justering av fokus-eksempel på ErrorSummary (#2577)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 5.12.2
+
+## 5.12.1
+
 ## 5.12.0
 
 ### Minor Changes

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 5.12.2
+
+## 5.12.1
+
 ## 5.12.0
 
 ## 5.11.5

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "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.12.0",
-    "@navikt/ds-tokens": "^5.12.0",
+    "@navikt/ds-css": "^5.12.2",
+    "@navikt/ds-tokens": "^5.12.2",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 5.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.2
+
+## 5.12.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.1
+
 ## 5.12.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "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.12.0",
+    "@navikt/ds-css": "5.12.2",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css
 
+## 5.12.2
+
+## 5.12.1
+
 ## 5.12.0
 
 ## 5.11.5

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "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.12.0",
+    "@navikt/ds-tokens": "^5.12.2",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/ds-react
 
+## 5.12.2
+
+### Patch Changes
+
+- :memo: Modal: Oppdatert JSDoc ([#2567](https://github.com/navikt/aksel/pull/2567))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.2
+  - @navikt/aksel-icons@5.12.2
+
+## 5.12.1
+
+### Patch Changes
+
+- Checkbox: Checkmark tilpasses bedre fontsize ([#2563](https://github.com/navikt/aksel/pull/2563))
+
+- Datepicker: Lukk-knapp i modal har nå type button for å unngå form-submition ([#2568](https://github.com/navikt/aksel/pull/2568))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.1
+  - @navikt/aksel-icons@5.12.1
+
 ## 5.12.0
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "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.12.0",
-    "@navikt/ds-tokens": "^5.12.0",
+    "@navikt/aksel-icons": "^5.12.2",
+    "@navikt/ds-tokens": "^5.12.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/parts/DateWrapper.tsx

@@ -74,6 +74,7 @@ export const DateWrapper = ({
           variant="tertiary"
           onClick={() => modalRef?.current?.close()}
           size="small"
+          type="button"
         >
           {modalCloseButtonLabel(locale)}
         </Button>

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -54,8 +54,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           <span className="navds-checkbox__icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="13"
-              height="10"
+              width="0.8125rem"
+              height="0.625rem"
               viewBox="0 0 13 10"
               fill="none"
               focusable={false}

@navikt/core/react/src/modal/types.ts

@@ -34,18 +34,21 @@ export interface ModalProps
    */
   onClose?: React.ReactEventHandler<HTMLDialogElement>;
   /**
-   * Called when the user wants to close the modal (clicked the close button or pressed Esc).
+   * Called when the user tries to close the modal by one of the built-in methods.
+   * Used if you want to ask the user for confirmation before closing.
+   * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
    * @returns Whether to close the modal
    */
   onBeforeClose?: () => boolean | void;
   /**
-   * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
+   * *Sometimes** called when the user presses the Esc key, unless you return `false` in `onBeforeClose()`.
+   * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
+   *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
    */
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;
   /**
    * Whether to close when clicking on the backdrop.
-   *
-   * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   * @warning Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
    * @default false
    */
   closeOnBackdropClick?: boolean;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 5.12.2
+
+## 5.12.1
+
 ## 5.12.0
 
 ## 5.11.5

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -24,7 +24,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.12.0",
+    "@navikt/ds-tokens": "^5.12.2",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 5.12.2
+
+## 5.12.1
+
 ## 5.12.0
 
 ## 5.11.5

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

aksel.nav.no/package.json

@@ -16,11 +16,11 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.12.0",
-    "@navikt/ds-css": "^5.12.0",
-    "@navikt/ds-react": "^5.12.0",
-    "@navikt/ds-tailwind": "^5.12.0",
-    "@navikt/ds-tokens": "^5.12.0"
+    "@navikt/aksel-icons": "^5.12.2",
+    "@navikt/ds-css": "^5.12.2",
+    "@navikt/ds-react": "^5.12.2",
+    "@navikt/ds-tailwind": "^5.12.2",
+    "@navikt/ds-tokens": "^5.12.2"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/playroom/playroom.config.js

@@ -19,7 +19,7 @@ module.exports = {
   useScope: path.resolve("./src/useScope.tsx"),
   openBrowser: false,
   paramType: "search", // default is 'hash'
-  iframeSandbox: "allow-scripts allow-same-origin",
+  iframeSandbox: "allow-scripts allow-same-origin allow-modals",
   exampleCode: `
   <Heading>This is a sandbox!</Heading>
   <HStack gap="10">

aksel.nav.no/website/pages/eksempler/button/action.tsx

@@ -0,0 +1,48 @@
+import { Button, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="6" align="center">
+      <HStack gap="2">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary" size="small">
+          Primary
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary
+        </Button>
+        <Button variant="tertiary" size="small">
+          Tertiary
+        </Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary" size="xsmall">
+          Primary
+        </Button>
+        <Button variant="secondary" size="xsmall">
+          Secondary
+        </Button>
+        <Button variant="tertiary" size="xsmall">
+          Tertiary
+        </Button>
+      </HStack>
+    </VStack>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};

aksel.nav.no/website/pages/eksempler/button/danger.tsx

@@ -1,14 +1,17 @@
-import { Button } from "@navikt/ds-react";
+import { Button, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="tertiary">Tertiary</Button>
+    <VStack gap="6" align="center">
       <Button variant="danger">Danger</Button>
-    </div>
+      <Button variant="danger" size="small">
+        Danger
+      </Button>
+      <Button variant="danger" size="xsmall">
+        Danger
+      </Button>
+    </VStack>
   );
 };
 
@@ -21,5 +24,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 0,
+  index: 2,
 };

aksel.nav.no/website/pages/eksempler/button/disabled.tsx

@@ -1,9 +1,9 @@
-import { Button } from "@navikt/ds-react";
+import { Button, HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <HStack gap="2">
       <Button disabled variant="primary">
         Primary
       </Button>
@@ -16,7 +16,7 @@ const Example = () => {
       <Button disabled variant="danger">
         Danger
       </Button>
-    </div>
+    </HStack>
   );
 };
 

aksel.nav.no/website/pages/eksempler/button/frameworks.tsx

@@ -10,6 +10,24 @@ const Example = () => {
   );
 };
 
+/*
+
+import { Link as ReactRouterLink } from "react-router-dom";
+const ReactRouterExample = () => (
+  <Button as={ReactRouterLink} to="#">
+    Lenke
+  </Button>
+);
+
+import { Link as RemixLink } from "@remix-run/react";
+const RemixExample = () => (
+  <Button as={RemixLink} to="#">
+    Lenke
+  </Button>
+);
+
+*/
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 

aksel.nav.no/website/pages/eksempler/button/icon.tsx

@@ -1,16 +1,16 @@
 import { PencilIcon } from "@navikt/aksel-icons";
-import { Button } from "@navikt/ds-react";
+import { Button, HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <HStack gap="6">
       <Button icon={<PencilIcon aria-hidden />}>Rediger</Button>
-      <Button icon={<PencilIcon aria-hidden />} />
+      <Button icon={<PencilIcon title="Rediger" />} />
       <Button iconPosition="right" icon={<PencilIcon aria-hidden />}>
         Rediger
       </Button>
-    </div>
+    </HStack>
   );
 };
 

aksel.nav.no/website/pages/eksempler/button/neutral.tsx

@@ -1,13 +1,37 @@
-import { Button } from "@navikt/ds-react";
+import { Button, HStack, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="primary-neutral">Primary</Button>
-      <Button variant="secondary-neutral">Secondary</Button>
-      <Button variant="tertiary-neutral">Tertiary</Button>
-    </div>
+    <VStack gap="6" align="center">
+      <HStack gap="2">
+        <Button variant="primary-neutral">Primary</Button>
+        <Button variant="secondary-neutral">Secondary</Button>
+        <Button variant="tertiary-neutral">Tertiary</Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary-neutral" size="small">
+          Primary
+        </Button>
+        <Button variant="secondary-neutral" size="small">
+          Secondary
+        </Button>
+        <Button variant="tertiary-neutral" size="small">
+          Tertiary
+        </Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary-neutral" size="xsmall">
+          Primary
+        </Button>
+        <Button variant="secondary-neutral" size="xsmall">
+          Secondary
+        </Button>
+        <Button variant="tertiary-neutral" size="xsmall">
+          Tertiary
+        </Button>
+      </HStack>
+    </VStack>
   );
 };
 

aksel.nav.no/website/pages/eksempler/button/small.tsx

@@ -1,34 +0,0 @@
-import { PencilIcon } from "@navikt/aksel-icons";
-import { Button } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Button size="small" variant="primary" icon={<PencilIcon aria-hidden />}>
-        Primary
-      </Button>
-      <Button size="small" variant="secondary">
-        Secondary
-      </Button>
-      <Button size="small" variant="tertiary">
-        Tertiary
-      </Button>
-      <Button size="small" variant="danger">
-        Danger
-      </Button>
-    </div>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 2,
-};

aksel.nav.no/website/pages/eksempler/button/xsmall.tsx

@@ -1,35 +0,0 @@
-import { PencilIcon } from "@navikt/aksel-icons";
-import { Button } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Button size="xsmall" variant="primary" icon={<PencilIcon aria-hidden />}>
-        Primary
-      </Button>
-      <Button size="xsmall" variant="secondary">
-        Secondary
-      </Button>
-      <Button size="xsmall" variant="tertiary">
-        Tertiary
-      </Button>
-      <Button size="xsmall" variant="danger">
-        Danger
-      </Button>
-    </div>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 3,
-  desc: "Varianten xsmall er tilgjengelig for bruk i tabell eller interne løsninger. Bør brukes sparsomt om mulig da klikkflaten kan være problematisk, spesielt på mobil.",
-};

aksel.nav.no/website/pages/eksempler/errorsummary/setting-focus.tsx

@@ -3,11 +3,11 @@ import { Button, ErrorSummary } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
-  const errorRef = useRef(null);
+  const errorRef = useRef<HTMLDivElement>(null);
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    errorRef?.current && errorRef.current.focus();
+    errorRef.current && errorRef.current.focus();
   }, [hasError]);
 
   return (
@@ -40,4 +40,5 @@ export const Demo = {
 
 export const args = {
   index: 3,
+  desc: "Sett fokus på ErrorSummary ved submit. Hvis du gjør en ny sidelasting kan du også sette en ID på ErrorSummary og referere til den i URLens hash.",
 };