feat: input with select and textbox

packages/css/index.css

@@ -18,6 +18,7 @@
 @import url('./search.css') layer(ds.components);
 @import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
+@import url('./input.css') layer(ds.components);
 @import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);

packages/css/input.css

@@ -0,0 +1,240 @@
+.ds-input {
+  --dsc-input-background--checked-invalid: var(--ds-color-danger-border-default);
+  --dsc-input-background--checked: var(--ds-color-accent-base-default);
+  --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle);
+  --dsc-input-background: var(--ds-color-neutral-background-default);
+  --dsc-input-border-color--checked: var(--ds-color-accent-base-default);
+  --dsc-input-border-color--hover: var(--ds-color-accent-border-strong);
+  --dsc-input-border-color--invalid: var(--ds-color-danger-border-default);
+  --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
+  --dsc-input-border-color: var(--ds-color-neutral-border-default);
+  --dsc-input-border-width--toggle: 2px;
+  --dsc-input-border-width: 1px;
+  --dsc-input-box-shadow--hover: 0 0 0 var(--ds-spacing-1) var(--ds-color-accent-surface-hover);
+  --dsc-input-box-shadow--invalid: inset 0 0 0 var(--dsc-input-border-width) var(--dsc-input-border-color--invalid);
+  --dsc-input-color: var(--ds-color-neutral-text-default);
+  --dsc-input-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+  --dsc-input-size--switch: var(--ds-sizing-13);
+  --dsc-input-size--toggle: var(--ds-sizing-6);
+  --dsc-input-size: var(--ds-sizing-12);
+  --dsc-input-url--checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M18.55 6.32a1 1 0 0 1 0 1.42l-7.97 7.97a1 1 0 0 1-1.41 0l-4.22-4.22a1 1 0 0 1 1.41-1.42l3.52 3.52 7.26-7.27a1 1 0 0 1 1.41 0'/%3E%3C/svg%3E");
+  --dsc-input-url--indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12c0-1.1.9-2 2-2h12a2 2 0 1 1 0 4H6a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
+  --dsc-input-url--radio: radial-gradient(circle closest-side, black 45%, transparent 50%); /* Different percentage to acheive antialiasing */
+
+  appearance: none;
+  background: var(--dsc-input-background);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--dsc-input-addons-border, var(--dsc-input-border-width) solid var(--dsc-input-border-color)); /* Inherit from .ds-input-addons if present */
+  box-shadow: var(--dsc-input-box-shadow);
+  box-sizing: border-box;
+  color: var(--dsc-input-color);
+  font-family: inherit;
+  margin: 0; /* Reset native margin on checkbox and radio */
+  max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
+  padding: var(--dsc-input-padding);
+  position: relative; /* Ensure foucs outline renders on top */
+  transition-duration: 0.2s;
+  transition-property: background, border, box-shadow, mask;
+
+  @composes ds-body-text--md from './utilities.css';
+  @composes ds-focus from './utilities.css';
+
+  &:where([role='switch']) {
+    --dsc-input-background: var(--dsc-input-border-color);
+  }
+
+  &:is(select) {
+    --chevron-smooth: 2%;
+    --chevron-stroke: 0.05rem;
+    --chevron-width: 0.4em;
+    --chevron-y: 0.01rem;
+    --chevron-size: var(--chevron-width) calc(var(--chevron-width) + var(--chevron-y));
+    --chevron-start-smooth: transparent calc(50% + var(--chevron-y) - var(--chevron-stroke) - var(--chevron-smooth));
+    --chevron-start-stroke: currentcolor calc(50% + var(--chevron-y) - var(--chevron-stroke));
+    --chevron-end-stroke: currentcolor calc(50% + var(--chevron-y) + var(--chevron-stroke));
+    --chevron-end-smooth: transparent calc(50% + var(--chevron-y) + var(--chevron-stroke) + var(--chevron-smooth));
+
+    padding-right: 0.75em;
+    background:
+      content-box no-repeat
+        linear-gradient(45deg, var(--chevron-start-smooth), var(--chevron-start-stroke), var(--chevron-end-stroke), var(--chevron-end-smooth))
+        calc(100% - var(--chevron-width) + var(--chevron-stroke)) calc(50% + var(--chevron-y)) / var(--chevron-size),
+      content-box no-repeat
+        linear-gradient(-45deg, var(--chevron-start-smooth), var(--chevron-start-stroke), var(--chevron-end-stroke), var(--chevron-end-smooth)) right
+        calc(50% + var(--chevron-y)) / var(--chevron-size),
+      var(--dsc-input-background);
+  }
+
+  &:not(textarea) {
+    height: var(--dsc-input-size);
+  }
+
+  &:not([size], [cols]) {
+    width: 100%;
+  }
+
+  @supports (field-sizing: content) {
+    &:is(textarea):not([rows]) {
+      field-sizing: content;
+      min-height: calc(var(--dsc-input-size) * 1.5); /* Set a min-height to indicate this is a <textarea> and not an <input> */
+      resize: none;
+    }
+  }
+
+  /**
+  * States
+  */
+  @media (hover: hover) and (pointer: fine) {
+    /* Using [readonly] since checkbox and radio is always :read-only */
+    &:not(:focus-visible, :disabled, [aria-disabled='true'], [readonly]):hover {
+      --dsc-input-border-color: var(--dsc-input-border-color--hover);
+      --dsc-input-box-shadow: var(--dsc-input-box-shadow--hover);
+    }
+  }
+
+  &:checked,
+  &:indeterminate {
+    --dsc-input-background: var(--dsc-input-background--checked);
+    --dsc-input-border-color: var(--dsc-input-border-color--checked);
+
+    mask:
+      center/contain no-repeat var(--dsc-input-url) exclude,
+      linear-gradient(black, black) no-clip;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
+
+  &[readonly] {
+    --dsc-input-background: var(--dsc-input-background--readonly);
+    --dsc-input-border-color: var(--dsc-input-border-color--readonly);
+  }
+
+  &[aria-invalid='true']:not(:focus-visible) {
+    --dsc-input-background--checked: var(--dsc-input-background--checked-invalid);
+    --dsc-input-border-color: var(--dsc-input-border-color--invalid);
+    --dsc-input-box-shadow: var(--dsc-input-box-shadow--invalid);
+  }
+
+  /**
+  * Sizes
+  */
+  &[data-size='sm'] {
+    @composes ds-body-text--sm from './utilities.css';
+
+    --dsc-input-size--toggle: var(--ds-sizing-5);
+    --dsc-input-size--switch: var(--ds-sizing-11);
+    --dsc-input-size: var(--ds-sizing-10);
+    --dsc-input-padding: var(--ds-spacing-1) var(--ds-spacing-2);
+  }
+
+  &[data-size='lg'] {
+    @composes ds-body-text--lg from './utilities.css';
+
+    --dsc-input-size--toggle: var(--ds-sizing-7);
+    --dsc-input-size--switch: var(--ds-sizing-14);
+    --dsc-input-size: var(--ds-sizing-14);
+    --dsc-input-padding: var(--ds-spacing-3) var(--ds-spacing-4);
+  }
+
+  /**
+  * Toggle inputs
+  */
+  &:read-only:not([readonly]) {
+    cursor: pointer;
+  }
+
+  &[type='checkbox'],
+  &[type='radio'] {
+    border-width: var(--dsc-input-border-width--toggle);
+    height: var(--dsc-input-size--toggle);
+    padding: 0;
+    width: var(--dsc-input-size--toggle);
+  }
+
+  &[type='radio'] {
+    --dsc-input-url: var(--dsc-input-url--radio);
+
+    border-radius: var(--ds-border-radius-full);
+  }
+
+  &[type='checkbox'] {
+    --dsc-input-url: var(--dsc-input-url--checkbox);
+  }
+
+  &[type='checkbox']:indeterminate {
+    --dsc-input-url: var(--dsc-input-url--indeterminate);
+  }
+
+  &[role='switch']:where([type='radio'], [type='checkbox']) {
+    --inner-size: calc(var(--dsc-input-size--toggle) - var(--dsc-input-border-width--toggle) * 2);
+
+    border-radius: var(--ds-border-radius-full);
+    height: var(--dsc-input-size--toggle);
+    width: var(--dsc-input-size--switch);
+    mask:
+      content-box left/0 no-repeat var(--dsc-input-url--checkbox) exclude,
+      linear-gradient(black, black) no-clip exclude,
+      content-box radial-gradient(circle closest-side, currentcolor 95%, transparent 100%) left/var(--inner-size) no-repeat;
+
+    &:checked {
+      mask-position: right;
+      mask-size: contain, cover, var(--inner-size); /* right align radial-gradient */
+    }
+
+    &:indeterminate {
+      mask-position: center;
+    }
+  }
+}
+
+/**
+  * Addons
+  */
+.ds-input-addons {
+  --dsc-input-addons-border-radius: var(--ds-border-radius-md);
+  --dsc-input-addons-border: 1px solid var(--ds-color-neutral-border-default);
+  --dsc-input-addons-padding: var(--ds-spacing-4);
+
+  align-items: center;
+  background: var(--ds-color-neutral-background-subtle);
+  border-radius: var(--dsc-input-addons-border-radius);
+  box-sizing: border-box;
+  color: var(--ds-color-neutral-text-subtle);
+  display: flex;
+  gap: var(--dsc-input-addons-padding);
+  padding-inline: var(--dsc-input-addons-padding);
+  position: relative;
+  white-space: nowrap;
+
+  /* Using ::before to make input border overlap addons border */
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: '';
+    border: var(--dsc-input-addons-border);
+    border-radius: inherit;
+  }
+
+  @composes ds-body-text--md from './utilities.css';
+
+  .ds-input.ds-input {
+    border-radius: 0;
+    flex: 0 1 auto;
+  }
+
+  &:has([data-size='sm']) {
+    @composes ds-body-text--sm from './utilities.css';
+
+    --dsc-input-addons-padding: var(--ds-spacing-3);
+  }
+
+  &:has([data-size='lg']) {
+    @composes ds-body-text--lg from './utilities.css';
+
+    --dsc-input-addons-padding: var(--ds-spacing-5);
+  }
+}

