From e57fa176f1e6e6b338328ac6e26f2f833880a12a Mon Sep 17 00:00:00 2001 From: heyMP Date: Thu, 5 Oct 2023 19:26:28 +0000 Subject: [PATCH] deploy: 0084cae9713bf2b54be340d81e5166a6288adb86 --- .../elements/rh-accordion/docs/30-code.md | 2 +- .../elements/rh-alert/docs/30-code.md | 2 +- .../elements/rh-audio-player/docs/40-code.md | 2 +- .../elements/rh-avatar/docs/30-code.md | 4 +- .../elements/rh-badge/docs/30-code.md | 4 +- .../elements/rh-blockquote/docs/30-code.md | 2 +- .../elements/rh-button/docs/30-code.md | 4 +- .../elements/elements/rh-card/docs/30-code.md | 2 +- .../elements/rh-code-block/docs/40-code.md | 2 +- .../elements/elements/rh-cta/docs/30-code.md | 4 +- .../elements/rh-dialog/docs/30-code.md | 4 +- .../elements/rh-footer/docs/30-code.md | 4 +- .../rh-navigation-secondary/docs/30-code.md | 2 +- .../rh-navigation-secondary/test/fixtures.js | 172 ------------------ .../elements/rh-pagination/docs/30-code.md | 4 +- .../elements/rh-spinner/docs/30-code.md | 4 +- .../elements/elements/rh-stat/docs/30-code.md | 4 +- .../elements/rh-subnav/docs/30-code.md | 4 +- .../elements/elements/rh-tabs/docs/30-code.md | 4 +- .../elements/elements/rh-tag/docs/30-code.md | 2 +- .../elements/rh-timestamp/docs/30-code.md | 2 +- .../elements/rh-tooltip/docs/30-code.md | 2 +- elements/accordion/code/index.html | 10 +- elements/alert/code/index.html | 10 +- elements/audio-player/code/index.html | 18 +- elements/avatar/code/index.html | 11 +- elements/badge/code/index.html | 11 +- elements/blockquote/code/index.html | 10 +- elements/button/code/index.html | 11 +- elements/call-to-action/code/index.html | 11 +- elements/card/code/index.html | 10 +- elements/code-block/code/index.html | 10 +- elements/dialog/code/index.html | 11 +- elements/footer/code/index.html | 18 +- elements/navigation-secondary/code/index.html | 18 +- elements/pagination/code/index.html | 19 +- elements/spinner/code/index.html | 11 +- elements/statistic/code/index.html | 11 +- elements/subnavigation/code/index.html | 19 +- elements/tabs/code/index.html | 11 +- elements/tag/code/index.html | 10 +- elements/timestamp/code/index.html | 10 +- elements/tooltip/code/index.html | 10 +- 43 files changed, 250 insertions(+), 246 deletions(-) delete mode 100644 assets/packages/@rhds/elements/elements/rh-navigation-secondary/test/fixtures.js diff --git a/assets/packages/@rhds/elements/elements/rh-accordion/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-accordion/docs/30-code.md index f2ba1a9ad1..91c0ebcbed 100644 --- a/assets/packages/@rhds/elements/elements/rh-accordion/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-accordion/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/assets/packages/@rhds/elements/elements/rh-alert/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-alert/docs/30-code.md index 2d12318451..7993ce3cd6 100644 --- a/assets/packages/@rhds/elements/elements/rh-alert/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-alert/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-audio-player/docs/40-code.md b/assets/packages/@rhds/elements/elements/rh-audio-player/docs/40-code.md index 7c5a707a69..8d7388ecd7 100644 --- a/assets/packages/@rhds/elements/elements/rh-audio-player/docs/40-code.md +++ b/assets/packages/@rhds/elements/elements/rh-audio-player/docs/40-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} ## Usage {% playground tagName=tagName %}{% endplayground %} diff --git a/assets/packages/@rhds/elements/elements/rh-avatar/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-avatar/docs/30-code.md index c71692f2f7..cdc99775ea 100644 --- a/assets/packages/@rhds/elements/elements/rh-avatar/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-avatar/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -6,4 +6,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-badge/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-badge/docs/30-code.md index 40948d00e7..3ed8ee0798 100644 --- a/assets/packages/@rhds/elements/elements/rh-badge/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-badge/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -6,4 +6,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-blockquote/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-blockquote/docs/30-code.md index 484e3a166d..aea19a12f7 100644 --- a/assets/packages/@rhds/elements/elements/rh-blockquote/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-blockquote/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/assets/packages/@rhds/elements/elements/rh-button/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-button/docs/30-code.md index 07f3a8a3f6..c6eca2e12e 100644 --- a/assets/packages/@rhds/elements/elements/rh-button/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-button/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage {% playground tagName=button %}{% endplayground %} @@ -6,4 +6,4 @@ View the demo in a new tab {% endcta %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-card/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-card/docs/30-code.md index 2d12318451..7993ce3cd6 100644 --- a/assets/packages/@rhds/elements/elements/rh-card/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-card/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-code-block/docs/40-code.md b/assets/packages/@rhds/elements/elements/rh-code-block/docs/40-code.md index 589d01b739..24db170946 100644 --- a/assets/packages/@rhds/elements/elements/rh-code-block/docs/40-code.md +++ b/assets/packages/@rhds/elements/elements/rh-code-block/docs/40-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage diff --git a/assets/packages/@rhds/elements/elements/rh-cta/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-cta/docs/30-code.md index 240898fb7c..5159b9035e 100644 --- a/assets/packages/@rhds/elements/elements/rh-cta/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-cta/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -8,4 +8,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-dialog/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-dialog/docs/30-code.md index 2768a91bd1..add15fd861 100644 --- a/assets/packages/@rhds/elements/elements/rh-dialog/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-dialog/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -12,4 +12,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-footer/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-footer/docs/30-code.md index 85d1a53ddd..a9138a7acc 100644 --- a/assets/packages/@rhds/elements/elements/rh-footer/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-footer/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} @@ -11,4 +11,4 @@ {% renderCodeDocs for='rh-footer-links' %}{% endrenderCodeDocs %} {% renderCodeDocs for='rh-footer-social-link' %}{% endrenderCodeDocs %} - \ No newline at end of file + diff --git a/assets/packages/@rhds/elements/elements/rh-navigation-secondary/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-navigation-secondary/docs/30-code.md index 188333cbd9..b66637d494 100644 --- a/assets/packages/@rhds/elements/elements/rh-navigation-secondary/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-navigation-secondary/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true%}{% endrenderInstallation %} +{% renderInstall lightdomcss=true%}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-navigation-secondary/test/fixtures.js b/assets/packages/@rhds/elements/elements/rh-navigation-secondary/test/fixtures.js deleted file mode 100644 index 7078a68b1b..0000000000 --- a/assets/packages/@rhds/elements/elements/rh-navigation-secondary/test/fixtures.js +++ /dev/null @@ -1,172 +0,0 @@ -import { html } from '@open-wc/testing'; -export const NAV = html ` - - Red Hat Ansible Automation Platform - - Get started - -`; -export const DARKVARIANT = html ` - - Red Hat Ansible Automation Platform - - Get started - -`; -//# sourceMappingURL=fixtures.js.map \ No newline at end of file diff --git a/assets/packages/@rhds/elements/elements/rh-pagination/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-pagination/docs/30-code.md index e126c74da3..2260f620c9 100644 --- a/assets/packages/@rhds/elements/elements/rh-pagination/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-pagination/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -14,4 +14,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-spinner/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-spinner/docs/30-code.md index 64b135c053..b8f67d4aff 100644 --- a/assets/packages/@rhds/elements/elements/rh-spinner/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-spinner/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ### Default/Large Spinner @@ -17,4 +17,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-stat/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-stat/docs/30-code.md index 9cace89675..fc45e56114 100644 --- a/assets/packages/@rhds/elements/elements/rh-stat/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-stat/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -9,4 +9,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-subnav/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-subnav/docs/30-code.md index 5727ed89dc..2c39d7b22d 100644 --- a/assets/packages/@rhds/elements/elements/rh-subnav/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-subnav/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-tabs/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-tabs/docs/30-code.md index a2ec4c5ab0..9615805ffa 100644 --- a/assets/packages/@rhds/elements/elements/rh-tabs/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-tabs/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage ```html @@ -18,4 +18,4 @@ {% renderCodeDocs for='rh-tab' %}{% endrenderCodeDocs %} -{% renderCodeDocs for='rh-tab-panel' %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs for='rh-tab-panel' %}{% endrenderCodeDocs %} diff --git a/assets/packages/@rhds/elements/elements/rh-tag/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-tag/docs/30-code.md index 528bd5d771..03cb5702d4 100644 --- a/assets/packages/@rhds/elements/elements/rh-tag/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-tag/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/30-code.md index b50c098b12..04664aac70 100644 --- a/assets/packages/@rhds/elements/elements/rh-timestamp/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-timestamp/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/assets/packages/@rhds/elements/elements/rh-tooltip/docs/30-code.md b/assets/packages/@rhds/elements/elements/rh-tooltip/docs/30-code.md index 239250e858..c6eca2e12e 100644 --- a/assets/packages/@rhds/elements/elements/rh-tooltip/docs/30-code.md +++ b/assets/packages/@rhds/elements/elements/rh-tooltip/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage {% playground tagName=button %}{% endplayground %} diff --git a/elements/accordion/code/index.html b/elements/accordion/code/index.html index e0c64be0db..150c7ade2f 100644 --- a/elements/accordion/code/index.html +++ b/elements/accordion/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-accordion/rh-accordion.js';
+

