@navikt/ds-react 0.14.3 → 0.14.7

package/src/form/Switch.tsx

@@ -1,8 +1,35 @@
 import cl from "classnames";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, {
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from "react";
 import { BodyShort, Detail, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
+const SelectedIcon = () => (
+  <svg
+    width="12px"
+    height="12px"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    role="img"
+    aria-hidden
+    aria-label="Deaktiver valg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
+      fill="currentColor"
+      stroke="currentColor"
+    />
+  </svg>
+);
+
 export interface SwitchProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -18,6 +45,10 @@ export interface SwitchProps
    * Toggles loading state with loader-component on switch
    */
   loading?: boolean;
+  /**
+   * Positions switch on left/right side of label
+   */
+  position?: "left" | "right";
 }
 
 const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
@@ -29,30 +60,58 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
     description,
     hideLabel = false,
     loading,
+    checked: checkedProp,
+    defaultChecked,
+    position = "left",
     ...rest
   } = props;
 
   const Description = size === "medium" ? BodyShort : Detail;
 
+  const [checked, setChecked] = useState(
+    defaultChecked ?? checkedProp ?? false
+  );
+
+  useEffect(() => {
+    checkedProp !== undefined && setChecked(checkedProp);
+  }, [checkedProp]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.checked);
+    props.onChange && props.onChange(e);
+  };
+
   return (
     <div
-      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
-        "navds-switch--disabled": inputProps.disabled,
-      })}
+      className={cl(
+        "navds-switch",
+        props.className,
+        `navds-switch--${size}`,
+        `navds-switch--${position}`,
+        {
+          "navds-switch--disabled": inputProps.disabled,
+        }
+      )}
     >
       <input
         {...omit(rest, ["size"])}
         {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        checked={checkedProp}
+        defaultChecked={defaultChecked}
         ref={ref}
         type="checkbox"
+        onChange={(e) => handleChange(e)}
         className={cl(className, "navds-switch__input")}
       />
       <span className="navds-switch__track">
         <span className="navds-switch__thumb">
-          {loading && <Loader size="xsmall" />}
+          {loading ? (
+            <Loader size="xsmall" />
+          ) : checked ? (
+            <SelectedIcon />
+          ) : null}
         </span>
       </span>
-
       <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
         <div
           className={cl("navds-switch__content", {

package/src/form/stories/switch.stories.mdx

@@ -6,21 +6,70 @@ import { Switch } from "../index";
 # Hvordan ta i bruk Switch
 
 ```jsx
-<Switch>Slå på feature</Switch>
+  <Switch>Slå på feature</Switch>
+  <div>
+    <Switch position="right">Slå på feature</Switch>
+  </div>
 ```
 
 <Canvas>
   <Switch>Slå på feature</Switch>
+  <div>
+    <Switch position="right">Slå på feature</Switch>
+  </div>
 </Canvas>
 
 ## Description
 
 ```jsx
 <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+  <div>
+    <Switch position="right" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
 ```
 
 <Canvas>
   <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+  <div>
+    <Switch position="right" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## Position
+
+Switch kan ha label på høyre eller venstre side. Velges med "Position"-prop "left" | "right". Husk at hvis position
+"right" velges, må man selv passe på at den har en definert bredde slik at elementet ikke vises over hele skjermen.
+
+```jsx
+<div>
+  <div>
+    <h3>Feil</h3>
+    <Switch position="right">Slå på feature</Switch>
+    <h3>Riktig</h3>
+    <div style={{ width: 200 }}>
+      <Switch position="right">Slå på feature 1</Switch>
+      <Switch position="right">Slå på feature 2</Switch>
+      <Switch position="right">Slå på feature 3</Switch>
+    </div>
+  </div>
+</div>
+```
+
+<Canvas>
+  <div>
+    <h3>Feil</h3>
+    <Switch position="right">Slå på feature</Switch>
+    <h3>Riktig</h3>
+    <div style={{ width: 300 }}>
+      <Switch position="right">Slå på feature 1</Switch>
+      <Switch position="right">Slå på feature 2</Switch>
+      <Switch position="right">Slå på feature 3</Switch>
+    </div>
+  </div>
 </Canvas>
 
 ## Sizing
@@ -30,6 +79,9 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
 ```jsx
 <Switch size="small" >Slå på feature</Switch>
 <Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
+
+<Switch position="right" size="small" >Slå på feature</Switch>
+<Switch position="right" size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
 ```
 
 <Canvas>
@@ -39,6 +91,14 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
       Slå på feature
     </Switch>
   </div>
+  <div>
+    <Switch position="right" size="small">
+      Slå på feature
+    </Switch>
+    <Switch position="right" size="small" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
 </Canvas>
 
 ## defaultChecked
@@ -58,11 +118,21 @@ Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
 Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
 
 ```jsx
-<Switch hideLabel>Slå på feature</Switch>
+<div style={{ width: 300 }}>
+  <Switch hideLabel>Slå på feature</Switch>
+  <Switch hideLabel position="right">
+    Slå på feature
+  </Switch>
+</div>
 ```
 
 <Canvas>
-  <Switch hideLabel>Slå på feature</Switch>
+  <div style={{ width: 300 }}>
+    <Switch hideLabel>Slå på feature</Switch>
+    <Switch hideLabel position="right">
+      Slå på feature
+    </Switch>
+  </div>
 </Canvas>
 
 ## Disabled

package/src/form/stories/switch.stories.tsx

@@ -10,15 +10,22 @@ export default {
 export const All = () => {
   const [checked, setChecked] = useState(false);
   return (
-    <div>
+    <div style={{ width: "fit-content" }}>
       <h1>Switch</h1>
       <Switch>Label text</Switch>
+      <Switch position="right">Label text</Switch>
 
       <h2>Switch w/Description</h2>
       <Switch>Label text</Switch>
       <Switch description="Switch description">Label text</Switch>
       <Switch>Label text</Switch>
 
+      <Switch position="right">Label text</Switch>
+      <Switch position="right" description="Switch description">
+        Label text
+      </Switch>
+      <Switch position="right">Label text</Switch>
+
       <h2>hidelabel</h2>
       <Switch description="Switch description" hideLabel>
         Label text
@@ -29,6 +36,15 @@ export const All = () => {
       <Switch hideLabel size="small">
         Label text small
       </Switch>
+      <Switch position="right" description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch position="right" description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch position="right" hideLabel size="small">
+        Label text small
+      </Switch>
 
       <h2>Switch small</h2>
       <Switch size="small">Label text</Switch>
@@ -37,6 +53,16 @@ export const All = () => {
       </Switch>
       <Switch size="small">Label text</Switch>
 
+      <Switch position="right" size="small">
+        Label text
+      </Switch>
+      <Switch position="right" description="Switch description" size="small">
+        Label text
+      </Switch>
+      <Switch position="right" size="small">
+        Label text
+      </Switch>
+
       <h2>Controlled</h2>
       <Switch checked={checked} onChange={() => setChecked(!checked)}>
         Label text

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

package/src/link-panel/LinkPanel.tsx

@@ -40,10 +40,7 @@ const LinkPanelComponent: OverridableComponent<
         className={cl("navds-link-panel", className)}
       >
         <div className="navds-link-panel__content">{children}</div>
-        <Next
-          className="navds-link-panel__chevron"
-          aria-label="arrow-icon pointing right"
-        />
+        <Next className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
   }

package/src/step-indicator/Step.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { StepContext } from ".";
+import { BodyShort, Label, OverridableComponent } from "..";
+
+export interface StepIndicatorStepProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Text content under indicator
+   */
+  children: React.ReactNode;
+  /**
+   * Disables interaction with element
+   */
+  disabled?: boolean;
+  /**
+   * Handled by StepIndicator
+   */
+  index?: number;
+}
+
+export interface StepIndicatorStepType
+  extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {}
+
+const StepComponent: 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 = StepComponent as StepIndicatorStepType;
+
+export default Step;

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>