@navikt/ds-react 0.7.4 → 0.8.0

package/src/button/stories/button.stories.mdx

@@ -17,12 +17,12 @@ import { Success } from "@navikt/ds-react";
 ## Varianter
 
 `variants`-prop kan brukes for å endre utseende mellom
-`primary`, `secondary`, `action` og `danger`
+`primary`, `secondary`, `tertiary` og `danger`
 
 <Canvas>
   <Button variant="primary">Buttontekst</Button>
   <Button variant="secondary">Buttontekst</Button>
-  <Button variant="action">Buttontekst</Button>
+  <Button variant="tertiary">Buttontekst</Button>
   <Button variant="danger">Buttontekst</Button>
 </Canvas>
 
@@ -31,16 +31,16 @@ import { Success } from "@navikt/ds-react";
 Button har to størrelser: Default 48px min-height og small 32px min-height
 
 <Canvas>
-  <Button size="s" variant="primary">
+  <Button size="small" variant="primary">
     Buttontekst
   </Button>
-  <Button size="s" variant="secondary">
+  <Button size="small" variant="secondary">
     Buttontekst
   </Button>
-  <Button size="s" variant="action">
+  <Button size="small" variant="tertiary">
     Buttontekst
   </Button>
-  <Button size="s" variant="danger">
+  <Button size="small" variant="danger">
     Buttontekst
   </Button>
 </Canvas>
@@ -48,18 +48,17 @@ Button har to størrelser: Default 48px min-height og small 32px min-height
 ## Med ikon eller `<Loader />`
 
 Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
-bli justert automatisk. For å få riktige marginer rundt ikonet må man da wrappe innholdet
-i et element
+bli justert automatisk.
 
 <Canvas>
   <Button>
-    <span>Buttontekst</span> <Loader />
-  </Button>
-  <Button size="s">
-    <span>Buttontekst</span>
-    <Loader />
+    <Loader /> Buttontekst
   </Button>
   <Button>
-    <Loader /> <span>Buttontekst</span>
+    Buttontekst <Loader />
+  </Button>
+  <Button size="small">
+    Buttontekst
+    <Loader />
   </Button>
 </Canvas>

package/src/button/stories/button.stories.tsx

@@ -22,13 +22,20 @@ const Section = ({ children }) => (
   </div>
 );
 
-const variants: Array<"primary" | "secondary" | "action" | "danger"> = [
+const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
   "primary",
   "secondary",
-  "action",
+  "tertiary",
   "danger",
 ];
 
