feat: Update colors for warnings in status-related components

pages/alert/permutations.page.tsx

@@ -3,53 +3,65 @@
 import React from 'react';
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
+import Link from '~components/link';
 import ScreenshotArea from '../utils/screenshot-area';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 
+const longText =
+  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const longTextWithLink = (
+  <>
+    Lorem ipsum dolor sit amet, <Link href="#">consectetur</Link> adipisicing{' '}
+    <Link external={true} href="#">
+      elit
+    </Link>
+    , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </>
+);
+
+const allTypes: AlertProps.Type[] = ['info', 'success', 'warning', 'error'];
+
 /* eslint-disable react/jsx-key */
 const permutations = createPermutations<AlertProps>([
   {
-    type: ['warning', 'info', 'success', 'error'],
-    children: [
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    ],
+    children: [longText, longTextWithLink],
+    type: allTypes,
   },
   {
     dismissAriaLabel: ['Close alert'],
     dismissible: [true],
     header: ['Default Example Header'],
+    type: allTypes,
   },
   {
     buttonText: ['Button text'],
     children: ['Default Example Body'],
+    type: allTypes,
   },
   {
     dismissible: [true],
     dismissAriaLabel: ['Close alert'],
     buttonText: ['Button text'],
-    header: [
-      'Default Example Header',
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    ],
-    children: [
-      'Default Example Body',
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    ],
+    header: ['Default Example Header', longText],
+    children: ['Default Example Body', longText],
+    type: allTypes,
   },
   {
     dismissible: [true, false],
     dismissAriaLabel: ['Close alert'],
     header: [undefined, 'Default Example Header'],
-    children: [
-      'Default Example Body',
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    ],
+    children: ['Default Example Body', longText],
     action: [
       <Button iconName="external" iconAlign="right">
         Show more
       </Button>,
     ],
+    type: allTypes,
   },
 ]);
 

pages/flashbar/permutations.page.tsx

@@ -73,10 +73,16 @@ const permutations = createPermutations<FlashbarProps.MessageDefinition>([
     content: ['content'],
   },
   {
-    header: ['header'],
+    type: ['success', 'error', 'warning', 'info', 'in-progress'],
+    header: ['With expandable section inside'],
     content: [
-      <ExpandableSection defaultExpanded={true} headerText="Details">
-        Expandable Section content
+      <ExpandableSection defaultExpanded={true} headerText="Details" headerDescription="Description">
+        <div>
+          <p>Expandable Section content with a button </p>
+          <Button href="#" iconName="external">
+            Click me
+          </Button>
+        </div>
       </ExpandableSection>,
     ],
   },