@ks-digital/designsystem-angular 0.0.1-alpha.23 → 0.0.1-alpha.25

package/.storybook/customTheme.ts

@@ -0,0 +1,15 @@
+import { create } from 'storybook/theming'
+
+export default create({
+  brandTitle: 'Komponenter',
+  fontBase: '"Inter", sans-serif',
+  // Colors
+  base: 'light',
+  colorSecondary: '#0062BA',
+  barTextColor: '#243142',
+  textColor: '#1e2b3c', // TODO does not work with css vars atm. bug?
+  inputTextColor: '#243142',
+  appBg: '#fefefe',
+  appPreviewBg: 'var(--ds-color-neutral-background-default)',
+  appContentBg: '#fefefe',
+})

package/.storybook/default-args.ts

@@ -0,0 +1,18 @@
+import { Color } from '../src/components/colors'
+import { Size } from '../src/components/common-inputs'
+
+export type CommonArgs = {
+  'data-size'?: Size | undefined
+  'data-color'?: Color | undefined
+}
+
+export const commonArgTypes = {
+  'data-size': {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'radio' },
+  },
+  'data-color': {
+    options: ['accent', 'neutral', 'danger', 'info', 'success', 'warning'],
+    control: { type: 'radio' },
+  },
+} satisfies import('@storybook/angular').ArgTypes

package/.storybook/main.ts

@@ -0,0 +1,27 @@
+import { StorybookConfig } from '@analogjs/storybook-angular'
+
+const config: StorybookConfig = {
+  stories: ['../**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: ['@storybook/addon-docs'],
+  core: {
+    disableTelemetry: true,
+  },
+  framework: {
+    name: '@analogjs/storybook-angular',
+    options: {
+      builder: {
+        viteConfigPath: 'packages/angular/.storybook/vite.config.mts',
+      },
+    },
+  },
+  staticDirs: [
+    // Map the local themes directory to a public path
+    { from: '../../themes/dist', to: '/css' },
+  ],
+}
+
+export default config
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/manager.ts

@@ -0,0 +1,10 @@
+import { addons } from 'storybook/manager-api'
+
+import customTheme from './customTheme'
+
+addons.setConfig({
+  theme: customTheme,
+  sidebar: {
+    showRoots: true,
+  },
+})

package/.storybook/preview-head.html

@@ -0,0 +1,16 @@
+<link
+  href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+  rel="stylesheet"
+/>
+
+<link rel="stylesheet" href="css/base.css" />
+
+<style>
+  * {
+    font-feature-settings: 'cv05' 1;
+  }
+</style>
+
+<script>
+  document.documentElement.setAttribute('lang', 'no')
+</script>

package/.storybook/preview.ts

@@ -0,0 +1,70 @@
+import { applicationConfig, type Preview } from '@analogjs/storybook-angular'
+import { provideZonelessChangeDetection } from '@angular/core'
+import { addons } from 'storybook/preview-api'
+import customTheme from './customTheme'
+import { themes } from './themes'
+
+addons.getChannel().on('globalsUpdated', ({ globals }) => {
+  setTheme(globals.theme)
+})
+
+function setTheme(href: string): void {
+  let link: HTMLLinkElement | null = document.getElementById(
+    'storybook-theme',
+  ) as HTMLLinkElement | null
+  href = href ?? themes[0].href
+  if (!link) {
+    link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.id = 'storybook-theme'
+    document.head.appendChild(link)
+  }
+  link.href = href
+}
+
+type ThemeGlobalType = {
+  name: string
+  description: string
+  defaultValue: string
+  toolbar: {
+    icon: string
+    items: Array<{ value: string; title: string }>
+    showName: boolean
+  }
+}
+
+export const globalTypes: Record<string, ThemeGlobalType> = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: themes[0].href,
+    toolbar: {
+      icon: 'paintbrush',
+      items: themes.map((t) => ({ value: t.href, title: t.name })),
+      showName: true,
+    },
+  },
+}
+
+const preview: Preview = {
+  decorators: [
+    applicationConfig({
+      providers: [provideZonelessChangeDetection()],
+    }),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+    docs: {
+      theme: customTheme,
+    },
+  },
+}
+
+export default preview

