refactor alert (#361)

package.json

@@ -28,7 +28,6 @@
         "clsx": "2.1.1",
         "esbuild-minify-templates": "0.11.0",
         "js-cookie": "3.0.5",
-        "postcss-modules": "6.0.0",
         "prettier": "3.2.5",
         "ts-pattern": "5.1.1",
         "xlsx": "0.18.5",
@@ -51,7 +50,8 @@
         "lint-staged": "15.2.2",
         "storybook": "8.1.11",
         "typescript-plugin-css-modules": "5.1.0",
-        "vite": "5.1.4"
+        "vite": "5.1.4",
+        "postcss-import-sync2": "1.2.0"
     },
     "lint-staged": {
         "*.{ts,tsx,js}": [

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

@@ -1,38 +1,5 @@
-.alert {
-    border: 1px solid;
-    border-radius: var(--a-border-radius-medium);
-    padding: var(--a-spacing-4);
-    display: flex;
-    gap: var(--a-spacing-3);
-}
-
-.alert svg {
-    height: var(--a-font-line-height-xlarge);
-    font-size: 1.5rem;
-    flex-shrink: 0;
-}
-
-.alert.warning {
-}
-.alert.success {
-}
-.alert.info {
-    background-color: var(--a-surface-info-subtle);
-    border-color: var(--a-border-info);
-}
-.alert.error {
-    background-color: var(--a-surface-danger-subtle);
-    border-color: var(--a-border-danger);
-}
-.alert.error svg {
-    color: var(--a-icon-danger);
-}
-
-.alert.info svg {
-    color: var(--a-icon-info);
-}
+@import "@navikt/ds-css/dist/component/alert.css";
 
-/* Consolidate text */
 .text {
     font-size: var(--a-font-size-large);
     font-weight: var(--a-font-weight-regular);

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

@@ -25,6 +25,8 @@
 
 .menuHeader {
     padding-bottom: var(--a-spacing-4);
+    display: grid;
+    gap: var(--a-spacing-4);
 }
 
 .loggedIn {
@@ -79,10 +81,6 @@
     bottom: 0;
 }
 
-.alert {
-    margin-top: var(--a-spacing-4);
-}
-
 .loader {
     color: var(--a-text-action);
     visibility: hidden;

packages/client/tsconfig.json

@@ -20,7 +20,12 @@
         },
         "plugins": [
             {
-                "name": "typescript-plugin-css-modules"
+                "name": "typescript-plugin-css-modules",
+                "options": {
+                    "postcssOptions": {
+                        "useConfig": true
+                    }
+                }
             }
         ]
     },

packages/server/build.ts

@@ -23,7 +23,7 @@ const result = await Bun.build({
 });
 
 const [output] = result.outputs;
-console.log(`Build output: ${output}`);
+console.log(`Build output: ${JSON.stringify(output)}`);
 
 if (output) {
     const text = await output.text();

packages/server/src/texts.ts

@@ -55,7 +55,8 @@ const nb = {
     meny_bunnlenke_samarbeidspartner_stikkord:
         "Helsepersonell, tiltaksarrangører, fylker og kommuner",
     loading_notifications: "Laster varslinger",
-    notifications_error: "Feil ved lasting av varsler",
+    notifications_error: "Feil ved lasting av varsler.",
+    search_error: "Feil ved lasting av søkeresultater.",
     how_can_we_help: "Hva kan vi hjelpe deg med?",
     showing: "Viser",
     of: "av",
@@ -150,7 +151,8 @@ const en = {
     meny_bunnlenke_samarbeidspartner_stikkord:
         "Health personnel, intervention organizers, counties and municipalities",
     loading_notifications: "Loading notifications",
-    notifications_error: "Error loading notifications",
+    notifications_error: "Error loading notifications.",
+    search_error: "Error loading search results.",
     how_can_we_help: "How can we help you?",
     showing: "Showing",
     of: "of",

packages/server/src/views/alert.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import { Alert, type AlertProps } from "./alert";
+import i18n from "../i18n";
+
+const meta: Meta<AlertProps> = {
+    title: "alert",
+    tags: ["autodocs"],
+    render: Alert,
+};
+
+export default meta;
+type Story = StoryObj<AlertProps>;
+
+export const Info: Story = {
+    args: {
+        variant: "info",
+        content: i18n("security_level_info"),
+    },
+};
+
+export const Danger: Story = {
+    args: {
+        variant: "error",
+        content: i18n("notifications_error"),
+    },
+};

packages/shared/views/icons/alert.ts → packages/server/src/views/alert.ts

@@ -1,8 +1,22 @@
-import html, { Template } from "../../html";
-import { AlertVariant } from "../alert";
+import clsx from "clsx";
+import cls from "decorator-client/src/styles/alert.module.css";
+import html, { Template } from "../../../shared/html";
 
-export const alertIcons: Record<Partial<AlertVariant>, Template> = {
+export type AlertProps = {
+    variant: "error" | "info";
+    content: Template;
+};
+
+export const Alert = ({ variant, content }: AlertProps) => html`
+    <div class="${clsx(cls["navds-alert"], cls[`navds-alert--${variant}`])}">
+        ${icons[variant]}
+        <span class="${cls.text}">${content}</span>
+    </div>
+`;
+
+const icons = {
     info: html`<svg
+        class="${cls["navds-alert__icon"]}"
         width="1em"
         height="1em"
         viewBox="0 0 24 24"
@@ -21,37 +35,10 @@ export const alertIcons: Record<Partial<AlertVariant>, Template> = {
             fill="currentColor"
         ></path>
     </svg>`,
-    success: html`
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 21.75c5.385 0 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25 2.25 6.615 2.25 12s4.365 9.75 9.75 9.75Zm4.954-12.475a.813.813 0 0 0-1.24-1.05l-5.389 6.368L7.7 11.967a.812.812 0 0 0-1.15 1.15l3.25 3.25a.812.812 0 0 0 1.195-.05l5.959-7.042Z"
-            fill="currentColor"
-        ></path>
-    `,
-    warning: html`
-        <svg
-            width="1em"
-            height="1em"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            focusable="false"
-            role="img"
-            aria-labelledby="title-R2d6"
-            class="navds-alert__icon"
-        >
-            <title id="title-R2d6">Informasjon</title>
-            <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75V4ZM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75Z"
-                fill="currentColor"
-            ></path>
-        </svg>
-    `,
+
     error: html`
         <svg
+            class="${cls["navds-alert__icon"]}"
             width="1em"
             height="1em"
             viewBox="0 0 24 24"

packages/server/src/views/errors/notifications-error.ts

@@ -1,10 +1,8 @@
-import html from "decorator-shared/html";
-import { Alert } from "decorator-shared/views/alert";
+import i18n from "../../i18n";
+import { Alert } from "../alert";
 
-// TODO: add texts/translations
-export const NotificationsErrorView = () => {
-    return html`${Alert({
+export const NotificationsErrorView = () =>
+    Alert({
         variant: "error",
-        content: html` <div>Åh nei, kunne ikke laste varsler!</div>`,
-    })}`;
-};
+        content: i18n("notifications_error"),
+    });

packages/server/src/views/errors/search-error.ts

@@ -1,10 +1,8 @@
-import html from "decorator-shared/html";
-import { Alert } from "decorator-shared/views/alert";
+import i18n from "../../i18n";
+import { Alert } from "../alert";
 
-// TODO: add texts/translations
-export const SearchErrorView = () => {
-    return html`${Alert({
+export const SearchErrorView = () =>
+    Alert({
         variant: "error",
-        content: html` <div>Åh nei, søket feilet!</div>`,
-    })}`;
-};
+        content: i18n("search_error"),
+    });

packages/server/src/views/header/user-menu.ts

@@ -2,7 +2,6 @@ import globalCls from "decorator-client/src/styles/global.module.css";
 import cls from "decorator-client/src/styles/user-menu.module.css";
 import html from "decorator-shared/html";
 import { LoginLevel } from "decorator-shared/params";
-import { Alert } from "decorator-shared/views/alert";
 import {
     BadgeIcon,
     PadlockIcon,
@@ -11,6 +10,7 @@ import {
 import { LogoutIcon } from "decorator-shared/views/icons/logout";
 import i18n from "../../i18n";
 import { Notification } from "../../notifications";
+import { Alert } from "../alert";
 import { Notifications } from "../notifications/notifications";
 
 export type UserMenuProps = {
@@ -35,23 +35,23 @@ export const UserMenu = ({
     <div class="${cls.userMenu}">
         <div class="${cls.menuItems}">
             <div class="${cls.menuHeader}">
-                <div class="${cls.loggedIn}">${i18n("logged_in")}</div>
-                <div class="${cls.name}">${name}</div>
+                <div>
+                    <div class="${cls.loggedIn}">${i18n("logged_in")}</div>
+                    <div class="${cls.name}">${name}</div>
+                </div>
                 ${level !== "Level4" &&
                 Alert({
-                    className: cls.alert,
                     variant: "info",
                     content: html`
-                        <div>
-                            ${i18n("security_level_info")}
-                            <a
-                                class="${globalCls["navds-link"]} ${globalCls[
-                                    "navds-link--neutral"
-                                ]}"
-                                href="${loginUrl}"
-                                >${i18n("security_level_link")}</a
-                            >
-                        </div>
+                        <div>${i18n("security_level_info")}</div>
+                        <a
+                            class="${globalCls["navds-link"]} ${globalCls[
+                                "navds-link--neutral"
+                            ]}"
+                            href="${loginUrl}"
+                        >
+                            ${i18n("security_level_link")}
+                        </a>
                     `,
                 })}
             </div>

packages/server/src/views/screensharing-modal.ts

@@ -1,11 +1,10 @@
 import html, { Template } from "../../../shared/html";
-
 import clsInputs from "decorator-client/src/styles/inputs.module.css";
 import clsModal from "decorator-client/src/styles/modal.module.css";
 import cls from "decorator-client/src/styles/screensharing-modal.module.css";
 import { VeilederIllustration } from "decorator-shared/views/illustrations";
 import { match } from "ts-pattern";
-import { Alert } from "../../../shared/views/alert";
+import { Alert } from "./alert";
 import { Button } from "../../../shared/views/components/button";
 import i18n from "../i18n";
 import { ReadMore } from "./read-more";

packages/server/tsconfig.json

@@ -16,7 +16,12 @@
         "typeRoots": ["bun-types"],
         "plugins": [
             {
-                "name": "typescript-plugin-css-modules"
+                "name": "typescript-plugin-css-modules",
+                "options": {
+                    "postcssOptions": {
+                        "useConfig": true
+                    }
+                }
             }
         ]
     },

packages/shared/tsconfig.json

@@ -10,7 +10,12 @@
         "types": ["vite/client"],
         "plugins": [
             {
-                "name": "typescript-plugin-css-modules"
+                "name": "typescript-plugin-css-modules",
+                "options": {
+                    "postcssOptions": {
+                        "useConfig": true
+                    }
+                }
             }
         ]
     }

packages/shared/types.ts

@@ -72,6 +72,7 @@ export type Texts = ClientTexts & {
     meny_bunnlenke_samarbeidspartner_stikkord: string;
     loading_notifications: string;
     notifications_error: string;
+    search_error: string;
     how_can_we_help: string;
     showing: string;
     of: string;

postcss.config.js

@@ -0,0 +1,5 @@
+/**
+ * Config for typescript-plugin-css-modules.
+ * It doesn't support async, so we need to use postcss-import-sync2.
+ */
+module.exports = { plugins: { "postcss-import-sync2": {} } };