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

package/src/components/button/button.mdx

@@ -0,0 +1,40 @@
+import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
+
+import * as ButtonStories from './button.stories'
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Knappar lèt brukarane utføre handlingar.
+
+<Primary />
+<Controls />
+
+## Ikoner
+
+- [Unngå å bruke ikonfonter](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/).
+- For Angular kan du bruke [Ng Icons](https://ng-icons.github.io/ng-icons), et bibliotek som inneholder ikoner fra Phosphor Icons og Material Icons – de to ikonsettene vi offisielt støtter i våre løsninger.
+
+### Egne ikoner
+
+Du kan også bruke SVG-markup direkte, f.eks. hvis du har egne ikoner.
+
+```tsx
+<button ksd-button>
+  <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>
+```

package/src/components/button/button.spec.ts

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/angular'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { Button } from './button'
+
+it('should render as aria-disabled when aria-disabled is true regardless of variant', async () => {
+  await render(
+    `
+      <button ksd-button aria-disabled="true">My button</button>
+    `,
+    { imports: [Button] },
+  )
+
+  const button = screen.getByRole('button')
+  expect(button).toHaveAttribute('aria-disabled')
+})
+
+it('should render as disabled when disabled is true regardless of variant', async () => {
+  await render(
+    `
+      <button ksd-button disabled>My button</button>
+    `,
+    { imports: [Button] },
+  )
+
+  const button = screen.getByRole('button')
+  expect(button).toBeDisabled()
+})
+
+it('should be clickable', async () => {
+  const handleClick = vi.fn()
+
+  await render(
+    `<button ksd-button (click)="handleClick()">My button</button>`,
+    {
+      imports: [Button],
+      componentProperties: { handleClick },
+    },
+  )
+  const user = userEvent.setup()
+  const button = screen.getByRole('button')
+
+  await user.click(button)
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
+
+it('should not be clickable when disabled', async () => {
+  const handleClick = vi.fn()
+
+  await render(
+    `<button ksd-button disabled (click)="handleClick()">My button</button>`,
+    {
+      imports: [Button],
+      componentProperties: { handleClick },
+    },
+  )
+  const user = userEvent.setup()
+  const button = screen.getByRole('button')
+
+  await user.click(button)
+  expect(handleClick).not.toHaveBeenCalled()
+})
+
+it('should render button text', async () => {
+  await render(
+    `
+      <button ksd-button disabled>Different button text</button>
+    `,
+    { imports: [Button] },
+  )
+
+  const button = screen.getByRole('button', { name: 'Different button text' })
+  expect(button).toBeInTheDocument()
+})
+
+it('should set aria-busy when loading', async () => {
+  await render(
+    `
+      <button ksd-button loading>My button</button>
+    `,
+    { imports: [Button] },
+  )
+
+  const button = screen.getByRole('button')
+  expect(button).toHaveAttribute('aria-busy', 'true')
+})

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

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

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

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

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

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

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

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

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

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

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

package/src/components/checkbox/README.md

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