chore(docs): textfield type story

apps/www/app/app.css

@@ -452,6 +452,19 @@
       }
     }
   }
+  /*
+  this can be used to translate text in stories in some cases instead of a seperate english story. 
+  Wrap text in <span data-lang="en">text only visible for english</span>
+  */
+  [data-lang] {
+    display: none;
+  }
+  :lang(en) [data-lang='en'] {
+    display: contents;
+  }
+  :lang(no) [data-lang='no'] {
+    display: contents;
+  }
 }
 @layer site.overrides {
   :root {

apps/www/app/content/components/textfield/en/overview.mdx

@@ -35,6 +35,10 @@ It is legally required to mark mandatory fields. Read more about [required and o
 
 <Story story="RequiredEn" />
 
+### Type
+Since `Textfield` is based on native `input`, you can use most of the `type` values that `input` supports, but we have chosen to remove some of them from our exported type. You can see the valid type values in the select menu below.
+<Story story="InputType" layout="block" />
+
 ## Guidelines
 `Input` is suitable for short, simple text.  
 `Textarea` is better for more detailed or longer responses.

apps/www/app/content/components/textfield/no/overview.mdx

@@ -38,6 +38,10 @@ Det er lovpålagt å markere påkrevde felt. Les om [obligatoriske og valgfrie f
 
 <Story story="Required" />
 
+### Type
+Siden `Textfield` er basert på native `input`, kan du bruke de fleste `type`-verdiene `input` støtter, men vi har valgt å fjerne noen av de fra vår eksporterte type. Du kan se de gyldige type verdiene i nedtrekksmenyen nedenfor.
+<Story story="InputType" layout="block" />
+
 ## Retningslinjer
 `Input` er egnet til korte tekster og svar. `Textarea` er egnet til mer utfyllende og lengre svar. 
 

apps/www/app/content/components/textfield/textfield.stories.tsx

@@ -1,4 +1,13 @@
-import { Tag, Textfield } from '@digdir/designsystemet-react';
+import {
+  Field,
+  Label,
+  Select,
+  Tag,
+  Textfield,
+  type TextfieldProps,
+} from '@digdir/designsystemet-react';
+import { ArrowRightIcon } from '@navikt/aksel-icons';
+import { useState } from 'react';
 
 export const Preview = () => {
   return <Textfield label='Label' />;
@@ -73,3 +82,48 @@ export const RequiredEn = () => (
     required
   />
 );
+
+export const InputType = () => {
+  const [type, setType] = useState<TextfieldProps['type']>('text');
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 'var(--ds-size-4)',
+        alignItems: 'end',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Field>
+        <Label>
+          <span data-lang='no'>Velg</span>
+          <span data-lang='en'>Choose</span> type
+        </Label>
+        <Select
+          defaultValue='text'
+          lang='en'
+          onChange={(e) => setType(e.target.value as TextfieldProps['type'])}
+        >
+          <Select.Option value='text'>text</Select.Option>
+          <Select.Option value='color'>color</Select.Option>
+          <Select.Option value='date'>date</Select.Option>
+          <Select.Option value='datetime-local'>datetime-local</Select.Option>
+          <Select.Option value='email'>email</Select.Option>
+          <Select.Option value='file'>file</Select.Option>
+          <Select.Option value='month'>month</Select.Option>
+          <Select.Option value='hidden'>hidden</Select.Option>
+          <Select.Option value='number'>number</Select.Option>
+          <Select.Option value='password'>password</Select.Option>
+          <Select.Option value='search'>search</Select.Option>
+          <Select.Option value='tel'>tel</Select.Option>
+          <Select.Option value='time'>time</Select.Option>
+          <Select.Option value='url'>url</Select.Option>
+          <Select.Option value='week'>week</Select.Option>
+        </Select>
+      </Field>
+      <ArrowRightIcon aria-hidden fontSize={48} />
+      <Textfield label={`type="${type}"`} type={type} />
+    </div>
+  );
+};