@navikt/ds-react 0.7.4 → 0.8.0

package/src/link-panel/stories/link-panel.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { LinkPanel, LinkPanelTitle } from "../index";
+import styled from "styled-components";
+import { LinkPanel } from "..";
 import { Illustration } from "./illustration";
 
 export default {
@@ -7,38 +8,46 @@ export default {
   component: LinkPanel,
 };
 
-export const All = () => {
-  return (
-    <>
-      <h1>Link</h1>
-      <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+const StyledLinkPanel = styled(LinkPanel)`
+  .navds-link-panel__content {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--navds-spacing-8);
+    align-items: center;
+  }
+`;
 
-      <h1>No border</h1>
-      <LinkPanel href="#" border={false}>
-        Dette er en tekstlenke
-      </LinkPanel>
+export const All = () => (
+  <>
+    <h1>Link panel</h1>
+    <LinkPanel href="#">
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      <LinkPanel.Description>
+        Aliqua id aliquip Lorem esse
+      </LinkPanel.Description>
+    </LinkPanel>
 
-      <h1>Custom styling</h1>
-      <LinkPanel href="#" style={{ textDecoration: "none" }}>
-        <div
-          style={{
-            padding: "1rem",
-            display: "grid",
-            gridAutoFlow: "column",
-            gap: "2rem",
-            alignItems: "center",
-          }}
-        >
-          {Illustration}
-          <div>
-            <LinkPanelTitle>Dagpenger</LinkPanelTitle>
-            <p>
-              Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
-              din.
-            </p>
-          </div>
-        </div>
-      </LinkPanel>
-    </>
-  );
-};
+    <h1>No border</h1>
+    <LinkPanel href="#" border={false}>
+      <LinkPanel.Title>
+        Veniam cillum cupidatat aliqua id ipsum culpa ea.
+      </LinkPanel.Title>
+    </LinkPanel>
+
+    <h1>Custom styling</h1>
+    <StyledLinkPanel href="#">
+      {Illustration}
+      <div>
+        <LinkPanel.Title>
+          Anim pariatur eiusmod deserunt elit cillum
+        </LinkPanel.Title>
+        <LinkPanel.Description>
+          Ex velit id voluptate labore irure ipsum exercitation sunt et id enim
+          magna veniam consequat. id aliquip Lorem esse
+        </LinkPanel.Description>
+      </div>
+    </StyledLinkPanel>
+  </>
+);

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;