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

package/src/components/search/search.ts

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

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

package/src/components/spinner/spinner.mdx

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

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

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

@@ -1,62 +0,0 @@
-/* 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

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

@@ -1,94 +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 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>
-    `,
-  }),
-}

package/src/components/textarea/textarea.mdx

@@ -1,14 +0,0 @@
-import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
-
-import * as TextareaStories from './textarea.stories'
-
-<Meta of={TextareaStories} />
-
-# Textarea
-
-`Textarea` brukes når brukeren skal kunne skrive inn tekst som går over flere linjer.
-
-<Primary />
-<Controls />
-
-## Bruk

package/src/components/textarea/textarea.stories.ts

@@ -1,52 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular'
-import { CommonArgs } from '../../../.storybook/default-args'
-import { Field } from '../field/field'
-import { Input } from '../input/input'
-import { Label } from '../label/label'
-
-type TextareaArgs = CommonArgs & {
-  readonly: boolean
-  disabled: boolean
-}
-
-const meta: Meta<TextareaArgs> = {
-  component: Input,
-  title: 'Komponenter/Textarea',
-  decorators: [
-    moduleMetadata({
-      imports: [Label, Field, Input],
-    }),
-  ],
-}
-export default meta
-type Story = StoryObj<TextareaArgs>
-
-export const Preview: Story = {
-  args: {
-    readonly: false,
-    disabled: false,
-  },
-
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="
-        display: flex;
-        flex-direction: column;
-        gap: var(--ds-size-2);
-        max-width: 100%;
-        width: 20rem
-      " >
-        <ksd-field>
-          <ksd-label>Label</ksd-label>
-          <textarea ksd-input type="text" ${argsToTemplate(args)}></textarea>
-        </ksd-field>
-      </div>
-    `,
-  }),
-}

package/src/components/validation-message/index.ts

@@ -1 +0,0 @@
-export { ValidationMessage } from './validation-message'

package/src/components/validation-message/validation-message.ts

@@ -1,11 +0,0 @@
-import { Directive } from '@angular/core'
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[ksd-validation-message]',
-  host: {
-    class: 'ds-validation-message',
-    'data-field': 'validation',
-  },
-})
-export class ValidationMessage {}

package/src/index.ts

@@ -1,14 +0,0 @@
-export * from './components/alert'
-export * from './components/button'
-export * from './components/card'
-export * from './components/common-inputs'
-export * from './components/details'
-export * from './components/field'
-export * from './components/fieldset'
-export * from './components/input'
-export * from './components/label'
-export * from './components/paragraph'
-export * from './components/popover'
-export * from './components/search'
-export * from './components/spinner'
-export * from './components/validation-message'

package/src/test-setup.ts

@@ -1,12 +0,0 @@
-import '@analogjs/vitest-angular/setup-zone'
-
-import { getTestBed } from '@angular/core/testing'
-import {
-  BrowserTestingModule,
-  platformBrowserTesting,
-} from '@angular/platform-browser/testing'
-
-getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting())
-
-// Need jest-dom for matchers like expect.toHaveAttribute
-import '@testing-library/jest-dom'

package/src/utils/log-if-devmode.ts

@@ -1,13 +0,0 @@
-import { isDevMode } from '@angular/core'
-
-export const logIfDevMode = ({
-  component,
-  message,
-}: {
-  component: string
-  message: string
-}) => {
-  if (isDevMode()) {
-    console.log(`[${component}] ${message}`)
-  }
-}

package/src/utils/random-id.ts

@@ -1,3 +0,0 @@
-export const randomId = () => {
-  return `:${Math.random().toString(36).slice(2, 7)}`
-}

package/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2022",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./.storybook/tsconfig.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json",
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInputAccessModifiers": true,
-    "strictInjectionParameters": true,
-    "strictTemplates": true,
-    "extendedDiagnostics": {
-      "defaultCategory": "error"
-    }
-  }
-}

package/tsconfig.lib.json

@@ -1,28 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts", "src/typings.d.ts"],
-  "exclude": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.spec.ts",
-    "src/test-setup.ts",
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/test-setup.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,30 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest",
-      "@testing-library/jest-dom"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ],
-  "files": ["src/test-setup.ts"]
-}

package/vite.config.mts

@@ -1,35 +0,0 @@
-/// <reference types='vitest' />
-import angular from '@analogjs/vite-plugin-angular'
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
-import * as path from 'path'
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-export default defineConfig(() => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/packages/angular',
-  plugins: [
-    angular({
-      inlineStylesExtension: 'scss',
-    }),
-    nxViteTsPaths(),
-    nxCopyAssetsPlugin(['*.md']),
-    dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-    }),
-  ],
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    setupFiles: ['src/test-setup.ts'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../coverage/packages/angular',
-      provider: 'v8' as const,
-    },
-  },
-}))