@@ -1453,7 +1459,7 @@

Feedback

-
+ diff --git a/elements/alert/code/index.html b/elements/alert/code/index.html index 06dfe192ac..463f24b48f 100644 --- a/elements/alert/code/index.html +++ b/elements/alert/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-alert/rh-alert.js';
+

rh-alert @@ -1231,7 +1237,7 @@

Feedback

- + diff --git a/elements/audio-player/code/index.html b/elements/audio-player/code/index.html index 665ab73283..ace584eb37 100644 --- a/elements/audio-player/code/index.html +++ b/elements/audio-player/code/index.html @@ -882,7 +882,21 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-audio-player/rh-audio-player.js';
+ +

+ Lightdom CSS +

+ +

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

+
<link rel="stylesheet" href="/path/to/rh-audio-player/rh-audio-player-lightdom.css">
+

Replace /path/to in the href attribute with the installation path to the rh-audio-player directory in your project.

+

Usage @@ -1820,7 +1834,7 @@

Feedback

- + diff --git a/elements/avatar/code/index.html b/elements/avatar/code/index.html index fb8b33c966..c5e2f5e201 100644 --- a/elements/avatar/code/index.html +++ b/elements/avatar/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-avatar/rh-avatar.js';
+

@@ -1183,6 +1189,7 @@

