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

package/.storybook/preview-head.html

@@ -1,16 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-{
-  "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

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

package/eslint.config.mjs

@@ -1,28 +0,0 @@
-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

@@ -1,9 +0,0 @@
-{
-  "$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/project.json

@@ -1,81 +0,0 @@
-{
-  "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

@@ -1,46 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

package/src/components/button/button.mdx

@@ -1,40 +0,0 @@
-import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
-
-import * as ButtonStories from './button.stories'
-
-<Meta of={ButtonStories} />
-
-# Button
-
-Knappar lèt brukarane utføre handlingar.
-
-<Primary />
-<Controls />
-
-## Ikoner
-
-- [Unngå å bruke ikonfonter](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/).
-- For Angular kan du bruke [Ng Icons](https://ng-icons.github.io/ng-icons), et bibliotek som inneholder ikoner fra Phosphor Icons og Material Icons – de to ikonsettene vi offisielt støtter i våre løsninger.
-
-### Egne ikoner
-
-Du kan også bruke SVG-markup direkte, f.eks. hvis du har egne ikoner.
-
-```tsx
-<button ksd-button>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    aria-hidden="true"
-  >
-    <path d="M3 11.5L12 4l9 7.5" />
-    <path d="M5 10.5v9.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9.5" />
-    <path d="M10 21v-5a2 2 0 0 1 4 0v5" />
-  </svg>
-  Eget SVG-ikon
-</button>
-```

package/src/components/button/button.spec.ts

@@ -1,86 +0,0 @@
-import { render, screen } from '@testing-library/angular'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { Button } from './button'
-
-it('should render as aria-disabled when aria-disabled is true regardless of variant', async () => {
-  await render(
-    `
-      <button ksd-button aria-disabled="true">My button</button>
-    `,
-    { imports: [Button] },
-  )
-
-  const button = screen.getByRole('button')
-  expect(button).toHaveAttribute('aria-disabled')
-})
-
-it('should render as disabled when disabled is true regardless of variant', async () => {
-  await render(
-    `
-      <button ksd-button disabled>My button</button>
-    `,
-    { imports: [Button] },
-  )
-
-  const button = screen.getByRole('button')
-  expect(button).toBeDisabled()
-})
-
-it('should be clickable', async () => {
-  const handleClick = vi.fn()
-
-  await render(
-    `<button ksd-button (click)="handleClick()">My button</button>`,
-    {
-      imports: [Button],
-      componentProperties: { handleClick },
-    },
-  )
-  const user = userEvent.setup()
-  const button = screen.getByRole('button')
-
-  await user.click(button)
-  expect(handleClick).toHaveBeenCalledTimes(1)
-})
-
-it('should not be clickable when disabled', async () => {
-  const handleClick = vi.fn()
-
-  await render(
-    `<button ksd-button disabled (click)="handleClick()">My button</button>`,
-    {
-      imports: [Button],
-      componentProperties: { handleClick },
-    },
-  )
-  const user = userEvent.setup()
-  const button = screen.getByRole('button')
-
-  await user.click(button)
-  expect(handleClick).not.toHaveBeenCalled()
-})
-
-it('should render button text', async () => {
-  await render(
-    `
-      <button ksd-button disabled>Different button text</button>
-    `,
-    { imports: [Button] },
-  )
-
-  const button = screen.getByRole('button', { name: 'Different button text' })
-  expect(button).toBeInTheDocument()
-})
-
-it('should set aria-busy when loading', async () => {
-  await render(
-    `
-      <button ksd-button loading>My button</button>
-    `,
-    { imports: [Button] },
-  )
-
-  const button = screen.getByRole('button')
-  expect(button).toHaveAttribute('aria-busy', 'true')
-})