@navikt/ds-react 0.7.7 → 0.8.0

package/src/loader/Loader.tsx

@@ -6,9 +6,9 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
    * Changes sizing
    * 64px | 40px | 32px | 24px | 20px | 16px
-   * @default "m"
+   * @default "medium"
    */
-  size?: "2xl" | "xl" | "l" | "m" | "s" | "xs";
+  size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
    * Title prop on svg
    * @default "venter..."
@@ -30,7 +30,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
     {
       children,
       className,
-      size = "m",
+      size = "medium",
       title = "venter...",
       transparent = false,
       variant = "neutral",
@@ -45,18 +45,21 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
       <svg
         aria-labelledby={internalId}
         ref={ref}
-        className={cl("navds-loader", className, `navds-loader--${size}`, {
-          "navds-loader--transparent": transparent,
-          "navds-loader--neutral": variant === "neutral",
-          "navds-loader--interaction": variant === "interaction",
-          "navds-loader--inverted": variant === "inverted",
-        })}
+        className={cl(
+          "navds-loader",
+          className,
+          `navds-loader--${size}`,
+          `navds-loader--${variant}`,
+          {
+            "navds-loader--transparent": transparent,
+          }
+        )}
         focusable="false"
         viewBox="0 0 50 50"
         preserveAspectRatio="xMidYMid"
         {...rest}
       >
-        <title id={internalId}>{title}</title>
+        <title id={id ?? `loader-${internalId}`}>{title}</title>
         <circle
           className="navds-loader__background"
           xmlns="http://www.w3.org/2000/svg"

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

@@ -19,19 +19,19 @@ Her kan `title` proppen brukes for å gi en liten tooltip som sier hvorfor den l
 
 ## Justering av størrelse
 
-Loaderen kommer i størrelsene `2xl`, `xl`, `l`, `m`, `s` og `xs`
+Loaderen kommer i størrelsene `2xlarge`, `xlarge`, `large`, `medium`, `small` og `xsmall`
 
 ```jsx
-<Loader size="xl" />
+<Loader size="xlarge" />
 ```
 
 <Canvas>
-  <Loader size="2xl" />
-  <Loader size="xl" />
-  <Loader size="l" />
-  <Loader size="m" />
-  <Loader size="s" />
-  <Loader size="xs" />
+  <Loader size="2xlarge" />
+  <Loader size="xlarge" />
+  <Loader size="large" />
+  <Loader size="medium" />
+  <Loader size="small" />
+  <Loader size="xsmall" />
 </Canvas>
 
 ## Varianter
@@ -39,16 +39,16 @@ Loaderen kommer i størrelsene `2xl`, `xl`, `l`, `m`, `s` og `xs`
 Loaderen kommer i variantene `neutral`, `interaction` og `inverted`
 
 ```jsx
-<Loader size="2xl" variant="neutral"/>
-<Loader size="2xl" variant="interaction"/>
-<Loader size="2xl" variant="inverted"/>
+<Loader size="2xlarge" variant="neutral"/>
+<Loader size="2xlarge" variant="interaction"/>
+<Loader size="2xlarge" variant="inverted"/>
 ```
 
 <Canvas>
-  <Loader size="2xl" variant="neutral" />
-  <Loader size="2xl" variant="interaction" />
+  <Loader size="2xlarge" variant="neutral" />
+  <Loader size="2xlarge" variant="interaction" />
   <div style={{ backgroundColor: "black" }}>
-    <Loader size="2xl" variant="inverted" />
+    <Loader size="2xlarge" variant="inverted" />
   </div>
 </Canvas>
 
@@ -61,7 +61,7 @@ Bakgrunnen kan settes til transparent med `transparent={true}`
 ```
 
 <Canvas>
-  <Loader size="2xl" transparent />
+  <Loader size="2xlarge" transparent />
 </Canvas>
 
 ## Bruk av loader i knapper
@@ -74,31 +74,30 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
 
 ```jsx
 <Button>
-  <span>Laster inn nytt innhold...</span>
+  Laster inn nytt innhold...
   <Loader />
 </Button>
 ```
 
 <Canvas>
   <Button>
-    <span>Laster inn nytt innhold...</span>
+    Laster inn nytt innhold...
     <Loader />
   </Button>
 </Canvas>
 
 ## Overskrive farger for å sikre kontrast
 
-I de casene der man må justere fargene for å ha bedre kontrast så vil disse to klassene være relevante.
-Om mulig bør man unngå dette og bare ta i bruk default.
+I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
 
 ```css
-/* Foreground */
-.navds-loader > .navds-loader__foreground {
-  stroke: var(--navds-color-gray-40);
-}
-
-/* Background */
-.navds-loader > .navds-loader__background {
-  stroke: var(--navds-color-gray-10);
-}
+--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/loader/stories/loader.stories.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from "react";
-import { Loader } from "../index";
-import { Button, Panel, Title } from "../../index";
+import React from "react";
+import { Loader } from "..";
+import { Button } from "../..";
 import { Meta } from "@storybook/react/types-6-0";
-import "./demo.css";
 export default {
   title: "ds-react/loader",
   component: Loader,
@@ -18,112 +17,53 @@ export const All = () => {
       <Loader transparent />
 
       <h2>Sizing</h2>
-      <Loader size="2xl" />
-      <Loader size="xl" />
-      <Loader size="l" />
-      <Loader size="m" />
-      <Loader size="s" />
-      <Loader size="xs" />
+      <Loader size="2xlarge" />
+      <Loader size="xlarge" />
+      <Loader size="large" />
+      <Loader size="medium" />
+      <Loader size="small" />
+      <Loader size="xsmall" />
       <h2>Sizing transparent</h2>
-      <Loader size="2xl" transparent />
-      <Loader size="xl" transparent />
-      <Loader size="l" transparent />
-      <Loader size="m" transparent />
-      <Loader size="s" transparent />
-      <Loader size="xs" transparent />
+      <Loader size="2xlarge" transparent />
+      <Loader size="xlarge" transparent />
+      <Loader size="large" transparent />
+      <Loader size="medium" transparent />
+      <Loader size="small" transparent />
+      <Loader size="xsmall" transparent />
       <div style={{ backgroundColor: "#c9c9c9" }}>
         <h2>Varianter</h2>
-        <Loader size="xl" variant="neutral" />
-        <Loader size="xl" variant="interaction" />
-        <Loader size="xl" variant="inverted" />
+        <Loader size="xlarge" variant="neutral" />
+        <Loader size="xlarge" variant="interaction" />
+        <Loader size="xlarge" variant="inverted" />
         <h2>Varianter transparent</h2>
-        <Loader size="xl" variant="neutral" transparent />
-        <Loader size="xl" variant="interaction" transparent />
-        <Loader size="xl" variant="inverted" transparent />
-        <h2>Brukt i knapper</h2>
+        <Loader size="xlarge" variant="neutral" transparent />
+        <Loader size="xlarge" variant="interaction" transparent />
+        <Loader size="xlarge" variant="inverted" transparent />
       </div>
+      <h2>Brukt i knapper</h2>
       <div>
         <Button>
-          <span>Laster...</span>
+          Laster...
           <Loader />
-        </Button>{" "}
-        <Button size="s">
-          <span>Laster...</span>
+        </Button>
+        <Button size="small">
+          Laster...
           <Loader />
         </Button>
         <h2>Variants</h2>
         <Button variant="secondary">
-          <span>Laster...</span>
+          Laster...
           <Loader />
-        </Button>{" "}
+        </Button>
         <Button variant="action">
-          <span>Laster...</span>
+          Laster...
           <Loader />
-        </Button>{" "}
+        </Button>
         <Button variant="danger">
-          <span>Laster...</span>
+          Laster...
           <Loader />
         </Button>
       </div>
     </div>
   );
 };
-
-export const LoaderDemo = () => {
-  const [loading, setLoading] = useState(false);
-  const [longText, setLongText] = useState(false);
-
-  const handleAuto = () => {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-    }, 3000);
-  };
-
-  const text = longText
-    ? "Laster inn nytt innhold fra databasen. Hvis dette tar lengre enn 10 sekunder kan man prøve å laste siden på nytt. Om dette ikke fungerer kan det hende tjenesten har nedetid nå, sjekk ut denne linken for å se status"
-    : "Laster inn innholdet...";
-
-  return (
-    <div className="demo__wrapper">
-      <Title level="1" size="l">
-        Test/Demo for loading state. Ikke bruk som referanse i implmentasjon
-      </Title>
-      <div>
-        <Button onClick={() => setLoading(!loading)}>
-          Toggle Loading state
-        </Button>
-        <Button onClick={() => setLongText(!longText)}>
-          Toggle Text-lengde
-        </Button>
-        <Button onClick={() => handleAuto()}>
-          Automatisk endring (3 sekunder)
-        </Button>
-      </div>
-
-      <Panel
-        border
-        className="demo__panel"
-        aria-live="polite"
-        aria-busy={loading}
-      >
-        {loading ? (
-          <>
-            <Loader size="xl" title={text} />
-            <span>{text}</span>
-          </>
-        ) : (
-          <div>
-            <h2>DummyTittel</h2>
-            <p>
-              Dolor nostrud sint incididunt consectetur adipisicing sit. Laborum
-              enim consequat non labore velit ex. Esse amet irure cillum amet
-              dolor ad consequat. Est sit id tempor dolore officia proident
-              consequat sunt cillum.
-            </p>
-          </div>
-        )}
-      </Panel>
-    </div>
-  );
-};