inset-inline-end: -1rem; } + @@ -1226,7 +1233,7 @@

Feedback

-
+ diff --git a/elements/badge/code/index.html b/elements/badge/code/index.html index 1314d2b07f..56864d4caa 100644 --- a/elements/badge/code/index.html +++ b/elements/badge/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-badge/rh-badge.js';
+

@@ -1058,6 +1064,7 @@

inset-inline-end: -1rem; } + @@ -1101,7 +1108,7 @@

Feedback

-
+ diff --git a/elements/blockquote/code/index.html b/elements/blockquote/code/index.html index e555b892f6..1539478663 100644 --- a/elements/blockquote/code/index.html +++ b/elements/blockquote/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+

@@ -1169,7 +1175,7 @@

Feedback

-
+ diff --git a/elements/button/code/index.html b/elements/button/code/index.html index f520e559f6..605c231be6 100644 --- a/elements/button/code/index.html +++ b/elements/button/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-button/rh-button.js';
+

Usage @@ -1184,6 +1190,7 @@

inset-inline-end: -1rem; } + @@ -1227,7 +1234,7 @@

Feedback

- + diff --git a/elements/call-to-action/code/index.html b/elements/call-to-action/code/index.html index 1530551a0a..7e8a28e5f6 100644 --- a/elements/call-to-action/code/index.html +++ b/elements/call-to-action/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-cta/rh-cta.js';
+

@@ -1282,6 +1288,7 @@

inset-inline-end: -1rem; } + @@ -1325,7 +1332,7 @@

Feedback

-
+ diff --git a/elements/card/code/index.html b/elements/card/code/index.html index d8936816bc..0623e63030 100644 --- a/elements/card/code/index.html +++ b/elements/card/code/index.html @@ -867,7 +867,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-card/rh-card.js';
+

rh-card @@ -1117,7 +1123,7 @@

Feedback

- + diff --git a/elements/code-block/code/index.html b/elements/code-block/code/index.html index 54bdeb809d..30b29bdffc 100644 --- a/elements/code-block/code/index.html +++ b/elements/code-block/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-code-block/rh-code-block.js';
+

Usage @@ -1104,7 +1110,7 @@

Feedback

- + diff --git a/elements/dialog/code/index.html b/elements/dialog/code/index.html index 61b08f32fd..6419b3828d 100644 --- a/elements/dialog/code/index.html +++ b/elements/dialog/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-dialog/rh-dialog.js';
+

@@ -1028,6 +1034,7 @@

inset-inline-end: -1rem; } + @@ -1071,7 +1078,7 @@

Feedback

-
+ diff --git a/elements/footer/code/index.html b/elements/footer/code/index.html index 59e6ecacac..77033d1bfb 100644 --- a/elements/footer/code/index.html +++ b/elements/footer/code/index.html @@ -870,7 +870,21 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-footer/rh-footer.js';
+ +

