@navikt/ds-react 0.14.10-next.0 → 0.14.13

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

@@ -1,8 +1,9 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { SearchField } from "../index";
 
-import { Table } from "@navikt/ds-react";
-import { Header } from "@navikt/ds-react-internal";
+import { Example } from "./search-field-example.tsx";
+
+import { Search } from "@navikt/ds-icons";
 
 <Meta title="ds-react/form/search-field/intro" />
 
@@ -15,47 +16,24 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 ## Bruk
 
 ```jsx
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-/>
-```
-
-<Canvas>
-  <div style={{ width: 300 }}>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-    />
-  </div>
-</Canvas>
-
-## Inverted
-
-```jsx
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
-  inverted
-/>
+<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
+  <SearchField.Input />
+  <SearchField.Button>
+    <Search /> Søk
+  </SearchField.Button>
+</SearchField>
 ```
 
 <Canvas>
-  <div
-    style={{
-      width: 300,
-      padding: "1rem",
-      background: "var(--navds-global-color-gray-900)",
-    }}
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
   >
-    <SearchField
-      inverted
-      hideLabel
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-    />
-  </div>
+    <SearchField.Input />
+    <SearchField.Button>
+      <Search /> Søk
+    </SearchField.Button>
+  </SearchField>
 </Canvas>
 
 ## hideLabel
@@ -68,41 +46,25 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   label="Mollit eiusmod"
   description="Ea cupidatat eu sunt commodo"
   hideLabel
-/>
-```
-
-<Canvas>
-  <div style={{ width: 300 }}>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-    />
-  </div>
-</Canvas>
-
-## Uten "clear"-button
-
-Fjerner "lukke"-knapp som dukker opp når feltet ikke er tomt.
-
-```jsx
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
-  clearButton={false}
-/>
+>
+  <SearchField.Input />
+  <SearchField.Button>
+    <Search /> Søk
+  </SearchField.Button>
+</SearchField>
 ```
 
 <Canvas>
-  <div style={{ width: 300 }}>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-      clearButton={false}
-    />
-  </div>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+    hideLabel
+  >
+    <SearchField.Input />
+    <SearchField.Button>
+      <Search /> Søk
+    </SearchField.Button>
+  </SearchField>
 </Canvas>
 
 ## Sizing
@@ -113,113 +75,82 @@ Fjerner "lukke"-knapp som dukker opp når feltet ikke er tomt.
   description="Ea cupidatat eu sunt commodo"
   hideLabel
   size="small"
-/>
+>
+  <SearchField.Input />
+  <SearchField.Button>
+    <Search /> Søk
+  </SearchField.Button>
+</SearchField>
 ```
 
 <Canvas>
-  <div style={{ width: 300 }}>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-      size="small"
-    />
-  </div>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+    hideLabel
+    size="small"
+  >
+    <SearchField.Input />
+    <SearchField.Button>
+      <Search /> Søk
+    </SearchField.Button>
+  </SearchField>
 </Canvas>
 
-## Disabled
+## Errors
 
 ```jsx
 <SearchField
-  disabled
   label="Mollit eiusmod"
   description="Ea cupidatat eu sunt commodo"
   hideLabel
-
-/>
-<SearchField
-  disabled
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
-  size="small"
-/>
+  error="Error message"
+>
+  <SearchField.Input />
+  <SearchField.Button>
+    <Search /> Søk
+  </SearchField.Button>
+</SearchField>
 ```
 
 <Canvas>
-  <div style={{ width: 300 }}>
-    <SearchField
-      disabled
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-    />
-  </div>
   <SearchField
-    disabled
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
     hideLabel
-    size="small"
-  />
+    error="Error message"
+  >
+    <SearchField.Input />
+    <SearchField.Button>
+      <Search /> Søk
+    </SearchField.Button>
+  </SearchField>
 </Canvas>
 
-## Table
+## ClearButton
 
