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

package/src/step-indicator/Step.tsx

@@ -1,81 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { StepContext } from "./StepIndicator";
-import { BodyShort, Label, OverridableComponent } from "..";
-
-export interface StepIndicatorStepProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Text content under indicator
-   */
-  children: React.ReactNode;
-  /**
-   * Disables interaction with element
-   * @note We recommend not using disabled if possible
-   */
-  disabled?: boolean;
-  /**
-   * Handled by StepIndicator
-   * @private
-   */
-  index?: number;
-}
-
-export interface StepIndicatorStepType
-  extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {}
-
-export const StepIndicatorStepComponent: OverridableComponent<
-  StepIndicatorStepProps,
-  HTMLButtonElement
-> = forwardRef(
-  (
-    { className, children, as: Component = "button", disabled, index, ...rest },
-    ref
-  ) => {
-    const context = useContext(StepContext);
-
-    if (context === null) {
-      console.error(
-        "<StepIndicator.Step> has to be used within an <StepIndicator>"
-      );
-      return null;
-    }
-
-    const safeIndex = index ?? 0;
-
-    const Number = context.activeStep === safeIndex ? Label : BodyShort;
-
-    return (
-      <Component
-        {...rest}
-        disabled={disabled}
-        ref={ref}
-        className={cl("navds-step-indicator__step", className, {
-          "navds-step-indicator__step--disabled": disabled,
-          "navds-step-indicator__step--active":
-            context.activeStep === safeIndex,
-          "navds-step-indicator__step--finished":
-            context.activeStep > safeIndex,
-        })}
-        onClick={(e) => {
-          context.onStepChange(safeIndex);
-          rest.onClick && rest.onClick(e);
-        }}
-      >
-        <Number className="navds-step-indicator__step-number">
-          {safeIndex + 1}
-        </Number>
-        <div className={cl("navds-step-indicator__step-label")}>
-          {!context.hideLabels && children}
-        </div>
-        {safeIndex !== 0 && (
-          <span aria-hidden className="navds-step-indicator__step-line" />
-        )}
-      </Component>
-    );
-  }
-);
-
-const Step = StepIndicatorStepComponent as StepIndicatorStepType;
-
-export default Step;

package/src/step-indicator/StepIndicator.tsx

@@ -1,148 +0,0 @@
-import cl from "classnames";
-import React, {
-  createContext,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import mergeRefs from "react-merge-refs";
-import StepIndicatorStep, {
-  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);
-
-export 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 = StepIndicatorStep;
-
-export default StepIndicator;

package/src/step-indicator/index.ts

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,122 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { StepIndicator } from "..";
-import { Example } from "./Example";
-
-<Meta title="ds-react(deprecated)/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 å overflowe.
-
-```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

@@ -1,104 +0,0 @@
-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(deprecated)/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>
-  ),
-];