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

package/src/components/checkbox/checkbox.mdx

@@ -0,0 +1,50 @@
+import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
+
+import * as CheckboxStories from './checkbox.stories'
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+Vi bruker `Checkbox` for å gi brukerne valg, der de kan velge ett eller flere alternativer. Brukerne kan både velge og oppheve valgene de gjør. Bruk [`Fieldset`](#fieldset) til å gruppere flere valg.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+import {
+  Input,
+  Field,
+  Fieldset,
+  FieldsetDescription,
+  FieldsetLegend,
+  Label,
+  ValidationMessage,
+} from '@ks-digital/designsystem-angular'
+;<fieldset ksd-fieldset>
+  <legend ksd-fieldset-legend>
+    Hvordan vil du helst at vi skal kontakte deg?
+  </legend>
+
+  <p ksd-fieldset-description>
+    Velg alle alternativene som er relevante for deg.
+  </p>
+
+  <ksd-field>
+    <ksd-label> E-post </ksd-label>
+    <input ksd-input type="checkbox" value="e-post" />
+  </ksd-field>
+
+  <ksd-field>
+    <ksd-label> Telefon </ksd-label>
+    <input ksd-input type="checkbox" value="telefon" />
+  </ksd-field>
+
+  <ksd-field>
+    <ksd-label> SMS </ksd-label>
+    <input ksd-input type="checkbox" value="sms" />
+  </ksd-field>
+</fieldset>
+```

package/src/components/checkbox/checkbox.spec.ts

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/angular'
+import userEvent from '@testing-library/user-event'
+import { Field } from '../field/field'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+
+test('should not be clickable if readonly', async () => {
+  await render(
+    `
+      <ksd-field>
+        <ksd-label>My checkbox</ksd-label>
+        <input ksd-input type="checkbox" value="my-checkbox" readonly />
+      </ksd-field>
+    `,
+    { imports: [Field, Input, Label] },
+  )
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement
+  await userEvent.click(checkbox)
+  expect(checkbox.checked).toBe(false)
+})

package/src/components/checkbox/checkbox.stories.ts

@@ -0,0 +1,182 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular'
+import { CommonArgs } from '../../../.storybook/default-args'
+import { Field } from '../field/field'
+import { FieldDescription } from '../field/field-description'
+import { Fieldset } from '../fieldset/fieldset'
+import { FieldsetDescription } from '../fieldset/fieldset-description'
+import { FieldsetLegend } from '../fieldset/fieldset-legend'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+
+type InputArgs = CommonArgs & {
+  readonly: boolean
+  disabled: boolean
+}
+
+const meta: Meta<Input> = {
+  component: Input,
+  title: 'Komponenter/Checkbox',
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Input,
+        Label,
+        Field,
+        FieldDescription,
+        Fieldset,
+        FieldsetDescription,
+        FieldsetLegend,
+      ],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<InputArgs>
+
+export const Preview: Story = {
+  args: {
+    readonly: false,
+    disabled: false,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-field>
+        <ksd-label> Checkbox label </ksd-label>
+        <input ksd-input type="checkbox" value="some-value" ${argsToTemplate(args)}  />
+        <p ksd-field-description>Description</p>
+      </ksd-field>
+    `,
+  }),
+}
+
+export const Group: Story = {
+  args: {
+    ...Preview.args,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+     <fieldset ksd-fieldset>
+      <legend ksd-fieldset-legend>
+        Hvordan vil du helst at vi skal kontakte deg?
+      </legend>
+      <p ksd-fieldset-description>
+        Velg alle alternativene som er relevante for deg.
+      </p>
+
+      <ksd-field>
+        <ksd-label> E-post </ksd-label>
+        <input ksd-input type="checkbox" value="e-post" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> Telefon </ksd-label>
+        <input ksd-input type="checkbox" value="telefon" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> SMS </ksd-label>
+        <input ksd-input type="checkbox" value="sms" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+    </fieldset>
+    `,
+  }),
+}
+
+export const AriaLabel: Story = {
+  args: {
+    ...Preview.args,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-field>
+        <input ksd-input type="checkbox" value="some-value" aria-label="Checkbox label" ${argsToTemplate(args)}  />
+      </ksd-field>
+    `,
+  }),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    ...Preview.args,
+    readonly: true,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+     <fieldset ksd-fieldset>
+      <legend ksd-fieldset-legend>
+        Hvordan vil du helst at vi skal kontakte deg?
+      </legend>
+      <p ksd-fieldset-description>
+        Velg alle alternativene som er relevante for deg.
+      </p>
+
+      <ksd-field>
+        <ksd-label> E-post </ksd-label>
+        <input ksd-input type="checkbox" value="e-post" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> Telefon </ksd-label>
+        <input ksd-input type="checkbox" value="telefon" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> SMS </ksd-label>
+        <input ksd-input type="checkbox" value="sms" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+    </fieldset>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Preview.args,
+    disabled: true,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+     <fieldset ksd-fieldset>
+      <legend ksd-fieldset-legend>
+        Hvordan vil du helst at vi skal kontakte deg?
+      </legend>
+      <p ksd-fieldset-description>
+        Velg alle alternativene som er relevante for deg.
+      </p>
+
+      <ksd-field>
+        <ksd-label> E-post </ksd-label>
+        <input ksd-input type="checkbox" value="e-post" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> Telefon </ksd-label>
+        <input ksd-input type="checkbox" value="telefon" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+      <ksd-field>
+        <ksd-label> SMS </ksd-label>
+        <input ksd-input type="checkbox" value="sms" ${argsToTemplate(args)}  />
+      </ksd-field>
+
+    </fieldset>
+    `,
+  }),
+}

package/src/components/colors.ts

@@ -0,0 +1,36 @@
+/**
+Lifted from https://github.com/digdir/designsystemet/blob/main/packages/react/src/colors.ts
+**/
+
+// EmptyObject implementation from https://github.com/sindresorhus/type-fest/blob/main/source/empty-object.d.ts
+declare const emptyObjectSymbol: unique symbol
+type EmptyObject = { [emptyObjectSymbol]?: never }
+
+/**
+ * Base interface for available colors in the design system.
+ * The CLI will generate augmentations of this interface to allow
+ * type safety of custom color names.
+ */
+
+// eslint-disable-next-line
+export interface MainAndSupportColors {}
+
+/**
+ * If {@link MainAndSupportColors} has been extended to include color names, return T,
+ * otherwise return the arbitrary string type.
+ */
+type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject
+  ? string
+  : T
+
+export type SeverityInfo = 'info'
+export type SeveritySuccess = 'success'
+export type SeverityWarning = 'warning'
+export type SeverityDanger = 'danger'
+export type SeverityColors =
+  | SeverityInfo
+  | SeveritySuccess
+  | SeverityWarning
+  | SeverityDanger
+
+export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>

package/src/components/common-inputs.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @angular-eslint/no-input-rename */
+
+/**
+ * We use input aliasing to bridge the gap between Angular's camelCase property naming convention and our HTML data attributes.
+ * This approach allows us to use valid HTML data attributes as documented by Designsystemet while maintaining
+ * proper TypeScript intellisense support.
+ *
+ * Todo: Some components are using only a subset of colors, e.g., SeverityColors for Alert. We should reconsider this directive
+ */
+
+import { Directive, input } from '@angular/core'
+import { Color } from './colors'
+
+export type Size = 'sm' | 'md' | 'lg'
+
+@Directive()
+export class CommonInputs {
+  /**
+   * Changes size for descendant Designsystemet components. Select from predefined sizes.
+   * @attribute data-size
+   */
+  dataSize = input<Size>(undefined, { alias: 'data-size' })
+
+  /**
+   * Changes color for descendant Designsystemet components.
+   * Select from predefined colors and colors defined using theme.designsystemet.no.
+   * @attribute data-color
+   */
+  dataColor = input<Color>(undefined, { alias: 'data-color' })
+}

package/src/components/details/controlled-details.ts

@@ -0,0 +1,63 @@
+import { Component, computed, signal } from '@angular/core'
+import { Button } from '../button'
+import { Details } from './details'
+import { DetailsContent } from './details-content'
+import { DetailsSummary } from './details-summary'
+
+@Component({
+  selector: 'fiks-controlled-details',
+  imports: [Details, DetailsContent, DetailsSummary, Button],
+  template: `
+    <button
+      ksd-button
+      variant="secondary"
+      style="margin-bottom: .5em;"
+      (click)="toggleOpen()"
+    >
+      {{ toggleOpenText() }}
+    </button>
+    <ksd-details [open]="open1()" (toggled)="open1.set(!open1())">
+      <ksd-details-summary>Enkeltpersonforetak</ksd-details-summary>
+      <ksd-details-content>
+        Skal du starte for deg selv? Enkeltpersonforetak er ofte den enkleste
+        måten å etablere bedrift på. Denne organisasjonsformen har både fordeler
+        og ulemper. Det gir deg stor grad av frihet, men kan også gi betydelig
+        risiko fordi du har personlig ansvar for økonomien.
+      </ksd-details-content>
+    </ksd-details>
+    <ksd-details [open]="open2()" (toggled)="open2.set(!open2())">
+      <ksd-details-summary>Aksjeselskap (AS)</ksd-details-summary>
+      <ksd-details-content>
+        Planlegger du å starte næringsvirksomhet alene eller sammen med andre?
+        Innebærer næringsvirksomheten en økonomisk risiko? Vil du ha rettigheter
+        som arbeidstaker og muligheten til at andre kan investere i selskapet
+        ditt? Da kan aksjeselskap være en hensiktsmessig organisasjonsform.
+      </ksd-details-content>
+    </ksd-details>
+    <ksd-details [open]="open3()" (toggled)="open3.set(!open3())">
+      <ksd-details-summary>Ansvarlig selskap (ANS/DA)</ksd-details-summary>
+      <ksd-details-content>
+        Skal dere starte opp egen virksomhet sammen? Samarbeider dere godt?
+        Krever virksomheten små investeringer og innebærer liten økonomisk
+        risiko? Da kan ansvarlig selskap være aktuelt.
+      </ksd-details-content>
+    </ksd-details>
+  `,
+})
+export class ControlledDetails {
+  open1 = signal(false)
+  open2 = signal(false)
+  open3 = signal(false)
+
+  isOpen = computed(() =>
+    [this.open1(), this.open2(), this.open3()].every(Boolean),
+  )
+  toggleOpenText = computed(() => (this.isOpen() ? 'Lukk alle' : 'Åpne alle'))
+
+  toggleOpen = () => {
+    const isOpen = this.isOpen()
+    this.open1.set(!isOpen)
+    this.open2.set(!isOpen)
+    this.open3.set(!isOpen)
+  }
+}

package/src/components/details/details-content.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'ksd-details-content',
+  template: `<ng-content />`,
+})
+export class DetailsContent {}

package/src/components/details/details-summary.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'ksd-details-summary',
+  template: `<ng-content />`,
+})
+export class DetailsSummary {}

package/src/components/details/details.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks'
+import * as DetailsStories from './details.stories'
+
+<Meta of={DetailsStories} />
+
+# Details
+
+Med `Details` kan du presentera mykje innhald på liten plass i ei eller fleire rader. Heile rada er klikkbar og let brukarar opna eller lukka visninga av innhaldet under.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```html
+/* Utan ramme */
+<ksd-details>
+  <ksd-details-summary>Vedlegg</ksd-details-summary>
+  <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+</ksd-details>
+
+/* Med ramme */
+
+<article ksd-card>
+  <ksd-details>
+    <ksd-details-summary>Vedlegg</ksd-details-summary>
+    <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+  </ksd-details>
+</article>
+```
+
+## Kodeeksempler
+
+### Med ramme
+
+`Details` kan visast med ramme ved å leggje den i eit `Card`.
+Dette kan passa i tilfelle der `Details` ikkje fyller heile sida, eller når det berre er ei rad.
+
+<Canvas of={DetailsStories.InCard} />
+
+### Med fargar
+
+`Details` kan visast i fargar frå temaet ditt.
+
+<Canvas of={DetailsStories.InCardWithColor} />
+
+#### Kontrollert
+
+`Details` held sjølv styr på om den er open eller lukka, men dette kan òg kontrollerast utanfrå.
+
+<Canvas of={DetailsStories.Controlled} />
+
+## Retningslinjer
+
+Ikkje bruk `Details` til å skjula innhald for å gjera sida "ryddigare". Når vi skjuler innhold er det fare for at brukerne ikke se innholdet i det hele tatt. Finn ut om du faktisk må skjula innhald og ver klar over kvifor du gjer det.
+
+**Passar til å**
+
+- samla innhald
+- gjera det frivillig å sjå innhald som er mindre viktig
+- visa tilleggsinformasjon som kan vera til hjelp for brukarane
+
+**Passar ikkje til å**
+
+- visa viktig innhald som alle bør sjå når dei kjem til sida
+- oppsummera feilmeldingar - bruk heller [`ErrorSummary`](/docs/komponenter-errorsummary--docs)
+
+### Unngå nøsta lister
+
+Ikkje legg ein `Details` inni ein annan, det vi kallar nøsta lister. Det kan bli forvirrande for brukaren å forstå kva som er opna og lukka, spesielt når fleire nivå kan opnast samtidig.
+
+## Tekst
+
+Sørg for at overskrifta gjev ei god skildring av kva innhaldet i `Details` er. Overskriftene kan ha stor tyding for om brukarane finn det dei treng, om innhaldet blir lese og om det kan reknast som tilgjengeleg for alle brukarar. «Vis meir» eller «Les meir her» er ikkje gode nok titlar. Har du ein `Details` med mange nedtrekk, kan du ha ei hovudoverskrift eller temaoverskrift over heile lista.
+
+Hold innholdet i `Details` kort for å sikre at det lett kan relateres til overskriften. Om innhaldet er for langt bør du fordela innhaldet i fleire `Details`. Ved veldig mykje innhald kan det vere betre å vurdere å lage eigne sider.
+
+## Tilgjengelegheit
+
+[`Chevron`](https://aksel.nav.no/ikoner/ChevronDown)-ikonet er plassert til venstre for teksten, av omsyn til brukarar med nedsett synsfelt. Dei ser berre ein liten del av skjermen om gongen, og skannar gjerne vertikalt nedover på venstre side. Difor bør funksjonelle element stå til venstre, der dei lettare blir oppdaga. Plasseringa av chevronen bør òg vere konsekvent for å unngå forveksling med andre element.
+
+Ikkje plasser andre interaktive element inn i `Details.Summary`, då heile rada skal vera klikkbar. Ikonet og teksten skal _ikkje_ lenka til ulike handlingar (til dømes at teksten går vidare til ei side, medan ikonet opnar lista). Brukarane ventar ikkje at ikon og tekst skal gje ulikt resultat når dei vel dei.
+
+<kbd>Space</kbd> eller <kbd>Enter</kbd> åpnar eller lukkar `Details`.
+
+## Kjende manglar
+
+I Firefox og Safari blir det ikkje spelt av animasjon når `Details` blir opna og lukka.
+Sjå [interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size).

package/src/components/details/details.spec.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core'
+import { render, screen } from '@testing-library/angular'
+import userEvent from '@testing-library/user-event'
+import { Details } from './details'
+import { DetailsContent } from './details-content'
+import { DetailsSummary } from './details-summary'
+
+describe('Details', () => {
+  it('should have summary, content and be open when clicked', async () => {
+    @Component({
+      template: `
+        <ksd-details>
+          <ksd-details-summary>Details Summary Text</ksd-details-summary>
+          <ksd-details-content
+            >The fantastic details content text</ksd-details-content
+          >
+        </ksd-details>
+      `,
+      imports: [Details, DetailsContent, DetailsSummary],
+    })
+    class TestDetails {}
+
+    await render(TestDetails)
+
+    const user = userEvent.setup()
+    const detailsExpandButton = screen.getByRole('button')
+
+    await user.click(detailsExpandButton)
+
+    expect(screen.getByText('Details Summary Text'))
+    expect(screen.getByText('The fantastic details content text'))
+    expect(detailsExpandButton).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('should render details with open state as controlled', async () => {
+    @Component({
+      template: `
+        <ksd-details [open]="true" (toggled)="noop()">
+          <ksd-details-summary>Details Summary Text</ksd-details-summary>
+          <ksd-details-content
+            >The fantastic details content text</ksd-details-content
+          >
+        </ksd-details>
+      `,
+      imports: [Details, DetailsContent, DetailsSummary],
+    })
+    class TestDetails {
+      noop = () => undefined
+    }
+
+    await render(TestDetails)
+
+    const detailsExpandButton = screen.getByRole('button')
+    expect(detailsExpandButton).toHaveAttribute('aria-expanded', 'true')
+  })
+})

package/src/components/details/details.stories.ts

@@ -0,0 +1,129 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { Card } from '../card/card'
+import { ControlledDetails } from './controlled-details'
+import { Details } from './details'
+import { DetailsContent } from './details-content'
+import { DetailsSummary } from './details-summary'
+
+const meta: Meta<Details> = {
+  component: Details,
+  title: 'Komponenter/Details',
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Card,
+        Details,
+        DetailsContent,
+        DetailsSummary,
+        ControlledDetails,
+      ],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<Details>
+
+export const Preview: Story = {
+  args: {},
+  parameters: {
+    summaryText: 'Vedlegg',
+    contentText: 'Vedlegg 1, vedlegg 2, vedlegg 3',
+  },
+  render: (args, context) => ({
+    props: {
+      ...args,
+      summary: context.parameters['summaryText'],
+      content: context.parameters['contentText'],
+    },
+    template: `
+      <ksd-details data-testid="details">
+        <ksd-details-summary>Vedlegg</ksd-details-summary>
+        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+    `,
+  }),
+}
+
+export const WithoutCard: Story = {
+  render: () => ({
+    template: `
+      <ksd-details>
+        <ksd-details-summary>Vedlegg</ksd-details-summary>
+        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+    `,
+  }),
+}
+
+export const InCard: Story = {
+  render: () => ({
+    template: `
+      <article ksd-card>
+        <ksd-details>
+          <ksd-details-summary>Vedlegg</ksd-details-summary>
+          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+        </ksd-details>
+      </article>
+    `,
+  }),
+}
+
+export const InCardWithColor: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem">
+        <article ksd-card>
+          <ksd-details data-color="accent">
+            <ksd-details-summary>Vedlegg</ksd-details-summary>
+            <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+          </ksd-details>
+        </article>
+        <article ksd-card>
+          <ksd-details data-color="accent" variant="tinted">
+            <ksd-details-summary>Vedlegg</ksd-details-summary>
+            <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+          </ksd-details>
+        </article>
+      </div>
+    `,
+  }),
+}
+
+export const WithDifferentSizes: Story = {
+  render: () => ({
+    template: `
+      <ksd-details data-size="sm">
+          <ksd-details-summary>Vedlegg</ksd-details-summary>
+          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+      <ksd-details data-size="md">
+          <ksd-details-summary>Vedlegg</ksd-details-summary>
+          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+      <ksd-details data-size="lg">
+          <ksd-details-summary>Vedlegg</ksd-details-summary>
+          <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+    `,
+  }),
+}
+
+export const DefaultOpen: Story = {
+  render: () => ({
+    template: `
+      <ksd-details [defaultOpen]="true">
+        <ksd-details-summary>Vedlegg</ksd-details-summary>
+        <ksd-details-content>Vedlegg 1, vedlegg 2, vedlegg 3</ksd-details-content>
+      </ksd-details>
+    `,
+  }),
+}
+
+export const Controlled: StoryObj<ControlledDetails> = {
+  render: () => ({
+    template: `<fiks-controlled-details />`,
+  }),
+}