@cloudscape-design/components 3.0.1120 → 3.0.1122

package/steps/internal.js

@@ -3,19 +3,43 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import StatusIndicator from '../status-indicator/internal';
+import InternalBox from '../box/internal';
+import InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';
 import styles from './styles.css.js';
-const InternalStep = ({ status, statusIconAriaLabel, header, details }) => {
+const statusToColor = {
+    error: 'text-status-error',
+    warning: 'text-status-warning',
+    success: 'text-status-success',
+    info: 'text-status-info',
+    stopped: 'text-status-inactive',
+    pending: 'text-status-inactive',
+    'in-progress': 'text-status-inactive',
+    loading: 'text-status-inactive',
+};
+const CustomStep = ({ step, orientation, renderStep, }) => {
+    const { status, statusIconAriaLabel } = step;
+    const { header, details, icon } = renderStep(step);
     return (React.createElement("li", { className: styles.container },
         React.createElement("div", { className: styles.header },
-            React.createElement(StatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
-        React.createElement("hr", { className: styles.connector, role: "none" }),
+            icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel }),
+            orientation === 'vertical' ? header : React.createElement("hr", { className: styles.connector, role: "none" })),
+        orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] }, header)),
+        details && React.createElement("div", { className: styles.details }, details)));
+};
+const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
+    return (React.createElement("li", { className: styles.container },
+        React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
+            React.createElement(InternalBox, { color: statusToColor[status] },
+                React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
+            React.createElement("hr", { className: styles.connector, role: "none" })))),
+        orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
+            React.createElement(InternalBox, { color: statusToColor[status] }, header))),
         details && React.createElement("div", { className: styles.details }, details)));
 };
 const InternalSteps = (_a) => {
-    var { steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]);
-    return (React.createElement("div", Object.assign({}, props, { className: clsx(styles.root, props.className), ref: __internalRootRef }),
-        React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details }))))));
+    var { steps, orientation = 'vertical', renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "orientation", "renderStep", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]);
+    return (React.createElement("div", Object.assign({}, props, { className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef }),
+        React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation }))))));
 };
 export default InternalSteps;
 //# sourceMappingURL=internal.js.map

package/steps/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAG3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzF,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,oBAAC,eAAe,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IAC9D,MAAM,CACS,CACd;QACN,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG;QAC9C,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAOF,EAAE,EAAE;QAPF,EACrB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,OAEE,EADhB,KAAK,cANa,gFAOtB,CADS;IAER,OAAO,CACL,6CAAS,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACnF,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport StatusIndicator from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n          {header}\n        </StatusIndicator>\n      </div>\n      <hr className={styles.connector} role=\"none\" />\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div {...props} className={clsx(styles.root, props.className)} ref={__internalRootRef}>\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) => (\n          <InternalStep\n            key={index}\n            status={step.status}\n            statusIconAriaLabel={step.statusIconAriaLabel}\n            header={step.header}\n            details={step.details}\n          />\n        ))}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />}\n        {orientation === 'vertical' ? header : <hr className={styles.connector} role=\"none\" />}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>{header}</div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {orientation === 'vertical' ? (\n          <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n            {header}\n          </InternalStatusIndicator>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={styles.connector} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>\n          <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n        </div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation = 'vertical',\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              orientation={orientation}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

package/steps/styles.css.js

@@ -1,11 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gxp9y_psgtx_181",
-  "list": "awsui_list_gxp9y_psgtx_212",
-  "container": "awsui_container_gxp9y_psgtx_217",
-  "header": "awsui_header_gxp9y_psgtx_222",
-  "details": "awsui_details_gxp9y_psgtx_226",
-  "connector": "awsui_connector_gxp9y_psgtx_232"
+  "root": "awsui_root_gxp9y_ijhcb_181",
+  "list": "awsui_list_gxp9y_ijhcb_214",
+  "container": "awsui_container_gxp9y_ijhcb_219",
+  "header": "awsui_header_gxp9y_ijhcb_224",
+  "details": "awsui_details_gxp9y_ijhcb_230",
+  "connector": "awsui_connector_gxp9y_ijhcb_236",
+  "custom": "awsui_custom_gxp9y_ijhcb_252",
+  "horizontal": "awsui_horizontal_gxp9y_ijhcb_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_ijhcb_288"
 };
   

