@navikt/ds-react 0.13.3 → 0.14.2

package/src/form/stories/switch.stories.mdx

@@ -0,0 +1,104 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Switch } from "../index";
+
+<Meta title="ds-react/form/switch/intro" />
+
+# Hvordan ta i bruk Switch
+
+```jsx
+<Switch>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch>Slå på feature</Switch>
+</Canvas>
+
+## Description
+
+```jsx
+<Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+</Canvas>
+
+## Sizing
+
+Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
+
+```jsx
+<Switch size="small" >Slå på feature</Switch>
+<Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch size="small">Slå på feature</Switch>
+    <Switch size="small" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## defaultChecked
+
+Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
+
+```jsx
+<Switch defaultChecked>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch defaultChecked>Slå på feature</Switch>
+</Canvas>
+
+## hideLabel
+
+Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
+
+```jsx
+<Switch hideLabel>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch hideLabel>Slå på feature</Switch>
+</Canvas>
+
+## Disabled
+
+Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
+
+NOTE: Husk at disabled bør unngås!
+
+```jsx
+<Switch disabled>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch disabled>Slå på feature</Switch>
+    <Switch disabled defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## Loading
+
+Om systemet bruker tid på å utføre handlingen vises en loading-indikator på switch’en.
+Om ventetiden er mer enn noen sekunder bør en forklarende tekst også vises.
+Teksten må forklare kort og godt hvorfor brukeren må vente.
+
+```jsx
+<Switch loading>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch loading>Slå på feature</Switch>
+    <Switch loading defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>

package/src/form/stories/switch.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Switch } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Fieldset } from "../..";
+export default {
+  title: "ds-react/form/switch",
+  component: Switch,
+} as Meta;
+
+export const All = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <h1>Switch</h1>
+      <Switch>Label text</Switch>
+
+      <h2>Switch w/Description</h2>
+      <Switch>Label text</Switch>
+      <Switch description="Switch description">Label text</Switch>
+      <Switch>Label text</Switch>
+
+      <h2>hidelabel</h2>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch hideLabel size="small">
+        Label text small
+      </Switch>
+
+      <h2>Switch small</h2>
+      <Switch size="small">Label text</Switch>
+      <Switch description="Switch description" size="small">
+        Label text
+      </Switch>
+      <Switch size="small">Label text</Switch>
+
+      <h2>Controlled</h2>
+      <Switch checked={checked} onChange={() => setChecked(!checked)}>
+        Label text
+      </Switch>
+
+      <h2>Defaultchecked</h2>
+      <Switch defaultChecked>Label text</Switch>
+
+      <h2>Disabled</h2>
+      <Switch disabled>Label text</Switch>
+      <Switch disabled defaultChecked>
+        Label text
+      </Switch>
+
+      <h2>With fieldset error</h2>
+      <Fieldset legend="Fieldset legend" error="Errormsg">
+        <Switch defaultChecked>Label text</Switch>
+        <Switch>Label text</Switch>
+      </Fieldset>
+
+      <h2>loading prop</h2>
+      <Switch loading>Label text</Switch>
+      <Switch size="small" loading>
+        Label text
+      </Switch>
+      <Switch disabled loading>
+        Label text
+      </Switch>
+    </div>
+  );
+};

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

@@ -31,13 +31,13 @@ Stylingen som blir satt av den:
 .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
+  max-width: 79.5rem; # (1272px)
+  padding: var(--navds-spacing-4); # 1rem
 }
 
 @media (min-width: 448px) {
   .navds-content-container {
-    padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
+    padding: var(--navds-spacing-6); # 1.5rem
   }
 }
 ```

package/src/guide-panel/stories/example.css

@@ -1,13 +1,13 @@
 .sb-guidepanel__tokens--purple {
-  --navds-guide-panel-color-border: var(--navds-color-purple-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-purple-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-purple-20
+    --navds-global-color-purple-200
   );
 }
 
 .sb-guidepanel__tokens--green {
-  --navds-guide-panel-color-border: var(--navds-color-green-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-green-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-green-20
+    --navds-global-color-green-200
   );
 }

package/src/guide-panel/stories/guidepanel.stories.mdx