package/src/modal/Modal.tsx

@@ -4,6 +4,7 @@ import ReactModal from "react-modal";
 import mergeRefs from "react-merge-refs";
 import { Close } from "@navikt/ds-icons";
 import { Button } from "..";
+import ModalContent, { ModalContentType } from "./ModalContent";
 
 export interface ModalProps {
   /**
@@ -24,31 +25,31 @@ export interface ModalProps {
    */
   shouldCloseOnOverlayClick?: boolean;
   /**
-   * @ignore
+   * User defined classname for modal
    */
   className?: string;
-  /**
-   * User defined classname for modal content
-   */
-  contentClassName?: string;
+}
+
+interface ModalComponent
+  extends ModalLifecycle,
+    React.ForwardRefExoticComponent<
+      ModalProps & React.RefAttributes<ReactModal>
+    > {
+  Content: ModalContentType;
 }
 
 type ModalLifecycle = {
   setAppElement?: (element: any) => void;
 };
 
-const Modal: ModalLifecycle &
-  React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<ReactModal>
-  > = forwardRef<ReactModal, ModalProps>(
+const Modal = forwardRef<ReactModal, ModalProps>(
   (
     {
       children,
       open,
-      className,
       onClose,
+      className,
       shouldCloseOnOverlayClick = true,
-      contentClassName = "",
       ...rest
     },
     ref
@@ -75,12 +76,12 @@ const Modal: ModalLifecycle &
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
         onRequestClose={(e) => onModalCloseRequest(e)}
       >
-        <section className={contentClassName}>{children}</section>
+        {children}
         <Button
           className={cl("navds-modal__button", {
             "navds-modal__button--shake": shouldCloseOnOverlayClick,
           })}
-          size="s"
+          size="small"
           variant="secondary"
           ref={buttonRef}
           aria-label="lukk modalvindu"
@@ -95,8 +96,9 @@ const Modal: ModalLifecycle &
       </ReactModal>
     );
   }
-);
+) as ModalComponent;
 
 Modal.setAppElement = (element) => ReactModal.setAppElement(element);
