Version Packages (#2590)

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

.github/workflows/aksel-prod.yml

@@ -99,14 +99,6 @@ jobs:
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
 
-      - name: Wait for e2e-tests to succeed
-        uses: lewagon/wait-on-check-action@v1.2.0
-        with:
-          ref: ${{ github.ref }}
-          check-name: "Smoketest Aksel"
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          wait-interval: 10
-
       - name: Deploy to prod-gcp
         uses: nais/deploy/actions/deploy@master
         env:

.github/workflows/smoketest.yml

@@ -1,48 +0,0 @@
-name: Smoketest aksel.nav.no
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - "aksel.nav.no/**"
-
-env:
-  IMAGE: ghcr.io/navikt/aksel
-
-jobs:
-  smoketest:
-    name: Smoketest Aksel
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-      - uses: actions/checkout@v3
-      - name: add tokens to .env
-        run: |
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
-
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-prod-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-prod-
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: build packages
-        run: |
-          yarn boot
-
-      - name: Build application
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: E2E smoketest
-        run: yarn workspace website e2e:ci

@navikt/aksel-icons/CHANGELOG.md

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

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

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

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.12.1",
+  "version": "5.12.3",
   "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.1",
-    "@navikt/ds-tokens": "^5.12.1",
+    "@navikt/ds-css": "^5.12.3",
+    "@navikt/ds-tokens": "^5.12.3",
     "@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.3
+
+### Patch Changes
+
+- Updated dependencies [[`1b71fe01c`](https://github.com/navikt/aksel/commit/1b71fe01cb152e3327972e96018e94a44d4128d6)]:
+  - @navikt/ds-css@5.12.3
+
+## 5.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.2
+
 ## 5.12.1
 
 ### Patch Changes

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 5.12.3
+
+### Patch Changes
+
+- ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
+
+## 5.12.2
+
 ## 5.12.1
 
 ## 5.12.0

@navikt/core/css/expansioncard.css

@@ -2,6 +2,8 @@
   --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
   --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
   --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
 
   border-radius: var(--__ac-expansioncard-border-radius);
   background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
@@ -30,7 +32,7 @@
   width: 100%;
   display: flex;
   gap: var(--a-spacing-4);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
   border-radius: var(--__ac-expansioncard-border-radius);
   background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
   position: relative;
@@ -38,8 +40,9 @@
   justify-content: space-between;
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) {
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
 }
 
 .navds-expansioncard__header:hover {
@@ -61,6 +64,22 @@
     0 -1px 0 0 var(--__ac-expansioncard-border-color);
 }
 
+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
 /*************************
  * Header/Typography *
  *************************/
@@ -156,17 +175,16 @@
  * Content *
  *************************/
 .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+
   border-end-end-radius: var(--__ac-expansioncard-border-radius);
   border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
   border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
   border-top: none;
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__content) {
-  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
-}
-
 .navds-expansioncard__content--closed {
   display: none;
 }

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-react
 
+## 5.12.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.3
+  - @navikt/aksel-icons@5.12.3
+
+## 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

@navikt/core/react/package.json

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

@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.3
+
+## 5.12.2
+
 ## 5.12.1
 
 ## 5.12.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.12.1",
+  "version": "5.12.3",
   "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.1",
+    "@navikt/ds-tokens": "^5.12.3",
     "@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.3
+
+## 5.12.2
+
 ## 5.12.1
 
 ## 5.12.0

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -8,9 +8,15 @@
 
 ### @navikt/ds-react
 
-- Checkbox: Checkmark tilpasses bedre fontsize ([#2563](https://github.com/navikt/aksel/pull/2563))
+- :memo: Modal: Oppdatert JSDoc ([#2567](https://github.com/navikt/aksel/pull/2567))
 
-- Datepicker: Lukk-knapp i modal har nå type button for å unngå form-submition ([#2568](https://github.com/navikt/aksel/pull/2568))
+* 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))
+
+### @navikt/ds-css
+
+- ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
 
 ## 5.11
 

aksel.nav.no/package.json

@@ -16,11 +16,11 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.12.1",
-    "@navikt/ds-css": "^5.12.1",
-    "@navikt/ds-react": "^5.12.1",
-    "@navikt/ds-tailwind": "^5.12.1",
-    "@navikt/ds-tokens": "^5.12.1"
+    "@navikt/aksel-icons": "^5.12.3",
+    "@navikt/ds-css": "^5.12.3",
+    "@navikt/ds-react": "^5.12.3",
+    "@navikt/ds-tailwind": "^5.12.3",
+    "@navikt/ds-tokens": "^5.12.3"
   },
   "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/components/styles/animations.css

@@ -1,35 +1,43 @@
 .header-animated-bg {
-  animation: animated-bg 60s ease infinite;
   z-index: 0;
+  animation: animated-bg 60s ease infinite;
+
+  --bg-animated-1: #dccaf3;
+  --bg-animated-2: #b2f0e4;
+}
+
+/* Allows dark-reader to show frontpage: https://nav-it.slack.com/archives/C7NE7A8UF/p1704272426011129 */
+[data-darkreader-scheme] .header-animated-bg {
+  animation: none;
 }
 
 @keyframes animated-bg {
   0% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
   }
 
   10% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
   }
 
   33% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
   }
 
   45% {
-    background-color: #b2f0e4;
+    background-color: var(--bg-animated-2);
   }
 
   60% {
-    background-color: #b2f0e4;
+    background-color: var(--bg-animated-2);
   }
 
   90% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
   }
 
   100% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
   }
 }
 

aksel.nav.no/website/package.json

@@ -16,7 +16,6 @@
     "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
     "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
     "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci": " yarn start-server-and-test start http://localhost:3000 playwright",
     "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
     "update:rss": "ts-node --project tsconfig.tsnode.json ./scripts/generate-rss-feed",
     "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",

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.",
 };