@navikt/ds-react 0.19.25 → 1.0.0-rc.3

package/src/speech-bubble/SpeechBubble.tsx

@@ -1,93 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
-import Bubble, { BubbleType } from "./Bubble";
-
-export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Children of type <SpeechBubble.Bubble />
-   */
-  children: React.ReactNode;
-  /**
-   * Top text for personalia and date
-   */
-  topText?: React.ReactNode;
-  /**
-   * Illustration for messenger. Regular text for initials works to
-   */
-  illustration: React.ReactNode;
-  /**
-   * Background color on bubbles
-   */
-  backgroundColor?: string;
-  /**
-   * Background color for illustration
-   */
-  illustrationBgColor?: string;
-  /**
-   * Positions illustration and Speechbubbles
-   * @default "left"
-   */
-  position?: "left" | "right";
-}
-
-interface SpeechBubbleComponent
-  extends React.ForwardRefExoticComponent<
-    SpeechBubbleProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Bubble: BubbleType;
-}
-
-export const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
-  (
-    {
-      children,
-      className,
-      topText,
-      illustration,
-      position = "left",
-      illustrationBgColor,
-      backgroundColor,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-speechbubble",
-          className,
-          `navds-speechbubble--${position}`,
-          "navds-body-long"
-        )}
-        {...rest}
-      >
-        <div
-          className="navds-speechbubble__illustration"
-          style={{ backgroundColor: illustrationBgColor }}
-        >
-          {illustration}
-        </div>
-        <ol className="navds-speechbubble__bubble-list">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <li>
-                  {React.cloneElement(child, {
-                    topText: topText && i === 0 ? topText : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </li>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
-) as SpeechBubbleComponent;
-
-SpeechBubble.Bubble = Bubble;
-
-export default SpeechBubble;

package/src/speech-bubble/index.ts

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

package/src/speech-bubble/stories/illustration.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-export const Illustration = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
-    <path
-      fill="#e7e5e2"
-      d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
-    />
-    <path
-      fill="#5c4378"
-      d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
-    />
-    <path
-      fill="#d2242a"
-      d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
-    />
-    <path
-      fill="#fff"
-      d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
-    />
-    <path
-      fill="#c52d35"
-      d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
-    />
-    <path
-      fill="#c52d35"
-      d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
-    />
-    <path
-      fill="#c52d35"
-      d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
-    />
-    <path
-      fill="#c52d35"
-      d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
-    />
-    <path
-      fill="#5a1f57"
-      d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
-    />
-    <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
-    <path
-      fill="#e7e5e2"
-      d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
-    />
-    <path
-      fill="#635e59"
-      d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
-    />
-    <path
-      fill="#d1bfa3"
-      d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
-    />
-    <path
-      fill="#593a32"
-      d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
-    />
-    <path
-      fill="#f6b873"
-      d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
-    />
-    <path
-      fill="#f6b873"
-      d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
-    />
-  </svg>
-);

package/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -1,184 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { SpeechBubble, Bubble } from "../../index";
-import { Illustration } from "./illustration";
-
-<Meta title="ds-react/speechbubble/intro" />
-
-# Hvordan ta i bruk Speechbubble
-
-NOTE: Komponenten er i tidlig BETA og ikke testet ordentlig. Derfor kan/vil det komme potensielle
-breaking-changes før v1 er klar. Anbefaler da å ikke override styling som er brukt utenom det som er tilbytt som props.
-
-```jsx
-<SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-  <SpeechBubble.Bubble>
-    Tempor fugiat amet eu sint in in ullamco.
-  </SpeechBubble.Bubble>
-  <SpeechBubble.Bubble>
-    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-    labore nisi ut.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-```
-
-<Canvas>
-  <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-    <SpeechBubble.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </SpeechBubble.Bubble>
-    <SpeechBubble.Bubble>
-      Tempor fugiat amet eu sint in in ullamco.
-    </SpeechBubble.Bubble>
-    <SpeechBubble.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </SpeechBubble.Bubble>
-  </SpeechBubble>
-</Canvas>
-
-## Posisjonering
-
-Speechbubble kan bli posisjonert "left" og "right" med `position`-proppen
-
-```jsx
-<SpeechBubble illustration="OLA" position="left">
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-<SpeechBubble illustration="OLA" position="right">
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-```
-
-<Canvas>
-  <div>
-    <SpeechBubble illustration="OLA" position="left">
-      <SpeechBubble.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </SpeechBubble.Bubble>
-    </SpeechBubble>
-    <br />
-    <SpeechBubble illustration="PER" position="right">
-      <SpeechBubble.Bubble>
-        Ipsum laborum culpa ea ea commodo eiusmod in aute.
-      </SpeechBubble.Bubble>
-    </SpeechBubble>
-  </div>
-</Canvas>
-
-## Endring av farger
-
-Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor` proppene.
-
-```jsx
-<SpeechBubble
-  illustration="OLA"
-  position="left"
-  illustrationBgColor="var(--navds-global-color-lightblue-100)"
-  backgroundColor="var(--navds-global-color-lightblue-200)"
->
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-```
-
-<Canvas>
-  <SpeechBubble
-    illustration="OLA"
-    position="left"
-    illustrationBgColor="var(--navds-global-color-lightblue-100)"
-    backgroundColor="var(--navds-global-color-lightblue-200)"
-  >
-    <SpeechBubble.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </SpeechBubble.Bubble>
-  </SpeechBubble>
-</Canvas>
-
-## Illustrasjoner
-
-`illustration`-proppen aksepterer `ReactNode`.
-Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-veilederpanel` sin illustrasjon.
-
-```jsx
-<SpeechBubble illustration={<Illustration />} position="left">
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-```
-
-<Canvas>
-  <SpeechBubble illustration={<Illustration />} position="left">
-    <SpeechBubble.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </SpeechBubble.Bubble>
-  </SpeechBubble>
-</Canvas>
-
-## Styling av topText
-
-`topText`-proppen aksepterer `ReactNode` og man kan da selv style den
-
-```jsx
-<SpeechBubble
-  illustration={<div>OLA</div>}
-  topText={
-    <div
-      style={{
-        display: "flex",
-        columnGap: "1rem",
-      }}
-    >
-      <span>Ola Normann</span>
-      <span className="navds-detail--s">01.01.21 14:00</span>
-    </div>
-  }
->
-  <SpeechBubble.Bubble>
-    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </SpeechBubble.Bubble>
-  <SpeechBubble.Bubble>
-    Tempor fugiat amet eu sint in in ullamco.
-  </SpeechBubble.Bubble>
-  <SpeechBubble.Bubble>
-    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-    labore nisi ut.
-  </SpeechBubble.Bubble>
-</SpeechBubble>
-```
-
-<Canvas>
-  <SpeechBubble
-    illustration={<div>OLA</div>}
-    topText={
-      <div
-        style={{
-          display: "flex",
-          columnGap: "1rem",
-        }}
-      >
-        <span>Ola Normann</span>
-        <span className="navds-detail--s">01.01.21 14:00</span>
-      </div>
-    }
-  >
-    <SpeechBubble.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </SpeechBubble.Bubble>
-    <SpeechBubble.Bubble>
-      Tempor fugiat amet eu sint in in ullamco.
-    </SpeechBubble.Bubble>
-    <SpeechBubble.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </SpeechBubble.Bubble>
-  </SpeechBubble>
-</Canvas>

package/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import { SpeechBubble } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-import { Illustration } from "./illustration";
-
-export default {
-  title: "ds-react/speechbubble",
-  component: SpeechBubble,
-} as Meta;
-
-export const All = () => {
-  return (
-    <div style={{ rowGap: "2rem", display: "flex", flexDirection: "column" }}>
-      <SpeechBubble
-        illustration={<Illustration />}
-        topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="var(--navds-global-color-lightblue-200)"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Tempor fugiat amet eu sint in in ullamco.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<div>KAJ</div>}
-        topText={
-          <div
-            style={{
-              columnGap: "1rem",
-              display: "flex",
-              justifyContent: "flex-end",
-            }}
-          >
-            <span>Ola Normann</span>
-            <span className="navds-detail--s">01.01.21 14:00</span>
-          </div>
-        }
-        position="right"
-        backgroundColor="var(--navds-global-color-gray-100)"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Tempor fugiat amet eu sint in in ullamco.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<div>KAJ</div>}
-        topText="Ola Normann 01.01.21 14:00"
-        position="left"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Tempor fugiat amet eu sint in in ullamco.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<div>KAJ</div>}
-        topText="Ola Normann 01.01.21 14:00"
-        position="right"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Tempor fugiat amet eu sint in in ullamco.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<div>KAJ</div>}
-        topText="Ola Normann 01.01.21 14:00"
-        position="left"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<div>KAJ</div>}
-        topText="Ola Normann 01.01.21 14:00"
-        position="right"
-      >
-        <SpeechBubble.Bubble>Per skriver....</SpeechBubble.Bubble>
-      </SpeechBubble>
-    </div>
-  );
-};

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";