@dnb/eufemia 10.71.2 → 10.72.1

package/components/step-indicator/StepIndicatorSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorSidebar.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","classnames","extendPropsWithContext","Context","StepIndicatorList","stepIndicatorDefaultProps","StepIndicatorProvider","createSpacingClasses","StepIndicatorSidebar","_ref","current_step","data","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","context","showInitialData","setShowInitialData","hasSkeletonData","getContextAndProps","_providerProps$data","providerProps","skeleton","getTranslation","StepIndicator","length","current","createElement","id","sidebar_id","className","_extends","isSidebar","_StepIndicatorList","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicatorSidebar.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport classnames from 'classnames'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport StepIndicatorList from './StepIndicatorList'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport { StepIndicatorProvider } from './StepIndicatorContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { SpacingProps } from '../../shared/types'\nimport {\n  StepIndicatorData,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from '../StepIndicator'\n\nexport type StepIndicatorSidebarProps = SpacingProps &\n  Pick<StepIndicatorProps, 'current_step' | 'skeleton'> &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {\n    /**\n     * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data?: StepIndicatorData\n    /**\n     * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode?: StepIndicatorMode\n    /**\n     * Stuff\n     */\n    showInitialData?: boolean\n    /**\n     * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id: string\n  }\n\nfunction StepIndicatorSidebar({\n  current_step = stepIndicatorDefaultProps.current_step,\n  data = stepIndicatorDefaultProps.data,\n  ...restOfProps\n}: StepIndicatorSidebarProps) {\n  const props = useMemo(() => {\n    return { current_step, data, ...restOfProps }\n  }, [current_step, data, restOfProps])\n\n  const context = useContext(Context)\n\n  const [showInitialData, setShowInitialData] = useState<boolean>(true)\n\n  const hasSkeletonData = useRef<boolean>(null)\n\n  useEffect(() => {\n    if (!props.showInitialData) {\n      setShowInitialData(false)\n    }\n  }, [props.showInitialData])\n\n  const getContextAndProps = useCallback(() => {\n    const providerProps = extendPropsWithContext(\n      props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context?.StepIndicator\n    )\n\n    if (!(providerProps.data?.length > 0)) {\n      providerProps.data = ['Loading...']\n      providerProps.skeleton = true\n      hasSkeletonData.current = true\n    }\n\n    return providerProps\n  }, [context, props])\n\n  const providerProps = showInitialData ? getContextAndProps() : null\n\n  return (\n    <div\n      id={'sidebar__' + props.sidebar_id}\n      className={classnames(\n        'dnb-step-indicator-wrapper',\n        'dnb-step-indicator__sidebar',\n        hasSkeletonData.current &&\n          providerProps?.skeleton &&\n          'dnb-step-indicator__sidebar--ssr-skeleton',\n        createSpacingClasses(props)\n      )}\n    >\n      {providerProps && (\n        <StepIndicatorProvider\n          isSidebar\n          sidebar_id={props.sidebar_id}\n          {...providerProps}\n        >\n          <StepIndicatorList />\n        </StepIndicatorProvider>\n      )}\n    </div>\n  )\n}\n\nStepIndicatorSidebar._supportsSpacingProps = true\n\nexport default StepIndicatorSidebar\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StepIndicatorSidebar.js","names":["React","StepIndicatorSidebar","props","_div","createElement","className"],"sources":["../../../../src/components/step-indicator/StepIndicatorSidebar.tsx"],"sourcesContent":["import React from 'react'\nimport { SpacingProps } from '../../shared/types'\nimport {\n  StepIndicatorData,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from '../StepIndicator'\n\nexport type StepIndicatorSidebarProps = SpacingProps &\n  Pick<StepIndicatorProps, 'current_step' | 'skeleton'> &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {\n    /**\n     * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    data?: StepIndicatorData\n    /**\n     * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    mode?: StepIndicatorMode\n    /**\n     * Stuff\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    showInitialData?: boolean\n    /**\n     * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    sidebar_id: string\n  }\n\n/**\n * @deprecated StepIndicatorSidebar variant is no longer supported\n */\nfunction StepIndicatorSidebar(props: StepIndicatorSidebarProps) {\n  return <div className=\"dnb-step-indicator__sidebar\"></div>\n}\n\nexport default StepIndicatorSidebar\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAoCzB,SAASC,oBAAoBA,CAACC,KAAgC,EAAE;EAC9D,OAAAC,IAAA,KAAAA,IAAA,GAAOH,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAC;EAA6B,CAAM,CAAC;AAC5D;AAEA,eAAeJ,oBAAoB","ignoreList":[]}

