clean up

Author: Who-is-PS

src/i18n/messages/all.en.json

@@ -470,4 +470,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
+}

src/wizard/internal.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 
 import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -70,9 +70,6 @@ export default function InternalWizard({
   const farthestStepIndex = useRef<number>(actualActiveStepIndex);
   farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
 
-  // State for expandable step navigation (expanded by default for accessibility)
-  const [stepNavigationExpanded, setStepNavigationExpanded] = useState(true);
-
   const isVisualRefresh = useVisualRefresh();
   const isLastStep = actualActiveStepIndex >= steps.length - 1;
 
@@ -214,8 +211,6 @@ export default function InternalWizard({
             onStepClick={onStepClick}
             onSkipToClick={onSkipToClick}
             onPrimaryClick={onPrimaryClick}
-            stepNavigationExpanded={stepNavigationExpanded}
-            onStepNavigationExpandedChange={setStepNavigationExpanded}
           />
         </div>
       </div>

src/wizard/styles.scss

@@ -267,157 +267,6 @@
   }
 }
 
-.collapsed-steps-navigation {
-  display: inline-block;
-}
-
-.collapsed-steps-trigger {
-  @include styles.styles-reset;
-  display: inline-flex;
-  align-items: center;
-  gap: awsui.$space-xxs;
-  padding-block: 0;
-  padding-inline: 0;
-  border-block: none;
-  border-inline: none;
-  background: transparent;
-  color: awsui.$color-text-link-default;
-  font-weight: styles.$font-weight-bold;
-  font-size: inherit;
-  cursor: pointer;
-
-  &:hover {
-    color: awsui.$color-text-link-hover;
-  }
-
-  &:disabled {
-    color: awsui.$color-text-interactive-disabled;
-    cursor: default;
-  }
-
-  @include focus-visible.when-visible {
-    @include styles.link-focus;
-  }
-}
-
-.collapsed-steps-trigger-label {
-  /* used for test utils */
-}
-
-.step-navigation-list {
-  list-style: none;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-.step-navigation-item {
-  position: relative;
-  padding-inline-start: awsui.$space-l;
-  margin-block-end: awsui.$space-s;
-
-  &:not(:last-child)::before {
-    content: '';
-    position: absolute;
-    inset-inline-start: calc(#{awsui.$space-l} / 2 - 1px);
-    inset-block-start: calc(#{awsui.$space-m} + 6px);
-    block-size: calc(100% + #{awsui.$space-s} - 6px);
-    inline-size: 2px;
-    background-color: awsui.$color-border-divider-default;
-  }
-
-  &:last-child {
-    margin-block-end: 0;
-  }
-}
-
-.step-navigation-button {
-  @include styles.styles-reset;
-  display: flex;
-  align-items: flex-start;
-  gap: awsui.$space-xs;
-  padding-block: 0;
-  padding-inline: 0;
-  border-block: none;
-  border-inline: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: start;
-  inline-size: 100%;
-
-  &:disabled {
-    cursor: default;
-  }
-
-  @include focus-visible.when-visible {
-    @include styles.link-focus;
-  }
-}
-
-.step-navigation-button-disabled {
-  cursor: default;
-}
-
-.step-navigation-circle {
-  flex-shrink: 0;
-  inline-size: 12px;
-  block-size: 12px;
-  margin-block-start: 4px;
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
-  border-block: 2px solid awsui.$color-text-interactive-disabled;
-  border-inline: 2px solid awsui.$color-text-interactive-disabled;
-  background-color: awsui.$color-background-container-content;
-  box-sizing: border-box;
-}
-
-.step-navigation-circle-selected {
-  border-color: awsui.$color-background-control-checked;
-  background-color: awsui.$color-background-control-checked;
-  box-shadow:
-    0 0 0 2px awsui.$color-background-container-content,
-    0 0 0 4px awsui.$color-background-control-checked;
-}
-
-.step-navigation-circle-visited {
-  border-color: awsui.$color-text-interactive-default;
-}
-
-.step-navigation-circle-unvisited {
-  border-color: awsui.$color-text-interactive-disabled;
-}
-
-.step-navigation-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.step-navigation-label {
-  font-size: awsui.$font-size-body-s;
-  color: awsui.$color-text-small;
-}
-
-.step-navigation-title {
-  font-size: awsui.$font-size-body-m;
-  color: awsui.$color-text-body-default;
-}
-
-.step-navigation-title-selected {
-  color: awsui.$color-background-control-checked;
-  font-weight: styles.$font-weight-bold;
-}
-
-.step-navigation-title-visited {
-  color: awsui.$color-text-interactive-default;
-}
-
-.step-navigation-title-unvisited {
-  color: awsui.$color-text-status-inactive;
-}
-
 .form-header-component {
   &-wrapper {
     outline: none;

src/wizard/wizard-form.tsx

@@ -45,8 +45,6 @@ interface WizardFormProps extends InternalBaseComponentProps {
   onPrimaryClick: () => void;
   onStepClick: (stepIndex: number) => void;
   onSkipToClick: (stepIndex: number) => void;
-  stepNavigationExpanded?: boolean;
-  onStepNavigationExpandedChange?: (expanded: boolean) => void;
 }
 
 export const STEP_NAME_SELECTOR = `[${DATA_ATTR_FUNNEL_KEY}="${FUNNEL_KEY_STEP_NAME}"]`;
@@ -93,8 +91,6 @@ function WizardForm({
   onPrimaryClick,
   onStepClick,
   onSkipToClick,
-  stepNavigationExpanded = false,
-  onStepNavigationExpandedChange,
 }: WizardFormProps & { stepHeaderRef: MutableRefObject<HTMLDivElement | null> }) {
   const rootRef = useRef<HTMLElement>();
   const ref = useMergeRefs(rootRef, __internalRootRef);
@@ -152,11 +148,7 @@ function WizardForm({
     <>
       <WizardFormHeader>
         <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>
-          <WizardStepNavigationExpandable
-            {...stepNavigationProps}
-            expanded={stepNavigationExpanded}
-            onExpandedChange={onStepNavigationExpandedChange ?? (() => {})}
-          />
+          <WizardStepNavigationExpandable {...stepNavigationProps} />
         </div>
         <InternalHeader
           className={styles['form-header-component']}

src/wizard/wizard-step-navigation-expandable.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useState } from 'react';
 
 import InternalExpandableSection from '../expandable-section/internal';
 import { WizardProps } from './interfaces';
@@ -10,8 +10,6 @@ interface WizardStepNavigationExpandableProps {
   activeStepIndex: number;
   farthestStepIndex: number;
   allowSkipTo: boolean;
-  expanded: boolean;
-  onExpandedChange: (expanded: boolean) => void;
   i18nStrings: WizardProps.I18nStrings;
   isLoadingNextStep: boolean;
   onStepClick: (stepIndex: number) => void;
@@ -23,22 +21,21 @@ export default function WizardStepNavigationExpandable({
   activeStepIndex,
   farthestStepIndex,
   allowSkipTo,
-  expanded,
-  onExpandedChange,
   i18nStrings,
   isLoadingNextStep,
   onStepClick,
   onSkipToClick,
   steps,
 }: WizardStepNavigationExpandableProps) {
+  const [expanded, setExpanded] = useState(true);
   const collapsedStepsLabel = i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length);
 
   return (
     <InternalExpandableSection
       variant="footer"
       headerText={collapsedStepsLabel}
       expanded={expanded}
-      onChange={({ detail }) => onExpandedChange(detail.expanded)}
+      onChange={({ detail }) => setExpanded(detail.expanded)}
     >
       <nav aria-label={i18nStrings.navigationAriaLabel}>
         <WizardStepList