262 support for icons in text input

packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts

@@ -182,21 +182,58 @@ export class FhiTextInput extends LitElement {
     this._internals.setFormValue(this.value);
   }
 
+  private _handleStartSlotChange(event: Event): void {
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
+    }
+  }
+
+  private _handleEndSlotChange(event: Event): void {
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
+
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingRight = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
+    }
+  }
+
   render() {
     return html`
       ${this.label && html`<label for="input-element">${this.label}</label>`}
       ${this.helpText ? html`<p class="help-text">${this.helpText}</p>` : ''}
-      <input
-        id="input-element"
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        .value=${this.value}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @keydown=${this.handleKeyDown}
-      />
+      <div class="input-container">
+        <input
+          id="input-element"
+          name=${ifDefined(this.name)}
+          placeholder=${ifDefined(this.placeholder)}
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+        />
+        <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
+        <slot name="end" @slotchange=${this._handleEndSlotChange}> </slot>
+      </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
     `;
   }
@@ -347,6 +384,18 @@ export class FhiTextInput extends LitElement {
         }
       }
 
+      slot[name='start'] {
+        color: var(--fhi-color-neutral-text-subtle);
+      }
+
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-subtle);
+      }
+      input:not([disabled]):not([readonly]):active ~ slot[name='start'],
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-default);
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -364,6 +413,34 @@ export class FhiTextInput extends LitElement {
         letter-spacing: var(--typography-help-text-letter-spacing);
         margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
       }
+
+      .input-container {
+        position: relative;
+        width: fit-content;
+      }
+
+      slot[name='start'] {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        height: fit-content;
+        pointer-events: none;
+      }
+
+      slot[name='end'] {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: 8px;
+        height: fit-content;
+        pointer-events: none;
+        color: var(--fhi-color-neutral-text-subtle);
+      }
     }
 
     :host([disabled]) {
@@ -406,6 +483,16 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
+      slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+
+      input:hover ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      input:focus ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 }

packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx

@@ -29,6 +29,16 @@ Text Input lar brukere skrive inn data, slik som navn, telefonnumre og e-postadr
 Uttrykker at noe mangler eller er skrevet feil.
 <Canvas of={FhiTextInputStories.Error} />
 
+### Ikon
+
+Ikon kan settes til venstre i feltet for å gi visuelle signaler om hvilken data man etterspør. Noen eksempler kan være en konvolutt for e-postadresse, en nøkkel eller lås for passord og bruker for navn eller brukernavn. 
+
+Bruk ikon med omhu. Ethvert ikon er et nytt visuelt element som brukeren må forholde seg til. Det kan bli mange på skjermen samtidig, noe som kan føles unødvendig travelt ut. 
+
+Hvis ikonet skal være knyttet til en handling, settes det til høyre. Dette kan for eksempel være å la brukeren nullstille verdien eller vise og skjule passordet man skriver inn. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
+
+<Canvas of={FhiTextInputStories.WithIcon} />
+
 ### Form Controls
 #### `readonly`
 Gjør at feltet ikke kan endres. Feltet vil fortsatt kunne fokuseres og vil automatisk bli inkludert i FormData.

packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts

@@ -6,8 +6,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { FhiStorybookMeta } from '../../../.storybook/fhi-meta';
 import { FhiTextInput } from './fhi-text-input.component';
+import { FhiIconUser } from '../icons/fhi-icon-user.component';
+import { FhiIconSearch } from '../icons/fhi-icon-search.component';
 
 new FhiTextInput();
+new FhiIconUser();
+new FhiIconSearch();
 
 const meta: FhiStorybookMeta<FhiTextInput> = {
   title: 'Komponenter/Text Input',
@@ -32,8 +36,25 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
         valueLocation: ['event.target.value'],
       },
     ],
+    slotTypes: [
+      {
+        name: 'start',
+        description: 'Ikon på venstre side i inputfeltet.',
+      },
+      {
+        name: 'end',
+        description: 'Ikon på høyre side i inputfeltet.',
+      },
+    ],
   },
-  decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`],
+  decorators: [
+    story =>
+      html`<div
+        style="max-width: 400px; display: flex; flex-wrap: wrap; gap: 10px;"
+      >
+        ${story()}
+      </div>`,
+  ],
   render: args =>
     html`<fhi-text-input
       label=${ifDefined(args.label)}
@@ -187,4 +208,37 @@ export const WithDisabledLabel: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  name: 'Icon',
+
+  parameters: {
+    controls: {
+      exclude: [
+        'name',
+        'value',
+        'label',
+        'message',
+        'help-text',
+        'placeholder',
+      ],
+    },
+  },
+  render: args => html`
+    <fhi-text-input
+      label="Brukernavn"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ><fhi-icon-user slot="start"></fhi-icon-user
+    ></fhi-text-input>
+    <fhi-text-input
+      label="Søk"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ><fhi-icon-search slot="end"></fhi-icon-search
+    ></fhi-text-input>
+  `,
+};
+
 export default meta;