@navikt/ds-react 0.7.4 → 0.8.0

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Meta } from "@storybook/react/types-6-0";
 import { Close, Search } from "@navikt/ds-icons";
 import {
@@ -14,6 +14,7 @@ export default {
 } as Meta;
 
 export const All = () => {
+  const [show, setShow] = useState(false);
   return (
     <>
       <h1>SearchField</h1>
@@ -23,7 +24,7 @@ export const All = () => {
       >
         <SearchFieldInput />
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
       </SearchField>
       <SearchField
@@ -31,7 +32,7 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
       >
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
         <SearchFieldInput />
       </SearchField>
@@ -41,9 +42,12 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput clearSearch />
-        <SearchFieldButton>
-          <Search /> <span>Søk</span>
+        <SearchFieldInput />
+        <SearchFieldClearButton>
+          <Close />
+        </SearchFieldClearButton>
+        <SearchFieldButton onClick={() => setShow(!show)}>
+          <Search /> Søk
         </SearchFieldButton>
       </SearchField>
       <SearchField
@@ -51,10 +55,10 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
       >
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
         <SearchFieldClearButton>
-          <Close /> <span>Tøm</span>
+          <Close /> Tøm
         </SearchFieldClearButton>
         <SearchFieldInput />
       </SearchField>
@@ -66,7 +70,7 @@ export const All = () => {
         hideLabel
       >
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
         <SearchFieldInput />
       </SearchField>
@@ -75,7 +79,7 @@ export const All = () => {
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
-        size="s"
+        size="small"
       >
         <SearchFieldButton>
           <Search />
@@ -87,7 +91,7 @@ export const All = () => {
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
-        size="s"
+        size="small"
       >
         <SearchFieldInput />
         <SearchFieldButton>
@@ -95,6 +99,35 @@ export const All = () => {
           <span className="sr-only">Søk</span>
         </SearchFieldButton>
       </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="small"
+      >
+        <SearchFieldButton>
+          <Search />
+          <span className="sr-only">Søk</span>
+        </SearchFieldButton>
+        <SearchFieldClearButton>
+          <Close /> Tøm
+        </SearchFieldClearButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="small"
+      >
+        <SearchFieldInput />
+        <SearchFieldClearButton>
+          <Close /> Tøm
+        </SearchFieldClearButton>
+        <SearchFieldButton>
+          <Search />
+          <span className="sr-only">Søk</span>
+        </SearchFieldButton>
+      </SearchField>
 
       <h2>SearchField w error</h2>
       <SearchField
@@ -104,7 +137,7 @@ export const All = () => {
       >
         <SearchFieldInput />
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
       </SearchField>
       <SearchField
@@ -113,7 +146,7 @@ export const All = () => {
         error="Errormsg"
       >
         <SearchFieldButton>
-          <Search /> <span>Søk</span>
+          <Search /> Søk
         </SearchFieldButton>
         <SearchFieldInput />
       </SearchField>
@@ -128,7 +161,7 @@ export const All = () => {
         >
           <SearchFieldInput />
           <SearchFieldButton>
-            <Search /> <span>Søk</span>
+            <Search /> Søk
           </SearchFieldButton>
         </SearchField>
         <SearchField
@@ -137,7 +170,7 @@ export const All = () => {
           hideLabel
         >
           <SearchFieldButton>
-            <Search /> <span>Søk</span>
+            <Search /> Søk
           </SearchFieldButton>
           <SearchFieldInput />
         </SearchField>

package/src/form/stories/confirmation-panel.stories.mdx

@@ -29,7 +29,7 @@ Kommer i størrelsene "m" og "s".
   checked={checked}
   onChange={() => setChecked(!checked)}
   label="Checkbox label text"
-  size="s"
+  size="small"
 >
   Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
   ut mollit voluptate exercitation nulla mollit.
@@ -37,7 +37,7 @@ Kommer i størrelsene "m" og "s".
 ```
 
 <Canvas>
-  <ConfirmationPanelExample size="s" />
+  <ConfirmationPanelExample size="small" />
 </Canvas>
 
 ## Errors

package/src/form/stories/confirmation-panel.stories.tsx

@@ -20,12 +20,12 @@ export const All = () => {
         Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
         minim ut mollit voluptate exercitation nulla mollit.
       </ConfirmationPanel>
-      <h2>size s</h2>
+      <h2>size small</h2>
       <ConfirmationPanel
         checked={checked}
         onChange={() => setChecked(!checked)}
         label="Checkbox label text"
-        size="s"
+        size="small"
       >
         Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
         minim ut mollit voluptate exercitation nulla mollit.
@@ -46,7 +46,7 @@ export const All = () => {
         onChange={() => setChecked(!checked)}
         label="Checkbox label text"
         error="Ex cupidatat do do do"
-        size="s"
+        size="small"
       >
         Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
         minim ut mollit voluptate exercitation nulla mollit.

package/src/form/stories/fieldset.stories.mdx

@@ -84,14 +84,14 @@ Fieldset justerer automatisk sizing på skjema-elementene. Man kan overstyre det
 `TextField` i eks dette eksemplet
 
 ```jsx
-<Fieldset size="s" legend="Mollit eiusmod">
+<Fieldset size="small" legend="Mollit eiusmod">
   <TextField label="Textfield label" hideLabel />
   <TextField label="Textfield label" hideLabel />
 </Fieldset>
 ```
 
 <Canvas>
-  <Fieldset size="s" legend="Mollit eiusmod" description="Dolore minim">
+  <Fieldset size="small" legend="Mollit eiusmod" description="Dolore minim">
     <TextField label="Textfield label" hideLabel />
     <TextField label="Textfield label" hideLabel />
   </Fieldset>

package/src/form/stories/fieldset.stories.tsx

@@ -47,7 +47,7 @@ export const All = () => {
 
       <h2>Sizing</h2>
 
-      <Fieldset size="s" legend="Mollit eiusmod" description="Dolore minim">
+      <Fieldset size="small" legend="Mollit eiusmod" description="Dolore minim">
         <TextField label="Textfield label" hideLabel />
         <TextField label="Textfield label" hideLabel />
       </Fieldset>

package/src/form/stories/live-examples.tsx

@@ -3,10 +3,10 @@ import { ConfirmationPanel } from "..";
 import { Link } from "../..";
 
 export const ConfirmationPanelExample = ({
-  size = "m",
+  size = "medium",
   error,
 }: {
-  size: "m" | "s";
+  size: "medium" | "small";
   error?: string;
 }) => {
   const [checked, setChecked] = useState(false);

package/src/form/stories/select.stories.mdx

@@ -72,7 +72,7 @@ import { Select } from "../index";
   label="Ipsum enim quis culpa"
   description="Aute enim"
   error="Select error message"
-  size="s"
+  size="small"
 >
   <option value="">Velg land</option>
   <option value="norge">Norge</option>
@@ -85,7 +85,7 @@ import { Select } from "../index";
     label="Ipsum enim quis culpa"
     description="Aute enim"
     error="Select error message"
-    size="s"
+    size="small"
   >
     <option value="">Velg land</option>
     <option value="norge">Norge</option>

package/src/form/stories/select.stories.tsx

@@ -43,7 +43,7 @@ export const All = () => {
         label="Ipsum enim quis culpa"
         description="Aute enim"
         error="Select error message"
-        size="s"
+        size="small"
       >
         <option value="">Velg land</option>
         <option value="norge">Norge</option>

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

@@ -45,7 +45,7 @@ import { TextField } from "../index";
 
 ```jsx
 <TextField
-  size="s"
+  size="small"
   label="Laborum excepteur"
   description="Cillum mollit"
   error="TextField error"
@@ -54,7 +54,7 @@ import { TextField } from "../index";
 
 <Canvas>
   <TextField
-    size="s"
+    size="small"
     label="Laborum excepteur"
     description="Cillum mollit"
     error="TextField error"

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

@@ -28,7 +28,7 @@ export const All = () => {
       <h2>Sizing</h2>
 
       <TextField
-        size="s"
+        size="small"
         label="Laborum excepteur"
         description="Cillum mollit"
         error="TextField error"

package/src/form/stories/textarea.stories.mdx

@@ -98,7 +98,7 @@ visuell validering.
   description="Reprehenderit esse proident"
   value={value}
   maxLength={400}
-  size="s"
+  size="small"
   onChange={(e) => setValue(e.target.value)}
 />
 ```
@@ -108,7 +108,7 @@ visuell validering.
     label="In anim elit"
     description="Reprehenderit esse proident"
     maxLength={400}
-    size="s"
+    size="small"
     value="Ullamco culpa officia incididunt consectetur voluptate consectetur eiusmod incididunt. Irure velit nulla est sit sit. In qui qui exercitation voluptate magna id officia pariatur est minim nostrud deserunt fugiat dolor. Proident cillum anim veniam quis tempor labore. Amet cupidatat cillum amet Lorem fugiat sit id esse magna fugiat qui cillum incididunt."
     onChange={() => null}
   />

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

@@ -55,7 +55,7 @@ export const All = () => {
         label="In anim elit"
         description="Reprehenderit esse proident"
         maxLength={400}
-        size="s"
+        size="small"
         value={value}
         onChange={handleChange}
       />

package/src/form/useFormField.ts

@@ -15,7 +15,7 @@ export interface FormFieldProps {
   /**
    * Changes font-size, padding and gaps
    */
-  size?: "m" | "s";
+  size?: "medium" | "small";
   /**
    * Disables element
    */
@@ -53,7 +53,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
     hasError,
     errorId,
     inputDescriptionId,
-    size: size ?? fieldset?.size ?? "m",
+    size: size ?? fieldset?.size ?? "medium",
     inputProps: {
       id,
       "aria-invalid": hasError,

package/src/grid/Cell.tsx

@@ -29,6 +29,7 @@ const Cell = forwardRef<HTMLDivElement, CellProps>(
   ({ children, xs, sm, md, lg, className, ...rest }, ref) => {
     return (
       <div
+        {...rest}
         ref={ref}
         className={cl(
           "navds-grid__cell",
@@ -38,7 +39,6 @@ const Cell = forwardRef<HTMLDivElement, CellProps>(
           lg && `navds-grid__cell--lg-${lg}`,
           className
         )}
-        {...rest}
       >
         {children}
       </div>

package/src/{content-container → grid}/ContentContainer.tsx

@@ -3,20 +3,18 @@ import cl from "classnames";
 
 export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Component content
+   * ContentContainer content
    */
   children: React.ReactNode;
 }
 
 const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(
-  ({ children, className, ...rest }, ref) => (
+  ({ className, ...rest }, ref) => (
     <div
       ref={ref}
       className={cl("navds-content-container", className)}
       {...rest}
-    >
-      {children}
-    </div>
+    />
   )
 );
 

package/src/grid/index.ts

@@ -2,3 +2,5 @@ export { default as Cell } from "./Cell";
 export * from "./Cell";
 export { default as Grid } from "./Grid";
 export * from "./Grid";
+export { default as ContentContainer } from "./ContentContainer";
+export * from "./ContentContainer";

package/src/grid/stories/grid.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { Grid, Cell, ContentContainer } from "../../index";
+import { Grid, Cell } from "../../index";
 
 <Meta title="ds-react/grid/intro" />
 
 # Hvordan ta i bruk Grid
 
-`<ContentContainer />` er ikke nødvendig her, men er laget for tas i bruk i grid.
-
 ```jsx
 <ContentContainer>
   <Grid>
@@ -23,6 +21,27 @@ import { Grid, Cell, ContentContainer } from "../../index";
 </ContentContainer>
 ```
 
+### ContentContainer
+
+Denne fungerer som en wrapper som sentrer innholdet og passer på at anbefalt maksbredde ikke blir overskredet.
+
+Stylingen som blir satt av den:
+
+```css
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--navds-content-container-max-width); # 79.5rem (1272px)
+  padding: var(--navds-content-container-padding-small); # 1rem
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
+  }
+}
+```
+
 ## Bredder
 
 Bredden til hver `Cell` bestemmes av propsene `lg`, `md`, `sm`og `xs`
@@ -56,5 +75,5 @@ Eks `xs={12} lg={4}` vil da si at `Cell` tar opp
 4/12 av griddet når `width > 960px` og 12/12 av griddet
 når skjermen er `width < 448px`
 
-Griddet er dynamiskt, noe som vil si at griddet alltids består av 12 columns
-selv om skjermen er 1920px eller 400px.
+Griddet er dynamiskt, noe som vil si at griddet altids består av 12 columns
+selv om skjermen er 1920px eller 400px. Innholdes "presses" altså sammen.

package/src/grid/stories/grid.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Grid, Cell } from "../index";
-import { ContentContainer } from "../../index";
+import { BodyLong } from "../..";
+import { Grid, Cell, ContentContainer } from "../index";
 import "./styles.css";
 
 export default {
@@ -41,3 +41,11 @@ export const All = () => {
     </ContentContainer>
   );
 };
+
+export const Contentcontainer = () => {
+  return (
+    <ContentContainer className={"navds-story-content-container"}>
+      <BodyLong size="medium">-- Innhold --</BodyLong>
+    </ContentContainer>
+  );
+};