-<Canvas>
-  <Table>
-    <Table.Body>
-      <Table.Row>
-        <Table.HeaderCell scope="col">
-          <SearchField
-            label="Mollit eiusmod"
-            description="Ea cupidatat eu sunt commodo"
-            hideLabel
-          />
-        </Table.HeaderCell>
-      </Table.Row>
-      <Table.Row>
-        <Table.HeaderCell scope="col">Name</Table.HeaderCell>
-        <Table.HeaderCell scope="col">Age</Table.HeaderCell>
-        <Table.HeaderCell scope="col">Country</Table.HeaderCell>
-        <Table.HeaderCell scope="col">Points</Table.HeaderCell>
-      </Table.Row>
-      <Table.Row>
-        <Table.HeaderCell scope="row">
-          Donald SmithDonald Smith
-        </Table.HeaderCell>
-        <Table.DataCell>32</Table.DataCell>
-        <Table.DataCell>USA</Table.DataCell>
-        <Table.DataCell>38</Table.DataCell>
-      </Table.Row>
-      <Table.Row>
-        <Table.HeaderCell scope="row">Preben Aalborg</Table.HeaderCell>
-        <Table.DataCell>44</Table.DataCell>
-        <Table.DataCell>Denmark</Table.DataCell>
-        <Table.DataCell>11</Table.DataCell>
-      </Table.Row>
-      <Table.Row>
-        <Table.HeaderCell scope="row">Rudolph Bachenmeier</Table.HeaderCell>
-        <Table.DataCell>32</Table.DataCell>
-        <Table.DataCell>Germany</Table.DataCell>
-        <Table.DataCell>70</Table.DataCell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-</Canvas>
+Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
+kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
+Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
+den når inputvalue ikke er empty.
 
-## Header
-
-<Header>
-  <Header.Title href="#">NAV Sykepenger</Header.Title>
-  <div style={{ margin: "auto 1rem auto auto" }}>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-      size="small"
-      inverted
-    />
+```jsx
+<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
+  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
+  {!!value && (
+    <SearchField.Clear onClick={() => setValue("")}>
+      <Close /> Tøm
+    </SearchField.Clear>
+  )}
+  <SearchField.Button>
+    <Search /> Søk
+  </SearchField.Button>
+</SearchField>
+```
+
+<Canvas>
+  <div>
+    <Example />
+    <Example size="small" />
   </div>
-  <Header.User name="Ola Normann" />
-</Header>
+</Canvas>

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

@@ -1,77 +1,174 @@
-import { Meta } from "@storybook/react/types-6-0";
 import React, { useState } from "react";
-import { Fieldset } from "../..";
+import { Meta } from "@storybook/react/types-6-0";
+import { Close, Search } from "@navikt/ds-icons";
 import { SearchField } from "../index";
