style: legger til stiler og dokumentasjon for disabled states

packages/jokul/src/components/text-input/stories/TextInput.stories.tsx

@@ -1,4 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { CopyIcon } from "../../icon/index.js";
+import { IconButton } from "../../icon-button/IconButton.js";
+import { PopupTip } from "../../tooltip/PopupTip.js";
 import { TextInput as TextInputComponent } from "../TextInput.js";
 import "../styles/_index.scss";
 
@@ -135,6 +139,14 @@ export const TextInput: Story = {
                 },
             },
         },
+        helpLabel: {
+            control: "text",
+            table: {
+                defaultValue: {
+                    summary: undefined,
+                },
+            },
+        },
         "data-testautoid": {
             table: {
                 defaultValue: {
@@ -155,6 +167,28 @@ export const TextInput: Story = {
         defaultValue: "Ditt innhold",
         inputClassName: "input-klasse",
         "data-testautoid": "test-id",
+        helpLabel: "Din hjelpetekst",
+    },
+};
+
+export const Error: Story = {
+    name: "Feilhåndtering",
+    args: {
+        label: "Hva heter du?",
+        placeholder: "Kai Jakk",
+        errorLabel: "Dette feltet må fylles ut",
+    },
+};
+
+/**
+ * Valgfrie felter burde markeres med valgfritt i label.
+ */
+export const ValgfrittFelt: Story = {
+    name: "Valgfritt felt",
+    args: {
+        label: "Hva liker du å spise til middag? (Valgfritt)",
+        placeholder: "Hamburger",
+        maxLength: 30,
     },
 };
 
@@ -165,10 +199,92 @@ export const TextInput: Story = {
 export const UnitAlign: Story = {
     name: "Unit + Align",
     args: {
-        label: "Boareal",
+        label: "Alder på sjåfør",
         align: "right",
+        maxLength: 12,
+        placeholder: "23",
+        unit: "år",
+    },
+};
+
+/**
+ * Tooltip kan brukes dersom du har informasjon som er overflødig for mange brukere.
+ *
+ * Merk at tooltip ikke arver disabled attributten fra TextInput, og derfor må settes selvstendig.
+ */
+export const Tooltip: Story = {
+    name: "Tooltip",
+    args: {
+        label: "Hva er buttoarealet til boligen?",
         maxLength: 20,
+        align: "right",
+        unit: "kvm",
+        tooltip: (
+            <PopupTip
+                content="Bruttoareal er arealet av hele boligen. 
+            Er du usikker finner du dette i bolgens takst- eller salgsrapport."
+            />
+        ),
+    },
+};
+
+/**
+ * Deaktiverte felter kan være med å få ned mengden layout shift samtidig som du gir et hint om mulighetene
+ * i systemet brukeren sitter i.
+ *
+ * Merk at disse feltene:
+ * - ikke vil bli lest opp av skjermlesere
+ * - ikke blir tatt med i skjemaet brukeren fyller ut, dersom du bruker vanlig skjemaoppførsel
+ *
+ * Dersom brukeren trenger denne funksjonaliteten bruk heller et avlesningsfelt (read only).
+ */
+export const Disabled: Story = {
+    name: "Disabled",
+    args: {
+        label: "Avkortning",
+        align: "right",
+        maxLength: 8,
         placeholder: "50",
-        unit: "kvadratmeter",
+        unit: "%",
+        disabled: true,
+    },
+};
+
+/**
+ * Avlesningsfelt er nyttig når brukeren trenger å se verdien i et felt uten å kunne endre den.
+ * Hvis verdien ikke skal bli tatt med i skjemaet bruk heller disabled state.
+ */
+export const ReadOnly: Story = {
+    name: "Read only",
+    args: {
+        label: "Saksbehandler",
+        maxLength: 20,
+        value: "[email protected]",
+        readOnly: true,
+    },
+};
+
+/**
+ * Dersom du har felter med handlinger knytta til seg kan du legge til en `actionButton` for å koble dem sammen
+ * visuelt. Funksjonaliteten for å kopiere må teamene lage selv.
+ *
+ * Merk at actionButton ikke arver disabled attributten fra TextInput, og derfor må settes selvstendig.
+ */
+export const ActionButton: Story = {
+    name: "Handling",
+    args: {
+        label: "Saksbehandler",
+        maxLength: 20,
+        defaultValue: "[email protected]",
+        readOnly: true,
+        actionButton: (
+            <IconButton
+                onClick={() => {
+                    navigator.clipboard.writeText("[email protected]");
+                }}
+            >
+                <CopyIcon />
+            </IconButton>
+        ),
     },
 };

packages/jokul/src/components/text-input/styles/text-input.scss

@@ -9,6 +9,9 @@
 }
 
 .jkl-text-input {
+    --color-text-disabled: color(
+        from #{jkl.$color-text-default} srgb r g b / 0.4
+    );
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -40,4 +43,24 @@
         vertical-align: middle;
         margin: jkl.rem(-2px) jkl.rem(4px);
     }
+
+    &:has(input[disabled], input[readonly]) {
+        .jkl-label {
+            &::before {
+                font-family: "Fremtind Material Symbols", Arial, Helvetica,
+                    sans-serif;
+                content: "lock" / "";
+                margin-inline-end: jkl.$spacing-xs;
+                vertical-align: text-bottom;
+                line-height: 23px; // Unngår layout shift mellom default og read only
+            }
+        }
+    }
+
+    &:has(input[disabled]) {
+        *,
+        ::placeholder {
+            color: var(--color-text-disabled);
+        }
+    }
 }

packages/jokul/src/shared/input/styles/shared-input-styles.scss

@@ -95,6 +95,10 @@ $_text-input-selection-color--inverted: color.scale(
 }
 
 @mixin wrapper-styles {
+    --color-background-disabled: hsl(
+        from #{jkl.$color-text-default} h s l / 0.1
+    );
+
     border-radius: jkl.rem(3px);
     box-sizing: border-box;
     max-width: 100%;
@@ -179,6 +183,17 @@ $_text-input-selection-color--inverted: color.scale(
     @include jkl.forced-colors-mode {
         border: jkl.rem(2px) inset ButtonText;
     }
+
+    &:has(input[disabled], input[readonly]) {
+        background-color: var(--color-background-disabled);
+        box-shadow: unset;
+    }
+
+    &:has(input[disabled]) {
+        input {
+            cursor: not-allowed;
+        }
+    }
 }
 
 @mixin input-styles {