package/steps/styles.scoped.css

@@ -178,7 +178,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_gxp9y_psgtx_181:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,28 +208,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212 > .awsui_container_gxp9y_psgtx_217:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212 > .awsui_container_gxp9y_psgtx_217 > .awsui_header_gxp9y_psgtx_222:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_header_gxp9y_ijhcb_224:not(#\9) {
+  display: flex;
+  gap: var(--space-xxs-hwfkai, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212 > .awsui_container_gxp9y_psgtx_217 > .awsui_details_gxp9y_psgtx_226:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_details_gxp9y_ijhcb_230:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-gnm0mz, 8px);
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212 > .awsui_container_gxp9y_psgtx_217 > .awsui_connector_gxp9y_psgtx_232:not(#\9) {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_connector_gxp9y_ijhcb_236:not(#\9) {
   grid-row: 2;
   grid-column: 1;
   background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
@@ -242,6 +246,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   inset-inline-end: var(--space-static-xxxs-yidks1, 2px);
 }
-.awsui_root_gxp9y_psgtx_181 > .awsui_list_gxp9y_psgtx_212 > :not(#\9):last-of-type > .awsui_connector_gxp9y_psgtx_232 {
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_ijhcb_236 {
+  display: none;
+}
+.awsui_root_gxp9y_ijhcb_181 > .awsui_list_gxp9y_ijhcb_214.awsui_custom_gxp9y_ijhcb_252 > .awsui_details_gxp9y_ijhcb_230:not(#\9) {
+  margin-block-end: 0;
+}
+
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214:not(#\9) {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: column;
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219:not(#\9) {
+  display: grid;
+  grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
+  grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
+  align-items: center;
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_header_gxp9y_ijhcb_224:not(#\9) {
+  display: flex;
+  grid-row: 1;
+  grid-column: 1/span 2;
+  align-items: center;
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_header_gxp9y_ijhcb_224 > .awsui_connector_gxp9y_ijhcb_236:not(#\9) {
+  display: block;
+  flex: 1;
+  background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  margin-block: 0;
+  border-block: 0;
+  border-inline: 0;
+  min-block-size: 0;
+  inset-inline-end: 0;
+  block-size: var(--border-divider-list-width-tdfx1x, 1px);
+  inline-size: auto;
+  min-inline-size: var(--space-static-xs-gnm0mz, 8px);
+  margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_horizontal-header_gxp9y_ijhcb_288:not(#\9) {
+  grid-row: 2;
+  grid-column: 1/span 3;
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219 > .awsui_details_gxp9y_ijhcb_230:not(#\9) {
+  grid-row: 3;
+  grid-column: 1/span 3;
+}
+.awsui_horizontal_gxp9y_ijhcb_256 > .awsui_list_gxp9y_ijhcb_214 > .awsui_container_gxp9y_ijhcb_219:not(#\9):last-child > .awsui_header_gxp9y_ijhcb_224 > .awsui_connector_gxp9y_ijhcb_236 {
   display: none;
 }

package/steps/styles.selectors.js

@@ -2,11 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gxp9y_psgtx_181",
-  "list": "awsui_list_gxp9y_psgtx_212",
-  "container": "awsui_container_gxp9y_psgtx_217",
-  "header": "awsui_header_gxp9y_psgtx_222",
-  "details": "awsui_details_gxp9y_psgtx_226",
-  "connector": "awsui_connector_gxp9y_psgtx_232"
+  "root": "awsui_root_gxp9y_ijhcb_181",
+  "list": "awsui_list_gxp9y_ijhcb_214",
+  "container": "awsui_container_gxp9y_ijhcb_219",
+  "header": "awsui_header_gxp9y_ijhcb_224",
+  "details": "awsui_details_gxp9y_ijhcb_230",
+  "connector": "awsui_connector_gxp9y_ijhcb_236",
+  "custom": "awsui_custom_gxp9y_ijhcb_252",
+  "horizontal": "awsui_horizontal_gxp9y_ijhcb_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_ijhcb_288"
 };