+Modal.Content = ModalContent;
 
 export default Modal;

package/src/modal/ModalContent.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+export interface ModalContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Modal.Content content
+   */
+  children: React.ReactNode;
+}
+
+export type ModalContentType = React.ForwardRefExoticComponent<
+  ModalContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ModalContent: ModalContentType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <div
+      {...rest}
+      ref={ref}
+      className={cl("navds-modal__content", className)}
+    />
+  )
+);
+
+export default ModalContent;

package/src/modal/index.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from "./Modal";
+export { ModalContentProps } from "./ModalContent";
 export * from "./Modal";

package/src/modal/stories/modal.stories.mdx

@@ -15,9 +15,18 @@ vil `onClose`-triggre og det er opp til systemet å håndtere det.
 
 ```jsx
 <Modal open={open} onClose={() => setOpen(false)}>
+  <Modal.Content>
+    <h2>Heading</h2>
+    <p>
+      Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
+      laboriselit sit dolor aliquip velit esse. Excepteur sint non minim nulla
+      excepteur labore non magna eu.
+    </p>
+  </Modal.Content>
+</Modal>
 ```
 
 ## shouldCloseOnOverlayClick
 
 Proppen `shouldCloseOnOverlayClick` toggler om `onClose` skal triggres
-når bruker trykker utenfor modalen (overlayet). Defaulter til true.
+når bruker trykker utenfor modalen (overlayet). Er default: true .

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Modal } from "../index";
+import { Modal } from "../..";
 
 export default {
   title: "ds-react/modal",
@@ -16,10 +16,12 @@ export const All = () => {
     <>
       <button onClick={() => setOpen(true)}>Open modal</button>
       <Modal open={open} onClose={() => setOpen(false)}>
-        <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>
+          <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>
 
       <button onClick={() => setOpenTwo(true)}>
@@ -30,17 +32,19 @@ export const All = () => {
         open={openTwo}
         onClose={() => setOpenTwo(false)}
       >
-        <h1>Header</h1>
-        <h2>subheader</h2>
-        <p>
-          Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-          laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
-          aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
-          anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et id
-          duis cupidatat labore magna consectetur et veniam tempor. In minim
-          exercitation id irure velit sit dolor aliquip velit esse. Excepteur
-          sint non minim nulla excepteur labore non magna eu.
-        </p>
+        <Modal.Content>
+          <h1>Header</h1>
+          <h2>subheader</h2>
+          <p>
+            Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
+            laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
+            aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
+            anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
+            id duis cupidatat labore magna consectetur et veniam tempor. In
+            minim exercitation id irure velit sit dolor aliquip velit esse.
+            Excepteur sint non minim nulla excepteur labore non magna eu.
+          </p>
+        </Modal.Content>
       </Modal>
     </>
   );