+const varSwitch = {
+  primary: "Primary",
+  secondary: "Secondary",
+  tertiary: "Tertiary",
+  danger: "Danger",
+};
+
 export const All = () => {
   return (
     <>
@@ -36,7 +43,7 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant}>
-            {variant}
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
@@ -44,27 +51,23 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant} disabled>
-            {variant}
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
       <h2>As link</h2>
       <Section>
         {variants.map((variant) => (
-          <a
-            key={variant}
-            className={`navds-button navds-button--${variant} navds-body-short`}
-            href="the-link"
-          >
-            {variant}
-          </a>
+          <Button as="a" key={variant} variant={variant} href="the-link">
+            {varSwitch[variant]}
+          </Button>
         ))}
       </Section>
       <h2>Small</h2>
       <Section>
         {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="s">
-            {variant}
+          <Button key={variant} variant={variant} size="small">
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
@@ -72,21 +75,29 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant}>
-            <span>{variant}</span> <Success />
+            {variant} <Success />
+          </Button>
+        ))}
+      </Section>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            <span className="sr-only">Success ikon</span>
+            <Success />
           </Button>
         ))}
       </Section>
       <h2>Small w/icon</h2>
       <Section>
         {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="s">
-            <Success /> <span>{variant}</span>
+          <Button key={variant} variant={variant} size="small">
+            <Success /> {variant}
           </Button>
         ))}
       </Section>
       <Section>
         {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="s">
+          <Button key={variant} variant={variant} size="small">
             <span className="sr-only">Success ikon</span>
             <Success />
           </Button>

package/src/card/MicroCard.tsx

@@ -1,30 +1,32 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export interface MicroCardProps {
-  props: {
-    children: string;
-  } & React.HTMLAttributes<HTMLAnchorElement>;
-  defaultComponent: "a";
+export interface MicroCardProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Link text
+   */
+  children: React.ReactNode;
 }
 
-export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
-  ({ className, component: Component = "a", children, ...rest }, ref) => (
-    <Component
-      ref={ref}
-      className={cl(
-        "navds-card__micro",
-        "navds-detail",
-        "navds-detail--s",
-        className
-      )}
-      title={children}
-      {...rest}
-    >
-      {children}
-    </Component>
-  )
-);
+export const MicroCard: OverridableComponent<
+  MicroCardProps,
+  HTMLAnchorElement
+> = forwardRef(({ className, as: Component = "a", children, ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cl(
+      "navds-card__micro",
+      "navds-detail",
+      "navds-detail--small",
+      className
+    )}
+    title={children}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
 
 export default MicroCard;

package/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -1,18 +1,12 @@
 import { Copy } from "@navikt/ds-icons";
-import copy from "copy-to-clipboard";
+import { Placement } from "@popperjs/core";
 import cl from "classnames";
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import copy from "copy-to-clipboard";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover, Button } from "..";
+import { BodyShort, Button, ButtonProps, Popover } from "..";
 
-export interface CopyToClipboardProps
-  extends HTMLAttributes<HTMLButtonElement> {
+export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   /**
    * Button text
    */
@@ -20,20 +14,31 @@ export interface CopyToClipboardProps
   /**
    * Text to be copied to clipboard
    */
-  text: string;
+  copyText: string;
   /**
    * Description of text, examples: "personnummer", "navn", "epost" etc.
    */
-  label: string;
+  popoverText: string;
   /**
-   * Use a differnet icon to display
-   * @default "Files" from @navikt/ds-icons
+   * Allows extending popover properties like "placement"
+   * @default "right"
    */
-  icon?: React.ReactElement;
+  popoverPlacement?: Placement;
 }
 
 const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
-  ({ children, text, label, icon, className, ...rest }, ref) => {
+  (
+    {
+      children,
+      copyText,
+      popoverText,
+      className,
+      size = "medium",
+      popoverPlacement = "right",
+      ...rest
+    },
+    ref
+  ) => {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
     const timeoutRef = useRef<number | null>();
@@ -48,10 +53,10 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
       };
     }, [openPopover]);
 
-    const title = `Kopier ${label} (${text})`;
+    const title = `Kopier ${copyText}`;
 
     const handleClick = () => {
-      copy(text);
+      copy(copyText);
       setOpenPopover(true);
     };
 
@@ -63,17 +68,14 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           title={title}
           className={cl("navds-copy-to-clipboard", className)}
           onClick={handleClick}
+          size={size}
           {...rest}
         >
-          {icon ? (
-            <>{icon}</>
-          ) : (
-            <Copy
-              focusable="false"
-              role="img"
-              aria-label="Fil ikon for kopiering"
-            />
-          )}
+          <Copy
+            focusable="false"
+            role="img"
+            aria-label="Fil ikon for kopiering"
+          />
           {children ? children : <span className="sr-only">{title}</span>}
         </Button>
         <Popover
@@ -81,11 +83,13 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           anchorEl={buttonRef.current}
           open={openPopover}
           onClose={() => setOpenPopover(false)}
-          placement="right"
+          placement={popoverPlacement}
           arrow={false}
           className="navds-copy-to-clipboard__popover"
         >
-          {label}
+          <BodyShort size={size} as="span">
+            {popoverText}
+          </BodyShort>
         </Popover>
       </div>
     );

