diff --git a/pages/steps/permutationts-utils.tsx b/pages/steps/permutationts-utils.tsx index 649d5cd7d1..65ef427cbe 100644 --- a/pages/steps/permutationts-utils.tsx +++ b/pages/steps/permutationts-utils.tsx @@ -240,7 +240,7 @@ export const stepsPermutations = createPermutations([ export const initialStepsInteractive: ReadonlyArray = [ { status: 'loading', - header:
Listing EC2 instances
, + header:
Listing EC2 instances
, details:
Using the ec2_DescribeInstances
, }, ]; @@ -249,7 +249,7 @@ export const loadingStepsInteractive: ReadonlyArray = [ { status: 'success', header: ( -
+
Listed EC2 instances:{' '} = [ ), }, { - header:
Gathering Security Group IDs
, + header:
Gathering Security Group IDs
, details: (
Using the ec2_DescribeSecurityGroupsTool:: @@ -289,7 +289,7 @@ export const loadingStepsInteractive: ReadonlyArray = [ export const loadingSteps2Interactive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} = [ }, { header: ( -
+
Gathered Security Group IDs:{' '} = [ status: 'success', }, { - header:
Checking Cross Region Consent
, + header:
Checking Cross Region Consent
, status: 'loading', }, ]; @@ -343,7 +343,7 @@ export const loadingSteps2Interactive: ReadonlyArray = [ export const loadingSteps3Interactive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} = [ }, { header: ( -
+
Gathered Security Group IDs:{' '} = [ status: 'success', }, { - header:
Checked Cross Region Consent
, + header:
Checked Cross Region Consent
, status: 'success', }, { - header:
Analyzing security rules
, + header:
Analyzing security rules
, status: 'loading', }, ]; @@ -401,7 +401,7 @@ export const loadingSteps3Interactive: ReadonlyArray = [ export const successfulStepsInteractive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} = [ }, { header: ( -
+
Gathered Security Group IDs:{' '} = [ status: 'success', }, { - header:
Checked Cross Region Consent
, + header:
Checked Cross Region Consent
, status: 'success', }, { - header:
Analyzing security rules
, + header:
Analyzing security rules
, status: 'success', }, ]; @@ -459,7 +459,7 @@ export const successfulStepsInteractive: ReadonlyArray = [ export const blockedStepsInteractive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} = [ }, { header: ( -
+
Gathered Security Group IDs:{' '} = [ status: 'success', }, { - header:
Need Cross Region Consent
, + header:
Need Cross Region Consent
, 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 = [ export const failedStepsInteractive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} = [ status: 'success', }, { - header:
Could not fetch security groups
, + header:
Could not fetch security groups
, status: 'error', }, ]; @@ -550,7 +550,7 @@ export const failedStepsInteractive: ReadonlyArray = [ export const failedStepsWithRetryTextInteractive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} status: 'success', }, { - header:
Could not fetch security groups
, + header:
Could not fetch security groups
, details: (
The request expired due to a server issue. Retry @@ -586,7 +586,7 @@ export const failedStepsWithRetryTextInteractive: ReadonlyArray export const failedStepsWithRetryButtonInteractive: ReadonlyArray = [ { header: ( -
+
Listed EC2 instances:{' '} Could not fetch security groups
, + header:
Could not fetch security groups
, details: ( <>
The request expired due to a server issue.
diff --git a/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap index b82a00071b..4522270c83 100644 --- 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 index 049abb96dd..a8ef0c2745 100644 --- 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,13 +14,13 @@ type InternalStepsProps = SomeRequired & InternalBaseCompon const InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => { return ( -
  • -
    +
  • +
    -
    {header}
    -
    - {details &&
    {details}
    } +
    {header}
    +
    + {details &&
    {details}
    }
    • ); }; @@ -27,12 +28,14 @@ const InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsPro export const InternalSteps = ({ steps, ...props }: InternalStepsProps) => { return (
    -
      +
        {steps.map((step, index) => ( .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 index 712b0748ae..0488ce77c1 100644 --- 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 { - return this.findAllByClassName(styles['step-container']).map(item => new StepWrapper(item.getElement())); + return this.findAllByClassName(styles.container).map(item => new StepWrapper(item.getElement())); } }