work so far, to be reset after vacation

packages/dnb-eufemia/src/components/step-indicator/StepIndicator.tsx

@@ -6,13 +6,15 @@
 import React from 'react'
 
 import StepIndicatorSidebar from './StepIndicatorSidebar'
+import classnames from 'classnames'
+import { createSpacingClasses } from '../space/SpacingHelper'
 
 import StepIndicatorModal from './StepIndicatorModal'
 import {
   StepIndicatorContextValues,
   StepIndicatorProvider,
 } from './StepIndicatorContext'
-
+import Card from '../../components/card/Card'
 import type { SpacingProps } from '../../shared/types'
 import type { SkeletonShow } from '../Skeleton'
 import type {
@@ -156,13 +158,23 @@ function StepIndicator({
 
   return (
     <StepIndicatorProvider {...props} sidebar_id={sidebarId}>
-      <div className="dnb-step-indicator-wrapper">
+      <Card
+        outset
+        stack
+        className={classnames(
+          'dnb-step-indicator-wrapper',
+          createSpacingClasses(restOfProps)
+        )}
+      >
         <StepIndicatorModal />
-      </div>
+      </Card>
     </StepIndicatorProvider>
   )
 }
 
+/**
+ * @deprecated StepIndicator.Sidebar variant is no longer supported
+ */
 StepIndicator.Sidebar = StepIndicatorSidebar
 
 StepIndicator._supportsSpacingProps = true

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.tsx

@@ -37,7 +37,6 @@ const filterAttributes = Object.keys(stepIndicatorDefaultProps)
     'sidebarIsVisible',
     'mainTitle',
     'stepsLabel',
-    'stepsLabelExtended',
     'listOfReachedSteps',
     'setActiveStep',
     'activeStep',
@@ -90,7 +89,6 @@ export type StepIndicatorProviderStates = {
   listOfReachedSteps: number[]
   countSteps: number
   stepsLabel: string
-  stepsLabelExtended: string
   filterAttributes: string[]
   setActiveStep: React.Dispatch<React.SetStateAction<number>>
   sidebarIsVisible: boolean
@@ -196,9 +194,6 @@ export function StepIndicatorProvider({
         data,
         countSteps,
         stepsLabel: updateStepTitle(globalContext.step_title),
-        stepsLabelExtended: updateStepTitle(
-          globalContext.step_title_extended
-        ),
       },
       // Functions
       {

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.tsx

@@ -330,14 +330,6 @@ export function StepItemWrapper({
 }: StepItemWrapperProps) {
   return (
     <span className="dnb-step-indicator__item-content">
-      {!hide_numbers && (
-        <span
-          aria-hidden // because we provide the hidden aria-describedby
-          className="dnb-step-indicator__item-content__number"
-        >
-          {number}.
-        </span>
-      )}
       <span className="dnb-step-indicator__item-content__wrapper">
         <span className="dnb-step-indicator__item-content__text">
           {children}

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorList.tsx

@@ -35,7 +35,6 @@ function StepIndicatorList() {
     className: classnames(
       'dnb-step-indicator',
       createSkeletonClass('font', skeleton),
-      context.hasSidebar && createSpacingClasses(context),
       context.className
     ),
   }

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorModal.tsx

@@ -11,10 +11,12 @@ import React, {
   useState,
 } from 'react'
 import ReactDOM from 'react-dom'
-import Drawer from '../drawer/Drawer'
+import Section from '../section/Section'
+import Space from '../space/Space'
 import StepIndicatorTriggerButton from './StepIndicatorTriggerButton'
 import StepIndicatorList from './StepIndicatorList'
 import StepIndicatorContext from './StepIndicatorContext'
+import { HeightAnimation } from '../lib'
 
 function StepIndicatorModal() {
   const context = useContext(StepIndicatorContext)
@@ -52,27 +54,38 @@ function StepIndicatorModal() {
 
   return (
     <>
-      <StepIndicatorTriggerButton
-        on_click={context.openHandler}
-        inner_ref={triggerRef}
-      />
-      <Drawer
-        id={context.sidebar_id}
-        title={context.overview_title}
-        omitTriggerButton
-        openState={context.openState}
-        onOpen={context.openHandler}
-        onClose={closeHandler}
+      <Section
+        backgroundColor="var(--color-black-3)"
+        innerSpace={{
+          top: 'small',
+          bottom: 'small',
+        }}
       >
-        <Drawer.Body styleType="white">
-          <div className="dnb-step-indicator-wrapper">
-            <p className="dnb-p dnb-step-indicator__label">
-              {context.stepsLabelExtended}
-            </p>
-            <StepIndicatorList />
-          </div>
-        </Drawer.Body>
-      </Drawer>
+        <StepIndicatorTriggerButton
+          onClick={() => {
+            if (context.openState) {
+              closeHandler()
+            } else {
+              context.openHandler()
+            }
+          }}
+          inner_ref={triggerRef}
+        />
+      </Section>
+      <HeightAnimation
+        open={context.openState}
+        onOpen={(state) => {
+          if (state) {
+            context.openHandler()
+          } else {
+            closeHandler()
+          }
+        }}
+      >
+        <Space innerSpace={{ top: 'small' }}>
+          <StepIndicatorList />
+        </Space>
+      </HeightAnimation>
     </>
   )
 }

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.tsx

@@ -3,114 +3,11 @@
  *
  */
 
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import classnames from 'classnames'
-import { extendPropsWithContext } from '../../shared/component-helper'
-import Context from '../../shared/Context'
-import StepIndicatorList from './StepIndicatorList'
-import { stepIndicatorDefaultProps } from './StepIndicatorProps'
-import { StepIndicatorProvider } from './StepIndicatorContext'
-import { createSpacingClasses } from '../space/SpacingHelper'
-import { SpacingProps } from '../../shared/types'
-import {
-  StepIndicatorData,
-  StepIndicatorMode,
-  StepIndicatorProps,
-} from '../StepIndicator'
-
-export type StepIndicatorSidebarProps = SpacingProps &
-  Pick<StepIndicatorProps, 'current_step' | 'skeleton'> &
-  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {
-    /**
-     * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
-     */
-    data?: StepIndicatorData
-    /**
-     * 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.
-     */
-    mode?: StepIndicatorMode
-    /**
-     * Stuff
-     */
-    showInitialData?: boolean
-    /**
-     * <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
-  }
-
-function StepIndicatorSidebar({
-  current_step = stepIndicatorDefaultProps.current_step,
-  data = stepIndicatorDefaultProps.data,
-  ...restOfProps
-}: StepIndicatorSidebarProps) {
-  const props = useMemo(() => {
-    return { current_step, data, ...restOfProps }
-  }, [current_step, data, restOfProps])
-
-  const context = useContext(Context)
-
-  const [showInitialData, setShowInitialData] = useState<boolean>(true)
-
-  const hasSkeletonData = useRef<boolean>(null)
-
-  useEffect(() => {
-    if (!props.showInitialData) {
-      setShowInitialData(false)
-    }
-  }, [props.showInitialData])
-
-  const getContextAndProps = useCallback(() => {
-    const providerProps = extendPropsWithContext(
-      props,
-      stepIndicatorDefaultProps,
-      { skeleton: context?.skeleton },
-      context.getTranslation(context).StepIndicator,
-      context?.StepIndicator
-    )
-
-    if (!(providerProps.data?.length > 0)) {
-      providerProps.data = ['Loading...']
-      providerProps.skeleton = true
-      hasSkeletonData.current = true
-    }
-
-    return providerProps
-  }, [context, props])
-
-  const providerProps = showInitialData ? getContextAndProps() : null
-
-  return (
-    <div
-      id={'sidebar__' + props.sidebar_id}
-      className={classnames(
-        'dnb-step-indicator-wrapper',
-        'dnb-step-indicator__sidebar',
-        hasSkeletonData.current &&
-          providerProps?.skeleton &&
-          'dnb-step-indicator__sidebar--ssr-skeleton',
-        createSpacingClasses(props)
-      )}
-    >
-      {providerProps && (
-        <StepIndicatorProvider
-          isSidebar
-          sidebar_id={props.sidebar_id}
-          {...providerProps}
-        >
-          <StepIndicatorList />
-        </StepIndicatorProvider>
-      )}
-    </div>
-  )
+/**
+ * @deprecated StepIndicatorSidebar variant is no longer supported
+ */
+function StepIndicatorSidebar(props: any) {
+  return <div className="dnb-step-indicator__sidebar"></div>
 }
 
 StepIndicatorSidebar._supportsSpacingProps = true

packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.tsx

@@ -6,7 +6,8 @@
 import classnames from 'classnames'
 import React, { useContext, useRef } from 'react'
 import Button, { ButtonProps } from '../button/Button'
-import chevron_icon from '../../icons/chevron_right_medium'
+import chevron_down from '../../icons/chevron_down'
+import chevron_up from '../../icons/chevron_up'
 import {
   validateDOMAttributes,
   combineDescribedBy,
@@ -27,15 +28,13 @@ export type StepIndicatorTriggerButtonProps = ButtonProps & {
    */
   sidebar_id?: string
   className?: string
-  inner_ref?: React.RefObject<HTMLElement>
+  inner_ref?: React.RefObject<HTMLAnchorElement>
 }
 function StepIndicatorTriggerButton(
   props: StepIndicatorTriggerButtonProps
 ) {
   const context = useContext(StepIndicatorContext)
 
-  const buttonRef = useRef(props?.inner_ref || null)
-
   const item = context.data[context.activeStep || 0]
   const label = context.stepsLabel
 
@@ -48,8 +47,7 @@ function StepIndicatorTriggerButton(
     ...contextWithoutData,
     className: classnames(
       'dnb-step-indicator__trigger',
-      createSkeletonClass('font', context.skeleton),
-      createSpacingClasses(context)
+      createSkeletonClass('font', context.skeleton)
     ),
     'aria-live': 'polite',
   } as React.HTMLProps<HTMLElement>
@@ -85,29 +83,24 @@ function StepIndicatorTriggerButton(
       </span>
       <FormLabel
         aria-describedby={context.sidebar_id}
-        forId={context.sidebar_id}
         className="dnb-step-indicator__label"
+        right="x-small"
       >
         {label}
       </FormLabel>
       <Button
         {...buttonParams}
-        id={context.sidebar_id}
         wrap
-        stretch
-        variant="secondary"
-        icon={chevron_icon}
-        icon_size="medium"
+        variant="tertiary"
+        icon={context.openState ? chevron_up : chevron_down}
         icon_position="right"
-        inner_ref={buttonRef}
+        inner_ref={props.inner_ref}
       >
         <StepItemWrapper
           number={(context.activeStep || 0) + 1}
           hide_numbers={context.hide_numbers}
         >
-          <HeightAnimation>
-            {(typeof item === 'string' ? item : item && item.title) || ''}
-          </HeightAnimation>
+          {(typeof item === 'string' ? item : item && item.title) || ''}
         </StepItemWrapper>
       </Button>
     </div>