diff --git a/pages/status-indicator/permutations.page.tsx b/pages/status-indicator/permutations.page.tsx index f62090a970..6c86feee2f 100644 --- a/pages/status-indicator/permutations.page.tsx +++ b/pages/status-indicator/permutations.page.tsx @@ -10,7 +10,7 @@ import ScreenshotArea from '../utils/screenshot-area'; const permutations = createPermutations([ { - type: ['error', 'warning', 'success', 'info', 'stopped', 'pending', 'in-progress', 'loading'], + type: ['error', 'warning', 'success', 'info', 'stopped', 'pending', 'in-progress', 'loading', 'not-started'], }, { type: ['pending'], diff --git a/pages/status-indicator/simple.page.tsx b/pages/status-indicator/simple.page.tsx index 418ff1ba78..329301b3d8 100644 --- a/pages/status-indicator/simple.page.tsx +++ b/pages/status-indicator/simple.page.tsx @@ -13,6 +13,7 @@ const statusToText: [StatusIndicatorProps.Type, string][] = [ ['pending', 'Pending'], ['in-progress', 'In progress'], ['loading', 'Loading'], + ['not-started', 'Not started'], ]; export default function StatusIndicatorScenario() { diff --git a/pages/steps/permutations-utils.tsx b/pages/steps/permutations-utils.tsx index 10bf0235cc..85057f53bc 100644 --- a/pages/steps/permutations-utils.tsx +++ b/pages/steps/permutations-utils.tsx @@ -295,6 +295,12 @@ const allStatusesSteps: ReadonlyArray = [ header: 'loading step', details: 'Test description', }, + { + status: 'not-started', + statusIconAriaLabel: 'not started', + header: 'not started step', + details: 'Test description', + }, ]; const emptySteps: ReadonlyArray = []; diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index caac847700..55c7f6efd7 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -3066,6 +3066,7 @@ Instead, use \`onSelect\` in combination with the \`onChange\` handler only as a "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -5059,6 +5060,7 @@ This property is ignored if you use a predefined icon or if you set your custom "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -5844,6 +5846,7 @@ The main action also supports the following properties of the [button](/componen "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -13504,6 +13507,7 @@ use the \`id\` attribute, consider setting it on a parent element instead.", "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -14161,6 +14165,11 @@ The same applies to switching icons in the same configuration (for example, \`{' "optional": true, "type": "React.ReactNode", }, + { + "name": "status-not-started", + "optional": true, + "type": "React.ReactNode", + }, { "name": "status-pending", "optional": true, @@ -18839,6 +18848,7 @@ This property is ignored if you use a predefined icon or if you set your custom "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -21691,6 +21701,7 @@ The event \`detail\` contains the current \`selectedOption\`.", "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -22282,6 +22293,7 @@ If you want to clear the selection, use \`null\`.", "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -23394,6 +23406,7 @@ We do not support using this attribute to apply custom styling.", "success", "warning", "info", + "not-started", ], }, "name": "type", @@ -26924,6 +26937,7 @@ If an href is provided, it opens the link in a new tab.", "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", @@ -27127,6 +27141,7 @@ We do not support using this attribute to apply custom styling.", "status-in-progress", "status-info", "status-negative", + "status-not-started", "status-positive", "status-stopped", "status-warning", diff --git a/src/icon-provider/interfaces.ts b/src/icon-provider/interfaces.ts index c7eacced53..3512735123 100644 --- a/src/icon-provider/interfaces.ts +++ b/src/icon-provider/interfaces.ts @@ -126,6 +126,7 @@ export namespace IconProviderProps { 'status-in-progress'?: ReactNode | null; 'status-info'?: ReactNode | null; 'status-negative'?: ReactNode | null; + 'status-not-started'?: ReactNode | null; 'status-pending'?: ReactNode | null; 'status-positive'?: ReactNode | null; 'status-stopped'?: ReactNode | null; diff --git a/src/icon/icons/status-not-started.svg b/src/icon/icons/status-not-started.svg new file mode 100644 index 0000000000..04035be453 --- /dev/null +++ b/src/icon/icons/status-not-started.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icon/interfaces.ts b/src/icon/interfaces.ts index 42682a7b00..ce80fc3640 100644 --- a/src/icon/interfaces.ts +++ b/src/icon/interfaces.ts @@ -188,6 +188,7 @@ export namespace IconProps { | 'status-in-progress' | 'status-info' | 'status-negative' + | 'status-not-started' | 'status-pending' | 'status-positive' | 'status-stopped' diff --git a/src/status-indicator/interfaces.ts b/src/status-indicator/interfaces.ts index 9237b04ae4..4f1fad4707 100644 --- a/src/status-indicator/interfaces.ts +++ b/src/status-indicator/interfaces.ts @@ -45,6 +45,15 @@ export interface StatusIndicatorProps extends BaseComponentProps { export namespace StatusIndicatorProps { // Why not enums? Explained there // https://stackoverflow.com/questions/52393730/typescript-string-literal-union-type-from-enum - export type Type = 'error' | 'warning' | 'success' | 'info' | 'stopped' | 'pending' | 'in-progress' | 'loading'; + export type Type = + | 'error' + | 'warning' + | 'success' + | 'info' + | 'stopped' + | 'pending' + | 'in-progress' + | 'loading' + | 'not-started'; export type Color = 'blue' | 'grey' | 'green' | 'red' | 'yellow'; } diff --git a/src/status-indicator/internal.tsx b/src/status-indicator/internal.tsx index 9882b52ee6..d7835b2ff4 100644 --- a/src/status-indicator/internal.tsx +++ b/src/status-indicator/internal.tsx @@ -45,6 +45,7 @@ const typeToIcon: (size: IconProps.Size) => Record, 'in-progress': , loading: , + 'not-started': , }); interface InternalStatusIconProps extends Pick { diff --git a/src/status-indicator/styles.scss b/src/status-indicator/styles.scss index 7f11ac115d..644d9ea84f 100644 --- a/src/status-indicator/styles.scss +++ b/src/status-indicator/styles.scss @@ -18,6 +18,7 @@ $_status-colors: ( 'pending': awsui.$color-text-status-inactive, 'in-progress': awsui.$color-text-status-inactive, 'loading': awsui.$color-text-status-inactive, + 'not-started': awsui.$color-text-status-inactive, ); $_color-overrides: ( diff --git a/src/steps/internal.tsx b/src/steps/internal.tsx index bd95a7bdce..f8006950be 100644 --- a/src/steps/internal.tsx +++ b/src/steps/internal.tsx @@ -23,6 +23,7 @@ const statusToColor: Record = { pending: 'text-status-inactive', 'in-progress': 'text-status-inactive', loading: 'text-status-inactive', + 'not-started': 'text-status-inactive', }; const CustomStep = ({