@@ -38,9 +38,9 @@ Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå se
 overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
 
 ```css
-/* default */
---navds-guide-panel-color-border: var(--navds-color-blue-40);
---navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+/* Tokens */
+--navds-guide-panel-color-border
+--navds-guide-panel-color-illustration-background
 ```
 
 ```jsx
@@ -55,16 +55,16 @@ overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components elle
 /* Inline */
 <GuidePanel
   style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
     Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
   </GuidePanel>
 <GuidePanel
     style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
   Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.

package/src/guide-panel/stories/guidepanel.stories.tsx

@@ -21,24 +21,24 @@ export const All = () => {
       <h2>custom colors</h2>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
         }}
       >
         {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua

package/src/loader/Loader.tsx

@@ -74,7 +74,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           cx="25"
           cy="25"
           r="20"
-          stroke={"var(--navds-color-gray-40)"}
+          stroke={"var(--navds-global-color-gray-400)"}
           fill="none"
           strokeWidth="5"
           strokeDasharray="50 155"

package/src/loader/stories/loader.stories.mdx

@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
     <Loader />
   </Button>
 </Canvas>
-
-## Overskrive farger for å sikre kontrast
-
-I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
-
-```css
---navds-loader-color-foreground: var(--navds-color-gray-40);
---navds-loader-color-background: var(--navds-color-gray-10);
---navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
---navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
---navds-loader-color-inverted-foreground: var(--navds-color-white);
---navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-transparent-background: transparent;
---navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-on-button-foreground: currentColor;
-```

package/src/popover/stories/popover.stories.tsx

@@ -17,7 +17,7 @@ const Template = (props) => {
     <>
       <div
         style={{
-          background: "var(--navds-color-gray-60)",
+          background: "var(--navds-global-color-gray-600)",
           textAlign: "center",
           width: "2rem",
           height: "2rem",

package/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
 <SpeechBubble
   illustration="OLA"
   position="left"
-  illustrationBgColor="var(--navds-color-lightblue-10)"
-  backgroundColor="var(--navds-color-lightblue-20)"
+  illustrationBgColor="var(--navds-global-color-lightblue-100)"
+  backgroundColor="var(--navds-global-color-lightblue-200)"
 >
   <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
   <SpeechBubble
     illustration="OLA"
     position="left"
-    illustrationBgColor="var(--navds-color-lightblue-10)"
-    backgroundColor="var(--navds-color-lightblue-20)"
+    illustrationBgColor="var(--navds-global-color-lightblue-100)"
+    backgroundColor="var(--navds-global-color-lightblue-200)"
   >
     <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -14,7 +14,7 @@ export const All = () => {
       <SpeechBubble
         illustration={<Illustration />}
         topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="var(--navds-color-lightblue-20)"
+        backgroundColor="var(--navds-global-color-lightblue-200)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -42,7 +42,7 @@ export const All = () => {
           </div>
         }
         position="right"
-        backgroundColor="var(--navds-color-gray-10)"
+        backgroundColor="var(--navds-global-color-gray-100)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/table/DataCell.tsx

@@ -1,5 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { BodyShort } from "..";
+import { TableContext } from ".";
 
 interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
 
@@ -8,8 +10,22 @@ export interface DataCellType
     DataCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const DataCell: DataCellType = forwardRef(({ className, ...rest }, ref) => (
-  <td {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const DataCell: DataCellType = forwardRef(
+  ({ className, children = "", ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <BodyShort
+        as="td"
+        ref={ref}
+        className={cl("navds-table__data-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </BodyShort>
+    );
+  }
+);
 
 export default DataCell;

package/src/table/HeaderCell.tsx

@@ -1,15 +1,32 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  scope?: string;
+}
 
 export interface HeaderCellType
   extends React.ForwardRefExoticComponent<
     HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const HeaderCell: HeaderCellType = forwardRef(({ className, ...rest }, ref) => (
-  <th {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const HeaderCell: HeaderCellType = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <Label
+        as="th"
+        ref={ref}
+        className={cl("navds-table__header-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </Label>
+    );
+  }
+);
 
 export default HeaderCell;

package/src/table/Row.tsx

@@ -1,15 +1,29 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Row is selected
+   * @default false
+   */
+  selected?: boolean;
+}
 
 export interface RowType
   extends React.ForwardRefExoticComponent<
     RowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const Row: RowType = forwardRef(({ className, ...rest }, ref) => (
-  <tr {...rest} ref={ref} className={cl("navds-table__row", className)} />
-));
+const Row: RowType = forwardRef(
+  ({ className, selected = false, ...rest }, ref) => (
+    <tr
+      {...rest}
+      ref={ref}
+      className={cl("navds-table__row", className, {
+        "navds-table__row--selected": selected,
+      })}
+    />
+  )
+);
 
 export default Row;

package/src/table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
@@ -12,6 +12,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
    * @default "medium"
    */
   size?: "medium" | "small";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
 }
 
 export interface TableType
@@ -25,13 +30,25 @@ export interface TableType
   HeaderCell: HeaderCellType;
 }
 
-const Table = forwardRef(({ className, size = "medium", ...rest }, ref) => (
-  <table
-    {...rest}
-    ref={ref}
-    className={cl("navds-table", `navds-table--${size}`, className)}
-  />
-)) as TableType;
+export interface TableContextProps {
+  size: "medium" | "small";
+}
+
+export const TableContext = createContext<TableContextProps | null>(null);
+
+const Table = forwardRef(
+  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
+    <TableContext.Provider value={{ size }}>
+      <table
+        {...rest}
+        ref={ref}
+        className={cl("navds-table", `navds-table--${size}`, className, {
+          "navds-table--zebra-stripes": zebraStripes,
+        })}
+      />
+    </TableContext.Provider>
+  )
+) as TableType;
 
 Table.Header = Header;
 Table.Body = Body;