package/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -2,15 +2,9 @@
  * Web StepIndicator Component
  *
  */
-import React from 'react';
 import { ButtonProps } from '../button/Button';
 export type StepIndicatorTriggerButtonProps = ButtonProps & {
-    /**
-     * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
-     */
-    sidebar_id?: string;
     className?: string;
-    inner_ref?: React.RefObject<HTMLElement>;
 };
-declare function StepIndicatorTriggerButton(props: StepIndicatorTriggerButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function StepIndicatorTriggerButton({ className, ...rest }: StepIndicatorTriggerButtonProps): import("react/jsx-runtime").JSX.Element;
 export default StepIndicatorTriggerButton;

package/components/step-indicator/StepIndicatorTriggerButton.js

@@ -3,65 +3,97 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["data", "triggerButtonProps"];
+const _excluded = ["className"],
+  _excluded2 = ["data"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import classnames from 'classnames';
-import React, { useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import Button from '../button/Button';
-import chevron_icon from '../../icons/chevron_right_medium';
-import { validateDOMAttributes, combineDescribedBy } from '../../shared/component-helper';
+import Section from '../section/Section';
 import HeightAnimation from '../height-animation/HeightAnimation';
-import { createSpacingClasses } from '../space/SpacingHelper';
+import chevron_down from '../../icons/chevron_down';
+import chevron_up from '../../icons/chevron_up';
+import { validateDOMAttributes, combineDescribedBy } from '../../shared/component-helper';
+import useId from '../../shared/helpers/useId';
 import FormLabel from '../form-label/FormLabel';
 import StepIndicatorContext from './StepIndicatorContext';
-import { StepItemWrapper } from './StepIndicatorItem';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-function StepIndicatorTriggerButton(props) {
-  const context = useContext(StepIndicatorContext);
-  const buttonRef = useRef((props === null || props === void 0 ? void 0 : props.inner_ref) || null);
-  const item = context.data[context.activeStep || 0];
-  const label = context.stepsLabel;
+function StepIndicatorTriggerButton(_ref) {
+  let {
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const _useContext = useContext(StepIndicatorContext),
+    {
+      data
+    } = _useContext,
+    contextWithoutData = _objectWithoutProperties(_useContext, _excluded2);
   const {
-      data,
-      triggerButtonProps
-    } = context,
-    contextWithoutData = _objectWithoutProperties(context, _excluded);
+    stepsLabel,
+    activeStep,
+    overview_title,
+    openState,
+    closeHandler,
+    openHandler,
+    skeleton,
+    filterAttributes,
+    no_animation
+  } = contextWithoutData;
+  const item = data[activeStep || 0];
+  const label = stepsLabel;
+  const id = useId();
   const triggerParams = _objectSpread(_objectSpread({}, contextWithoutData), {}, {
-    className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', context.skeleton), createSpacingClasses(context)),
+    className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', skeleton)),
     'aria-live': 'polite'
   });
-  const buttonParams = _objectSpread(_objectSpread(_objectSpread({}, triggerButtonProps), props), {}, {
-    className: classnames('dnb-step-indicator__trigger__button', props.className)
+  const buttonParams = _objectSpread(_objectSpread({}, rest), {}, {
+    className: classnames(`dnb-step-indicator__trigger__button dnb-step-indicator__trigger__button--${openState ? 'expanded' : 'collapsed'}`, className)
   });
-  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, context.sidebar_id + '-overview');
+  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, id + '-overview');
   Object.keys(triggerParams).forEach(key => {
-    if (context.filterAttributes.includes(key)) {
+    if (filterAttributes.includes(key)) {
       delete triggerParams[key];
     }
   });
-  skeletonDOMAttributes(triggerParams, context.skeleton);
-  validateDOMAttributes(context, triggerParams);
-  return React.createElement("div", triggerParams, React.createElement("span", {
+  skeletonDOMAttributes(triggerParams, skeleton);
+  validateDOMAttributes(contextWithoutData, triggerParams);
+  return React.createElement(Section, {
+    backgroundColor: "var(--step-indicator-trigger-background)",
+    innerSpace: {
+      top: 'small',
+      bottom: 'small'
+    },
+    roundedCorner: {
+      small: false,
+      medium: [true, true, !openState, !openState],
+      large: [true, true, !openState, !openState]
+    }
+  }, React.createElement(HeightAnimation, {
+    animate: !no_animation
+  }, React.createElement("div", triggerParams, React.createElement("span", {
     className: "dnb-sr-only",
-    id: context.sidebar_id + '-overview'
-  }, context.overview_title), React.createElement(FormLabel, {
-    "aria-describedby": context.sidebar_id,
-    forId: context.sidebar_id,
-    className: "dnb-step-indicator__label"
+    id: id + '-overview'
+  }, overview_title), React.createElement(FormLabel, {
+    "aria-describedby": id,
+    forId: id,
+    className: "dnb-step-indicator__label",
+    right: "x-small"
   }, label), React.createElement(Button, _extends({}, buttonParams, {
-    id: context.sidebar_id,
+    onClick: () => {
+      if (openState) {
+        closeHandler();
+      } else {
+        openHandler();
+      }
+    },
+    "aria-expanded": openState,
+    id: id,
     wrap: true,
-    stretch: true,
-    variant: "secondary",
-    icon: chevron_icon,
-    icon_size: "medium",
-    icon_position: "right",
-    inner_ref: buttonRef
-  }), React.createElement(StepItemWrapper, {
-    number: (context.activeStep || 0) + 1,
-    hide_numbers: context.hide_numbers
-  }, React.createElement(HeightAnimation, null, (typeof item === 'string' ? item : item && item.title) || ''))));
+    variant: "tertiary",
+    icon: openState ? chevron_up : chevron_down,
+    icon_position: "right"
+  }), (typeof item === 'string' ? item : item && item.title) || ''))));
 }
 export default StepIndicatorTriggerButton;
 //# sourceMappingURL=StepIndicatorTriggerButton.js.map

package/components/step-indicator/StepIndicatorTriggerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","useContext","useRef","Button","chevron_icon","validateDOMAttributes","combineDescribedBy","HeightAnimation","createSpacingClasses","FormLabel","StepIndicatorContext","StepItemWrapper","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","props","context","buttonRef","inner_ref","item","data","activeStep","label","stepsLabel","triggerButtonProps","contextWithoutData","_objectWithoutProperties","_excluded","triggerParams","_objectSpread","className","skeleton","buttonParams","sidebar_id","Object","keys","forEach","key","filterAttributes","includes","createElement","id","overview_title","forId","_extends","wrap","stretch","variant","icon","icon_size","icon_position","number","hide_numbers","title"],"sources":["../../../../src/components/step-indicator/StepIndicatorTriggerButton.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport classnames from 'classnames'\nimport React, { useContext, useRef } from 'react'\nimport Button, { ButtonProps } from '../button/Button'\nimport chevron_icon from '../../icons/chevron_right_medium'\nimport {\n  validateDOMAttributes,\n  combineDescribedBy,\n} from '../../shared/component-helper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport FormLabel from '../form-label/FormLabel'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport { StepItemWrapper } from './StepIndicatorItem'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nexport type StepIndicatorTriggerButtonProps = ButtonProps & {\n  /**\n   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n   */\n  sidebar_id?: string\n  className?: string\n  inner_ref?: React.RefObject<HTMLElement>\n}\nfunction StepIndicatorTriggerButton(\n  props: StepIndicatorTriggerButtonProps\n) {\n  const context = useContext(StepIndicatorContext)\n\n  const buttonRef = useRef(props?.inner_ref || null)\n\n  const item = context.data[context.activeStep || 0]\n  const label = context.stepsLabel\n\n  const {\n    data, // eslint-disable-line\n    triggerButtonProps, // eslint-disable-line\n    ...contextWithoutData\n  } = context\n\n  const triggerParams = {\n    ...contextWithoutData,\n    className: classnames(\n      'dnb-step-indicator__trigger',\n      createSkeletonClass('font', context.skeleton),\n      createSpacingClasses(context)\n    ),\n    'aria-live': 'polite',\n  } as React.HTMLProps<HTMLElement>\n\n  const buttonParams = {\n    ...triggerButtonProps,\n    ...props,\n    className: classnames(\n      'dnb-step-indicator__trigger__button',\n      props.className\n    ),\n  }\n\n  buttonParams['aria-describedby'] = combineDescribedBy(\n    buttonParams,\n    context.sidebar_id + '-overview'\n  )\n\n  Object.keys(triggerParams).forEach((key) => {\n    if (context.filterAttributes.includes(key)) {\n      delete triggerParams[key]\n    }\n  })\n\n  skeletonDOMAttributes(triggerParams, context.skeleton)\n\n  // also used for code markup simulation\n  validateDOMAttributes(context, triggerParams)\n\n  return (\n    <div {...(triggerParams as React.HTMLProps<HTMLDivElement>)}>\n      <span className=\"dnb-sr-only\" id={context.sidebar_id + '-overview'}>\n        {context.overview_title}\n      </span>\n      <FormLabel\n        aria-describedby={context.sidebar_id}\n        forId={context.sidebar_id}\n        className=\"dnb-step-indicator__label\"\n      >\n        {label}\n      </FormLabel>\n      <Button\n        {...buttonParams}\n        id={context.sidebar_id}\n        wrap\n        stretch\n        variant=\"secondary\"\n        icon={chevron_icon}\n        icon_size=\"medium\"\n        icon_position=\"right\"\n        inner_ref={buttonRef}\n      >\n        <StepItemWrapper\n          number={(context.activeStep || 0) + 1}\n          hide_numbers={context.hide_numbers}\n        >\n          <HeightAnimation>\n            {(typeof item === 'string' ? item : item && item.title) || ''}\n          </HeightAnimation>\n        </StepItemWrapper>\n      </Button>\n    </div>\n  )\n}\n\nexport default StepIndicatorTriggerButton\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","useContext","Button","Section","HeightAnimation","chevron_down","chevron_up","validateDOMAttributes","combineDescribedBy","useId","FormLabel","StepIndicatorContext","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","_ref","className","rest","_objectWithoutProperties","_excluded","_useContext","data","contextWithoutData","_excluded2","stepsLabel","activeStep","overview_title","openState","closeHandler","openHandler","skeleton","filterAttributes","no_animation","item","label","id","triggerParams","_objectSpread","buttonParams","Object","keys","forEach","key","includes","createElement","backgroundColor","innerSpace","top","bottom","roundedCorner","small","medium","large","animate","forId","right","_extends","onClick","wrap","variant","icon","icon_position","title"],"sources":["../../../../src/components/step-indicator/StepIndicatorTriggerButton.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport classnames from 'classnames'\nimport React, { useContext } from 'react'\nimport Button, { ButtonProps } from '../button/Button'\nimport Section from '../section/Section'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport chevron_down from '../../icons/chevron_down'\nimport chevron_up from '../../icons/chevron_up'\nimport {\n  validateDOMAttributes,\n  combineDescribedBy,\n} from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport FormLabel from '../form-label/FormLabel'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nexport type StepIndicatorTriggerButtonProps = ButtonProps & {\n  className?: string\n}\nfunction StepIndicatorTriggerButton({\n  className,\n  ...rest\n}: StepIndicatorTriggerButtonProps) {\n  const {\n    data, // eslint-disable-line\n    ...contextWithoutData\n  } = useContext(StepIndicatorContext)\n\n  const {\n    stepsLabel,\n    activeStep,\n    overview_title,\n    openState,\n    closeHandler,\n    openHandler,\n    skeleton,\n    filterAttributes,\n    no_animation,\n  } = contextWithoutData\n\n  const item = data[activeStep || 0]\n  const label = stepsLabel\n  const id = useId()\n\n  const triggerParams = {\n    ...contextWithoutData,\n    className: classnames(\n      'dnb-step-indicator__trigger',\n      createSkeletonClass('font', skeleton)\n    ),\n    'aria-live': 'polite',\n  } as React.HTMLProps<HTMLElement>\n\n  const buttonParams = {\n    ...rest,\n    className: classnames(\n      'dnb-step-indicator__trigger__button',\n      `dnb-step-indicator__trigger__button--${\n        openState ? 'expanded' : 'collapsed'\n      }`,\n      className\n    ),\n  }\n\n  buttonParams['aria-describedby'] = combineDescribedBy(\n    buttonParams,\n    id + '-overview'\n  )\n\n  Object.keys(triggerParams).forEach((key) => {\n    if (filterAttributes.includes(key)) {\n      delete triggerParams[key]\n    }\n  })\n\n  skeletonDOMAttributes(triggerParams, skeleton)\n\n  // also used for code markup simulation\n  validateDOMAttributes(contextWithoutData, triggerParams)\n\n  return (\n    <Section\n      backgroundColor=\"var(--step-indicator-trigger-background)\"\n      innerSpace={{\n        top: 'small',\n        bottom: 'small',\n      }}\n      roundedCorner={{\n        small: false,\n        medium: [true, true, !openState, !openState],\n        large: [true, true, !openState, !openState],\n      }}\n    >\n      <HeightAnimation animate={!no_animation}>\n        <div {...(triggerParams as React.HTMLProps<HTMLDivElement>)}>\n          <span className=\"dnb-sr-only\" id={id + '-overview'}>\n            {overview_title}\n          </span>\n          <FormLabel\n            aria-describedby={id}\n            forId={id}\n            className=\"dnb-step-indicator__label\"\n            right=\"x-small\"\n          >\n            {label}\n          </FormLabel>\n          <Button\n            {...buttonParams}\n            onClick={() => {\n              if (openState) {\n                closeHandler()\n              } else {\n                openHandler()\n              }\n            }}\n            aria-expanded={openState}\n            id={id}\n            wrap\n            variant=\"tertiary\"\n            icon={openState ? chevron_up : chevron_down}\n            icon_position=\"right\"\n          >\n            {(typeof item === 'string' ? item : item && item.title) || ''}\n          </Button>\n        </div>\n      </HeightAnimation>\n    </Section>\n  )\n}\n\nexport default StepIndicatorTriggerButton\n"],"mappings":"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","ignoreList":[]}

package/components/step-indicator/style/dnb-step-indicator.css

@@ -5,79 +5,120 @@
 /*
  * Utilities
  */
-@media screen and (min-width: 50.1em) {
-  .dnb-step-indicator__sidebar {
-    max-width: 20rem;
-    margin-right: var(--spacing-x-large);
-  }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px;
-  }
-}
-@media screen and (max-width: 50.1em) {
-  .dnb-step-indicator__sidebar--ssr-skeleton {
-    visibility: hidden;
-    overflow: hidden;
-    width: 0;
-    height: 5.5rem;
-  }
-}
-
-.dnb-step-indicator-wrapper .dnb-step-indicator__list {
-  display: flex;
-  flex-direction: column;
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--color-black-3);
+  --step-indicator-check-bg: var(--color-pistachio);
+  --step-indicator-check-color: var(--color-success-green);
+  --step-indicator-current-border: var(--color-black-80);
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+.dnb-step-indicator__sidebar {
+  display: none;
+}
+.dnb-step-indicator__list {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger {
+.dnb-step-indicator__trigger {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  overflow: hidden;
-  justify-content: space-between;
-  border-radius: 0.25rem;
+.dnb-step-indicator__trigger__button {
+  --button-height: 1.5rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text {
-  text-align: left;
+.dnb-step-indicator__trigger__button .dnb-button__text {
+  margin: 0;
+  transform: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text {
-  margin-right: 1rem;
+.dnb-step-indicator__trigger__button .dnb-button__icon {
+  --button-icon-margin-top: 0.25rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment {
-  order: 2;
+.dnb-step-indicator__item__wrapper {
+  display: flex;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  position: relative;
+}
+.dnb-step-indicator__item__wrapper::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.71875rem;
+  width: 0.0625rem;
+  height: 100%;
+  background-color: var(--color-black-20);
+}
+.dnb-step-indicator__item__bullet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: 0;
+  border-radius: 50%;
+}
+.dnb-step-indicator__item__bullet--check, .dnb-step-indicator__item__bullet--empty, .dnb-step-indicator__item__bullet--current {
+  background-color: var(--step-indicator-check-bg);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: transparent;
+}
+.dnb-step-indicator__item__bullet--check {
+  font-size: 0.875rem;
+  color: var(--step-indicator-check-color);
+  border-color: var(--step-indicator-check-color);
+}
+.dnb-step-indicator__item__bullet--empty {
+  color: var(--color-black-20);
+  background-color: var(--color-white);
+  border-color: var(--color-black-20);
+}
+.dnb-step-indicator__item__bullet--current {
+  border-width: 0.1875rem;
+  border-color: var(--step-indicator-current-border);
+}
+.dnb-step-indicator__item__bullet.dnb-skeleton {
+  border-width: 0.0625rem;
+  border-color: var(--color-black-20);
+}
+.dnb-step-indicator__item-content {
+  display: flex;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
-  margin-top: 0.5rem;
+.dnb-step-indicator__item-content__number {
+  font-size: var(--font-size-basis);
+  white-space: nowrap;
+  margin-right: 0.5rem;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item {
-  margin-bottom: 1rem;
+.dnb-step-indicator__item-content__wrapper {
+  font-size: var(--font-size-basis);
+  display: flex;
+  flex-direction: column;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon {
+.dnb-step-indicator__item__icon {
   opacity: 1;
-  transition: opacity 1400ms ease-in-out;
-}
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon {
-  transition-duration: 1ms !important;
+  transition: opacity 400ms ease-in-out;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon {
+.dnb-step-indicator__item__icon--hidden {
   opacity: 0;
+  transition-timing-function: ease-out;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 0.5rem 0;
+.dnb-step-indicator__item:last-child .dnb-step-indicator__item__wrapper::before {
+  display: none;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number {
-  padding-right: 0.5rem;
-  white-space: nowrap;
+html[data-visual-test] .dnb-step-indicator__item__icon {
+  transition-duration: 1ms !important;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper {
-  display: flex;
-  flex-direction: column;
+.dnb-step-indicator__button {
+  white-space: normal;
+  text-align: left;
+  align-self: flex-start;
 }
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  color: var(--color-black-80);
-  font-size: var(--font-size-x-small);
+.dnb-step-indicator__button.dnb-anchor {
+  padding: 0;
+  line-height: inherit;
 }

package/components/step-indicator/style/dnb-step-indicator.min.css

@@ -1 +1 @@
-@media screen and (min-width:50.1em){.dnb-step-indicator__sidebar{margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}}@media screen and (max-width:50.1em){.dnb-step-indicator__sidebar--ssr-skeleton{height:5.5rem;overflow:hidden;visibility:hidden;width:0}}.dnb-step-indicator-wrapper .dnb-step-indicator__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.dnb-step-indicator-wrapper .dnb-step-indicator__trigger{display:flex;flex-direction:column}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button{border-radius:.25rem;justify-content:space-between;overflow:hidden}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment{order:2}.dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button{margin-top:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon{opacity:1;transition:opacity 1.4s ease-in-out}html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon{transition-duration:1ms!important}.dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon{opacity:0}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content{display:flex;flex-wrap:nowrap;padding:.5rem 0}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number{padding-right:.5rem;white-space:nowrap}.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper{display:flex;flex-direction:column}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small)}
+.dnb-step-indicator{--step-indicator-trigger-background:var(--color-black-3);--step-indicator-check-bg:var(--color-pistachio);--step-indicator-check-color:var(--color-success-green);--step-indicator-current-border:var(--color-black-80);--padding-top:0;--padding-bottom:0}.dnb-step-indicator__sidebar{display:none}.dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator__trigger{align-items:flex-start;display:flex;flex-wrap:wrap}.dnb-step-indicator__trigger__button{--button-height:1.5rem}.dnb-step-indicator__trigger__button .dnb-button__text{margin:0;transform:none}.dnb-step-indicator__trigger__button .dnb-button__icon{--button-icon-margin-top:0.25rem}.dnb-step-indicator__item__wrapper{display:flex;gap:1rem;padding-bottom:1rem;position:relative}.dnb-step-indicator__item__wrapper:before{background-color:var(--color-black-20);content:"";display:block;height:100%;left:.71875rem;position:absolute;top:.25rem;width:.0625rem}.dnb-step-indicator__item__bullet{align-items:center;border-radius:50%;display:flex;height:1.5rem;justify-content:center;min-width:1.5rem;width:1.5rem;z-index:0}.dnb-step-indicator__item__bullet--check,.dnb-step-indicator__item__bullet--current,.dnb-step-indicator__item__bullet--empty{background-color:var(--step-indicator-check-bg);border:.0625rem solid transparent}.dnb-step-indicator__item__bullet--check{border-color:var(--step-indicator-check-color);color:var(--step-indicator-check-color);font-size:.875rem}.dnb-step-indicator__item__bullet--empty{background-color:var(--color-white);border-color:var(--color-black-20);color:var(--color-black-20)}.dnb-step-indicator__item__bullet--current{border-color:var(--step-indicator-current-border);border-width:.1875rem}.dnb-step-indicator__item__bullet.dnb-skeleton{border-color:var(--color-black-20);border-width:.0625rem}.dnb-step-indicator__item-content{display:flex}.dnb-step-indicator__item-content__number{font-size:var(--font-size-basis);margin-right:.5rem;white-space:nowrap}.dnb-step-indicator__item-content__wrapper{display:flex;flex-direction:column;font-size:var(--font-size-basis)}.dnb-step-indicator__item__icon{opacity:1;transition:opacity .4s ease-in-out}.dnb-step-indicator__item__icon--hidden{opacity:0;transition-timing-function:ease-out}.dnb-step-indicator__item:last-child .dnb-step-indicator__item__wrapper:before{display:none}html[data-visual-test] .dnb-step-indicator__item__icon{transition-duration:1ms!important}.dnb-step-indicator__button{align-self:flex-start;text-align:left;white-space:normal}.dnb-step-indicator__button.dnb-anchor{line-height:inherit;padding:0}

package/components/step-indicator/style/dnb-step-indicator.scss

@@ -5,33 +5,19 @@
 
 @import '../../../style/core/utilities.scss';
 
-.dnb-step-indicator__sidebar {
-  @media screen and (min-width: 50.1em) {
-    max-width: 20rem;
-    margin-right: var(--spacing-x-large);
-
-    .dnb-step-indicator__item {
-      min-width: 320px;
-    }
-  }
-
-  // To avoid layout shift during SSR hydration
-  // we hide the sidebar with skeleton on small screens
-  &--ssr-skeleton {
-    @media screen and (max-width: 50.1em) {
-      visibility: hidden;
-      overflow: hidden;
-      width: 0;
-      height: 5.5rem; // the height of the modal button + label + margin
-    }
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--color-black-3);
+  --step-indicator-check-bg: var(--color-pistachio);
+  --step-indicator-check-color: var(--color-success-green);
+  --step-indicator-current-border: var(--color-black-80);
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  &__sidebar {
+    display: none;
   }
-}
 
-.dnb-step-indicator-wrapper .dnb-step-indicator {
   &__list {
-    display: flex;
-    flex-direction: column;
-
     padding: 0;
     margin: 0;
 
@@ -41,72 +27,128 @@
   &__trigger {
     // Is needed to make ensure the button stays on top during height animation
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
   }
 
-  &__trigger__button,
-  &__item .dnb-button {
-    overflow: hidden; // only needed when text is large and it overflows during animation (from small to large)
-
+  &__trigger__button {
+    --button-height: 1.5rem;
     .dnb-button__text {
-      text-align: left;
+      margin: 0;
+      transform: none;
     }
-
-    &.dnb-button--has-icon .dnb-button__text {
-      margin-right: 1rem;
+    .dnb-button__icon {
+      --button-icon-margin-top: 0.25rem;
     }
+  }
+
+  &__item {
+    &__wrapper {
+      display: flex;
+      gap: 1rem;
+      padding-bottom: 1rem;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.25rem;
+        left: 0.71875rem;
 
-    .dnb-button__alignment {
-      order: 2;
+        width: 0.0625rem;
+        height: 100%;
+
+        background-color: var(--color-black-20);
+      }
     }
 
-    justify-content: space-between;
-    border-radius: 0.25rem;
-  }
-  &__trigger button#{&}__trigger__button {
-    margin-top: 0.5rem;
-  }
+    &__bullet {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 1.5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      z-index: 0;
+      border-radius: 50%;
+
+      &--check,
+      &--empty,
+      &--current {
+        background-color: var(--step-indicator-check-bg);
+        border-width: 0.0625rem;
+        border-style: solid;
+        border-color: transparent;
+      }
 
-  &__item {
-    margin-bottom: 1rem;
+      &--check {
+        font-size: 0.875rem;
+        color: var(--step-indicator-check-color);
+        border-color: var(--step-indicator-check-color);
+      }
 
-    .dnb-button__icon {
-      opacity: 1;
-      transition: opacity 1400ms ease-in-out;
+      &--empty {
+        color: var(--color-black-20);
+        background-color: var(--color-white);
+        border-color: var(--color-black-20);
+      }
 
-      html[data-visual-test] & {
-        transition-duration: 1ms !important;
+      &--current {
+        border-width: 0.1875rem;
+        border-color: var(--step-indicator-current-border);
+      }
+      &.dnb-skeleton {
+        border-width: 0.0625rem;
+        border-color: var(--color-black-20);
       }
     }
 
-    &:not(.dnb-step-indicator__item--visited)
-      .dnb-button:not(.dnb-step-indicator__button__status)
-      .dnb-button__icon {
-      opacity: 0;
+    &-content {
+      display: flex;
+
+      &__number {
+        font-size: var(--font-size-basis);
+        white-space: nowrap;
+        margin-right: 0.5rem;
+      }
+
+      &__wrapper {
+        font-size: var(--font-size-basis);
+        display: flex;
+        flex-direction: column;
+      }
     }
-  }
 
-  &__item-content {
-    display: flex;
-    flex-wrap: nowrap;
+    &__icon {
+      opacity: 1;
+      transition: opacity 400ms ease-in-out;
 
-    padding: 0.5rem 0;
+      &--hidden {
+        opacity: 0;
+        transition-timing-function: ease-out;
+      }
+    }
 
-    &__number {
-      padding-right: 0.5rem;
-      white-space: nowrap;
+    &:last-child &__wrapper {
+      &::before {
+        display: none;
+      }
     }
 
-    &__wrapper {
-      display: flex;
-      flex-direction: column;
+    html[data-visual-test] &__icon {
+      transition-duration: 1ms !important;
     }
   }
 
-  &__button__status .dnb-step-indicator__item-content {
-    &__status {
-      color: var(--color-black-80);
-      font-size: var(--font-size-x-small);
+  &__button {
+    white-space: normal;
+    text-align: left;
+    align-self: flex-start;
+
+    &.dnb-anchor {
+      padding: 0;
+      line-height: inherit;
     }
   }
 }