@navikt/ds-react 0.13.2 → 0.13.3

package/src/form/radio/stories/radio.stories.mdx

@@ -49,6 +49,8 @@ Man kan både sette en description på RadioGroup og selve Radio
 
 ## Errors
 
+Feilmeldinger kan bare settes på gruppa
+
 ```jsx
 <RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
   <Radio value="Apple">Apple</Radio>
@@ -65,37 +67,9 @@ Man kan både sette en description på RadioGroup og selve Radio
   </RadioGroup>
 </Canvas>
 
-## Errors uten errorPropagation
-
-```jsx
-<RadioGroup
-  legend="Mollit eiusmod"
-  errorPropagation={false}
-  error="Boks nr 2 må være valgt"
->
-  <Radio value="Apple">Apple</Radio>
-  <Radio value="Orange">Orange</Radio>
-  <Radio value="Melon">Melon</Radio>
-</RadioGroup>
-```
-
-<Canvas>
-  <RadioGroup
-    legend="Mollit eiusmod"
-    errorPropagation={false}
-    error="Boks nr 2 må være valgt"
-  >
-    <Radio value="Apple">Apple</Radio>
-    <Radio value="Orange" error="Boksen må være valgt">
-      Orange
-    </Radio>
-    <Radio value="Melon">Melon</Radio>
-  </RadioGroup>
-</Canvas>
-
 ## Sizing
 
-Radioer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
+Radioknapper har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
 
 ```jsx
 <RadioGroup

package/src/form/radio/stories/radio.stories.tsx

@@ -7,78 +7,47 @@ export default {
 } as Meta;
 
 export const All = () => {
+  const Radios = (props) => (
+    <RadioGroup
+      legend="Mollit eiusmod"
+      description={<div>"Exercitation do labore"</div>}
+      {...props}
+    >
+      <Radio value="Apple">Apple</Radio>
+      <Radio value="Orange" description="Laborum ad">
+        Orange
+      </Radio>
+      <Radio value="Orange" description={<div>Laborum ad</div>}>
+        Orange
+      </Radio>
+      <Radio value="Melon">Melon</Radio>
+    </RadioGroup>
+  );
+
   return (
     <>
-      <h1>Radios</h1>
-      <RadioGroup legend="Mollit eiusmod">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>description</h2>
-      <RadioGroup
-        legend="Mollit eiusmod"
-        description={<div>Exercitation do labore</div>}
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" description={<div>Laborum ad</div>}>
-          Orange
-        </Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>error</h2>
-      <RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>error uten errorPropagation</h2>
-      <RadioGroup
-        legend="Mollit eiusmod"
-        errorPropagation={false}
-        error="Boks nr 2 må være valgt"
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" error="Boksen må være valgt">
-          Orange
-        </Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>Sizing</h2>
-      <RadioGroup
-        legend="Mollit eiusmod"
-        error="Boks nr 2 må være valgt"
-        size="small"
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>defaultValue</h2>
-      <RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>hideLenged</h2>
-      <RadioGroup legend="Mollit eiusmod" hideLegend>
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
+      <h1>Radio group</h1>
+      <Radios />
+      <h2>Error</h2>
+      <Radios error="Dette er en feilmelding" />
+      <h2>Small</h2>
+      <Radios size="small" />
+      <h2>Small + error</h2>
+      <Radios size="small" error="Dette er en feilmelding" />
+      <h2>Default value</h2>
+      <Radios defaultValue="Orange" />
       <h2>Disabled</h2>
-      <RadioGroup legend="Mollit eiusmod" disabled>
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <RadioGroup legend="Mollit eiusmod">
+      <RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
         <Radio value="Apple" disabled>
           Apple
         </Radio>
-        <Radio value="Orange">Orange</Radio>
+        <Radio value="Orange" description="Laborum ad" disabled>
+          Orange
+        </Radio>
         <Radio value="Melon">Melon</Radio>
       </RadioGroup>
+      <h2>Disabled group</h2>
+      <Radios disabled />
     </>
   );
 };

package/src/form/radio/useRadio.ts

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useFormField } from "../useFormField";
 import { RadioProps } from "./Radio";
 import { RadioGroupContext } from "./RadioGroup";
+import { omit } from "../..";
 
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(props, "radio");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "radio"
+  );
 
   if (!radioGroup) {
     console.warn("<Radio> must be used inside <RadioGroup>.");

package/src/form/search-field/SearchField.tsx

@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           "navds-form-field",
           `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
-          { "navds-search-field--error": hasError }
+          {
+            "navds-search-field--error": hasError,
+            "navds-search-field--disabled": !!inputProps.disabled,
+          }
         )}
       >
         <Label

package/src/form/search-field/stories/search-field.stories.tsx

@@ -170,6 +170,30 @@ export const All = () => {
           <SearchField.Input />
         </SearchField>
       </Fieldset>
+
+      <h2>Disabled </h2>
+      <SearchField
+        disabled
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <Fieldset legend="Filter" disabled>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          error="Errormsg"
+        >
+          <SearchField.Input />
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+        </SearchField>
+      </Fieldset>
     </>
   );
 };

package/src/form/stories/text-field.stories.tsx

@@ -55,6 +55,25 @@ export const All = () => {
         description="Cillum mollit"
         disabled
       />
+      <TextField
+        size="small"
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        disabled
+      />
+      <h2>Readonly</h2>
+
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        readOnly
+      />
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        size="small"
+        readOnly
+      />
     </div>
   );
 };

package/src/form/stories/textarea.stories.tsx

@@ -78,7 +78,17 @@ export const All = () => {
         description="Reprehenderit esse proident"
         maxLength={400}
         disabled
-        value={value}
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
+        onChange={handleChange}
+      />
+      <h2>Readonly</h2>
+
+      <Textarea
+        label="In anim elit"
+        description="Reprehenderit esse proident"
+        maxLength={400}
+        readOnly
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
         onChange={handleChange}
       />
     </div>