@navikt/ds-react 0.17.12 → 0.17.13

package/src/tabs/Tab.tsx

@@ -0,0 +1,79 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Label, OverridableComponent } from "..";
+import { TabsContext } from "./Tabs";
+
+export interface TabProps
+  extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * Content
+   */
+  label?: React.ReactNode;
+  /**
+   * Icon
+   */
+  icon?: React.ReactNode;
+  /**
+   * Value for state-handling
+   */
+  value: string;
+  /**
+   * Icon position
+   * @default "left"
+   */
+  iconPosition?: "left" | "top";
+}
+
+export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
+
+const Tab: TabType = forwardRef(
+  (
+    {
+      className,
+      as: Component = "button",
+      label,
+      icon,
+      iconPosition,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
+    const context = useContext(TabsContext);
+
+    if (!label && !icon) {
+      console.error("<Tabs.Tab/> needs label/icon");
+      return null;
+    }
+
+    return (
+      <RadixTabs.Trigger value={value} asChild>
+        <Component
+          ref={ref}
+          className={cl(
+            "navds-tabs__tab",
+            `navds-tabs__tab--${context?.size ?? "medium"}`,
+            `navds-tabs__tab-icon--${iconPosition}`,
+            className,
+            {
+              "navds-tabs__tab--icon-only": icon && !label,
+            }
+          )}
+          {...rest}
+        >
+          <Label
+            as="span"
+            className="navds-tabs__tab-inner"
+            size={context?.size}
+          >
+            {icon}
+            {label}
+          </Label>
+        </Component>
+      </RadixTabs.Trigger>
+    );
+  }
+);
+
+export default Tab;

package/src/tabs/TabList.tsx

@@ -0,0 +1,127 @@
+import { debounce } from "@material-ui/core";
+import { Back, Next } from "@navikt/ds-icons";
+import { TabsList } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import mergeRefs from "react-merge-refs";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tab elements
+   */
+  children: React.ReactNode;
+  /**
+   * Loops back to start when navigating past last item
+   */
+  loop?: boolean;
+}
+
+export type ListType = React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const List = forwardRef<HTMLDivElement, ListProps>(
+  ({ className, ...rest }, ref) => {
+    const listRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = mergeRefs([listRef, ref]);
+    const [displayScroll, setDisplayScroll] = useState({
+      start: false,
+      end: false,
+    });
+
+    const updateScrollButtonState = useMemo(
+      () =>
+        debounce(() => {
+          if (!listRef?.current) return;
+          const { scrollWidth, clientWidth } = listRef?.current;
+          let showStartScroll;
+          let showEndScroll;
+
+          const scrollLeft = listRef?.current?.scrollLeft;
+          // use 1 for the potential rounding error with browser zooms.
+          showStartScroll = scrollLeft > 1;
+          showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+
+          setDisplayScroll((displayScroll) =>
+            showStartScroll === displayScroll.start &&
+            showEndScroll === displayScroll.end
+              ? displayScroll
+              : { start: showStartScroll, end: showEndScroll }
+          );
+        }),
+      []
+    );
+
+    useEffect(() => {
+      const handleResize = () => updateScrollButtonState();
+      const win = listRef.current?.ownerDocument ?? document ?? window;
+      win.addEventListener("resize", handleResize);
+
+      let resizeObserver;
+
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(listRef.current);
+      }
+
+      return () => {
+        win.removeEventListener("resize", handleResize);
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [updateScrollButtonState]);
+
+    useEffect(() => {
+      updateScrollButtonState();
+    });
+
+    useEffect(() => {
+      return () => {
+        updateScrollButtonState.clear();
+      };
+    }, [updateScrollButtonState]);
+
+    const ScrollButton = ({
+      dir,
+      hidden,
+    }: {
+      dir: 1 | -1;
+      hidden: boolean;
+    }) => (
+      <div
+        className={cl("navds-tabs__scroll-button", {
+          "navds-tabs__scroll-button--hidden": hidden,
+        })}
+        onClick={() => {
+          if (!listRef.current) return;
+          listRef.current.scrollLeft &&= listRef.current.scrollLeft + dir * 100;
+        }}
+      >
+        {dir === -1 ? (
+          <Back title="scroll tilbake" />
+        ) : (
+          <Next title="scroll neste" />
+        )}
+      </div>
+    );
+
+    const showSteppers = displayScroll.end || displayScroll.start;
+    return (
+      <div className="navds-tabs__tablist-wrapper">
+        {showSteppers && (
+          <ScrollButton dir={-1} hidden={!displayScroll.start} />
+        )}
+        <TabsList
+          {...rest}
+          ref={mergedRef}
+          onScroll={updateScrollButtonState}
+          className={cl("navds-tabs__tablist", className)}
+        />
+        {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
+      </div>
+    );
+  }
+) as ListType;
+
+export default List;

package/src/tabs/TabPanel.tsx

@@ -0,0 +1,30 @@
+import { TabsContent } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef } from "react";
+
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tab panel
+   */
+  children: React.ReactNode;
+  /**
+   * Value for state-handling
+   */
+  value: string;
+}
+
+export type PanelType = React.ForwardRefExoticComponent<
+  PanelProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ className, ...rest }, ref) => (
+    <TabsContent
+      {...rest}
+      ref={ref}
+      className={cl("navds-tabs__tabpanel", className)}
+    />
+  )
+) as PanelType;
+
+export default Panel;