package/.storybook/themes.ts

@@ -0,0 +1,9 @@
+/**
+ * Themes that should be available in storybook
+ */
+
+export const themes = [
+  { name: 'Forvaltning', href: 'css/themes/forvaltning.css' },
+  { name: 'Ledsagerbevis', href: 'css/themes/ledsagerbevis.css' },
+  { name: 'Min kommune', href: 'css/themes/minkommune.css' },
+]

package/.storybook/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.js",
+    "*.ts"
+  ]
+}

package/.storybook/vite.config.mts

@@ -0,0 +1,5 @@
+import { mergeConfig, type UserConfig } from 'vite'
+
+export default async function viteFinal(config: UserConfig) {
+  return mergeConfig(config, {})
+}

package/README.md

@@ -1,10 +1,10 @@
-# 🚧 KS Digital Designsystem for Angular
+# KS Digital Designsystem for Angular
 
-> This is an experimental POC as for now
+> ⚠ This library is currently experimental. However, we actively use and test it in internal applications, and we strive to keep it stable at all times.
 
 This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
 
-## Installation (WIP)
+## Installation
 
 Install the required packages using your preferred package manager:
 

package/eslint.config.mjs

@@ -0,0 +1,28 @@
+import nx from '@nx/eslint-plugin'
+import baseConfig from '../../eslint.config.mjs'
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/component-class-suffix': 'off',
+      '@angular-eslint/directive-class-suffix': 'off',
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'ksd',
+          style: 'camelCase',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+]

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/angular",
+  "assets": ["*.md"],
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": ["@floating-ui/dom", "@u-elements/u-details"]
+}

package/package.json

@@ -5,45 +5,36 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.23",
+  "version": "0.0.1-alpha.25",
   "license": "MIT",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
-  "type": "module",
-  "files": [
-    "./dist"
-  ],
-  "main": "./dist/fesm2022/ks-digital-designsystem-angular.mjs",
-  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.3",
-    "@u-elements/u-details": "^0.1.2"
+    "@floating-ui/dom": "^1.7.4",
+    "@u-elements/u-details": "^0.1.5"
   },
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0"
   },
   "devDependencies": {
-    "@analogjs/storybook-angular": "^1.19.4",
-    "@analogjs/vite-plugin-angular": "~1.17.1",
-    "@analogjs/vitest-angular": "~1.17.1",
-    "@angular-eslint/builder": "^20.0.0",
-    "@angular-eslint/bundled-angular-compiler": "^20.0.0",
-    "@angular-eslint/eslint-plugin": "^20.0.0",
-    "@angular-eslint/eslint-plugin-template": "^20.0.0",
-    "@angular-eslint/schematics": "^20.0.0",
-    "@angular-eslint/template-parser": "^20.0.0",
-    "@ng-icons/core": "^32.1.0",
-    "@ng-icons/phosphor-icons": "^32.2.0",
+    "@angular-devkit/build-angular": "20.3.9",
+    "@angular-eslint/builder": "^20.6.0",
+    "@angular-eslint/bundled-angular-compiler": "^20.6.0",
+    "@angular-eslint/eslint-plugin": "^20.6.0",
+    "@angular-eslint/eslint-plugin-template": "^20.6.0",
+    "@angular-eslint/schematics": "^20.6.0",
+    "@angular-eslint/template-parser": "^20.6.0",
+    "@angular/platform-browser": "20.3.9",
+    "@ng-icons/core": "^32.5.0",
+    "@ng-icons/phosphor-icons": "^32.5.0",
     "@testing-library/angular": "^17.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "angular-eslint": "^20.0.0",
-    "jsdom": "~22.1.0",
-    "ng-packagr": "^20.0.1"
-  },
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json"
+    "@testing-library/jest-dom": "^6.9.1",
+    "angular-eslint": "^20.6.0",
+    "jsdom": "~27.2.0",
+    "ng-packagr": "^20.3.2",
+    "zone.js": "~0.15.0"
   }
 }

