diff --git a/bun.lockb b/bun.lockb index 55684fcf..1ecd1023 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 35617683..8f5ac987 100644 --- a/package.json +++ b/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}": [ diff --git a/packages/client/src/styles/alert.module.css b/packages/client/src/styles/alert.module.css index f5e39dfe..a3149c64 100644 --- a/packages/client/src/styles/alert.module.css +++ b/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); diff --git a/packages/client/src/styles/user-menu.module.css b/packages/client/src/styles/user-menu.module.css index f98b6213..b3a0a7d8 100644 --- a/packages/client/src/styles/user-menu.module.css +++ b/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; diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 5d85ec0e..d64cb8f1 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -20,7 +20,12 @@ }, "plugins": [ { - "name": "typescript-plugin-css-modules" + "name": "typescript-plugin-css-modules", + "options": { + "postcssOptions": { + "useConfig": true + } + } } ] }, diff --git a/packages/server/build.ts b/packages/server/build.ts index 1c4ccbc6..2fea8fe5 100644 --- a/packages/server/build.ts +++ b/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(); diff --git a/packages/server/src/texts.ts b/packages/server/src/texts.ts index 434afe7f..3172e11c 100644 --- a/packages/server/src/texts.ts +++ b/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", diff --git a/packages/server/src/views/alert.stories.ts b/packages/server/src/views/alert.stories.ts new file mode 100644 index 00000000..e572175c --- /dev/null +++ b/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 = { + title: "alert", + tags: ["autodocs"], + render: Alert, +}; + +export default meta; +type Story = StoryObj; + +export const Info: Story = { + args: { + variant: "info", + content: i18n("security_level_info"), + }, +}; + +export const Danger: Story = { + args: { + variant: "error", + content: i18n("notifications_error"), + }, +}; diff --git a/packages/shared/views/icons/alert.ts b/packages/server/src/views/alert.ts similarity index 55% rename from packages/shared/views/icons/alert.ts rename to packages/server/src/views/alert.ts index 6cd35613..be3abd55 100644 --- a/packages/shared/views/icons/alert.ts +++ b/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, Template> = { +export type AlertProps = { + variant: "error" | "info"; + content: Template; +}; + +export const Alert = ({ variant, content }: AlertProps) => html` +
+ ${icons[variant]} + ${content} +
+`; + +const icons = { info: html`, Template> = { fill="currentColor" > `, - success: html` - - `, - warning: html` - - Informasjon - - - `, + error: html` { - return html`${Alert({ +export const NotificationsErrorView = () => + Alert({ variant: "error", - content: html`
Åh nei, kunne ikke laste varsler!
`, - })}`; -}; + content: i18n("notifications_error"), + }); diff --git a/packages/server/src/views/errors/search-error.ts b/packages/server/src/views/errors/search-error.ts index 72953662..40f5e83a 100644 --- a/packages/server/src/views/errors/search-error.ts +++ b/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`
Åh nei, søket feilet!
`, - })}`; -}; + content: i18n("search_error"), + }); diff --git a/packages/server/src/views/header/user-menu.ts b/packages/server/src/views/header/user-menu.ts index eabc1d9c..632105b8 100644 --- a/packages/server/src/views/header/user-menu.ts +++ b/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 = ({
-
${i18n("logged_in")}
-
${name}
+
+
${i18n("logged_in")}
+
${name}
+
${level !== "Level4" && Alert({ - className: cls.alert, variant: "info", content: html` -
- ${i18n("security_level_info")} - ${i18n("security_level_link")} -
+
${i18n("security_level_info")}
+ + ${i18n("security_level_link")} + `, })}
diff --git a/packages/server/src/views/screensharing-modal.ts b/packages/server/src/views/screensharing-modal.ts index 0bc51415..db793f98 100644 --- a/packages/server/src/views/screensharing-modal.ts +++ b/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"; diff --git a/packages/server/tsconfig.json b/packages/server/tsconfig.json index 727091ac..059e5a7e 100644 --- a/packages/server/tsconfig.json +++ b/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 + } + } } ] }, diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json index 49b19c03..5b534789 100644 --- a/packages/shared/tsconfig.json +++ b/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 + } + } } ] } diff --git a/packages/shared/types.ts b/packages/shared/types.ts index 24a3460e..ff5d80eb 100644 --- a/packages/shared/types.ts +++ b/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; diff --git a/packages/shared/views/alert.ts b/packages/shared/views/alert.ts deleted file mode 100644 index fd68e2ac..00000000 --- a/packages/shared/views/alert.ts +++ /dev/null @@ -1,35 +0,0 @@ -import clsx from "clsx"; -import html, { Template } from "../html"; -import { alertIcons } from "./icons/alert"; -import cls from "decorator-client/src/styles/alert.module.css"; - -/** - * @link https://aksel.nav.no/komponenter/core/alert - */ -type AlertProps = { - variant: "error" | "warning" | "info" | "success"; - content: Template | string; - className?: string; -}; - -export type AlertVariant = AlertProps["variant"]; - -const role = { - info: undefined, - success: "status", - warning: "status", - error: "alert", -}; - -export const Alert = (props: AlertProps) => { - const { variant, content, className } = props; - return html` -
- ${alertIcons[variant]} - ${content} -
- `; -}; diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..c4da52af --- /dev/null +++ b/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": {} } };