fix tests

cloudscape-design · Sep 10, 2024 · 4bbf553 · 4bbf553
1 parent 5aded93
commit 4bbf553
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 74 deletions.
diff --git a/pages/steps/permutationts-utils.tsx b/pages/steps/permutationts-utils.tsx
@@ -240,7 +240,7 @@ export const stepsPermutations = createPermutations<StepsProps>([
 export const initialStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     status: 'loading',
-    header: <div style={{ margin: '0', color: 'rgb(95, 107, 122)' }}>Listing EC2 instances</div>,
+    header: <div style={{ margin: '0' }}>Listing EC2 instances</div>,
     details: <div className={styles.details}>Using the ec2_DescribeInstances</div>,
   },
 ];
@@ -249,7 +249,7 @@ export const loadingStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     status: 'success',
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -271,7 +271,7 @@ export const loadingStepsInteractive: ReadonlyArray<StepsProps.Step> = [
     ),
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(95, 107, 122)' }}>Gathering Security Group IDs</div>,
+    header: <div style={{ margin: '0' }}>Gathering Security Group IDs</div>,
     details: (
       <div className={styles.details}>
         Using the ec2_DescribeSecurityGroupsTool::
@@ -289,7 +289,7 @@ export const loadingStepsInteractive: ReadonlyArray<StepsProps.Step> = [
 export const loadingSteps2Interactive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -313,7 +313,7 @@ export const loadingSteps2Interactive: ReadonlyArray<StepsProps.Step> = [
   },
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Gathered Security Group IDs:{' '}
         <Popover
           header={'Security Group IDs'}
@@ -335,15 +335,15 @@ export const loadingSteps2Interactive: ReadonlyArray<StepsProps.Step> = [
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(95, 107, 122)' }}>Checking Cross Region Consent</div>,
+    header: <div style={{ margin: '0' }}>Checking Cross Region Consent</div>,
     status: 'loading',
   },
 ];
 
 export const loadingSteps3Interactive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -367,7 +367,7 @@ export const loadingSteps3Interactive: ReadonlyArray<StepsProps.Step> = [
   },
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Gathered Security Group IDs:{' '}
         <Popover
           header={'Security Group IDs'}
@@ -389,19 +389,19 @@ export const loadingSteps3Interactive: ReadonlyArray<StepsProps.Step> = [
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>Checked Cross Region Consent</div>,
+    header: <div style={{ margin: '0' }}>Checked Cross Region Consent</div>,
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(95, 107, 122)' }}>Analyzing security rules</div>,
+    header: <div style={{ margin: '0' }}>Analyzing security rules</div>,
     status: 'loading',
   },
 ];
 
 export const successfulStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -425,7 +425,7 @@ export const successfulStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   },
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Gathered Security Group IDs:{' '}
         <Popover
           header={'Security Group IDs'}
@@ -447,19 +447,19 @@ export const successfulStepsInteractive: ReadonlyArray<StepsProps.Step> = [
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>Checked Cross Region Consent</div>,
+    header: <div style={{ margin: '0' }}>Checked Cross Region Consent</div>,
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>Analyzing security rules</div>,
+    header: <div style={{ margin: '0' }}>Analyzing security rules</div>,
     status: 'success',
   },
 ];
 
 export const blockedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -483,7 +483,7 @@ export const blockedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   },
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Gathered Security Group IDs:{' '}
         <Popover
           header={'Security Group IDs'}
