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

package/src/components/search/search.mdx

@@ -0,0 +1,56 @@
+import {
+  Meta,
+  Primary,
+  Controls,
+  Story,
+  Canvas,
+} from '@storybook/addon-docs/blocks'
+
+import * as SearchStories from './search.stories'
+
+<Meta of={SearchStories} />
+
+# Search
+
+Search lar brukere raskt finne relevant innhold på et nettsted i en applikasjon. Komponenten består av et søkefelt, med eller uten en søkeknapp
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+import {
+  Search,
+  SearchInput,
+  SearchClear,
+  SearchButton,
+} from '@ks-digital/designsystem-angular'
+;<ksd-search>
+  <input ksd-search-input />
+  <button ksd-search-clear></button>
+  <button ksd-search-button></button>
+</ksd-search>
+```
+
+## Kontrollert
+
+<Canvas of={SearchStories.Controlled} />
+
+## Variants
+
+Du kan endre variant på Button for å tilpasse visningen. Alternativt kan du fjerne knappen for å bruke et søkefelt med ikon. Eksemplene nedenfor viser varianter som inkluderer ikon, primær- og sekundærknapp.
+
+<Canvas of={SearchStories.Variants} />
+
+## Med Label
+
+Dersom du vil ha label på søkefeltet, må du legge til en Label komponent som du kobler sammen med SearchInput. I eksempelet har vi brukt Field for å få oppkobling mellom Label og SearchInput.
+
+<Canvas of={SearchStories.WithLabel} />
+
+## Skjema
+
+Søkeknappen har typen "submit" og vil dermed automatisk sende inn skjema.
+
+<Canvas of={SearchStories.Form} />

package/src/components/search/search.spec.ts

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/angular'
+import userEvent from '@testing-library/user-event'
+import { Input } from '../input'
+import { Search } from './search'
+import { SearchButton } from './search-button'
+import { SearchClear } from './search-clear'
+import { SearchInput } from './search-input'
+
+test('should render minimal search component', async () => {
+  await render(
+    `
+      <ksd-search>
+        <input ksd-search-input role="searchbox" />
+      </ksd-search>
+    `,
+    { imports: [SearchInput, Search, Input] },
+  )
+
+  const searchElement = screen.getByRole('searchbox').parentElement
+  expect(searchElement).toBeInTheDocument()
+  expect(searchElement).toHaveClass('ds-search')
+})
+
+test('should clear the input when the clear button is clicked', async () => {
+  await render(
+    `
+      <ksd-search>
+        <input ksd-search-input role="searchbox" />
+        <button ksd-search-clear role="button"></button>
+        <button ksd-search-button></button>
+      </ksd-search>
+    `,
+    {
+      imports: [SearchInput, SearchClear, SearchButton, Search],
+    },
+  )
+
+  const searchInput = screen.getByRole('searchbox') as HTMLInputElement
+  const clearButton = screen.getByRole('button', {
+    name: /tøm/i,
+  }) as HTMLButtonElement
+
+  await userEvent.type(searchInput, 'test')
+  expect(searchInput.value).toBe('test')
+
+  await userEvent.click(clearButton)
+  expect(searchInput.value).toBe('')
+})

package/src/components/search/search.stories.ts

@@ -0,0 +1,205 @@
+import { moduleMetadata, type Meta } from '@storybook/angular'
+import { CommonArgs, commonArgTypes } from '../../../.storybook/default-args'
+import { Button } from '../button'
+import { Field } from '../field/field'
+import { Input } from '../input'
+import { Label } from '../label/label'
+import { Search } from './search'
+import { SearchButton } from './search-button'
+import { SearchClear } from './search-clear'
+import { SearchInput } from './search-input'
+
+type SearchArgs = CommonArgs & {
+  variant?: 'primary' | 'secondary'
+  buttonLabel?: string
+  clearButtonLabel?: string
+}
+
+const meta: Meta<SearchArgs> = {
+  component: Search,
+  title: 'Komponenter/Search',
+  argTypes: {
+    ...commonArgTypes,
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+      description: 'Velg variant for søkeknappen',
+    },
+    buttonLabel: {
+      control: { type: 'text' },
+      description: 'Label for søkeknappen',
+    },
+    clearButtonLabel: {
+      control: { type: 'text' },
+      description: 'Label for tøm-knappen',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Search,
+        SearchClear,
+        SearchButton,
+        SearchInput,
+        Button,
+        Input,
+        Field,
+        Label,
+      ],
+    }),
+  ],
+}
+export default meta
+type Story = Meta<Search>
+
+export const Preview: Story = {
+  args: {
+    variant: 'primary',
+    buttonLabel: 'Søk',
+    clearButtonLabel: 'Tøm',
+    'data-size': '',
+    'data-color': '',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      dataSize: (args as SearchArgs)['data-size'],
+      dataColor: (args as SearchArgs)['data-color'],
+    },
+    template: `
+      <ksd-search role="search" [attr.data-size]="dataSize" [attr.data-color]="dataColor">
+        <input ksd-search-input role="searchbox" aria-label="Søkefelt" />
+        <button ksd-search-clear [aria-label]="clearButtonLabel"></button>
+        <button ksd-search-button [variant]="variant" [aria-label]="buttonLabel"></button>
+      </ksd-search>
+    `,
+  }),
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const state = {
+      value: '',
+    }
+    return {
+      props: {
+        state,
+
+        setInput: (value: string) => {
+          state.value = value
+        },
+
+        setValue: (event: KeyboardEvent) => {
+          const input = event.target as HTMLInputElement
+          state.value = input.value
+        },
+
+        clearValue: () => {
+          state.value = ''
+        },
+      },
+      template: `
+        <ksd-search>
+          <input ksd-search-input role="searchbox" [value]="state.value" (keyup)="setValue($event)"/>
+          <button ksd-search-clear (clearInput)="clearValue()" ></button>
+          <button ksd-search-button></button>
+        </ksd-search>
+
+        <div>
+          <span>Current search value: "{{ state.value }}"</span>
+
+          <button ksd-button (click)="setInput('Calzone')">
+            Set input value to "Calzone"
+          </button>
+
+          <p>The clear button has an output <em>(clearInput)</em> that is emitted when clicked.</p>
+        </div>
+      `,
+    }
+  },
+}
+
+export const Variants: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>
+        <p>Primary variant (default)</p>
+        <ksd-search>
+          <input ksd-search-input role="searchbox" />
+          <button ksd-search-clear></button>
+          <button ksd-search-button></button>
+        </ksd-search>
+      </div>
+
+      <div>
+        <p>Secondary variant</p>
+        <ksd-search>
+          <input ksd-search-input role="searchbox" />
+          <button ksd-search-clear></button>
+          <button ksd-search-button variant="secondary"></button>
+        </ksd-search>
+      </div>
+
+      <div>
+        <p>Search with icon</p>
+        <ksd-search>
+          <input ksd-search-input role="searchbox" />
+          <button ksd-search-clear></button>
+        </ksd-search>
+      </div>
+    `,
+  }),
+}
+
+export const WithLabel: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-field>
+        <ksd-label>Søk etter hunder:</ksd-label>
+        <ksd-search>
+          <input ksd-search-input role="searchbox" name="dog-search" />
+          <button ksd-search-clear></button>
+          <button ksd-search-button></button>
+        </ksd-search>
+      </ksd-field>
+    `,
+  }),
+}
+
+export const Form: Story = {
+  render: () => {
+    const state = { value: '' }
+    return {
+      props: {
+        state,
+        onSubmit: (event: Event) => {
+          event.preventDefault()
+          const form = event.target as HTMLFormElement
+          const formData = new FormData(form)
+          state.value = formData.get('search') as string
+        },
+        onClear: () => {
+          state.value = ''
+        },
+      },
+      template: `
+        <form role="search" (submit)="onSubmit($event)">
+          <ksd-search>
+            <input ksd-search-input role="searchbox" name="search" />
+            <button ksd-search-clear (clearInput)="onClear()"></button>
+            <button ksd-search-button></button>
+          </ksd-search>
+        </form>
+
+        <p>Submitted value: "{{ state.value }}"</p>
+    `,
+    }
+  },
+  // play: async ({ canvas }) => {
+  //   await expect(canvas.getByRole('search')).toBeTruthy()
+  // },
+}

package/src/components/search/search.ts

@@ -0,0 +1,50 @@
+import { afterNextRender, Component, contentChild } from '@angular/core'
+import { logIfDevMode } from '../../utils/log-if-devmode'
+import { CommonInputs } from '../common-inputs'
+import { SearchInput } from './search-input'
+
+/**
+ * Search Component
+ *
+ * Use to contain the search input and buttons.
+ * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.
+ *
+ * @example
+ * <div ksd-search>
+ *   <input ksd-search-input />
+ *   <button ksd-search-clear></button>
+ *   <button ksd-search-button></button>
+ * </div>
+ */
+@Component({
+  selector: 'ksd-search',
+  template: `
+    <ng-content select="[ksd-search-input]" />
+    <ng-content select="[ksd-search-clear]" />
+    <ng-content select="[ksd-search-button]" />
+  `,
+  host: {
+    class: 'ds-search',
+  },
+  hostDirectives: [
+    {
+      directive: CommonInputs,
+      inputs: ['data-size', 'data-color'],
+    },
+  ],
+})
+export class Search {
+  private readonly input = contentChild(SearchInput)
+
+  constructor() {
+    afterNextRender(() => {
+      if (!this.input()) {
+        logIfDevMode({
+          component: 'Search',
+          message:
+            'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',
+        })
+      }
+    })
+  }
+}

package/src/components/spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner } from './spinner'

package/src/components/spinner/spinner.mdx

@@ -0,0 +1,24 @@
+import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks'
+
+import * as SpinnerStories from './spinner.stories'
+
+<Meta of={SpinnerStories} />
+
+# Spinner
+
+`Spinner` brukes for å indikere at en handling pågår. Dette kan være når vi venter på at et skjema skal sendes inn.
+
+<Primary />
+<Controls />
+
+## Størrelser
+
+Du kan justere størrelsen på `Spinner` etter hvor den skal plasseres.
+Størrelsen vil være mindre i knapper, men større dersom den er ved et skjemafelt.
+
+<Canvas of={SpinnerStories.Sizes} />
+
+## Tilgjengelighet
+
+Når brukeren har `prefers-reduced-motion` satt til `reduce` vil spinneren ha en animasjon på 6 sekunder.
+Animasjonen er ikke dekorativ, og vi skrur den derfor ikke av.

package/src/components/spinner/spinner.spec.ts

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/angular'
+import { Spinner } from './spinner'
+
+it('should render a spinner with title "loading"', async () => {
+  await render(
+    `
+      <ksd-spinner aria-label="Loading">
+    `,
+    { imports: [Spinner] },
+  )
+
+  expect(screen.getByLabelText('Loading')).toBeInTheDocument()
+})

package/src/components/spinner/spinner.stories.ts

@@ -0,0 +1,54 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular'
+import { CommonArgs } from '../../../.storybook/default-args'
+import { Spinner } from './spinner'
+
+type SpinnerArgs = CommonArgs
+
+const meta: Meta<SpinnerArgs> = {
+  component: Spinner,
+  title: 'Komponenter/Loaders/Spinner',
+  decorators: [
+    moduleMetadata({
+      imports: [Spinner],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<SpinnerArgs>
+
+export const Preview: Story = {
+  args: {
+    'data-size': 'md',
+    'data-color': undefined,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-spinner ${argsToTemplate(args)} data-size="xl" />
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  args: {
+    ...Preview.args,
+    'data-size': undefined,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="2xs"  />
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="xs" />
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="sm" />
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="md" />
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="lg" />
+      <ksd-spinner aria-label="Laster" ${argsToTemplate(args)} data-size="xl" />
+    `,
+  }),
+}

