Version Packages (#2446)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 5.9.1
+
 ## 5.9.0
 
 ## 5.8.0

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 5.9.1
+
 ## 5.9.0
 
 ## 5.8.0

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`925450cb7`](https://github.com/navikt/aksel/commit/925450cb73cd792cd3b6ad3ebf9f38ba022ee4df)]:
+  - @navikt/ds-css@5.9.1
+
 ## 5.9.0
 
 ### Patch Changes

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 5.9.1
+
+### Patch Changes
+
+- :lipstick: Modal: Bedre håndtering av mobiler i landskapsmodus ([#2444](https://github.com/navikt/aksel/pull/2444))
+
 ## 5.9.0
 
 ### Minor Changes

@navikt/core/css/modal.css

@@ -59,12 +59,17 @@
 
 @media (min-width: 480px) {
   .navds-modal {
-    max-width: calc((100% - 6px) - 2em);
-    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
   }
 
   .navds-modal--autowidth {
-    max-width: min(700px, calc((100% - 6px) - 2em));
+    max-width: min(700px, calc(100% - 6px - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 6px - 2em);
   }
 }
 

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react
 
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.1
+  - @navikt/aksel-icons@5.9.1
+
 ## 5.9.0
 
 ### Minor Changes

@navikt/core/react/package.json

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

@navikt/core/react/src/modal/modal.stories.tsx

@@ -1,17 +1,19 @@
 import { FileIcon } from "@navikt/aksel-icons";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";
 
-export default {
+const meta: Meta<typeof Modal> = {
   title: "ds-react/Modal",
   component: Modal,
   parameters: {
     chromatic: { pauseAnimationAtEnd: true },
   },
 };
+export default meta;
 
-export const WithUseRef = () => {
+export const WithUseRef: StoryFn = () => {
   const ref = useRef<HTMLDialogElement>(null);
   const ref2 = useRef<HTMLDialogElement>(null);
 
@@ -87,7 +89,7 @@ export const WithUseRef = () => {
 };
 WithUseRef.storyName = "With useRef";
 
-export const WithUseState = () => {
+export const WithUseState: StoryFn = () => {
   const [open, setOpen] = useState(true);
   const [open2, setOpen2] = useState(false);
 
@@ -140,36 +142,43 @@ export const WithUseState = () => {
 };
 WithUseState.storyName = "With useState";
 
-export const EmptyHeader = () => (
-  <div style={{ minWidth: "800px", minHeight: "600px" } /* For Chromatic */}>
-    <Modal open>
-      <Modal.Header />
-      <Modal.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </Modal.Body>
-    </Modal>
-  </div>
+export const EmptyHeader: StoryFn = () => (
+  <Modal open>
+    <Modal.Header />
+    <Modal.Body>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Modal.Body>
+  </Modal>
 );
 
-export const Small = () => (
+export const Small: StoryFn = () => (
   <Modal open width="small" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+Small.storyName = "Size = Small";
 
-export const MediumWithPortal = () => (
+export const MediumWithPortal: StoryFn = () => (
   <Modal open portal width="medium" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+MediumWithPortal.storyName = "Size = Medium (with portal)";
 
-export const WithTooltip = () => {
+export const Large800: StoryFn = () => (
+  <Modal open width={800} header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);
+Large800.storyName = "Size = 800px";
+
+export const WithTooltip: StoryFn = () => {
   const ref = useRef<HTMLDialogElement>(null);
 
   return (
@@ -193,3 +202,66 @@ export const WithTooltip = () => {
     </div>
   );
 };
+
+export const ChromaticViewportTesting: StoryFn = () => (
+  <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
+    <style>{`#storybook-root { padding: 0 !important }`}</style>
+    <Modal
+      open
+      header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
+    >
+      <Modal.Body>
+        <BodyLong spacing>
+          This story is tailored for testing the breakpoints with Chromatic.
+        </BodyLong>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </BodyLong>
+        <BodyLong spacing>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyLong>
+        <BodyLong>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </Modal.Footer>
+    </Modal>
+  </div>
+);
+ChromaticViewportTesting.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      mobile_landscape: {
+        viewport: {
+          width: 850,
+          height: 400,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 5.9.1
+
 ## 5.9.0
 
 ## 5.8.0

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 5.9.1
+
 ## 5.9.0
 
 ## 5.8.0

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.9.1
+
+### @navikt/ds-css
+
+- :lipstick: Modal: Bedre håndtering av mobiler i landskapsmodus ([#2444](https://github.com/navikt/aksel/pull/2444))
+
 ## 5.9.0
 
 ### @navikt/ds-css

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.9.0",
-    "@navikt/ds-css": "^5.9.0",
-    "@navikt/ds-react": "^5.9.0",
-    "@navikt/ds-tailwind": "^5.9.0",
-    "@navikt/ds-tokens": "^5.9.0"
+    "@navikt/aksel-icons": "^5.9.1",
+    "@navikt/ds-css": "^5.9.1",
+    "@navikt/ds-react": "^5.9.1",
+    "@navikt/ds-tailwind": "^5.9.1",
+    "@navikt/ds-tokens": "^5.9.1"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"