@navikt/ds-react 0.19.17 → 1.0.0-rc.2

package/src/grid/grid.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { BodyLong } from "../..";
+import { Grid, Cell, ContentContainer } from "../index";
+
+export default {
+  title: "ds-react/Grid",
+  component: { Grid, Cell },
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <ContentContainer>
+        <span>
+          Grid har ikke blitt oppdatert siden 2020 og vil på sikt få større
+          endringer eller deprecates. Vi anbefaler derfor å ikke ta vår
+          grid-løsning i bruk for nå.
+        </span>
+        <Grid>
+          <Cell className="cell" xs={12} sm={6} lg={4}>
+            Kolonne
+          </Cell>
+          <Cell className="cell" xs={12} sm={6} lg={4}>
+            Kolonne
+          </Cell>
+          <Cell className="cell" xs={12} sm={12} lg={4}>
+            Kolonne
+          </Cell>
+        </Grid>
+        <style>{`.cell {padding: 1rem; background: repeating-linear-gradient(
+    45deg,
+    #d6d6d6,
+    #d6d6d6 10px,
+    transparent 10px,
+    transparent 20px
+  );}`}</style>
+      </ContentContainer>
+    </>
+  );
+};
+
+export const Contentcontainer = () => {
+  return (
+    <>
+      <ContentContainer className="container">
+        <BodyLong size="medium">-- Innhold --</BodyLong>
+      </ContentContainer>
+      <style>{`.container {
+  display: flex;
+  border-radius: var(--navds-border-radius-medium);
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  min-height: 10rem;
+  background: repeating-linear-gradient(
+    45deg,
+    #d6d6d6,
+    #d6d6d6 10px,
+    transparent 10px,
+    transparent 20px
+  );
+}`}</style>
+    </>
+  );
+};