packages/react/src/components/form/Input/Input.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
+
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories} />
+
+# Input
+
+`Input` kalles tekstfelt på norsk. Det er et inndatafelt som for eksempel gir brukerne mulighet til å skrive korte tekster eller tall.
+
+<Primary />
+<Controls />
+
+## Prefix/Suffix
+
+Prefixer og suffixer er nyttige for å vise enheter, valuta eller andre typer informasjon som er relevant for feltet.
+Du skal **ikke** bruke disse alene, siden skjermlesere ikke leser dem opp.
+Det er viktig at samme informasjon som vises i prefixet eller suffixet også er inkludert i ledeteksten.
+
+<Canvas of={InputStories.Adornments} />
+
+## Kontrollert
+
+<Canvas of={InputStories.Controlled} />
+
+## Html Size
+
+<Canvas of={InputStories.HtmlSize} />
+
+## Retningslinjer for når du skal bruke `Input`
+
+Vi bruker tekstfelt når vi vil gi brukeren mulighet til å skrive tekst/svar på maks. én linje, Det kan for eksempel være navn eller telefonnummer.
+
+Passer til å
+
+- gi mulighet for korte tekster eller svar
+- legge inn tall, for eksempel et telefonnummer
+
+Passer ikke til å
+
+- gi lengre svar, bruk heller `Textarea`
+- legge inn formaterte data, som markdown
+  <br />
+
+### Plassering av ledeteksten
+
+Ledeteksten og en eventuell beskrivelse skal alltid stå over tekstfeltet. Da er de lette å se på små skjermer og hindres ikke av eventuelle feilmeldinger.
+
+### Unngå plassholdertekster
+
+Plassholdertekster forsvinner når brukerne skriver i feltet. Det er derfor bedre å inkludere hint og viktig informasjon i selve ledeteksten eller den tilhørende beskrivelsen.
+
+### Tilpass bredden på tekstfeltet
+
+Tilpass bredden til det brukerne skal skrive inn, kort bredde til telefonnummer og bredere til stedsnavn. Ulik bredde på feltene gjør det enklere å navigere i skjemaer som har mange felter.
+
+### Inndata og formatering
+
+- Bruk `autoComplete` for felter som mottar personlig informasjon. Hvis feltet skal be om personopplysninger om en annen person enn brukeren, må du skru `autoComplete` av (WCAG 1.3.5).
+- Bruk gjerne inndatatyper som viser hva du ber om, for eksempel telefonnummer og e-post. Slike inndatatyper gir mobilbrukere et tastatur som passer til det de skal angi, for eksempel et numerisk tastatur for telefonnummer, men de kan også utløse validering på klientsiden.
+- Godta det meste av inndata fra brukerne, så lenge det er forståelig. Eksempler kan være kontonummer med punktum, telefonnummer med mellomrom eller mellomrom på slutten av en e-postadresse.
+- Pass på at brukerne ser inndata som formateres automatisk, men uten at det forstyrrer dem mens de fyller ut.
+- Ikke bruk bare store bokstaver eller kursiv tekst i ledeteksten. Det er vanskelig å lese.
+
+## Tekst i komponenten
+
+Det skal alltid være ledetekst på `Input`. I spesielle tilfeller kan vi skjule ledeteksten med `hidelabel`. Det kan for eksempel være i tabeller, hvis feltet får ledeteksten fra tabelloverskriften. Selv om vi har tenkt å skjule ledeteksten, må vi alltid skrive en ledetekst som gir mening, siden den leses opp av skjermlesere.
+
+## Tilgjengelighet
+
+### Ikke bruk deaktiverte felt
+
+Ikke bruk deaktivert tilstand (disabled state) på tekstfelt. Tenk heller over om du trenger å vise feltet i det hele tatt, eller om du heller kan skrive informasjonen ut i ren tekst eller bruke Read Only.
+
+### Prefiks og suffiks
+
+Prefiks og suffiks er et ekstra visuelt hjelpemiddel, som blir ignorert av skjermlesere. Vi må alltid ha en beskrivende ledetekst. Prefiks og suffiks er plassert utenfor inndatafeltene de tilhører. Da unngår vi at de ikke skaper trøbbel i noen nettlesere, som kan sette inn et ikon i inndatafeltet (for eksempel ikoner for å vise eller lage passord).