Version Packages (#2084)

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
 
+## 4.5.0
+
 ## 4.4.2
 
 ## 4.4.1

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 4.5.0
+
 ## 4.4.2
 
 ## 4.4.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^4.4.2",
-    "@navikt/ds-tokens": "^4.4.2",
+    "@navikt/ds-css": "^4.5.0",
+    "@navikt/ds-tokens": "^4.5.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 4.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5), [`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5)]:
+  - @navikt/ds-css@4.5.0
+
 ## 4.4.2
 
 ### Patch Changes

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 4.5.0
+
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ## 4.4.2
 
 ## 4.4.1

@navikt/core/css/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  margin: var(--a-spacing-1);
   background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
@@ -73,3 +74,11 @@
   border: none;
   padding: 0;
 }
+
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}

@navikt/core/css/button.css

@@ -294,7 +294,6 @@
 .navds-button--tertiary:active {
   color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }
 
 .navds-button--tertiary:active:hover {
@@ -346,7 +345,6 @@
 .navds-button--tertiary-neutral:active {
   color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }
 
 .navds-button--tertiary-neutral:active:hover {

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @navikt/ds-react
 
+## 4.5.0
+
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.5.0
+
 ## 4.4.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.4.2",
+    "@navikt/aksel-icons": "^4.5.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/alert/Alert.tsx

@@ -3,10 +3,12 @@ import {
   CheckmarkCircleFillIcon,
   ExclamationmarkTriangleFillIcon,
   XMarkOctagonFillIcon,
+  XMarkIcon,
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
+import { Button } from "../button";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -32,6 +34,17 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   inline?: boolean;
+  /**
+   * Removes close-button(X) when false
+   * Requires onClose to be set
+   * @default true
+   */
+  closeButton?: boolean;
+  /**
+   * Callback for alert wanting to close
+   * requires closeButton to be true
+   */
+  onClose?: () => void;
 }
 
 const Icon = ({ variant, ...props }) => {
@@ -71,27 +84,45 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       size = "medium",
       fullWidth = false,
       inline = false,
+      closeButton = false,
+      onClose,
       ...rest
     },
     ref
-  ) => (
-    <div
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-alert",
-        `navds-alert--${variant}`,
-        `navds-alert--${size}`,
-        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
-      )}
-    >
-      <Icon variant={variant} className="navds-alert__icon" />
-      <BodyLong as="div" size={size} className="navds-alert__wrapper">
-        {children}
-      </BodyLong>
-    </div>
-  )
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl(
+          className,
+          "navds-alert",
+          `navds-alert--${variant}`,
+          `navds-alert--${size}`,
+          {
+            "navds-alert--full-width": fullWidth,
+            "navds-alert--inline": inline,
+          }
+        )}
+      >
+        <Icon variant={variant} className="navds-alert__icon" />
+        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+          {children}
+        </BodyLong>
+        {closeButton && !inline && (
+          <div className="navds-alert__button-wrapper">
+            <Button
+              className="navds-alert__button"
+              size="small"
+              variant="tertiary-neutral"
+              onClick={onClose}
+              icon={<XMarkIcon title="Lukk Alert" />}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
 );
 
 export default Alert;

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

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
+import { within, userEvent } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -20,22 +22,14 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
 ];
 
 export const Default: Story = {
-  render: (props) => (
-    <Alert
-      variant={props.variant}
-      size={props.size}
-      fullWidth={props.fullWidth}
-      inline={props.inline}
-    >
-      {props.children}
-    </Alert>
-  ),
+  render: (props) => <Alert {...props} />,
 
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
     variant: "info",
     size: "medium",
+    closeButton: false,
   },
   argTypes: {
     variant: {
@@ -50,21 +44,39 @@ export const Default: Story = {
       },
       options: ["medium", "small"],
     },
+    closeButton: {
+      type: "boolean",
+    },
   },
 };
 