+ Lightdom CSS +

+ +

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

+
<link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">
+

Replace /path/to in the href attribute with the installation path to the rh-footer directory in your project.

+

Feedback

- + diff --git a/elements/navigation-secondary/code/index.html b/elements/navigation-secondary/code/index.html index 4c9e6f337a..ff288050ba 100644 --- a/elements/navigation-secondary/code/index.html +++ b/elements/navigation-secondary/code/index.html @@ -870,7 +870,21 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
+ +

+ Lightdom CSS +

+ +

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

+
<link rel="stylesheet" href="/path/to/rh-navigation-secondary/rh-navigation-secondary-lightdom.css">
+

Replace /path/to in the href attribute with the installation path to the rh-navigation-secondary directory in your project.

+

rh-navigation-secondary @@ -1614,7 +1628,7 @@

Feedback

- + diff --git a/elements/pagination/code/index.html b/elements/pagination/code/index.html index 969ee88f8a..a57d9205c7 100644 --- a/elements/pagination/code/index.html +++ b/elements/pagination/code/index.html @@ -870,7 +870,21 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-pagination/rh-pagination.js';
+ +

+ Lightdom CSS +

+ +

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

+
<link rel="stylesheet" href="/path/to/rh-pagination/rh-pagination-lightdom.css">
+

Replace /path/to in the href attribute with the installation path to the rh-pagination directory in your project.

+

@@ -1197,6 +1211,7 @@

inset-inline-end: -1rem; } + @@ -1240,7 +1255,7 @@

Feedback

-
+ diff --git a/elements/spinner/code/index.html b/elements/spinner/code/index.html index f766075a54..2fec10253a 100644 --- a/elements/spinner/code/index.html +++ b/elements/spinner/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-spinner/rh-spinner.js';
+

@@ -1107,6 +1113,7 @@

inset-inline-end: -1rem; } + @@ -1150,7 +1157,7 @@

Feedback

-
+ diff --git a/elements/statistic/code/index.html b/elements/statistic/code/index.html index 3ded04bac5..65f45b77b3 100644 --- a/elements/statistic/code/index.html +++ b/elements/statistic/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-stat/rh-stat.js';
+

@@ -1087,6 +1093,7 @@

inset-inline-end: -1rem; } + @@ -1124,7 +1131,7 @@

Feedback

-
+ diff --git a/elements/subnavigation/code/index.html b/elements/subnavigation/code/index.html index 15a1fc65d0..7849754e13 100644 --- a/elements/subnavigation/code/index.html +++ b/elements/subnavigation/code/index.html @@ -870,7 +870,21 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-subnav/rh-subnav.js';
+ +

+ Lightdom CSS +

+ +

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

+
<link rel="stylesheet" href="/path/to/rh-subnav/rh-subnav-lightdom.css">
+

Replace /path/to in the href attribute with the installation path to the rh-subnav directory in your project.

+

rh-subnav @@ -1066,6 +1080,7 @@

inset-inline-end: -1rem; } + @@ -1109,7 +1124,7 @@

Feedback

- + diff --git a/elements/tabs/code/index.html b/elements/tabs/code/index.html index 36cd9f0f21..52087769bd 100644 --- a/elements/tabs/code/index.html +++ b/elements/tabs/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-tabs/rh-tabs.js';
+

Usage @@ -1476,6 +1482,7 @@

inset-inline-end: -1rem; } + @@ -1519,7 +1526,7 @@

Feedback

- + diff --git a/elements/tag/code/index.html b/elements/tag/code/index.html index 25be21309b..02918a8695 100644 --- a/elements/tag/code/index.html +++ b/elements/tag/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-tag/rh-tag.js';
+

@@ -1272,7 +1278,7 @@

Feedback

-
+ diff --git a/elements/timestamp/code/index.html b/elements/timestamp/code/index.html index 39484e771a..8103f0bf00 100644 --- a/elements/timestamp/code/index.html +++ b/elements/timestamp/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-timestamp/rh-timestamp.js';
+

@@ -1060,7 +1066,7 @@

Feedback

-
+ diff --git a/elements/tooltip/code/index.html b/elements/tooltip/code/index.html index 3da451dd33..334030f9c3 100644 --- a/elements/tooltip/code/index.html +++ b/elements/tooltip/code/index.html @@ -870,7 +870,13 @@

Installation

-

None

+

We are currently working on our CDN which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

+

In the meantime, install this component using npm:

+
npm install @rhds/elements
+

We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

+

Then import this component into your project by using a bare module specifier:

+
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+

Usage @@ -1069,7 +1075,7 @@

Feedback

- +