refactor button, alert and icons (#386)

package.json

@@ -6,9 +6,9 @@
     "scripts": {
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
-        "test": "bun run --cwd packages/shared test && bun run --cwd packages/client test && bun run --cwd packages/server test",
+        "test": "bun run --cwd packages/client test && bun run --cwd packages/server test",
         "dev": "concurrently \"bun run --cwd packages/client dev\" \"bun run --cwd packages/server dev\"",
-        "build": "bun run --cwd packages/client build && bun run --cwd packages/server build && bun run copy-assets",
+        "build": "bun run --cwd packages/icons build && bun run --cwd packages/client build && bun run --cwd packages/server build && bun run copy-assets",
         "copy-assets": "mkdir -p packages/server/public && copyfiles -u 3 packages/client/dist/assets/**/* packages/server/public/",
         "prepare": "husky",
         "benchmarking": "./benchmarking/run",

packages/client/package.json

@@ -15,6 +15,7 @@
         "@navikt/ds-tokens": "6.11.0",
         "@navikt/ds-css": "6.11.0",
         "amplitude-js": "8.21.9",
+        "decorator-icons": "workspace:*",
         "decorator-shared": "workspace:*",
         "lodash.debounce": "4.0.8",
         "js-cookie": "3.0.5",

packages/client/src/styles/arbeidsgiver-user-menu.module.css

@@ -63,6 +63,5 @@
 }
 
 .menuItemIcon {
-    color: var(--a-icon-subtle);
     font-size: 1.5rem;
 }

packages/client/src/styles/burger.module.css

@@ -6,9 +6,6 @@
     }
 }
 
-.menuBurger {
-}
-
 :where(.menuBurger) * {
     transform-origin: center;
 }

packages/client/src/styles/search-form.module.css

@@ -3,6 +3,10 @@
     gap: var(--a-spacing-2);
 }
 
+.searchIcon {
+    font-size: 1.5rem;
+}
+
 .label {
     justify-self: start;
     font-size: var(--a-font-size-large);

packages/client/src/styles/user-menu.module.css

@@ -64,7 +64,6 @@
 }
 
 .menuItemIcon {
-    color: var(--a-icon-subtle);
     font-size: 1.5rem;
 }
 

packages/client/src/views/chatbot.ts

@@ -1,5 +1,5 @@
 import { Context, Language, Params } from "decorator-shared/params";
-import { FridaIcon } from "decorator-shared/views/icons/frida-icon";
+import { FridaIcon } from "decorator-icons";
 import Cookies from "js-cookie";
 import { env, param } from "../params";
 import { loadExternalScript } from "../utils";

packages/client/src/views/dropdown-menu.ts