package/project.json

@@ -0,0 +1,81 @@
+{
+  "name": "@ks-digital/designsystem-angular",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/angular/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "dependsOn": ["@ks-digital/designsystem-themes:build"],
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "tsConfig": "packages/angular/tsconfig.lib.prod.json",
+        "project": "packages/angular/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/angular/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/angular/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "storybook": {
+      "executor": "@analogjs/storybook-angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/angular/.storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@analogjs/storybook-angular:build-storybook",
+      "dependsOn": ["@ks-digital/designsystem-themes:build", "^build"],
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/@ks-digital/designsystem-angular",
+        "configDir": "packages/angular/.storybook",
+        "compodoc": false,
+        "experimentalZoneless": true
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c packages/angular/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "buildTarget": "@ks-digital/designsystem-angular:build-storybook",
+        "staticFilePath": "dist/storybook/@ks-digital/designsystem-angular",
+        "spa": true,
+        "experimentalZoneless": true
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "@ks-digital/designsystem-angular:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

package/src/components/alert/alert.mdx

@@ -0,0 +1,46 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks'
+
+import * as AlertStories from './alert.stories'
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Vi bruker `Alert` til å gi brukeren informasjon som det er ekstra viktig at de ser og forstår. Komponenten er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+<ksd-alert>En beskjed det er viktig at brukeren ser</ksd-alert>
+```
+
+## Kodeeksempler
+
+`Alert` kan brukes til fire ulike budskap: Informasjon, suksess, advarsler og feilmelding.
+
+### Informasjon
+
+Bruk `info` når du vil gi brukeren nøytral og nyttig informasjon.
+
+<Canvas of={AlertStories.VariantInfo} />
+
+### Suksess
+
+Bruk `success` når du vil bekrefte at brukeren har fullført en oppgave, at handlingen var vellykket.
+
+<Canvas of={AlertStories.VariantSuccess} />
+
+### Advarsel
+
+Bruk `warning` når du vil at brukeren skal foreta en bestemt handling eller for å advare dem om noe viktig.
+
+<Canvas of={AlertStories.VariantWarning} />
+
+### Feilmelding
+
+Bruk `danger` for å informere om noe som er kritisk eller som hindrer brukeren i å komme videre.
+
+<Canvas of={AlertStories.VariantDanger} />

package/src/components/alert/alert.spec.ts

@@ -0,0 +1,33 @@
+import { NgStyle } from '@angular/common'
+import { render, screen } from '@testing-library/angular'
+import { Alert } from './alert'
+
+it('should render children, heading level 1', async () => {
+  await render(
+    `
+      <ksd-alert color="info">
+        <h1>Alert me!</h1>
+      </ksd-alert>
+    `,
+    { imports: [Alert] },
+  )
+
+  expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+    'Alert me!',
+  )
+})
+
+it('style should be applied', async () => {
+  await render(
+    `
+      <ksd-alert data-testid="alert" color="info" [ngStyle]="{ color: '#ffcc00' }" class="my-class">
+        <h1>Alert me!</h1>
+      </ksd-alert>
+    `,
+    { imports: [Alert, NgStyle] },
+  )
+
+  const alert = screen.getByTestId('alert')
+  expect(alert).toHaveStyle({ color: '#ffcc00' })
+  expect(alert).toHaveClass('my-class')
+})

package/src/components/alert/alert.stories.ts

@@ -0,0 +1,138 @@
+import { provideIcons } from '@ng-icons/core'
+import { phosphorPencilLine } from '@ng-icons/phosphor-icons/regular'
+import {
+  componentWrapperDecorator,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular'
+import { CommonArgs } from '../../../.storybook/default-args'
+import { SeverityColors } from '../colors'
+import { Paragraph } from '../paragraph/paragraph'
+import { Alert } from './alert'
+
+const SEVERITY_COLORS: SeverityColors[] = [
+  'info',
+  'success',
+  'warning',
+  'danger',
+]
+
+type AlertArgs = CommonArgs & {
+  variant: 'default' | 'tinted'
+}
+
+const meta: Meta<AlertArgs> = {
+  component: Alert,
+  title: 'Komponenter/Alert',
+  argTypes: {
+    'data-size': {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'radio' },
+    },
+    'data-color': {
+      options: SEVERITY_COLORS,
+      control: { type: 'radio' },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [Alert, Paragraph],
+      providers: [provideIcons({ phosphorPencilLine })],
+    }),
+    componentWrapperDecorator(
+      (story) =>
+        `<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--ds-size-4)">${story}</div>`,
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<AlertArgs>
+
+export const Preview: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-alert>
+      En beskjed det er viktig at brukeren ser
+      </ksd-alert>
+    `,
+  }),
+}
+
+export const VariantInfo: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-alert data-color="info">
+      <h2 class="ds-heading" data-size="xs" style="margin-bottom: var(--ds-size-2)">
+            Har du husket å bestille passtime?
+      </h2>
+
+      <p ksd-paragraph>
+      Det er lange køer for å bestille pass om dagen, det kan være lurt å
+      bestille i god tid før du skal reise.
+      </p>
+      </ksd-alert>
+    `,
+  }),
+}
+
+export const VariantWarning: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-alert data-color="warning">
+      <h2 class="ds-heading" data-size="xs" style="margin-bottom: var(--ds-size-2)">
+            Vi har tekniske problemer
+      </h2>
+
+      <p ksd-paragraph>
+        Det gjør at du kan bli avbrutt mens du fyller ut skjemaet. Vi jobber med å
+      rette problemene.
+      </p>
+      </ksd-alert>
+    `,
+  }),
+}
+
+export const VariantDanger: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-alert data-color="danger">
+      <h2 class="ds-heading" data-size="xs" style="margin-bottom: var(--ds-size-2)">
+            Det har skjedd en feil
+      </h2>
+
+      <p ksd-paragraph>
+      Vi klarer ikke å hente informasjonen du ser etter akkurat nå. Prøv igjen
+      litt senere. Hvis vi fortsatt ikke klarer å vise informasjonen du trenger,
+      tar du kontakt med kundeservice på telefon 85 44 32 66.
+      </p>
+      </ksd-alert>
+    `,
+  }),
+}
+
+export const VariantSuccess: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-alert data-color="success">
+      <h2 class="ds-heading" data-size="xs" style="margin-bottom: var(--ds-size-2)">
+            Gratulerer! Du kan nå starte selskapet ditt
+      </h2>
+
+      <p ksd-paragraph>
+      Det ser ut til at regnestykket går i pluss og at du har det som skal til
+      for å starte selskapet ditt.
+      </p>
+      </ksd-alert>
+    `,
+  }),
+}

package/src/components/alert/alert.ts

@@ -0,0 +1,46 @@
+import { Component, input } from '@angular/core'
+import { SeverityColors } from '../colors'
+import { CommonInputs } from '../common-inputs'
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ */
+@Component({
+  selector: 'ksd-alert',
+  template: ` <ng-content />`,
+  host: {
+    class: 'ds-alert',
+  },
+  /**
+   * Use Phosphor Icons
+   */
+  styles: `
+    :host {
+      --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E");
+    }
+    :host[data-color='warning'] {
+      --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E");
+    }
+
+    :host[data-color='success'] {
+      --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
+    }
+
+    :host[data-color='danger'] {
+      --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
+    }
+  `,
+  hostDirectives: [
+    {
+      directive: CommonInputs,
+      inputs: ['data-size'],
+    },
+  ],
+})
+export class Alert {
+  /**
+   * The color variant of the alert.
+   */
+  /* eslint-disable-next-line @angular-eslint/no-input-rename */
+  dataColor = input<SeverityColors>(undefined, { alias: 'data-color' })
+}

package/src/components/alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './alert'