-export const Small = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-          )}
-        </Alert>
-      ))}
-    </div>
-  );
+export const Small = {
+  render: (props) => {
+    return (
+      <div className="colgap">
+        {variants.map((variant, i) => (
+          <Alert
+            key={variant}
+            variant={variant}
+            size="small"
+            closeButton={props.closeButton}
+          >
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    closeButton: false,
+  },
+  argtypes: {
+    closeButton: {
+      type: "boolean",
+    },
+  },
 };
 
 export const FullWidth = () => {
@@ -147,3 +159,44 @@ export const Links = () => {
     </div>
   );
 };
+
+const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
+  let [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant="success" closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+export const WithCloseButton: Story = {
+  render: () => {
+    return (
+      <div className="colgap">
+        <AlertWithCloseButton />
+        <AlertWithCloseButton>
+          <BodyLong>
+            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+            sint commodo consequat eu aute.
+          </BodyLong>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </AlertWithCloseButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByTitle("Lukk Alert");
+
+    await step("click button", async () => {
+      await userEvent.click(buttons[0]);
+    });
+
+    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
+    expect(buttonsAfter.length).toBe(1);
+  },
+};

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 4.5.0
+
 ## 4.4.2
 
 ## 4.4.1

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "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": "^4.4.2",
+    "@navikt/ds-tokens": "^4.5.0",
     "@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
 
+## 4.5.0
+
 ## 4.4.2
 
 ## 4.4.1

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 4.5.0
+
+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### @navikt/ds-css
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+<!---->
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ## 4.4.2
 
 ### @navikt/ds-react

aksel.nav.no/package.json

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

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -28,13 +28,13 @@ const NavItem = ({
           );
         }}
         className={cl(
-          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium relative  flex overflow-hidden rounded-sm py-1 pl-4 pr-2 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none",
+          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium relative flex  overflow-hidden py-1 pl-4 pr-2 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none focus-visible:z-10 focus-visible:rounded-sm",
           {
             "before:border-l-border-action-selected before:absolute before:left-0 before:top-1/2 before:h-6 before:-translate-y-1/2 before:border-l-[4px]":
               isActive,
             "text-deepblue-800 font-semibold": isActive,
             "text-text-subtle": !isActive,
-            "before:absolute before:left-0 before:h-full before:border-l before:border-l-gray-200 hover:before:top-1/2  hover:before:h-6 hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
+            "before:absolute before:left-0 before:top-0 before:h-full before:border-l before:border-l-gray-200 hover:before:top-1/2  hover:before:h-6 hover:before:min-h-[70%] hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
               !isActive,
           }
         )}
@@ -87,7 +87,7 @@ const Dropdown = ({
       >
         <Detail
           as="span"
-          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold transition first:mt-0"
+          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold transition-colors first:mt-0"
         >
           {title}
           <span className="flex h-6 w-6  items-center justify-center rounded">

aksel.nav.no/website/pages/eksempler/alert/med-lukkeknapp.tsx

@@ -0,0 +1,53 @@
+import { Alert, AlertProps } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import React from "react";
+
+const AlertWithCloseButton = ({
+  children,
+  variant,
+}: {
+  children?: React.ReactNode;
+  variant: AlertProps["variant"];
+}) => {
+  const [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant={variant} closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+const Example = () => {
+  return (
+    <div className="grid gap-4">
+      <AlertWithCloseButton variant="info">
+        Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha hatt
+        en pensjonsgivende inntekt som tilsvarer x G, året før du fikk nedsatt
+        arbeidsevnen.
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="success">
+        Søknad er sendt inn!
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="warning">
+        Du må være registrert hos NAV for å bruke aktivitetsplanen.
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="error">
+        Noe gikk galt! Prøv igjen om noen minutter.
+      </AlertWithCloseButton>
+    </div>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "4.4.2",
-    "@navikt/ds-react": "4.4.2",
+    "@navikt/ds-css": "4.5.0",
+    "@navikt/ds-react": "4.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },