Merge pull request #877 from WestpacGEL/content-kate-alerticonsizes

Content kate alerticonsizes
WestpacGEL · Sep 22, 2024 · b628841 · b628841
2 parents fb07d38 + 39f625c
commit b628841
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/apps/site/src/content/design-system/components/alert/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/alert/code/development-examples/content.mdoc
@@ -39,3 +39,22 @@
   <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
 </Alert>
 ```
+
+### Icon sizes
+
+```jsx
+<div>
+     <ComponentTitle>Medium</ComponentTitle>
+      <Alert look="info" iconSize="medium" mode="text">
+        This alert has a <strong>Medium</strong> icon.
+      </Alert>
+      <ComponentTitle>Small</ComponentTitle>
+      <Alert look="info" iconSize="small" mode="text">
+        This alert has a <strong>Small</strong> icon.
+      </Alert>
+      <ComponentTitle>Extra Small</ComponentTitle>
+      <Alert look="info" iconSize="xsmall" mode="text">
+       This alert has an <strong>Extra Small</strong> icon.
+      </Alert>
+</div>
+```
diff --git a/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc b/apps/site/src/content/design-system/components/alert/design/alert-text/content.mdoc
@@ -1,3 +1,5 @@
+### Styles
+
 Alert text comes in four different styles and is configurable to allow for simple styling, eg links, bold and italics. It must be used with the defaulted icon to comply with accessibility guidelines, as per Alert boxes. Definitions and usage examples for each style are provided further down the page.
 
 ```jsx
@@ -20,3 +22,24 @@ Alert text comes in four different styles and is configurable to allow for simpl
   </Alert>
 </div>
 ```
+
+### Icon sizes
+
+The icon that accompanies Alert text has three size options, Md-24px, Sm-18px and Xs-12px.
+
+```jsx
+<div>
+     <ComponentTitle>Medium</ComponentTitle>
+      <Alert look="info" iconSize="medium" mode="text">
+        This alert has a <strong>Medium</strong> icon.
+      </Alert>
+      <ComponentTitle>Small</ComponentTitle>
+      <Alert look="info" iconSize="small" mode="text">
+        This alert has a <strong>Small</strong> icon.
+      </Alert>
+      <ComponentTitle>Extra Small</ComponentTitle>
+      <Alert look="info" iconSize="xsmall" mode="text">
+       This alert has an <strong>Extra Small</strong> icon.
+      </Alert>
+</div>
+```