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

package/src/components/radio/radio.stories.ts

@@ -1,226 +0,0 @@
-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 RadioArgs = CommonArgs & {
-  readonly: boolean
-  disabled: boolean
-}
-
-const meta: Meta<Input> = {
-  component: Input,
-  title: 'Komponenter/Radio',
-  decorators: [
-    moduleMetadata({
-      imports: [
-        Label,
-        Field,
-        Input,
-        FieldDescription,
-        Fieldset,
-        FieldsetLegend,
-        FieldsetDescription,
-        ValidationMessage,
-      ],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<RadioArgs>
-
-export const Preview: Story = {
-  args: {
-    readonly: false,
-    disabled: false,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <input type="radio" ksd-input ${argsToTemplate(args)}  />
-          <p ksd-field-description>Description</p>
-        </ksd-field>
-    `,
-  }),
-}
-
-export const AriaLabel: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <input ksd-input type="radio" ${argsToTemplate(args)} aria-label="Radio" />
-    `,
-  }),
-}
-
-export const Group: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken iskremsmak er best ? </legend>
-          <p ksd-fieldset-description>Velg din favorittsmak blant alternativene.</p>
-          <ksd-field>
-            <ksd-label>Vanilje</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Jordbær</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Sjokolade</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Jeg spiser ikke iskrem</ksd-label>
-            <input type="radio" name="icecream" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-        </fieldset>
-    `,
-  }),
-}
-
-export const WithError: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken bydel bor du i?</legend>
-        <p ksd-fieldset-description>Bergen er delt inn i åtte bydeler</p>
-        <ksd-field>
-          <ksd-label>Arna</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Bergenhus</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fana</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fyllingsdalen</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Laksevåg</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Ytrebygda</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Årstad</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Åsane</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <p ksd-validation-message>Du må velge en bydel før du kan fortsette.</p>
-    `,
-  }),
-}
-
-export const ReadOnly: Story = {
-  args: {
-    ...Preview.args,
-    readonly: true,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Hvilken bydel bor du i?</legend>
-        <p ksd-fieldset-description>Bergen er delt inn i åtte bydeler</p>
-        <ksd-field>
-          <ksd-label>Arna</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Bergenhus</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fana</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Fyllingsdalen</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Laksevåg</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Ytrebygda</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Årstad</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-        <ksd-field>
-          <ksd-label>Åsane</ksd-label>
-          <input type="radio" name="city" ksd-input ${argsToTemplate(args)}  />
-        </ksd-field>
-    `,
-  }),
-}
-
-export const Inline: Story = {
-  args: {
-    ...Preview.args,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-        <fieldset ksd-fieldset>
-        <legend ksd-fieldset-legend>Kontaktes på e-post?</legend>
-        <p ksd-fieldset-description>Bekreft om du ønsker å bli kontaktet per e-post.</p>
-          <div style="display: flex; flex-wrap: wrap; gap: var(--ds-size-6)">
-          <ksd-field>
-            <ksd-label>Ja</ksd-label>
-            <input type="radio" name="my-inline" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-          <ksd-field>
-            <ksd-label>Nei</ksd-label>
-            <input type="radio" name="my-inline" ksd-input ${argsToTemplate(args)}  />
-          </ksd-field>
-        </div>
-        </fieldset>
-    `,
-  }),
-}

package/src/components/search/index.ts

@@ -1,4 +0,0 @@
-export { Search } from './search'
-export { SearchButton } from './search-button'
-export { SearchClear } from './search-clear'
-export { SearchInput } from './search-input'

package/src/components/search/search-button.ts

@@ -1,35 +0,0 @@
-import { Directive, input } from '@angular/core'
-
-/**
- * Search button
- *
- * Used within Search to provide a submit button.
- *
- * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use
- * @param {string} [aria-label] - Aria label for the button
- *
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'button[ksd-search-button]',
-  standalone: true,
-  host: {
-    class: 'ds-button',
-    type: 'submit',
-    '[attr.aria-label]': 'this.ariaLabel()',
-    '[attr.data-variant]': 'this.variant()',
-  },
-})
-export class SearchButton {
-  /**
-   * Specify which button variant to use
-   *
-   * @default 'primary'
-   */
-  readonly variant = input<'primary' | 'secondary'>('primary')
-
-  /**
-   * Aria label for the button
-   */
-  readonly ariaLabel = input('', { alias: 'aria-label' })
-}

package/src/components/search/search-clear.ts

@@ -1,57 +0,0 @@
-import { Directive, input, output } from '@angular/core'
-
-/**
- * Search clear button
- *
- * Used within Search to provide a clear button.
- *
- * @param {string} [aria-label] - Aria label for the button.
- *
- * @event clearInput - Emitted when the clear button is clicked.
- * Use this to notify controlled forms that the input should be cleared.
- *
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'button[ksd-search-clear]',
-  standalone: true,
-  host: {
-    class: 'ds-button',
-    type: 'reset',
-    '[attr.data-variant]': "'tertiary'",
-    '[attr.aria-label]': 'this.ariaLabel()',
-    '(click)': 'handleClear($event)',
-  },
-})
-export class SearchClear {
-  /**
-   * Aria label for the button
-   * @default 'Tøm'
-   */
-  readonly ariaLabel = input('Tøm', { alias: 'aria-label' })
-
-  /**
-   * Output to notify controlled forms that input should be cleared
-   */
-  clearInput = output<void>()
-
-  handleClear(e: Event): void {
-    const target = e.target as HTMLButtonElement
-    let inputElement: HTMLElement | null | undefined = null
-
-    if (target instanceof HTMLElement) {
-      inputElement = target.closest('.ds-search')?.querySelector('input')
-    }
-
-    if (!inputElement) throw new Error('Input is missing')
-
-    if (!(inputElement instanceof HTMLInputElement)) {
-      throw new Error('Input is not an input element')
-    }
-
-    e.preventDefault()
-    inputElement.value = ''
-    this.clearInput.emit()
-    inputElement.focus()
-  }
-}

package/src/components/search/search-input.ts

@@ -1,18 +0,0 @@
-import { Directive } from '@angular/core'
-
-/**
- * Search input
- *
- * Used within Search to provide a search input.
- */
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'input[ksd-search-input]',
-  standalone: true,
-  host: {
-    class: 'ds-input',
-    type: 'search',
-    placeholder: '', // Need empty placeholder to enable show/hide for clear button
-  },
-})
-export class SearchInput {}

package/src/components/search/search.mdx

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

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

@@ -1,205 +0,0 @@
-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()
-  // },
-}