package/src/guide-panel/Guide.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { DefaultIllustration } from "./Illustration";
 export interface GuideProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {

package/src/guide-panel/GuidePanel.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import Guide from "./Guide";
-import cl from "classnames";
+import cl from "clsx";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/help-text/HelpText.tsx

@@ -1,9 +1,7 @@
-import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
-import cl from "classnames";
-import React, { forwardRef, useRef, useState } from "react";
-import mergeRefs from "react-merge-refs";
-import { Popover, PopoverProps } from "..";
+import { Helptext as HelpTextIcon, HelptextFilled } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { Popover, PopoverProps, mergeRefs } from "..";
 
 export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -21,7 +19,19 @@ export interface HelpTextProps
    * Default dialog-placement on open
    * @default "top"
    */
-  placement?: Placement;
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
 }
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
@@ -38,7 +48,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = mergeRefs([buttonRef, ref]);
+    const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
     const [open, setOpen] = useState(false);
 
     return (
@@ -55,6 +65,10 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           aria-expanded={open}
         >
           <HelpTextIcon className="navds-help-text__icon" title={title} />
+          <HelptextFilled
+            className="navds-help-text__icon navds-help-text__icon--filled"
+            title={title}
+          />
         </button>
         <Popover
           onClose={() => setOpen(false)}

package/src/help-text/help-text.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { TextField, HelpText } from "..";
+import React, { useEffect, useRef } from "react";
+import { HelpText } from "..";
 
 export default {
   title: "ds-react/HelpText",
@@ -9,6 +9,7 @@ export default {
       control: {
         type: "radio",
         options: [
+          "top",
           "bottom",
           "right",
           "left",
@@ -20,9 +21,6 @@ export default {
           "right-end",
           "left-start",
           "left-end",
-          "auto",
-          "auto-start",
-          "auto-end",
         ],
       },
     },
@@ -47,17 +45,15 @@ Default.args = {
   title: "show tooltip",
 };
 
-export const Inline = () => {
+export const Open = () => {
+  const ref = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    ref.current && ref.current.click();
+  }, []);
+
   return (
-    <TextField
-      label={
-        <div style={{ display: "flex", gap: 8 }}>
-          Text field label
-          <HelpText title="show tooltip">
-            Id ullamco excepteur elit fugiat labore.
-          </HelpText>
-        </div>
-      }
-    />
+    <HelpText ref={ref} title="show tooltip" strategy="fixed">
+      Id ullamco excepteur elit fugiat labore.
+    </HelpText>
   );
 };

package/src/index.ts

@@ -8,14 +8,12 @@ export * from "./guide-panel";
 export * from "./link";
 export * from "./link-panel";
 export * from "./loader";
-export * from "./menu";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
 export * from "./read-more";
-export * from "./speech-bubble";
-export * from "./step-indicator";
+export * from "./chat";
 export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
@@ -24,7 +22,3 @@ export * from "./tabs";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
-
-/* Navno spesific packages */
-export * from "./card";
-export * from "./page-header";

package/src/link/Link.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 export interface LinkProps

package/src/link-panel/LinkPanel.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Panel, OverridableComponent } from "..";
 import { Next } from "@navikt/ds-icons";
-import cl from "classnames";
+import cl from "clsx";
 import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
 import {
   LinkPanelDescription,

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { BodyLong } from "..";
 
 interface LinkPanelDescriptionProps

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { OverridableComponent } from "..";
 
 interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/loader/Loader.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, SVGProps } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { useId } from "..";
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {

package/src/modal/Modal.tsx

@@ -1,9 +1,8 @@
-import React, { forwardRef, useRef } from "react";
-import cl from "classnames";
+import React, { forwardRef, useMemo, useRef } from "react";
+import cl from "clsx";
 import ReactModal from "react-modal";
-import mergeRefs from "react-merge-refs";
 import { Close } from "@navikt/ds-icons";
-import { Button } from "..";
+import { Button, mergeRefs } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
 
 export interface ModalProps {
@@ -77,7 +76,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     ref
   ) => {
     const modalRef = useRef<ReactModal | null>(null);
-    const mergedRef = mergeRefs([modalRef, ref]);
+    const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     const onModalCloseRequest = (e) => {

package/src/modal/ModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 
 export interface ModalContentProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/pagination/Pagination.tsx

@@ -1,7 +1,11 @@
 import React, { forwardRef } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
+import PaginationItem, {
+  PaginationItemProps,
+  PaginationItemType,
+} from "./PaginationItem";
 
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -22,7 +26,7 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Callback when current page changes
    */
-  onPageChange: (page: number) => void;
+  onPageChange?: (page: number) => void;
   /**
    * Total number of pages
    */
@@ -31,12 +35,24 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
    * Changes padding, height and font-size
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "medium" | "small" | "xsmall";
   /**
    * Display text alongside "previous" and "next" icons
    * @default false
    */
   prevNextTexts?: boolean;
+  /**
+   * Override pagination item rendering
+   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   */
+  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+}
+
+interface PaginationType
+  extends React.ForwardRefExoticComponent<
+    PaginationProps & React.RefAttributes<HTMLElement>
+  > {
+  Item: PaginationItemType;
 }
 
 export const getSteps = ({
@@ -83,6 +99,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       className,
       size = "medium",
       prevNextTexts = false,
+      renderItem: Item = (item: PaginationItemProps) => (
+        <PaginationItem {...item} />
+      ),
       ...rest
     },
     ref
@@ -114,99 +133,86 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           className
         )}
       >
-        {prevNextTexts && (
-          <button
-            className={cl("navds-pagination__prev-next", {
-              "navds-pagination--invisible": page === 1,
-            })}
-            disabled={page === 1}
-            onClick={() => onPageChange(page - 1)}
-          >
-            <Back
-              className="navds-pagination__prev-next-icon"
-              role="presentation"
-            />
-            <BodyShort size={size} className="navds-pagination__prev-text">
-              Forrige
-            </BodyShort>
-          </button>
-        )}
         <ul className="navds-pagination__list">
-          {!prevNextTexts && (
-            <li>
-              <button
-                className={cl("navds-pagination__prev-next", {
-                  "navds-pagination--invisible": page === 1,
-                })}
-                disabled={page === 1}
-                onClick={() => onPageChange(page - 1)}
-              >
-                <Back
-                  className="navds-pagination__prev-next-icon"
-                  title="Forrige"
-                />
-              </button>
-            </li>
-          )}
+          <li>
+            <Item
+              className={cl("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === 1,
+              })}
+              disabled={page === 1}
+              onClick={() => onPageChange?.(page - 1)}
+              page={page - 1}
+              size={size}
+            >
+              <Back
+                className="navds-pagination__prev-next-icon"
+                title="Forrige"
+              />
+              {prevNextTexts && (
+                <BodyShort
+                  size={size === "xsmall" ? "small" : size}
+                  className="navds-pagination__prev-text"
+                >
+                  Forrige
+                </BodyShort>
+              )}
+            </Item>
+          </li>
           {getSteps({ page, count, siblingCount, boundaryCount }).map(
             (step, i) => {
               const n = Number(step);
               return isNaN(n) ? (
                 <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
-                  <BodyShort size={size}>...</BodyShort>
+                  <BodyShort size={size === "xsmall" ? "small" : size}>
+                    ...
+                  </BodyShort>
                 </li>
               ) : (
                 <li key={step}>
-                  <BodyShort
+                  <Item
+                    onClick={() => onPageChange?.(n)}
+                    selected={page === n}
+                    page={n}
                     size={size}
-                    as="button"
-                    className="navds-pagination__item"
-                    onClick={() => onPageChange(n)}
-                    aria-current={page === n ? true : undefined}
                   >
-                    {n}
-                  </BodyShort>
+                    <BodyShort size={size === "xsmall" ? "small" : size}>
+                      {n}
+                    </BodyShort>
+                  </Item>
                 </li>
               );
             }
           )}
-          {!prevNextTexts && (
-            <li>
-              <button
-                className={cl("navds-pagination__prev-next", {
-                  "navds-pagination--invisible": page === count,
-                })}
-                disabled={page === count}
-                onClick={() => onPageChange(page + 1)}
-              >
-                <Next
-                  className="navds-pagination__prev-next-icon"
-                  title="Neste"
-                />
-              </button>
-            </li>
-          )}
+          <li>
+            <Item
+              className={cl("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === count,
+              })}
+              disabled={page === count}
+              onClick={() => onPageChange?.(page + 1)}
+              page={page + 1}
+              size={size}
+            >
+              {prevNextTexts && (
+                <BodyShort
+                  size={size === "xsmall" ? "small" : size}
+                  className="navds-pagination__next-text"
+                >
+                  Neste
+                </BodyShort>
+              )}
+              <Next
+                className="navds-pagination__prev-next-icon"
+                title="Neste"
+              />
+            </Item>
+          </li>
         </ul>