package/src/tabs/Tabs.stories.tsx

@@ -0,0 +1,188 @@
+import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+import { Tabs } from ".";
+import { Link } from "../link";
+
+export default {
+  title: "ds-react/tabs",
+  component: Tabs,
+} as Meta;
+
+export const UUDemo = () => (
+  <Tabs defaultValue="skap" lang="no">
+    <Tabs.List>
+      <Tabs.Tab value="skap" label="Skap" icon={<Cup aria-hidden />} />
+      <Tabs.Tab
+        value="oppvaskmaskin"
+        label="Oppvaskmaskin"
+        icon={<Dishwasher aria-hidden />}
+      />
+      <Tabs.Tab value="fryser" icon={<Freezer aria-hidden />} label="Fryser" />
+    </Tabs.List>
+    <Tabs.Panel
+      value="skap"
+      style={{ background: "var(--navds-global-color-gray-50)", height: 300 }}
+    >
+      Innholdspanel for skap med lenke <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="oppvaskmaskin"
+      style={{ background: "var(--navds-global-color-green-50)", height: 300 }}
+    >
+      Innholdspanel for oppvaskmaskin med lenke{" "}
+      <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="fryser"
+      style={{ background: "var(--navds-global-color-red-50)", height: 300 }}
+    >
+      Innholdspanel for fryser med lenke <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+  </Tabs>
+);
+
+const Panel = () => {
+  return (
+    <>
+      <Tabs.Panel
+        value="test1"
+        style={{ background: "var(--navds-global-color-gray-50)", height: 100 }}
+      >
+        Innholdspanel for Skap-tab
+      </Tabs.Panel>
+      <Tabs.Panel
+        value="test2"
+        style={{
+          background: "var(--navds-global-color-green-50)",
+          height: 100,
+        }}
+      >
+        Innholdspanel for Oppvaskmaskin-tab
+      </Tabs.Panel>
+      <Tabs.Panel
+        value="test3"
+        style={{ background: "var(--navds-global-color-red-50)", height: 100 }}
+      >
+        Innholdspanel for Fryser-tab
+      </Tabs.Panel>
+    </>
+  );
+};
+
+export const All = () => {
+  const [activeValue, setActiveValue] = useState("test1");
+
+  return (
+    <div>
+      <h2>Tabs</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Controlled</h2>
+      <Tabs value={activeValue} onChange={setActiveValue}>
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>selectionFollowsFocus</h2>
+      <Tabs defaultValue="test2" selectionFollowsFocus>
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs iconPosition="top"</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab
+            value="test1"
+            icon={<Cup />}
+            label="Skap"
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<Dishwasher />}
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test3"
+            icon={<Freezer />}
+            label="Fryser"
+            iconPosition="top"
+          />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs small</h2>
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+      <br />
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab
+            value="test1"
+            icon={<Cup />}
+            label="Skap"
+            iconPosition="top"
+          />
+
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<Dishwasher />}
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test3"
+            icon={<Freezer />}
+            label="Fryser"
+            iconPosition="top"
+          />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs Icon-only</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} />
+          <Tabs.Tab value="test2" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+      <br />
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} />
+          <Tabs.Tab value="test2" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+    </div>
+  );
+};

package/src/tabs/Tabs.tsx

@@ -0,0 +1,89 @@
+import cl from "classnames";
+import React, { createContext, forwardRef, HTMLAttributes } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import Tab, { TabType } from "./Tab";
+import List, { ListType } from "./TabList";
+import Panel, { PanelType } from "./TabPanel";
+
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+  /**
+   * Tabs elements
+   */
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-size
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * onChange
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Controlled selected value
+   */
+  value?: string;
+  /**
+   * If not controlled, a default-value needs to be set
+   */
+  defaultValue?: string;
+  /**
+   * Automatically activates tab on focus/navigation
+   * @default false
+   */
+  selectionFollowsFocus?: boolean;
+}
+
+interface TabsComponent
+  extends React.ForwardRefExoticComponent<
+    TabsProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Tab: TabType;
+  List: ListType;
+  Panel: PanelType;
+}
+
+interface TabsContextProps {
+  size: "medium" | "small";
+}
+
+export const TabsContext = createContext<TabsContextProps | null>(null);
+
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    {
+      className,
+      children,
+      onChange,
+      size = "medium",
+      selectionFollowsFocus = false,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <RadixTabs.Root
+        {...rest}
+        ref={ref}
+        className={cl("navds-tabs", className, `navds-tabs--${size}`)}
+        activationMode={selectionFollowsFocus ? "automatic" : "manual"}
+        onValueChange={onChange}
+      >
+        <TabsContext.Provider
+          value={{
+            size,
+          }}
+        >
+          {children}
+        </TabsContext.Provider>
+      </RadixTabs.Root>
+    );
+  }
+) as TabsComponent;
+
+Tabs.Tab = Tab;
+Tabs.List = List;
+Tabs.Panel = Panel;
+
+export default Tabs;

package/src/tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as Tabs, TabsProps } from "./Tabs";
+export { TabProps } from "./Tab";