+import { Fieldset } from "../..";
 export default {
   title: "ds-react/form/search-field",
   component: SearchField,
 } as Meta;
 
 export const All = () => {
-  const [value, setValue] = useState("");
+  const [show, setShow] = useState(false);
   return (
     <>
       <h1>SearchField</h1>
-      <div>
-        <SearchField label="Mollit eiusmod" />
-        <SearchField
-          label="Mollit eiusmod"
-          description={<div>Ea cupidatat eu sunt commodo</div>}
-        />
-      </div>
+      <SearchField
+        label="Mollit eiusmod"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+        <SearchField.Input />
+      </SearchField>
+
+      <h1>SearchField w clearsearch</h1>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Input />
+        <SearchField.Clear>
+          <Close />
+        </SearchField.Clear>
+        <SearchField.Button onClick={() => setShow(!show)}>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+        <SearchField.Clear>
+          <Close /> Tøm
+        </SearchField.Clear>
+        <SearchField.Input />
+      </SearchField>
 
       <h2>Hidelabel</h2>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         hideLabel
-      />
-
-      <h2>Inverted</h2>
-      <div
-        style={{
-          width: 300,
-          padding: "1rem",
-          background: "var(--navds-global-color-gray-900)",
-        }}
       >
-        <SearchField
-          label="Mollit eiusmod"
-          description="Ea cupidatat eu sunt commodo"
-          hideLabel
-          inverted
-        />
-        <br />
-        <SearchField
-          label="Mollit eiusmod"
-          description="Ea cupidatat eu sunt commodo"
-          hideLabel
-          inverted
-          value="Søketekst"
-        />
-      </div>
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+        <SearchField.Input />
+      </SearchField>
 
       <h2>SearchField small</h2>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         size="small"
-      />
-      <br />
+      >
+        <SearchField.Button>
+          <Search />
+          <span className="navds-sr-only">Søk</span>
+        </SearchField.Button>
+        <SearchField.Input />
+      </SearchField>
+
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         size="small"
-        hideLabel
-      />
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search />
+          <span className="navds-sr-only">Søk</span>
+        </SearchField.Button>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="small"
+      >
+        <SearchField.Button>
+          <Search />
+          <span className="navds-sr-only">Søk</span>
+        </SearchField.Button>
+        <SearchField.Clear>
+          <Close /> Tøm
+        </SearchField.Clear>
+        <SearchField.Input />
+      </SearchField>
+
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="small"
+      >
+        <SearchField.Input />
+        <SearchField.Clear>
+          <Close /> Tøm
+        </SearchField.Clear>
+        <SearchField.Button>
+          <Search />
+          <span className="navds-sr-only">Søk</span>
+        </SearchField.Button>
+      </SearchField>
+
+      <h2>SearchField w error</h2>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        error="Errormsg"
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        error="Errormsg"
+      >
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+        <SearchField.Input />
+      </SearchField>
 
       <h2>SearchField in Fieldset</h2>
       <Fieldset legend="Filter" error="Fieldset-error-msg">
         <SearchField
           label="Mollit eiusmod"
           description="Ea cupidatat eu sunt commodo"
+          error="Errormsg"
           hideLabel
-        />
+        >
+          <SearchField.Input />
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+        </SearchField>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          hideLabel
+        >
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+          <SearchField.Input />
+        </SearchField>
       </Fieldset>
 
       <h2>Disabled </h2>
@@ -79,29 +176,24 @@ export const All = () => {
         disabled
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
-      />
-      <h2>Controlled state </h2>
-      <SearchField
-        value={value}
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        onChange={(e) => setValue(e)}
-        onClear={() => setValue("")}
-      />
-      <h3>Controlled state no clear</h3>
-      <SearchField
-        value={value}
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        onChange={(e) => setValue(e)}
-      />
-      <h2>No clear button</h2>
-      <SearchField
-        hideLabel
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        clearButton={false}
-      />
+      >
+        <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/loader/stories/loader.stories.mdx

@@ -63,25 +63,3 @@ Bakgrunnen kan settes til transparent med `transparent={true}`
 <Canvas>
   <Loader size="2xlarge" transparent />
 </Canvas>
-
-## Bruk av loader i knapper
-
-Husk her å gi brukeren nok informasjon om hvorfor knappen har en Loader. Dette kan gjøres ved å ha god tekst på siden,
-i knappen og i `title`-proppen for `Loader`. Unngå også bruk av `Loader` uten noen tekst som hinter til hva som foregår.
-
-Stylingen er overstyrt for knapper, slik at `transparent` ikke fungerer by-default ved bruk i knapper.
-Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loaderen rett inn i knappen.
-
-```jsx
-<Button>
-  Laster inn nytt innhold...
-  <Loader />
-</Button>
-```
-
-<Canvas>
-  <Button>
-    Laster inn nytt innhold...
-    <Loader />
-  </Button>
-</Canvas>

package/src/modal/Modal.tsx

@@ -28,6 +28,11 @@ export interface ModalProps {
    * User defined classname for modal
    */
   className?: string;
+  /**
+   * Toggles addition of a X-button on modal
+   * @default true
+   */
+  closeButton?: boolean;
 }
 
 interface ModalComponent
@@ -50,6 +55,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
       onClose,
       className,
       shouldCloseOnOverlayClick = true,
+      closeButton = true,
       ...rest
     },
     ref
@@ -77,18 +83,19 @@ const Modal = forwardRef<ReactModal, ModalProps>(
         onRequestClose={(e) => onModalCloseRequest(e)}
       >
         {children}
-        <Button
-          className={cl("navds-modal__button", {
-            "navds-modal__button--shake": shouldCloseOnOverlayClick,
-          })}
-          size="small"
-          variant="secondary"
-          ref={buttonRef}
-          aria-label="lukk modalvindu"
-          onClick={onClose}
-        >
-          <Close title="X-ikon for å lukke modal" />
-        </Button>
+        {closeButton && (
+          <Button
+            className={cl("navds-modal__button", {
+              "navds-modal__button--shake": shouldCloseOnOverlayClick,
+            })}
+            size="small"
+            variant="tertiary"
+            ref={buttonRef}
+            onClick={onClose}
+          >
+            <Close title="Lukk modalvindu" />
+          </Button>
+        )}
       </ReactModal>
     );
   }

package/src/modal/stories/modal.stories.tsx

@@ -11,6 +11,7 @@ Modal.setAppElement("#root");
 export const All = () => {
   const [open, setOpen] = useState(true);
   const [openTwo, setOpenTwo] = useState(false);
+  const [openThree, setOpenThree] = useState(false);
 
   return (
     <>
@@ -46,6 +47,21 @@ export const All = () => {
           </p>
         </Modal.Content>
       </Modal>
+      <button onClick={() => setOpenThree(true)}>
+        Open modal without x-button
+      </button>
+      <Modal
+        open={openThree}
+        closeButton={false}
+        onClose={() => setOpenThree(false)}
+      >
+        <Modal.Content>
+          <h1>Header</h1>
+          <h2>subheader</h2>
+          <p>Cupidatat irure ipsum veniam ad in esse.</p>
+          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+        </Modal.Content>
+      </Modal>
     </>
   );
 };