@navikt/ds-react 0.14.4 → 0.14.8

package/esm/step-indicator/StepIndicator.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "classnames";
+import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import mergeRefs from "react-merge-refs";
+import Step from "./Step";
+export const StepContext = createContext(null);
+const StepIndicator = forwardRef((_a, ref) => {
+    var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
+    const wrapperRef = useRef(null);
+    const mergedRef = mergeRefs([wrapperRef, ref]);
+    const [showLabels, setShowLabels] = useState(true);
+    const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
+    const stepsWithIndex = React.Children.map(children, (step, index) => {
+        return React.isValidElement(step) ? (React.createElement("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, Object.assign(Object.assign({}, step.props), { index })))) : (step);
+    });
+    const canShowLabels = useCallback(() => {
+        var _a;
+        const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
+        const childrenLength = React.Children.toArray(children).filter((child) => React.isValidElement(child)).length;
+        wrapperRef.current &&
+            setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
+                remSize * 10 * childrenLength);
+    }, [children]);
+    useEffect(() => {
+        window.addEventListener("resize", canShowLabels);
+        canShowLabels();
+        return () => {
+            window.removeEventListener("resize", canShowLabels);
+        };
+    }, [canShowLabels]);
+    return (React.createElement("ol", Object.assign({ ref: mergedRef, className: cl(`navds-step-indicator`, className) }, rest),
+        React.createElement(StepContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                hideLabels: removeLabels,
+            } }, stepsWithIndex)));
+});
+StepIndicator.Step = Step;
+export default StepIndicator;
+//# sourceMappingURL=StepIndicator.js.map

package/esm/step-indicator/StepIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIndicator.js","sourceRoot":"","sources":["../../src/step-indicator/StepIndicator.tsx"],"names":[],"mappings":"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"}

package/esm/step-indicator/index.d.ts

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

package/esm/step-indicator/index.js

@@ -0,0 +1,3 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";
+//# sourceMappingURL=index.js.map

package/esm/step-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/step-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.4",
+  "version": "0.14.8",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "b74f5d6184acbc96cd6b0190949577ae06955251"
+  "gitHead": "327c92131ba1824da9d8a622f515d626b7b85e56"
 }

package/src/form/Select.tsx

@@ -94,7 +94,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         >
           {children}
         </select>
-        <Expand className="navds-select__chevron" />
+        <Expand className="navds-select__chevron" aria-hidden />
       </div>
       <div id={errorId} aria-relevant="additions removals" aria-live="polite">
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}

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/help-text/HelpText.tsx

@@ -1,26 +1,28 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover } from "..";
+import { Popover, PopoverProps } from "..";
 
 export interface HelpTextProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    Pick<PopoverProps, "strategy" | "placement"> {
   /**
    * Component content
    */
   children: React.ReactNode;
-  /**
-   * Placement of popover
-   * @default "top"
-   */
-  placement?: Placement;
 }
 
 const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   (
-    { className, children, placement = "top", title = "hjelp", ...rest },
+    {
+      className,
+      children,
+      placement = "top",
+      strategy = "absolute",
+      title = "hjelp",
+      ...rest
+    },
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -64,6 +66,7 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           role="tooltip"
           anchorEl={buttonRef.current}
           placement={placement}
+          strategy={strategy}
         >
           <Popover.Content>{children}</Popover.Content>
         </Popover>

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/popover/Popover.tsx

@@ -44,6 +44,12 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default 16 w/arrow, 4 w/no-arrow
    */
   offset?: number;
+  /**
+   * Changes what CSS position property to use
+   * You want to use "fixed" if reference element is inside a fixed container, but popover is not
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
 }
 
 const useEventLister = (event: string, callback) =>
@@ -72,6 +78,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onClose,
       placement = "right",
       offset,
+      strategy = "absolute",
       ...rest
     },
     ref
@@ -137,6 +144,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             },
           },
         ],
+        strategy,
       }
     );
 

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;