@navikt/ds-react 0.14.4 → 0.14.8

package/src/step-indicator/StepIndicator.tsx

@@ -0,0 +1,145 @@
+import cl from "classnames";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import Step, { StepIndicatorStepProps, StepIndicatorStepType } from "./Step";
+
+export interface StepIndicatorProps
+  extends React.HTMLAttributes<HTMLOListElement> {
+  /**
+   * <StepIndicator.Step /> elements
+   */
+  children: React.ReactNode;
+  /**
+   * Adds classname to wrapper
+   */
+  className?: string;
+  /**
+   * Current active step index
+   */
+  activeStep: number;
+  /**
+   * Callback for clicked step index
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Hides labels for each step if true
+   * @default false
+   */
+  hideLabels?: boolean;
+  /**
+   * enables `hideLabels` internally when steps start to overflow.
+   * @note declaring `hideLabels` overwrites this functionality
+   */
+  responsive?: boolean;
+}
+
+interface StepIndicatorComponent
+  extends React.ForwardRefExoticComponent<
+    StepIndicatorProps & React.RefAttributes<HTMLOListElement>
+  > {
+  Step: StepIndicatorStepType;
+}
+
+interface StepContextProps {
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  hideLabels: boolean;
+}
+
+export const StepContext = createContext<StepContextProps | null>(null);
+
+const StepIndicator: StepIndicatorComponent = forwardRef<
+  HTMLOListElement,
+  StepIndicatorProps
+>(
+  (
+    {
+      children,
+      className,
+      activeStep,
+      hideLabels,
+      onStepChange = () => {},
+      responsive,
+      ...rest
+    },
+    ref
+  ) => {
+    const wrapperRef = useRef<HTMLOListElement | null>(null);
+    const mergedRef = mergeRefs([wrapperRef, ref]);
+
+    const [showLabels, setShowLabels] = useState(true);
+
+    const removeLabels = hideLabels ?? (!!responsive && !showLabels);
+
+    const stepsWithIndex = React.Children.map(children, (step, index) => {
+      return React.isValidElement<StepIndicatorStepProps>(step) ? (
+        <li
+          className={cl("navds-step-indicator__step-wrapper", {
+            "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+          })}
+          key={index}
+          aria-current={index === activeStep && "step"}
+        >
+          {React.cloneElement(step, {
+            ...step.props,
+            index,
+          })}
+        </li>
+      ) : (
+        step
+      );
+    });
+
+    const canShowLabels = useCallback(() => {
+      const remSize = parseFloat(
+        String(getComputedStyle(document.documentElement).fontSize)
+      );
+      const childrenLength = React.Children.toArray(children).filter((child) =>
+        React.isValidElement(child)
+      ).length;
+
+      wrapperRef.current &&
+        setShowLabels(
+          wrapperRef.current?.getBoundingClientRect().width >=
+            remSize * 10 * childrenLength
+        );
+    }, [children]);
+
+    useEffect(() => {
+      window.addEventListener("resize", canShowLabels);
+      canShowLabels();
+      return () => {
+        window.removeEventListener("resize", canShowLabels);
+      };
+    }, [canShowLabels]);
+
+    return (
+      <ol
+        ref={mergedRef}
+        className={cl(`navds-step-indicator`, className)}
+        {...rest}
+      >
+        <StepContext.Provider
+          value={{
+            activeStep,
+            onStepChange,
+            hideLabels: removeLabels,
+          }}
+        >
+          {stepsWithIndex}
+        </StepContext.Provider>
+      </ol>
+    );
+  }
+) as StepIndicatorComponent;
+
+StepIndicator.Step = Step;
+
+export default StepIndicator;

package/src/step-indicator/index.ts

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";

package/src/step-indicator/stories/Example.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { StepIndicator } from "..";
+
+export const Example = ({ ...props }) => {
+  const [active, setactive] = useState(1);
+
+  const { disabled, ...rest } = props;
+
+  return (
+    <StepIndicator {...rest} activeStep={active} onStepChange={setactive}>
+      <StepIndicator.Step>Start</StepIndicator.Step>
+      <StepIndicator.Step>
+        Sunt deserunt qui sit sunt culpa nisi
+      </StepIndicator.Step>
+      <StepIndicator.Step disabled={disabled}>
+        Nulla nisi pariatur nulla cupidatat elit.
+      </StepIndicator.Step>
+      <StepIndicator.Step>
+        Nulla laborum proident consequat laborum elit et dolore ut sunt.
+      </StepIndicator.Step>
+    </StepIndicator>
+  );
+};

package/src/step-indicator/stories/step-indicator.stories.mdx

@@ -0,0 +1,122 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { StepIndicator } from "..";
+import { Example } from "./Example";
+
+<Meta title="ds-react/step-indicator/intro" />
+
+# Hvordan ta i bruk StepIndicator
+
+Vi flytter over Stegindikator til `ds-react` uten noen veldig store endringer i design.
+Du må nå selv styre state med `activeStep` og `onStepChange`.
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example />
+</Canvas>
+
+## responsive
+
+Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overlfowe.
+
+```jsx
+<StepIndicator
+  responsive
+  activeStep={activeStep}
+  onStepChange={(x) => setActiveStep(x)}
+>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example responsive />
+</Canvas>
+
+## hideLabels
+
+Du kan gjemme labels fra hvert steg med `hideLabels`-prop
+
+```jsx
+<StepIndicator
+  hideLabels
+  activeStep={activeStep}
+  onStepChange={(x) => setActiveStep(x)}
+>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example hideLabels />
+</Canvas>
+
+## disabled
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step disabled>
+    Sunt deserunt qui sit sunt culpa nisi
+  </StepIndicator.Step>
+  <StepIndicator.Step disabled>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example disabled />
+</Canvas>
+
+## Override tags
+
+`StepIndicator.Step` er implementert med Overridable-component noe som gjør at du kan endre taggen til
+det du selv ønsker ved å bruke `as`-prop
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  {/* Dette er default */}
+  <StepIndicator.Step as="button">Start</StepIndicator.Step>
+  <StepIndicator.Step as="a" href="#">
+    Sunt deserunt qui sit sunt culpa nisi
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <StepIndicator activeStep={1} onStepChange={console.log}>
+    <StepIndicator.Step as="button">{`<button>`}</StepIndicator.Step>
+    <StepIndicator.Step as="a" href="#">
+      {`<a>`}
+    </StepIndicator.Step>
+  </StepIndicator>
+</Canvas>

package/src/step-indicator/stories/step-indicator.stories.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import StepIndicator from "../StepIndicator";
+import { Meta } from "@storybook/react/types-6-0";
+import { Link, HashRouter as Router, useLocation } from "react-router-dom";
+
+export default {
+  title: "ds-react/step-indicator",
+  component: StepIndicator,
+} as Meta;
+
+export const All = () => {
+  const [activeStep, setActiveStep] = useState(1);
+  return (
+    <div>
+      <StepIndicator activeStep={1} onStepChange={console.log}>
+        <StepIndicator.Step>Steg nr 1</StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+      </StepIndicator>
+      <br />
+
+      <StepIndicator activeStep={1} onStepChange={console.log}>
+        <StepIndicator.Step href="#" as="a">
+          1
+        </StepIndicator.Step>
+        <StepIndicator.Step href="#" as="a">
+          2
+        </StepIndicator.Step>
+        <StepIndicator.Step href="#" as="a">
+          3
+        </StepIndicator.Step>
+      </StepIndicator>
+      <br />
+      <StepIndicator activeStep={activeStep} onStepChange={setActiveStep}>
+        <StepIndicator.Step disabled>
+          Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
+          ut dolore.
+        </StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step disabled>
+          Cupidatat Lorem do nostrud ut eu.
+        </StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+        <StepIndicator.Step>
+          Voluptate pariatur ut est voluptate elit officia excepteur laborum.
+        </StepIndicator.Step>
+      </StepIndicator>
+      <br />
+      <StepIndicator
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        hideLabels
+      >
+        <StepIndicator.Step>
+          Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
+          ut dolore.
+        </StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step disabled>
+          Cupidatat Lorem do nostrud ut eu.
+        </StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+        <StepIndicator.Step>
+          Voluptate pariatur ut est voluptate elit officia excepteur laborum.
+        </StepIndicator.Step>
+      </StepIndicator>
+    </div>
+  );
+};
+
+export const ReactRouter = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <StepIndicator
+      activeStep={
+        {
+          "/": 0,
+          "/first": 0,
+          "/second": 1,
+          "/third": 2,
+        }[pathname]
+      }
+    >
+      <StepIndicator.Step as={Link} to="/first">
+        Steg nr 1
+      </StepIndicator.Step>
+      <StepIndicator.Step as={Link} to="/second">
+        Laborum velit eu magna esse
+      </StepIndicator.Step>
+      <StepIndicator.Step as={Link} to="/third">
+        test
+      </StepIndicator.Step>
+    </StepIndicator>
+  );
+};
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];