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

package/src/components/input/input.mdx

@@ -1,11 +0,0 @@
-import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
-
-import * as InputStories from './input.stories'
-
-<Meta of={InputStories} />
-
-# Input
-
-`Input` gir brukere muligheten til å skrive fritekst eller tall.
-
-<Primary />

package/src/components/input/input.spec.ts

@@ -1,25 +0,0 @@
-import { render, screen } from '@testing-library/angular'
-import { Input } from './input'
-
-test('should render', async () => {
-  await render(
-    `
-        <input ksd-input type="text"  />
-    `,
-    { imports: [Input] },
-  )
-
-  expect(screen.getByRole('textbox')).toBeDefined()
-})
-
-test('should set aria-invalid', async () => {
-  await render(
-    `
-        <input ksd-input type="text" aria-invalid="true"  />
-    `,
-    { imports: [Input] },
-  )
-
-  expect(screen.getByRole('textbox')).toBeDefined()
-  expect(screen.getByRole('textbox').getAttribute('aria-invalid')).toBe('true')
-})

package/src/components/input/input.stories.ts

@@ -1,72 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular'
-import { CommonArgs, commonArgTypes } from '../../../.storybook/default-args'
-import { Field } from '../field/field'
-import { Label } from '../label/label'
-import { Input } from './input'
-
-type InputArgs = CommonArgs & {
-  readonly: boolean
-  disabled: boolean
-}
-
-const meta: Meta<InputArgs> = {
-  component: Input,
-  title: 'Komponenter/Input',
-  argTypes: {
-    ...commonArgTypes,
-    readonly: {
-      control: { type: 'boolean' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [Label, Field, Input],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<InputArgs>
-
-export const Preview: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <input ${argsToTemplate(args)} ksd-input  />
-        </ksd-field>
-    `,
-  }),
-}
-
-export const Rows: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <textarea ksd-input type="text" rows="4" ${argsToTemplate(args)} ></textarea>
-        </ksd-field>
-    `,
-  }),
-}
-
-export const Counter: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <input ksd-input [counter]="5" type="text" ${argsToTemplate(args)} />
-        </ksd-field>
-    `,
-  }),
-}

package/src/components/input/input.ts

@@ -1,67 +0,0 @@
-import {
-  booleanAttribute,
-  Directive,
-  inject,
-  input,
-  numberAttribute,
-  signal,
-} from '@angular/core'
-import { CommonInputs } from '../common-inputs'
-import { FieldState } from '../field/field-state'
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'input[ksd-input], textarea[ksd-input], select[ksd-input]',
-  hostDirectives: [
-    {
-      directive: CommonInputs,
-      inputs: ['data-size', 'data-color'],
-    },
-  ],
-  host: {
-    class: 'ds-input',
-    '[attr.readonly]': 'readonly() ? true : null',
-    '[attr.disabled]': 'disabled() ? true : null',
-    '[attr.aria-invalid]':
-      'ariaInvalid() ? true : (fieldState?.hasError() ? true:  null)',
-    '(click)': 'onClick($event)',
-    '(input)': 'value.set($event.target.value)',
-  },
-})
-export class Input {
-  /**
-   * The value of the input
-   */
-  value = signal('')
-
-  /**
-   * Whether the input is readonly
-   */
-  readonly readonly = input(false, { transform: booleanAttribute })
-
-  /**
-   * Disables element
-   */
-  readonly disabled = input(false, { transform: booleanAttribute })
-
-  /**
-   * Whether the element is invalid.
-   */
-  readonly ariaInvalid = input(false, {
-    transform: booleanAttribute,
-    alias: 'aria-invalid',
-  })
-
-  /**
-   * Displays a character counter. pass a number to set a limit.
-   */
-  counter = input(0, { transform: numberAttribute })
-
-  protected fieldState = inject(FieldState, { optional: true })
-
-  onClick(event: Event) {
-    if (this.readonly()) {
-      event.preventDefault()
-    }
-  }
-}

package/src/components/label/index.ts

@@ -1 +0,0 @@
-export { Label } from './label'

package/src/components/label/label.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core'
-import { CommonInputs } from '../common-inputs'
-
-@Component({
-  selector: 'ksd-label',
-  hostDirectives: [
-    {
-      directive: CommonInputs,
-      inputs: ['data-size', 'data-color'],
-    },
-  ],
-  template: `
-    <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
-    <label class="ds-label"><ng-content /></label>
-  `,
-})
-export class Label {}

package/src/components/paragraph/index.ts

@@ -1 +0,0 @@
-export { Paragraph } from './paragraph'

package/src/components/paragraph/paragraph.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  selector: 'p[ksd-paragraph]',
-  template: `<ng-content />`,
-  host: {
-    class: 'ds-paragraph',
-  },
-})
-export class Paragraph {}

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

@@ -1,62 +0,0 @@
-/* eslint-disable @angular-eslint/no-input-rename */
-
-import { Component, input, signal } from '@angular/core'
-import { Button } from '../button'
-import { Color, SeverityColors } from '../colors'
-import { Size } from '../common-inputs'
-import { Popover } from './popover'
-
-/* Demo component to be used in story only */
-
-@Component({
-  selector: 'ksd-controlled-popover',
-  template: `
-    <button
-      ksd-button
-      variant="primary"
-      popovertarget="controlled-popover"
-      (click)="togglePopover()"
-    >
-      Kontrollert popover
-    </button>
-
-    <ksd-popover
-      popoverId="controlled-popover"
-      placement="top"
-      [open]="popoverOpen()"
-      (triggeredClose)="setPopoverClosed()"
-      [variant]="variant()"
-      [data-size]="dataSize()"
-      [data-color]="dataColor()"
-      [placement]="placement()"
-    >
-      <p>Her er det noe innhold</p>
-      <button
-        ksd-button
-        variant="secondary"
-        data-color="danger"
-        (click)="setPopoverClosed()"
-      >
-        Lukk popover
-      </button>
-    </ksd-popover>
-  `,
-  imports: [Popover, Button],
-})
-export class ControlledPopover {
-  protected popoverOpen = signal(false)
-  readonly variant = input<'tinted' | 'default'>('default')
-  readonly dataSize = input<Size>('md', { alias: 'data-size' })
-  readonly dataColor = input<Color | SeverityColors>('neutral', {
-    alias: 'data-color',
-  })
-  readonly placement = input<'top' | 'bottom' | 'left' | 'right'>('top')
-
-  togglePopover() {
-    this.popoverOpen.update((open) => !open)
-  }
-
-  setPopoverClosed() {
-    this.popoverOpen.set(false)
-  }
-}

package/src/components/popover/index.ts

@@ -1 +0,0 @@
-export { Popover } from './popover'

package/src/components/popover/popover.mdx

@@ -1,81 +0,0 @@
-import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks'
-import * as PopoverStories from './popover.stories.ts'
-
-<Meta of={PopoverStories} />
-
-# Popover
-
-`Popover` vises over andre elementer i grensesnittet og er koblet til et spesifikt element. Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden. `Popover` kan brukes som en utvidet løsning når [`Tooltip`](/docs/komponenter-tooltip--docs) ikke strekker til.
-
-<Primary />
-<Controls />
-
-## Bruk
-
-```tsx
-
-<button ksd-button variant="primary"  popovertarget="my-popover"> Enkel popover </button>
-<ksd-popover popoverId="my-popover"> Her er det noe innhold </ksd-popover>
-```
-
-### Polyfill
-
-`Popover` bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover). Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) for å sikre at `Popover` fungerer for alle.
-
-## Kodeeksempler
-
-### Farger
-
-`Popover` kommer i alle farger, du kan endre den med `data-color`.
-Du kan også sette `variant` direkte for å endre bakgrunnsfarge.
-
-### Kontrollert
-
-Dersom du sender inn `open`, så bruker du `popover` kontrollert. Du kan bruke `triggeredClose` for å få beskjed når `popover` vil lukkes.
-Dette er nyttig dersom du har innhold som skal lukke `popover` når du klikker på det.
-
-```tsx
-
-<button ksd-button popovertarget="my-popover">Kontrollert popover</button>
-<ksd-popover id="my-popover"  [open]="isPopoverOpen()" (triggeredClose)="setPopoverClosed()">
-    <p>Her er det noe innhold</p>
-      <button
-        ksd-button
-        variant="secondary"
-        data-color="danger"
-        (click)="setPopoverClosed()"
-      >
-        Lukk popover
-      </button>
-</ksd-popover>
-```
-
-<Canvas of={PopoverStories.Controlled} />
-
-## Retningslinjer
-
-`Popover` brukes for å vise mer detaljert eller interaktiv tilleggsinformasjon uten å ta brukeren bort fra konteksten. Den åpnes ved et bevisst brukerklikk og kan inneholde både tekst, lenker og enkle skjemaelementer. Innholdet bør være kort og relevant, og ikke kritisk for å fullføre oppgaven.
-
-**Passer til:**
-
-- Utfyllende forklaringer som krever mer plass enn en kort [`Tooltip`](/docs/komponenter-tooltip--docs), f.eks. definisjoner eller utdypende instruksjoner.
-- Kontekstspesifikk hjelp som brukeren kan velge å åpne/lukke uten å forlate siden.
-- Visning av tilleggsinformasjon som ikke er kritisk for å fullføre oppgaven, men som kan være nyttig for enkelte brukere.
-
-**Passer ikke til:**
-
-- Å beskrive et symbol eller tastatursnartvei, bruk heller [`Tooltip`](/docs/komponenter-tooltip--docs).
-- Navigasjon eller valg av alternativer (bruk [`Dropdown`](/docs/komponenter-dropdown--docs) i stedet)
-- Å vise innhold ved `hover`.
-
-### Plassering
-
-`Popover` plasseres etter ønske, men holder seg automatisk innenfor det synlige området i nettleseren. Denne oppførselen kan deaktiveres med `autoPlacement`.
-
-## Tekst
-
-Unngå lange tekster og kompliserte forklaringer. I noen tilfeller er det kanskje bedre å lenke til en annen side med utdypende informasjon om temaet.
-
-## Tilgjengelighet
-
-Det er innebygd tilgjengelighet i [Popover APIet (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) i henhold til åpne/lukket tilstand og tastatur navigasjon.

package/src/components/popover/popover.spec.ts

@@ -1,143 +0,0 @@
-import { render, screen } from '@testing-library/angular'
-import userEvent from '@testing-library/user-event'
-import { Popover } from './popover'
-
-const renderPopover = async () => {
-  return await render(
-    `
-  <button popovertarget="my-popover"> enkel popover</button>
-    <ksd-popover popoverId="my-popover" placement="top" >
-      her er det noe innhold
-    </ksd-popover>
-  `,
-    {
-      imports: [Popover],
-    },
-  )
-}
-
-const contentText = 'her er det noe innhold'
-
-describe('Popover', () => {
-  const user = userEvent.setup()
-
-  it('should render popover on trigger-click when closed', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //popover button should be visible
-    expect(popoverButton).toBeVisible()
-
-    //the popover content should not be visible yet
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-  })
-
-  it('should close when we click the button twice', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //the popover content should not be visible yet
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //click button again to hide popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-  })
-
-  it('should close when we click outside', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //click outside to hide popover
-    await user.click(document.body)
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-  })
-
-  it('should close when we press ESC', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //press ESC to hide popover
-    await user.keyboard('[Escape]')
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-  })
-
-  it('should close when we press SPACE', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //press SPACE to hide popover
-    await user.keyboard('[Space]')
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-  })
-
-  it('should close when we press ENTER', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //press ENTER to hide popover
-    await user.keyboard('[Enter]')
-    expect(screen.queryByText(contentText)).not.toBeInTheDocument()
-  })
-
-  it('should not close if we click inside the popover', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-
-    //click button to see popover
-    await user.click(popoverButton)
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-
-    //click inside the popover
-    await user.click(screen.getByText(contentText))
-    expect(screen.queryByText(contentText)).toBeInTheDocument()
-  })
-
-  it('should have correct id and popovertarget attributes', async () => {
-    await renderPopover()
-    const popoverButton = await screen.findByRole('button', {
-      name: /enkel popover/i,
-    })
-    const popover = screen.getByTestId('popover')
-
-    expect(popoverButton.getAttribute('popovertarget')).toBe(popover.id)
-  })
-})

package/src/components/popover/popover.stories.ts

@@ -1,63 +0,0 @@
-import {
-  Meta,
-  StoryObj,
-  argsToTemplate,
-  moduleMetadata,
-} from '@storybook/angular'
-import { CommonArgs, commonArgTypes } from '../../../.storybook/default-args'
-import { Button } from '../button/button'
-import { ControlledPopover } from './controlled-popover'
-import { Popover } from './popover'
-
-type PopoverArgs = CommonArgs & {
-  variant: 'default' | 'tinted'
-  placement: 'top' | 'bottom' | 'left' | 'right'
-}
-
-const meta: Meta<PopoverArgs> = {
-  component: Popover,
-  decorators: [
-    moduleMetadata({
-      imports: [ControlledPopover, Button],
-    }),
-  ],
-  title: 'Komponenter/Popover',
-  argTypes: {
-    ...commonArgTypes,
-    variant: {
-      options: ['default', 'tinted'],
-      control: { type: 'radio' },
-    },
-    placement: {
-      options: ['top', 'bottom', 'left', 'right'],
-      control: { type: 'radio' },
-    },
-  },
-}
-export default meta
-type Story = StoryObj<Popover>
-
-export const Preview: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="margin: 0 auto; width:100%; text-align:center;" >
-      <button ksd-button variant="primary"  popovertarget="my-popover"> Enkel popover </button>
-      <ksd-popover popoverId="my-popover"  ${argsToTemplate(args)}> Her er det noe innhold </ksd-popover>
-    </div>
-    `,
-  }),
-}
-
-export const Controlled: StoryObj<ControlledPopover> = {
-  render: (args) => ({
-    props: args,
-    template: `
-
-    <div style="margin: 0 auto; width:100%;  text-align:center;" >
-      <ksd-controlled-popover ${argsToTemplate(args)}/>
-    </div>
-    `,
-  }),
-}