-        {prevNextTexts && (
-          <button
-            className={cl("navds-pagination__prev-next", {
-              "navds-pagination--invisible": page === count,
-            })}
-            disabled={page === count}
-            onClick={() => onPageChange(page + 1)}
-          >
-            <BodyShort size={size} className="navds-pagination__next-text">
-              Neste
-            </BodyShort>
-            <Next
-              className="navds-pagination__prev-next-icon"
-              role="presentation"
-            />
-          </button>
-        )}
       </nav>
     );
   }
-);
+) as PaginationType;
+
+Pagination.Item = PaginationItem;
 
 export default Pagination;

package/src/pagination/PaginationItem.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { Button, OverridableComponent } from "..";
+
+export interface PaginationItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  /**
+   * Sets selected styling if true
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The page the item represents
+   */
+  page: number;
+  /**
+   * Changes padding, height and font-size
+   * @default medium
+   */
+  size?: "medium" | "small" | "xsmall";
+}
+
+export type PaginationItemType = OverridableComponent<
+  PaginationItemProps,
+  HTMLAnchorElement
+>;
+
+export const Item: PaginationItemType = forwardRef(
+  (
+    {
+      children,
+      as: Component = "button",
+      selected = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Button
+        as={Component}
+        variant="tertiary"
+        aria-current={selected}
+        ref={ref}
+        className={cl("navds-pagination__item", className, {
+          "navds-pagination__item--selected": selected,
+        })}
+        {...rest}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+
+export default Item;

package/src/pagination/index.ts

@@ -1,2 +1 @@
-export { default as Pagination } from "./Pagination";
-export { PaginationProps } from "./Pagination";
+export { default as Pagination, PaginationProps } from "./Pagination";