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

package/src/components/button/button.stories.ts

@@ -1,123 +0,0 @@
-import { NgIcon, provideIcons } from '@ng-icons/core'
-import { phosphorPencilLine } from '@ng-icons/phosphor-icons/regular'
-import {
-  argsToTemplate,
-  componentWrapperDecorator,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular'
-import { CommonArgs } from '../../../.storybook/default-args'
-import { Button } from './button'
-
-type ButtonArgs = CommonArgs & {
-  loading: boolean
-  disabled: boolean
-}
-
-const meta: Meta<ButtonArgs> = {
-  component: Button,
-  title: 'Komponenter/Button',
-  decorators: [
-    moduleMetadata({
-      imports: [Button, NgIcon],
-      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<ButtonArgs>
-
-export const Preview: Story = {
-  args: {
-    loading: false,
-    disabled: false,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-      <button ksd-button ${argsToTemplate(args)}>
-        Knapp
-      </button>
-    `,
-  }),
-}
-
-export const Variants: Story = {
-  args: {
-    ...Preview.args,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--ds-size-4);">
-      <button ksd-button variant="primary" ${argsToTemplate(args)}>Primary</button>
-      <button ksd-button variant="secondary" ${argsToTemplate(args)}>Secondary</button>
-      <button ksd-button variant="tertiary" ${argsToTemplate(args)}>Teritiary</button>
-    </div>
-    `,
-  }),
-}
-
-export const Icons: Story = {
-  args: {
-    ...Preview.args,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-       <button ksd-button ${argsToTemplate(args)}>
-          <ng-icon name="phosphorPencilLine" />
-      Rediger
-      </button>
-
-      <button icon ksd-button ${argsToTemplate(args)} aria-label="Kun ikon">
-        <ng-icon name="phosphorPencilLine" />
-      </button>
-
-      <button ksd-button ${argsToTemplate(args)}>
-      <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>
-    `,
-  }),
-}
-
-export const AsLink: Story = {
-  args: {
-    ...Preview.args,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-    <a ksd-button target="_blank" rel="noreferrer" href="https://ksdigital.no" ${argsToTemplate(args)}>Gå til ksdigital.no</a>
-    `,
-  }),
-}
-
-export const Loading: Story = {
-  args: {
-    ...Preview.args,
-    loading: true,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--ds-size-4);">
-      <button ksd-button variant="primary" ${argsToTemplate(args)}>Primary</button>
-      <button ksd-button variant="secondary" ${argsToTemplate(args)}>Secondary</button>
-      <button ksd-button variant="tertiary" ${argsToTemplate(args)}>Teritiary</button>
-    </div>
-    `,
-  }),
-}

package/src/components/button/button.ts

@@ -1,60 +0,0 @@
-import { booleanAttribute, Component, input } from '@angular/core'
-import { CommonInputs } from '../common-inputs'
-import { Spinner } from '../spinner/spinner'
-
-@Component({
-  selector: 'button[ksd-button], a[ksd-button]',
-  hostDirectives: [
-    {
-      directive: CommonInputs,
-      inputs: ['data-size', 'data-color'],
-    },
-  ],
-  imports: [Spinner],
-  host: {
-    class: 'ds-button',
-    type: 'button',
-    '[attr.data-variant]': 'variant()',
-    '[attr.data-icon]': 'icon() || null',
-    '[attr.disabled]': 'disabled() ? true : null',
-    '[attr.aria-busy]': 'loading() ? true : null',
-  },
-  styles: `
-    /* Ensure transcluded icons are aligned properly */
-    :host ::ng-deep > * {
-      display: inline-flex;
-    }
-  `,
-
-  template: `
-    @if (loading()) {
-      <ksd-spinner aria-hidden="true" />
-    }
-    <ng-content />
-  `,
-})
-export class Button {
-  /**
-   * Specify which variant to use
-   * @default 'primary'
-   */
-  readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary')
-
-  /**
-   * Toggle loading state.
-   * Pass an element if you want to display a custom loader.
-   *
-   * @default false
-   */
-  readonly loading = input(false, { transform: booleanAttribute })
-
-  /**
-   * Disables element
-   */
-  readonly disabled = input(false, { transform: booleanAttribute })
-
-  /**
-   * If this is a button with only an icon
-   */
-  readonly icon = input(false, { transform: booleanAttribute })
-}

package/src/components/button/index.ts

@@ -1 +0,0 @@
-export { Button } from './button'

package/src/components/card/card-block.ts

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

package/src/components/card/card.mdx

@@ -1,100 +0,0 @@
-import {
-  Meta,
-  Primary,
-  Canvas,
-  Controls,
-  Story,
-} from '@storybook/addon-docs/blocks'
-
-import * as CardStories from './card.stories'
-
-<Meta of={CardStories} />
-
-# Card
-
-Med Card kan vi fremheve informasjon eller oppgaver som hører sammen.
-
-<Primary />
-<Controls />
-
-## Bruk
-
-`ksd-card` brukes som direktiv sammen med riktig HTML-tag i din kontekst, f.eks `article`. Du kan bruke `ksd-card-block` for å dele inn kortet i flere seksjoner.
-
-```html
-<article ksd-card>
-  <h2 ksd-card-block>Tittel</h2>
-  <p ksd-card-block>Innhold</p>
-  <p ksd-card-block>Valgfri fotnote</p>
-</article>
-```
-
-## Kodeeksempler
-
-### Liste
-
-En liste med cards i en grid-layout.
-
-```html
-<ul
-  style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;"
->
-  <li ksd-card>
-    <h2>Item 1</h2>
-    <p>Description</p>
-  </li>
-  <li ksd-card>
-    <h2>Item 2</h2>
-    <p>Description</p>
-  </li>
-  <li ksd-card>
-    <h2>Item 3</h2>
-    <p>Description</p>
-  </li>
-  <li ksd-card>
-    <h2>Item 4</h2>
-    <p>Description</p>
-  </li>
-</ul>
-```
-
-### Navigasjonskort
-
-`Card` kan brukes som navigasjonskort for å ta brukeren videre til en annen side.
-
-#### Kort med lenke i tittel
-
-Dersom kortet skal lenke til en annen side, kan du legge en lenke i kortets tittel. Hele kortet blir da automatisk klikkbart, men skjermlesere får en bedre brukeropplevelse enn dersom hele kortet var en lenke.
-Dette fordi kun lenken istedenfor hele kortets innhold vil bli lest opp ved fokus.
-
-```html
-<article ksd-card>
-  <h2><a href="/">Whole card is clickable because of this link</a></h2>
-</article>
-```
-
-#### Kort som er en lenke
-
-Hele kortet kan bli en lenke ved å bruke anchor-tag som host-element. Dette er nyttig hvis du ønsker at hele kortets innhold skal bli lest opp.
-
-> ⚠ Vær oppmerksom på at dette vanligvis ikke er anbefalt, da det ofte er forstyrrende for skjermleserbrukere hvis kortet har mye innhold.
-
-```html
-<a ksd-card>
-  <h2>My heading</h2>
-  <p>My paragraph</p>
-</a>
-```
-
-### Retningslinjer
-
-`Card` er en fleksibel komponent som brukes til å strukturere og presentere innhold på en tydelig og visuelt avgrenset måte. Kortet kan inneholde ulike typer innhold, som tekst, media og lenker, og brukes ofte i oversikter, navigasjon eller for å fremheve enkeltemner.
-
-#### Passer til:
-
-- Å gruppere innhold eller funksjonalitet som du vil skille ut fra resten av innholdet.
-
-#### Passer ikke til:
-
-- Å vise lange tekstblokker eller detaljerte forklaringer.
-- Viktige meldinger som bør presenteres som varsler (bruk heller Alert).

package/src/components/card/card.spec.ts

@@ -1,70 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/angular'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { Card } from './card'
-
-it('should render card', async () => {
-  await render(
-    `
-      <article ksd-card>My card</article>
-    `,
-    { imports: [Card] },
-  )
-
-  const card = screen.getByRole('article')
-  expect(card).toHaveClass('ds-card')
-})
-
-it('clicking anywhere on the card triggers the inner link', async () => {
-  await render(
-    `
-      <article ksd-card>
-        <h2><a href="https://vg.no">My link</a></h2>
-        <p>My paragraph</p>
-      </article>
-    `,
-    { imports: [Card] },
-  )
-
-  const user = userEvent.setup()
-  const card = screen.getByRole('article')
-
-  // Spy on the link inside the card
-  const clickSpy = vi
-    .spyOn(HTMLAnchorElement.prototype, 'click')
-    .mockImplementation(() => undefined)
-
-  await user.click(card)
-
-  // Expect that the link inside the card has been clicked
-  expect(clickSpy).toHaveBeenCalledTimes(1)
-  clickSpy.mockRestore()
-})
-
-it('opens link in new tab with noopener,noreferrer on meta/ctrl click', async () => {
-  await render(
-    `
-      <article ksd-card>
-        <h2><a href="https://vg.no">My link</a></h2>
-        <p>My paragraph</p>
-      </article>
-    `,
-    { imports: [Card] },
-  )
-
-  const card = screen.getByRole('article')
-  const anchor = screen.getByRole('link') as HTMLAnchorElement
-
-  const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
-
-  fireEvent.click(card, { ctrlKey: true })
-
-  expect(openSpy).toHaveBeenCalledTimes(1)
-  expect(openSpy).toHaveBeenCalledWith(
-    anchor.href,
-    '_blank',
-    'noopener,noreferrer',
-  )
-
-  openSpy.mockRestore()
-})

package/src/components/card/card.stories.ts

@@ -1,101 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular'
-import { CommonArgs, commonArgTypes } from '../../../.storybook/default-args'
-import { Card } from './card'
-import { CardBlock } from './card-block'
-
-type CardArgs = CommonArgs & {
-  variant: 'default' | 'tinted'
-}
-
-const meta: Meta<CardArgs> = {
-  component: Card,
-  title: 'Komponenter/Card',
-  argTypes: {
-    ...commonArgTypes,
-    variant: {
-      options: ['default', 'tinted'],
-      control: { type: 'radio' },
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [Card, CardBlock],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<CardArgs>
-
-export const Preview: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-<div style="max-width: 320px;">
-  <article ksd-card ${argsToTemplate(args)}>
-    <h2>Card</h2>
-    <p>Most provide as with carried business are much better more the perfected designer. Writing slightly explain desk unable at supposedly about this</p>
-    <p data-size="sm">Footer text</p>
-  </article>
-</div>
-    `,
-  }),
-}
-
-export const CardWithBlocks: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-<div style="max-width: 320px;">
-  <article ksd-card ${argsToTemplate(args)}>
-  <h2 ksd-card-block>Use blocks to section the card</h2>
-  <p ksd-card-block>Most provide as with carried business are much better more the perfected designer. Writing slightly explain desk unable at supposedly about this</p>
-  <p ksd-card-block>Valgfri fotnote</p>
-</article>
-</div>
-    `,
-  }),
-}
-
-export const ListOfCards: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-  <ul style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;">
-    <li ksd-card ${argsToTemplate(args)}>
-      <h2>Item 1</h2>
-      <p>Description</p>
-    </li>
-    <li ksd-card ${argsToTemplate(args)}>
-      <h2>Item 2</h2>
-      <p>Description</p>
-    </li>
-    <li ksd-card ${argsToTemplate(args)}>
-      <h2>Item 3</h2>
-      <p>Description</p>
-    </li>
-    <li ksd-card ${argsToTemplate(args)}>
-      <h2>Item 4</h2>
-      <p>Description</p>
-    </li>
-  </ul>
-  `,
-  }),
-}
-
-export const AsLink: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-<div style="max-width: 320px;">
-  <article ksd-card ${argsToTemplate(args)}>
-    <h2><a href="/">Whole card is clickable when link is present inside heading</a></h2>
-  </article>
-</div>
-    `,
-  }),
-}

package/src/components/card/card.ts

@@ -1,44 +0,0 @@
-import { Component, ElementRef, inject, input } from '@angular/core'
-import { CommonInputs } from '../common-inputs'
-
-@Component({
-  selector: '[ksd-card]',
-  template: ` <ng-content /> `,
-  hostDirectives: [
-    {
-      directive: CommonInputs,
-      inputs: ['data-size', 'data-color'],
-    },
-  ],
-  host: {
-    class: 'ds-card',
-    '[attr.data-variant]': 'variant()',
-    '(click)': 'handleClick($event)',
-  },
-})
-export class Card {
-  /**
-   * Change the background color of the card
-   * @default 'default'
-   */
-  public variant = input<'tinted' | 'default'>('default')
-  private elementRef = inject(ElementRef)
-
-  private projectedLink() {
-    const el = this.elementRef.nativeElement
-    return el?.querySelector(
-      'h1 a, h2 a, h3 a, h4 a, h5 a, h6 a',
-    ) as HTMLAnchorElement | null
-  }
-
-  protected handleClick = (event: MouseEvent) => {
-    const link = this.projectedLink()
-    if (!link) return
-
-    if (event.metaKey || event.ctrlKey) {
-      window.open(link.href, '_blank', 'noopener,noreferrer')
-    } else {
-      link.click()
-    }
-  }
-}

package/src/components/card/index.ts

@@ -1,2 +0,0 @@
-export { Card } from './card'
-export { CardBlock } from './card-block'

package/src/components/checkbox/README.md

@@ -1,13 +0,0 @@
-# Checkbox
-
-# Todo
-
-- [x] Basic checkbox
-- [x] Group
-- [x] Aria-label
-- [x] Description
-- [x] Read only
-- [x] Disabeled
-- [ ] In table
-- [ ] Conditional
-- [ ] In table with pagination

package/src/components/checkbox/checkbox.mdx

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

@@ -1,21 +0,0 @@
-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)
-})