feat: Add not-started status type for StatusIndicator (#3960)

Author: Who-is-PS

pages/status-indicator/permutations.page.tsx

@@ -10,7 +10,7 @@ import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<InternalStatusIndicatorProps>([
   {
-    type: ['error', 'warning', 'success', 'info', 'stopped', 'pending', 'in-progress', 'loading'],
+    type: ['error', 'warning', 'success', 'info', 'stopped', 'pending', 'in-progress', 'loading', 'not-started'],
   },
   {
     type: ['pending'],

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() {

pages/steps/permutations-utils.tsx

@@ -295,6 +295,12 @@ const allStatusesSteps: ReadonlyArray<StepsProps.Step> = [
     header: 'loading step',
     details: 'Test description',
   },
+  {
+    status: 'not-started',
+    statusIconAriaLabel: 'not started',
+    header: 'not started step',
+    details: 'Test description',
+  },
 ];
 
 const emptySteps: ReadonlyArray<StepsProps.Step> = [];

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",

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;

src/icon/icons/status-not-started.svg

@@ -188,6 +188,7 @@ export namespace IconProps {
     | 'status-in-progress'
     | 'status-info'
     | 'status-negative'
+    | 'status-not-started'
     | 'status-pending'
     | 'status-positive'
     | 'status-stopped'

src/icon/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';
 }

src/status-indicator/interfaces.ts

@@ -45,6 +45,7 @@ const typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JS
   pending: <InternalIcon name="status-pending" size={size} />,
   'in-progress': <InternalIcon name="status-in-progress" size={size} />,
   loading: <InternalSpinner />,
+  'not-started': <InternalIcon name="status-not-started" size={size} />,
 });
 
 interface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {

src/status-indicator/internal.tsx

@@ -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: (