package/src/components/spinner/spinner.ts

@@ -0,0 +1,62 @@
+/* eslint-disable @angular-eslint/no-input-rename */
+import { booleanAttribute, Component, input } from '@angular/core'
+import { Size } from '../common-inputs'
+
+@Component({
+  selector: 'ksd-spinner',
+  styles: `
+    :host {
+      display: contents;
+    }
+  `,
+  template: `
+    <svg
+      class="ds-spinner"
+      role="img"
+      viewBox="0 0 50 50"
+      [attr.data-size]="dataSize()"
+      [attr.data-color]="dataColor()"
+    >
+      <circle
+        class="ds-spinner__background"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+      <circle
+        class="ds-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  `,
+})
+export class Spinner {
+  /**
+   * Aria-label for the spinner
+   */
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' })
+
+  /**
+   * Aria-label for the spinner
+   */
+  readonly dataSize = input<Size>(undefined, { alias: 'data-size' })
+
+  /**
+   * Aria-label for the spinner
+   */
+  readonly dataColor = input<Size>(undefined, { alias: 'data-color' })
+
+  /**
+   * Aria-hidden for the spinner
+   */
+  readonly ariaHidden = input(undefined, {
+    transform: booleanAttribute,
+    alias: 'aria-hidden',
+  })
+}

