perf(api): add descriptions to api examples

AlaskaAirlines · Feb 7, 2024 · 99c30fa · 99c30fa
1 parent 1434fcd
commit 99c30fa
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 18 deletions.
diff --git a/apiExamples/warning-no-icon.html b/apiExamples/warning-no-icon.html
@@ -1 +1 @@
-<auro-alert noIcon type="warning">Warning.Session timed out. Look for a confirmation email to verify your transaction.</
+<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</
diff --git a/demo/api.md b/demo/api.md
@@ -38,12 +38,14 @@
 
 ### type
 
+The default version of `auro-alert` with no `type` assigned to it.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
   <auro-alert>This is a default error with no error type specified.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
@@ -54,12 +56,14 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+An `auro-alert` component using `type="error"`.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/error.html -->
   <auro-alert type="error">Transaction failed.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
@@ -70,6 +74,8 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+An `auro-alert` component using `type="warning"`.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/warning.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/warning.html -->
@@ -86,12 +92,14 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+An `auro-alert` component using `type="information"`.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/information.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/information.html -->
   <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information.html) -->
@@ -102,12 +110,14 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+An `auro-alert` component using `type="success"`.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/success.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/success.html -->
   <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/success.html) -->
@@ -121,6 +131,8 @@
 
 ### Multiline
 
+A series of examples showing how the `auro-alert` component can be used to display multiline messages.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error-multiline.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/error-multiline.html -->
@@ -129,7 +141,7 @@
     <p>This is error message 2.</p>
   </auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error-multiline.html) -->
@@ -151,7 +163,7 @@
     <p>This is warning message 2.</p>
   </auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/warning-multiline.html) -->
@@ -173,7 +185,7 @@
     <p>This is information message 2.</p>
   </auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information-multiline.html) -->
@@ -212,12 +224,14 @@
 
 ### noIcon
 
+A series of examples showing how the `auro-alert` component can be used in conjunction with the `noIcon` attribute to display messages without an icon.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error-no-icon.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/error-no-icon.html -->
   <auro-alert noIcon type="error">Transaction failed.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error-no-icon.html) -->
@@ -231,16 +245,16 @@
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/warning-no-icon.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/warning-no-icon.html -->
-  <auro-alert noIcon type="warning">Warning.Session timed out. Look for a confirmation email to verify your transaction.</
+  <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/warning-no-icon.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/warning-no-icon.html -->
 
 ```html
-<auro-alert noIcon type="warning">Warning.Session timed out. Look for a confirmation email to verify your transaction.</
+<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -249,7 +263,7 @@
   <!-- The below content is automatically added from ./../../apiExamples/information-no-icon.html -->
   <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information-no-icon.html) -->
@@ -265,7 +279,7 @@
   <!-- The below content is automatically added from ./../../apiExamples/success-no-icon.html -->
   <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/success-no-icon.html) -->
@@ -279,6 +293,8 @@
 
 ### fixed
 
+There are scenarios where the styles of a component do not appear as intended due to a dependency on `16px` root font size. In order to address this, use the `fixed` feature to update the default `REM` values with fixed `px` values.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/fixed-pixels.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/fixed-pixels.html -->
@@ -298,6 +314,8 @@
 
 ### hidden
 
+Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/hidden.html -->
@@ -317,6 +335,8 @@
 
 ### hiddenVisually
 
+Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden-visually.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/hidden-visually.html -->
@@ -336,6 +356,8 @@
 
 ### hiddenAudible
 
+Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden-audible.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/hidden-audible.html -->
@@ -355,6 +377,8 @@
 
 ### role
 
+An example of using the `role="alert"` attribute to be used by screen readers to announce the alert.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/role.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/role.html -->

diff --git a/demo/index.md b/demo/index.md
@@ -4,7 +4,7 @@ README.md is created by running `npm run build:docs`.
 This file is generated based on a template fetched from `./docs/partials/index.md`
 -->
 
-# alert
+# Alert
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
 <!-- The below content is automatically added from ./description.md -->
@@ -228,4 +228,4 @@ This will create a new custom element that you can use in your HTML that will fu
 <custom-alert type="warning">Salutations World!</custom-alert>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<auro-alert noIcon type="warning">Warning.Session timed out. Look for a confirmation email to verify your transaction.</
		<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</