package/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { CopyToClipboard } from "../index";
-import { Link } from "@navikt/ds-icons";
 
 export default {
   title: "@ds-react/copy-to-clipboard",
@@ -15,24 +14,24 @@ export const All = () => {
   return (
     <div>
       <h2>Fritstående knapp</h2>
-      <CopyToClipboard label={label} text={text} />
+      <CopyToClipboard popoverText={label} copyText={text} />
 
       <h2>Sammen med tekst</h2>
-      <CopyToClipboard label={label} text={text}>
+      <CopyToClipboard popoverText={label} copyText={text}>
         Kopier tekst
       </CopyToClipboard>
 
-      <h2>Tilpasser seg fontstørrelse</h2>
-      <CopyToClipboard label={label} text={text} style={{ fontSize: "0.8rem" }}>
+      <h2>Small size</h2>
+      <CopyToClipboard popoverText={label} copyText={text} size="small">
         Kopier tekst
       </CopyToClipboard>
+      <CopyToClipboard popoverText={label} copyText={text} size="small" />
 
-      <h2>Custom icon</h2>
+      <h2>Endrer placement av popover</h2>
       <CopyToClipboard
-        icon={<Link />}
-        label={label}
-        text={text}
-        style={{ fontSize: "0.8rem" }}
+        popoverText={label}
+        copyText={text}
+        popoverPlacement="bottom-end"
       >
         Kopier tekst
       </CopyToClipboard>

package/src/copy-to-clipboard/stories/copy.stories.mdx

@@ -6,30 +6,40 @@ import { Success } from "@navikt/ds-react";
 
 # Hvordan ta i bruk CopyToClipboard
 
-Innholdet i `text` vil da bli kopiert til clipboard, mens innholdet i `label`
-brukes i popovertekst og `sr-only` span som rendres hvis knappen ikke har noe tekstinnhold
-`sr-only` tekst blir da `Kopier ${label} (${text})`
+Innholdet i `copyText` vil bli kopiert til clipboard, mens innholdet i `popoverText`
+brukes i popover. Hvis komponenten ikke har noen children (tekst i button) vil da en "sr-only" tekst blie
+lagt på knappen med tekst "Kopier copyText"
 
 ```jsx
-<CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
-  Kopier Pi{" "}
+<CopyToClipboard popoverText={"Kopierte adresse"} copyText={"0660 OSLO"}>
+  Kopier adresse
 </CopyToClipboard>
 ```
 
 <Canvas>
-  <CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
-    Kopier Pi{" "}
+  <CopyToClipboard popoverText={"Kopiert adresse"} copyText={"0660 OSLO"}>
+    Kopier adresse
   </CopyToClipboard>
 </Canvas>
 
-## Custom ikon
-
-Man kan sette andre ikoner en `Copy` ved `icon`-proppen
+## Sizing
 
 ```jsx
 <CopyToClipboard
-  icon={<Link />}
-  label={"Kopierte PI til clipboard"}
-  text={"3.14"}
-/>
+  popoverText={"Kopierte adressen"}
+  copyText={"0660 OSLO"}
+  size="small"
+>
+  Kopier adresse
+</CopyToClipboard>
 ```
+
+<Canvas>
+  <CopyToClipboard
+    popoverText={"Kopierte adressen"}
+    copyText={"0660 OSLO"}
+    size="small"
+  >
+    Kopier adresse
+  </CopyToClipboard>
+</Canvas>

package/src/form/ConfirmationPanel.tsx

@@ -23,7 +23,7 @@ const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
       <div
         ref={ref}
         className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--s": props.size === "s",
+          "navds-confirmation-panel--s": props.size === "small",
           "navds-confirmation-panel--error": !!props.error,
           "navds-confirmation-panel--checked": !!props.checked,
         })}

package/src/form/ErrorMessage.tsx

@@ -5,11 +5,11 @@ import { Label } from "..";
 const ErrorMessage = (props) => (
   <Label
     {...props}
-    component="div"
+    as="div"
     className={cl(
       "navds-error-message",
       props.className,
-      `navds-error-message--${props.size ?? "m"}`
+      `navds-error-message--${props.size ?? "medium"}`
     )}
   />
 );