package/src/components/switch/switch.mdx

@@ -0,0 +1,82 @@
+import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks'
+
+import * as SwitchStories from './switch.stories'
+
+<Meta of={SwitchStories} />
+
+# Switch
+
+`Switch` brukes til å gi brukeren et valg mellom to alternativer. Bryteren kan enten slås av eller på og skal alltid være innstilt med et standardvalg
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```html
+<ksd-field>
+  <ksd-label>Min switch</ksd-label>
+  <input ksd-input type="checkbox" role="switch" />
+</ksd-field>
+```
+
+## Kodeeksempler
+
+**Gruppering**
+
+Bruk `Fieldset`for å gruppere fler `Switch`-komponenter sammen
+
+<Canvas of={SwitchStories.Grouped} />
+
+**Høyre justering**
+
+Plasser `label` etter `input` for å plassere `Switch` til høyre side av ledeteksten hvis du trenger det.
+
+<Canvas of={SwitchStories.RightAligned} />
+
+## Retningslinjer
+
+`Switch`skal være et valg mellom to alternativer. Vi bruker `Switch` til innstillinger, ikke i skjema.
+
+**Passer til:**
+
+- aktivere eller deaktivere funksjoner/tilstander med en gang
+- slå varsler av og på
+
+**Passer ikke til:**
+
+- å bruke i stedet for `Checkbox` eller `Radio` i et skjema
+- situasjoner der brukerne må lagre informasjon før en endring får effekt
+- endre visning av innhold mellom to kategorier
+
+**Bruk heller**
+
+- `Checkbox` hvis du skal tilby brukerne flere valg, der de skal velge ett eller flere alternativer
+- `Radio` hvis brukerne skal få flere valg, men bare skal velge ett
+- `Chip til å filtrere innhold
+
+## Tekst
+
+Teksten til en `Switch` må være kort og presis, ofte betyr det bare ett eller to ord. Det skal gi mening når du sier ledeteksten høyt og legger til av/på etterpå. Unngå tekst med flere ord og mellomrom.
+
+Hvis du har flere `Switch` i en gruppe, må du passe på at du er konsekvent med hvordan du formulerer tekstene til hver av dem også, ikke formulerer dem forskjellig.
+
+Teksten skal beskrive hva funksjonen gjelder, ikke om den er på eller av. Hvis statusen skrives inn i labelen, kan det bli forvirrende og vanskelig å vite hvilken tilstand switchen faktisk er i.
+
+**Eksempel 1**
+
+- Riktig: Varsle på epost (Av/på)
+- Feil: Skru av varsel på epost (Av/på)
+
+**Eksempel 2**
+
+- Riktig: Flymodus (Av/på)
+- Feil: Skru på flymodus (Av/på)
+
+**Plassering av tekst**
+
+Som regel er det høyre som er den beste plasseringen for tekst, unntaket er når `Switch er fast plassert på høyre side i grensesnittet er det best at teksten er på venstre side. Slik at alle knappene blir justert etter samme vertikale
+
+## Tilgjengelighet
+
+Vi bruker `role="switch"` for å fortelle skjermlesere at dette er en vippebryter. Dette gjør at skjermlesere kan gi brukeren informasjon om at dette er en vippebryter og at den kan skrus av og på. Det er ikke lagt på `aria-checked` siden dette er ikke nødvendig når bryteren er en input med `type="checkbox".

package/src/components/switch/switch.stories.ts

@@ -0,0 +1,94 @@
+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'
+import { ValidationMessage } from '../validation-message'
+
+type SwitchArgs = CommonArgs & {
+  readonly: boolean
+  disabled: boolean
+}
+
+const meta: Meta<SwitchArgs> = {
+  component: Input,
+  title: 'Komponenter/Switch',
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Label,
+        Field,
+        Input,
+        FieldDescription,
+        Fieldset,
+        FieldsetLegend,
+        FieldsetDescription,
+        ValidationMessage,
+      ],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<SwitchArgs>
+
+export const Preview: Story = {
+  args: {
+    readonly: false,
+    disabled: false,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+        <ksd-field>
+          <ksd-label>Min switch</ksd-label>
+          <input ksd-input role="switch" type="checkbox" ${argsToTemplate(args)} role="switch"/>
+        </ksd-field>
+    `,
+  }),
+}
+
+export const Grouped: Story = {
+  render: () => ({
+    template: `
+      <fieldset ksd-fieldset>
+        <legend ksd-fieldset-legend> Skru av/på lys </legend>
+        <ksd-field>
+          <ksd-label>Stue</ksd-label>
+          <input ksd-input  type="checkbox" role="switch" checked=${true} />
+        </ksd-field>
+        <ksd-field>
+          <ksd-label>Kjøkken</ksd-label>
+          <input ksd-input  type="checkbox" role="switch"/>
+        </ksd-field>
+        <ksd-field>
+          <ksd-label>Bad</ksd-label>
+          <input ksd-input  type="checkbox" role="switch"/>
+        </ksd-field>
+        <ksd-field>
+          <ksd-label>Soverom</ksd-label>
+          <input ksd-input  type="checkbox" role="switch" />
+        </ksd-field>
+      </fieldset>`,
+  }),
+}
+
+export const RightAligned: Story = {
+  render: () => ({
+    template: `
+      <ksd-field>
+        <input ksd-input role="switch" type="checkbox" role="switch"/>
+        <ksd-label>Min switch</ksd-label>
+      </ksd-field>
+    `,
+  }),
+}