@@ -505,7 +505,7 @@ export const blockedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(141, 102, 5)' }}>Need Cross Region Consent</div>,
+    header: <div style={{ margin: '0' }}>Need Cross Region Consent</div>,
     details: (
       <div className={styles.details}>
         To answer questions about your account resources, Amazon Q might need to make Cross-Region calls within this AWS
@@ -519,7 +519,7 @@ export const blockedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
 export const failedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -542,15 +542,15 @@ export const failedStepsInteractive: ReadonlyArray<StepsProps.Step> = [
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(217, 21, 21)' }}>Could not fetch security groups</div>,
+    header: <div style={{ margin: '0' }}>Could not fetch security groups</div>,
     status: 'error',
   },
 ];
 
 export const failedStepsWithRetryTextInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -573,7 +573,7 @@ export const failedStepsWithRetryTextInteractive: ReadonlyArray<StepsProps.Step>
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(217, 21, 21)' }}>Could not fetch security groups</div>,
+    header: <div style={{ margin: '0' }}>Could not fetch security groups</div>,
     details: (
       <div style={{ margin: '0' }}>
         The request expired due to a server issue. <Link href="#">Retry</Link>
@@ -586,7 +586,7 @@ export const failedStepsWithRetryTextInteractive: ReadonlyArray<StepsProps.Step>
 export const failedStepsWithRetryButtonInteractive: ReadonlyArray<StepsProps.Step> = [
   {
     header: (
-      <div style={{ margin: '0', color: 'rgb(3, 127, 12)' }}>
+      <div style={{ margin: '0' }}>
         Listed EC2 instances:{' '}
         <Popover
           header={'EC2 Instance IDs'}
@@ -609,7 +609,7 @@ export const failedStepsWithRetryButtonInteractive: ReadonlyArray<StepsProps.Ste
     status: 'success',
   },
   {
-    header: <div style={{ margin: '0', color: 'rgb(217, 21, 21)' }}>Could not fetch security groups</div>,
+    header: <div style={{ margin: '0' }}>Could not fetch security groups</div>,
     details: (
       <>
         <div style={{ margin: '0' }}>The request expired due to a server issue.</div>

diff --git a/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -517,8 +517,15 @@ Object {
     "awsui_slider_rjqu5",
   ],
   "status-indicator": Array [
+    "awsui_icon_1cbgc",
     "awsui_root_1cbgc",
   ],
+  "steps": Array [
+    "awsui_container_gxp9y",
+    "awsui_details_gxp9y",
+    "awsui_header_gxp9y",
+    "awsui_root_gxp9y",
+  ],
   "table": Array [
     "awsui_body-cell-edit-active_c6tup",
     "awsui_body-cell-editor-controls_c6tup",

diff --git a/src/steps/internal.tsx b/src/steps/internal.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import clsx from 'clsx';
 
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SomeRequired } from '../internal/types';
@@ -13,26 +14,28 @@ type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseCompon
 
 const InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {
   return (
-    <li className={styles['step-container']}>
-      <div className={styles['step-status']}>
+    <li className={styles.container}>
+      <div className={styles.status}>
         <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel} />
       </div>
-      <div className={styles['step-header']}>{header}</div>
-      <hr className={styles['step-connector']} />
-      {details && <div className={styles['step-details']}>{details}</div>}
+      <div className={styles.header}>{header}</div>
+      <hr className={styles.connector} />
+      {details && <div className={styles.details}>{details}</div>}
     </li>
   );
 };
 
 export const InternalSteps = ({ steps, ...props }: InternalStepsProps) => {
   return (
     <div
-      className={styles.root}
+      {...props}
+      className={clsx(styles.root, styles.steps, props.className)}
       aria-label={props.ariaLabel}
       aria-labelledby={props.ariaLabelledby}
       aria-describedby={props.ariaDescribedby}
+      ref={props.__internalRootRef}
     >
-      <ol className={styles['steps-list']}>
+      <ol className={styles.list}>
         {steps.map((step, index) => (
           <InternalStep
             key={index}

diff --git a/src/steps/styles.scss b/src/steps/styles.scss
@@ -10,49 +10,51 @@
   @include styles.styles-reset;
 }
 
-.steps-list {
-  list-style: none;
-
-  > .step-container {
-    display: grid;
-    grid-template-columns: awsui.$space-static-l 1fr;
-    grid-template-rows: minmax(awsui.$space-static-l, auto);
-    row-gap: awsui.$space-static-xxxs;
-    margin-block-end: awsui.$space-static-xxxs;
-
-    > .step-status {
-      grid-row: 1;
-      grid-column: 1;
-      text-align: center;
+.steps {
+  > .list {
+    list-style: none;
+
+    > .container {
+      display: grid;
+      grid-template-columns: awsui.$space-static-l 1fr;
+      grid-template-rows: minmax(awsui.$space-static-l, auto);
+      row-gap: awsui.$space-static-xxxs;
+      margin-block-end: awsui.$space-static-xxxs;
+
+      > .status {
+        grid-row: 1;
+        grid-column: 1;
+        text-align: center;
+      }
+
+      > .header {
+        grid-row: 1;
+        grid-column: 2;
+      }
+
+      > .details {
+        align-items: center;
+        grid-row: 2;
+        grid-column: 2;
+      }
+
+      > .connector {
+        grid-row: 2;
+        grid-column: 1;
+        background-color: awsui.$color-border-divider-default;
+        margin-block: 0;
+        border-block: 0;
+        border-inline: 0;
+        inline-size: awsui.$space-static-xxxs;
+        block-size: auto;
+        min-block-size: awsui.$space-static-xs;
+        position: relative;
+        inset-inline-end: awsui.$space-static-xxxs;
+      }
     }
 
-    > .step-header {
-      grid-row: 1;
-      grid-column: 2;
+    > :last-of-type > .connector {
+      display: none;
     }
-
-    > .step-details {
-      align-items: center;
-      grid-row: 2;
-      grid-column: 2;
-    }
-
-    > .step-connector {
-      grid-row: 2;
-      grid-column: 1;
-      background-color: awsui.$color-border-divider-default;
-      margin-block: 0;
-      border-block: 0;
-      border-inline: 0;
-      inline-size: awsui.$space-static-xxxs;
-      block-size: auto;
-      min-block-size: awsui.$space-static-xs;
-      position: relative;
-      inset-inline-end: awsui.$space-static-xxxs;
-    }
-  }
-
-  > :last-of-type > .step-connector {
-    display: none;
   }
 }
diff --git a/src/test-utils/dom/steps/index.ts b/src/test-utils/dom/steps/index.ts
@@ -17,14 +17,14 @@ export class StepWrapper extends ComponentWrapper {
    * Finds the header of a step
    */
   findHeader(): ElementWrapper | null {
-    return this.findByClassName(styles['step-header']);
+    return this.findByClassName(styles.header);
   }
 
   /**
    * Finds the details of a step
    */
   findDetails(): ElementWrapper | null {
-    return this.findByClassName(styles['step-details']);
+    return this.findByClassName(styles.details);
   }
 }
 export default class StepsWrapper extends ComponentWrapper {
@@ -34,6 +34,6 @@ export default class StepsWrapper extends ComponentWrapper {
    * Finds all step items
    */
   findItems(): Array<StepWrapper> {
-    return this.findAllByClassName(styles['step-container']).map(item => new StepWrapper(item.getElement()));
+    return this.findAllByClassName(styles.container).map(item => new StepWrapper(item.getElement()));
   }
 }