From 99c30fa524ac3628574480dd4f15e126bb95c8de Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Wed, 7 Feb 2024 12:08:38 -0800 Subject: [PATCH] perf(api): add descriptions to api examples --- apiExamples/warning-no-icon.html | 2 +- demo/api.md | 50 +++++++++++++++++++++++--------- demo/index.md | 4 +-- docs/partials/api.md | 35 ++++++++++++++++++++++ docs/partials/index.md | 4 +-- 5 files changed, 77 insertions(+), 18 deletions(-) diff --git a/apiExamples/warning-no-icon.html b/apiExamples/warning-no-icon.html index 8b04c4b..577679c 100644 --- a/apiExamples/warning-no-icon.html +++ b/apiExamples/warning-no-icon.html @@ -1 +1 @@ -Warning.Session timed out. Look for a confirmation email to verify your transaction.Warning. Session timed out. Look for a confirmation email to verify your transaction. This is a default error with no error type specified. - + See code @@ -54,12 +56,14 @@ ``` +An `auro-alert` component using `type="error"`. +
Transaction failed. -
+ See code @@ -70,6 +74,8 @@ ``` +An `auro-alert` component using `type="warning"`. +
@@ -86,12 +92,14 @@ ``` +An `auro-alert` component using `type="information"`. +
You are confirmed on Flight 20 to Aruba. -
+
See code @@ -102,12 +110,14 @@ ``` +An `auro-alert` component using `type="success"`. +
Your status with flight 20 to Aruba had been updated. -
+ See code @@ -121,6 +131,8 @@ ### Multiline +A series of examples showing how the `auro-alert` component can be used to display multiline messages. +
@@ -129,7 +141,7 @@

This is error message 2.

-
+ See code @@ -151,7 +163,7 @@

This is warning message 2.

 - + See code @@ -173,7 +185,7 @@

This is information message 2.

- + See code @@ -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. +
Transaction failed. -
+ See code @@ -231,16 +245,16 @@
- Warning.Session timed out. Look for a confirmation email to verify your transaction.Warning. Session timed out. Look for a confirmation email to verify your transaction. -
+ See code ```html -Warning.Session timed out. Look for a confirmation email to verify your transaction.Warning. Session timed out. Look for a confirmation email to verify your transaction. @@ -249,7 +263,7 @@ You are confirmed on Flight 20 to Aruba. - + See code @@ -265,7 +279,7 @@ Your status with flight 20 to Aruba had been updated. - + See code @@ -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. +
@@ -298,6 +314,8 @@ ### hidden +Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader. +
@@ -317,6 +335,8 @@ ### hiddenVisually +Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only. +
@@ -336,6 +356,8 @@ ### hiddenAudible +Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only. +
@@ -355,6 +377,8 @@ ### role +An example of using the `role="alert"` attribute to be used by screen readers to announce the alert. +
diff --git a/demo/index.md b/demo/index.md index c63beb7..fa6a1a7 100644 --- 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 @@ -228,4 +228,4 @@ This will create a new custom element that you can use in your HTML that will fu Salutations World! ``` - \ No newline at end of file + diff --git a/docs/partials/api.md b/docs/partials/api.md index 87d9ebb..728a400 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -5,10 +5,13 @@ ### type +The default version of `auro-alert` with no `type` assigned to it. +
+ See code @@ -17,10 +20,13 @@ +An `auro-alert` component using `type="error"`. +
+ See code @@ -29,6 +35,8 @@ +An `auro-alert` component using `type="warning"`. +
@@ -41,10 +49,13 @@ +An `auro-alert` component using `type="information"`. +
+ See code @@ -53,10 +64,13 @@ +An `auro-alert` component using `type="success"`. +
+ See code @@ -67,10 +81,13 @@ ### Multiline +A series of examples showing how the `auro-alert` component can be used to display multiline messages. +
+ See code @@ -83,6 +100,7 @@
+ See code @@ -95,6 +113,7 @@
+ See code @@ -117,10 +136,13 @@ ### 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. +
+ See code @@ -133,6 +155,7 @@
+ See code @@ -145,6 +168,7 @@
+ See code @@ -157,6 +181,7 @@
+ See code @@ -167,6 +192,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. +
@@ -182,6 +209,8 @@ ### hidden +Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader. +
@@ -197,6 +226,8 @@ ### hiddenVisually +Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only. +
@@ -212,6 +243,8 @@ ### hiddenAudible +Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only. +
@@ -227,6 +260,8 @@ ### role +An example of using the `role="alert"` attribute to be used by screen readers to announce the alert. +
diff --git a/docs/partials/index.md b/docs/partials/index.md index 6838c66..f49080f 100644 --- a/docs/partials/index.md +++ b/docs/partials/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 @@ -150,4 +150,4 @@ This will create a new custom element that you can use in your HTML that will fu - \ No newline at end of file +