@@ -3,40 +3,39 @@ import { createEvent } from "../events";
 import { defineCustomElement } from "../custom-elements";
 
 class DropdownMenu extends HTMLElement {
-    button: HTMLElement | null = null;
-    #open: boolean = false;
+    private button!: HTMLElement;
+    private isOpen: boolean = false;
 
-    handleWindowClick = (e: MouseEvent) => {
+    private handleWindowClick = (e: MouseEvent) => {
         if (!this.contains(e.target as Node)) {
-            this.open = false;
+            this.close();
         }
     };
 
-    set open(open: boolean) {
-        if (open === this.#open) {
-            return;
+    private close = () => this.toggle(false);
+
+    private toggle = (force?: boolean) => {
+        if (force === undefined) {
+            this.toggle(!this.isOpen);
+        } else {
+            if (force === this.isOpen) {
+                return;
+            }
+
+            this.classList.toggle(cls.dropdownMenuOpen, force);
+            this.button.setAttribute("aria-expanded", force.toString());
+            this.dispatchEvent(
+                createEvent(force ? "menuopened" : "menuclosed", {
+                    bubbles: true,
+                }),
+            );
+            this.isOpen = force;
         }
-
-        this.classList.toggle(cls.dropdownMenuOpen, open);
-        this.button?.setAttribute("aria-expanded", JSON.stringify(open));
-        this.#open = open;
-        this.dispatchEvent(
-            createEvent(open ? "menuopened" : "menuclosed", { bubbles: true }),
-        );
-    }
-
-    close = () => {
-        this.open = false;
     };
 
     connectedCallback() {
-        this.button = this.querySelector(":scope > button");
-        if (this.button) {
-            this.button.addEventListener("click", () => {
-                this.open = !this.#open;
-            });
-            this.button.setAttribute("aria-expanded", "false");
-        }
+        this.button = this.querySelector(":scope > button")!;
+        this.button.addEventListener("click", () => this.toggle());
 
         window.addEventListener("click", this.handleWindowClick);
         window.addEventListener("closemenus", this.close);

packages/client/src/views/ops-messages.ts

@@ -2,7 +2,10 @@ import cls from "decorator-client/src/styles/ops-messages.module.css";
 import utilsCls from "decorator-client/src/styles/utilities.module.css";
 import html from "decorator-shared/html";
 import { OpsMessage } from "decorator-shared/types";
-import { InfoIcon, WarningIcon } from "decorator-shared/views/icons";
+import {
+    InformationSquareIcon,
+    ExclamationmarkTriangleIcon,
+} from "decorator-icons";
 import { env } from "../params";
 import { defineCustomElement } from "../custom-elements";
 
@@ -23,7 +26,9 @@ export const OpsMessagesTemplate = ({
                     href="${url}"
                     class="${cls.opsMessage}"
                 >
-                    ${type === "prodstatus" ? WarningIcon() : InfoIcon()}
+                    ${type === "prodstatus"
+                        ? ExclamationmarkTriangleIcon()
+                        : InformationSquareIcon()}
                     <span>${heading}</span>
                 </lenke-med-sporing>`,
         )}

packages/client/tsconfig.json

@@ -10,14 +10,11 @@
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "module": "ESNext",
-        "moduleResolution": "Node",
+        "moduleResolution": "Bundler",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "types": ["vite/client", "vitest/globals"],
-        "paths": {
-            "decorator-shared/*": ["../shared/*"]
-        },
         "plugins": [
             {
                 "name": "typescript-plugin-css-modules",

packages/icons/build-icons.ts

@@ -0,0 +1,41 @@
+import * as prettier from "prettier";
+import metadata from "@navikt/aksel-icons/metadata";
+
+const jsString =
+    'focusable="false" role="img" ${htmlAttributes({ ariaHidden: ariaLabel ? "false" : "true", ...props, })} ${ariaLabel && html`aria-label="${ariaLabel}"`}';
+
+const fileTemplate = ({ svg, name }: { svg: string; name: string }) => `
+import html, { htmlAttributes } from "decorator-shared/html";
+import type { IconProps } from "./types";
+
+export const ${name}Icon = ({ ariaLabel, ...props }: IconProps = {}) => html\`
+${svg}
+\`;
+`;
+
+Object.keys(metadata).forEach(async (name) => {
+    const iconPath = (await import(`@navikt/aksel-icons/svg/${name}.svg`))
+        .default;
+    const icon = await Bun.file(iconPath).text();
+
+    Bun.write(
+        `./dist/${name}.ts`,
+        await prettier.format(
+            fileTemplate({
+                svg: icon.replace("<svg", `<svg ${jsString}`),
+                name,
+            }),
+            { filepath: `${name}.ts` },
+        ),
+    );
+});
+
+Bun.write(
+    "./dist/index.ts",
+    `
+export * from '../src';
+${Object.keys(metadata)
+    .map((name) => `export * from "./${name}";`)
+    .join("\n")}
+`,
+);

packages/icons/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "decorator-icons",
+    "version": "0.0.1",
+    "type": "module",
+    "exports": {
+        ".": "./dist/index.ts"
+    },
+    "scripts": {
+        "build": "bun run build-icons.ts"
+    },
+    "dependencies": {
+        "decorator-shared": "workspace:*"
+    },
+    "devDependencies": {
+        "@navikt/aksel-icons": "6.13.0"
+    }
+}

packages/shared/views/icons/burger.ts → packages/icons/src/burger.ts

@@ -1,8 +1,8 @@
 import html from "decorator-shared/html";
 import cls from "decorator-client/src/styles/burger.module.css";
 
-export const BurgerIcon = () =>
-    html`<svg
+export const BurgerIcon = () => html`
+    <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
@@ -18,4 +18,5 @@ export const BurgerIcon = () =>
         <path class="${cls.menuBurger__line_1}" d="M2 4h20"></path>
         <path class="${cls.menuBurger__line_2}" d="M2 12h20"></path>
         <path class="${cls.menuBurger__line_3}" d="M2 20h20"></path>
-    </svg>`;
+    </svg>
+`;

packages/shared/views/icons/frida-icon.ts → packages/icons/src/frida.ts

@@ -1,9 +1,11 @@
-import html from "../../html";
+import html, { htmlAttributes } from "decorator-shared/html";
 
-export const FridaIcon = ({ className }: { className?: string } = {}) =>
-    html`<svg
-        class="${className}"
+export const FridaIcon = (props: { className?: string } = {}) => html`
+    <svg
+        ${htmlAttributes(props)}
         focusable="false"
+        aria-hidden="true"
+        role="img"
         fill="none"
         height="50"
         viewBox="0 0 50 50"
@@ -41,4 +43,5 @@ export const FridaIcon = ({ className }: { className?: string } = {}) =>
             d="m19.313 37.6253c-1.6411.591-4.7803 1.5439-6.8631 3.5059-6.08822-1.344-8.62715-4.4767-8.62715-4.4767s5.6092-5.4275 5.61258-14.9202v-.0101c0-11.1153 6.04927-18.78408 16.01557-18.78408 9.9676 0 16.0169 7.66878 16.0169 18.78408h.0358c0 9.4995 5.6133 14.9303 5.6133 14.9303s-2.2904 3.105-8.3786 4.4471l-.1328.039c-2.0117-1.8154-5.0728-3.158-6.6602-3.75l-.1485-.044-.0612-.6665.0341-.0583c2.9951-1.9005 5.3191-5.1022 6.4395-8.971.1372.0757.2921.1183.456.1183.561 0 1.0149-.4967 1.0149-1.1118v-4.4863c0-.5264-.3323-.9664-.7796-1.0825-.0004-.0061-.0009-.0121-.0013-.0182-14.1607 1.5675-19.2617-8.0638-19.6804-8.0644 0 0-4.7027 3.3553-6.9504 7.3445 0 0-.3425.753-.3442.7784-.3848.1578-.6592.5644-.6592 1.0422v4.4863c0 .6151.455 1.1118 1.0148 1.1118.124 0 .2429-.0243.3527-.0688 1.1328 3.8706 3.3974 7.0328 6.4066 8.9208l.0852.059.1887.1207z"
             fill="#d2654c"
         />
-    </svg>`;
+    </svg>
+`;

packages/shared/views/icons/icons.stories.ts → packages/icons/src/icons.stories.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/html";
-import { BurgerIcon, SearchIcon } from ".";
+import * as icons from ".";
 
 const meta: Meta = {
     title: "icons",
-    tags: ["autodocs"],
-    render: ({ icon }) => {
+    render: (_, context) => {
         const div = document.createElement("div");
-        div.innerHTML = icon;
+        div.style.display = "flex";
+        div.style.gap = "1rem";
 
         setInterval(() => {
             div.setAttribute(
@@ -15,21 +15,19 @@ const meta: Meta = {
             );
         }, 1000);
 
+        div.innerHTML = Object.values(icons)
+            .map((icon) =>
+                icon().render({
+                    language: context.globals.locale,
+                }),
+            )
+            .join("");
+
         return div;
     },
 };
 
 export default meta;
 type Story = StoryObj;
 
-export const Burger: Story = {
-    args: {
-        icon: BurgerIcon().render({ language: "nb" }),
-    },
-};
-
-export const Search: Story = {
-    args: {
-        icon: SearchIcon({ menuSearch: true }).render({ language: "nb" }),
-    },
-};
+export const Default: Story = {};

packages/icons/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./burger";
+export * from "./frida";
+export * from "./message";
+export * from "./person-circle-notification";
+export * from "./search";
+export * from "./task";

packages/icons/src/message.ts

@@ -0,0 +1,22 @@
+import html from "decorator-shared/html";
+
+export const MessageIcon = () => html`
+    <svg
+        width="24px"
+        height="24px"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        role="img"
+    >
+        <rect width="24" height="24" fill="#3380A5" rx="4" />
+        <path
+            fill="#fff"
+            fill-rule="evenodd"
+            d="M5.438 7.5c0-1.14.923-2.063 2.062-2.063h9c1.14 0 2.063.923 2.063 2.063v6.75c0 1.139-.924 2.062-2.063 2.062H9.906l-3.617 2.17A.563.563 0 0 1 5.438 18V7.5Z"
+            clip-rule="evenodd"
+        />
+    </svg>
+`;

packages/shared/views/icons/person-circle-notification.ts → packages/icons/src/person-circle-notification.ts

@@ -1,11 +1,10 @@
-import html from "../../html";
+import html, { htmlAttributes } from "decorator-shared/html";
 
-export const PersonCircleNotificationIcon = ({
-    className,
-}: {
-    className?: string;
-}) =>
+export const PersonCircleNotificationIcon = (
+    props: { className?: string } = {},
+) =>
     html`<svg
+        ${htmlAttributes(props)}
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
@@ -14,7 +13,6 @@ export const PersonCircleNotificationIcon = ({
         focusable="false"
         aria-hidden="true"
         role="img"
-        ${className && html`class="${className}"`}
     >
         <path
             fill-rule="evenodd"