-
-
-
-
-
-
-
-{}
+
+
+
+
+
+
+
+
diff --git a/elements/call-to-action/demo/brick/index.html b/elements/call-to-action/demo/brick/index.html
new file mode 100644
index 0000000000..ed0010758e
--- /dev/null
+++ b/elements/call-to-action/demo/brick/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+ Brick | Red Hat Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/elements/call-to-action/demo/button/index.html b/elements/call-to-action/demo/button/index.html
new file mode 100644
index 0000000000..22401da144
--- /dev/null
+++ b/elements/call-to-action/demo/button/index.html
@@ -0,0 +1,72 @@
+
+
+
+
+ Button | Red Hat Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/elements/call-to-action/demo/color-context/index.html b/elements/call-to-action/demo/color-context/index.html
index 65f37ad5fc..0bba469f3a 100644
--- a/elements/call-to-action/demo/color-context/index.html
+++ b/elements/call-to-action/demo/color-context/index.html
@@ -20,8 +20,8 @@
- Default
Default Video
Primary
@@ -31,14 +31,25 @@ Brick Video
-
-
-
-
+
+
diff --git a/elements/call-to-action/demo/demo.css b/elements/call-to-action/demo/demo.css
deleted file mode 100644
index afdf8e8ccb..0000000000
--- a/elements/call-to-action/demo/demo.css
+++ /dev/null
@@ -1,56 +0,0 @@
-[data-demo] {
- padding: 1em 2em;
-}
-
-section,
-#dark {
- display: flex;
- flex-flow: row wrap;
- gap: 16px;
-}
-
-#dark {
- padding: 1em 2em;
- margin-inline: -2em;
- margin-block: 1em;
-}
-
-#dark h2 {
- width: 100%;
-}
-
-section :is(p, h2,h3,h4,h5,h6) {
- width: 100%;
-}
-
-section.grid {
- display: grid;
- gap: 10px 20px;
- grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
- margin-top: 0;
- margin-left: 0;
-}
-
-section.grid :is(h2,h3,h4,h5,h6) {
- grid-column: 1/-1;
-}
-
-.resize {
- resize: horizontal;
- overflow: auto;
- display: flex;
- width: 180px;
- flex-flow: row nowrap;
- border: 1px solid #dddddd;
- padding: 10px;
-}
-
-json-viewer {
- --json-viewer-background: white;
- --json-viewer-boolean-color: #f76707;
- --json-viewer-color: black;
- --json-viewer-key-color: #f76707;
- --json-viewer-null-color: Light #e03131;
- --json-viewer-number-color: #0ca678;
- --json-viewer-string-color: #0c8599;
-}
diff --git a/elements/call-to-action/demo/index.html b/elements/call-to-action/demo/index.html
index e44821baca..0a28c79a7d 100644
--- a/elements/call-to-action/demo/index.html
+++ b/elements/call-to-action/demo/index.html
@@ -19,166 +19,13 @@
-
In this demo, analytics events involving <rh-cta> elements are parsed by a
+
In this demo, analytics events involving <rh-cta> elements are parsed by a
document-level analytics event listener. Unlike <pfe-cta>, which implemented
support for analytics internally, <rh-cta> users must implement their own
analytics code, taking this demo as an example.
Complex Case: Slotted Link, Deep CTA Analytics
Last CTA Analytics Event
+
+
+
+
+
+ Dark Colour Context
Dark Colour Context
-
-
-
+
+ Call to Action
+
-
- Default
- Default Video
- Primary
- Video
- Secondary
- Brick
- Brick Icon
-
-
-
- Default
- Default Video
- Primary
- Video
- Secondary
- Brick
- Brick Icon
-
-
-
- ברירת מחדל
- ברירת מחדל - וידאו
- ראשי
- ראשי - וידאו
- משני
- לבנה
- לבנה עם אייקון
-
-
-
-
-
-
- ברירת מחדל
- ברירת מחדל - וידאו
- ראשי
- ראשי - וידאו
- משני
- לבנה
- לבנה עם אייקון
-
-
-
-
-
-
- -
- -
- -
- -
- -
- -
-
-
-
- -
- -
- -
- -
- -
- -
-
-
-
-
-
+
diff --git a/elements/call-to-action/demo/resizing/index.html b/elements/call-to-action/demo/resizing/index.html
new file mode 100644
index 0000000000..ca351b09ec
--- /dev/null
+++ b/elements/call-to-action/demo/resizing/index.html
@@ -0,0 +1,151 @@
+
+
+
+
+ Resizing | Red Hat Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/elements/call-to-action/demo/rh-cta.js b/elements/call-to-action/demo/rh-cta.js
deleted file mode 100644
index 89f70bbb9c..0000000000
--- a/elements/call-to-action/demo/rh-cta.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import '@patternfly/elements/pf-panel/pf-panel.js';
-import '@patternfly/elements/pf-card/pf-card.js';
-import '@rhds/elements/rh-cta/rh-cta.js';
-
-import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
-
-const root = document.querySelector('[data-demo="rh-cta"]')?.shadowRoot ?? document;
-
-root.querySelector('rh-cta');
-
-/**
- * Polyfill declarative shadow dom.
- * @see https://web.dev/declarative-shadow-dom/
- */
-(function attachShadowRoots(root) {
- root.querySelectorAll('template[shadowroot]').forEach(template => {
- const mode = template.getAttribute('shadowroot');
- const shadowRoot = template.parentNode.attachShadow({ mode });
- shadowRoot.appendChild(template.content);
- template.remove();
- attachShadowRoots(shadowRoot);
- });
-})(document);
diff --git a/elements/call-to-action/demo/right-to-left/index.html b/elements/call-to-action/demo/right-to-left/index.html
new file mode 100644
index 0000000000..5fadf87618
--- /dev/null
+++ b/elements/call-to-action/demo/right-to-left/index.html
@@ -0,0 +1,144 @@
+
+
+
+
+ Right To Left | Red Hat Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ברירת מחדל
+
+
+
+ ברירת מחדל - וידאו
+
+
+
+ ראשי
+
+
+
+ ראשי - וידאו
+
+
+
+ משני
+
+
+
+ לבנה
+
+
+
+ לבנה עם אייקון
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/elements/call-to-action/demo/variants/index.html b/elements/call-to-action/demo/variants/index.html
new file mode 100644
index 0000000000..7d78b49385
--- /dev/null
+++ b/elements/call-to-action/demo/variants/index.html
@@ -0,0 +1,77 @@
+
+
+
+
+ Variants | Red Hat Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+ Default Video
+
+
+
+ Primary
+
+
+
+ Video
+
+
+
+ Secondary
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/elements/call-to-action/index.html b/elements/call-to-action/index.html
index f87b8aa314..40de38f230 100644
--- a/elements/call-to-action/index.html
+++ b/elements/call-to-action/index.html
@@ -891,7 +891,7 @@
-
Variants
-Dark Colour Context
-Right-to-Left Languages
-Deep Shadow RTL
-When the CTA is found within the shadow root of an element which is itself within a RTL context.
-Resizing
- -- -
- -
- -
- -
- -
- -
Extra-long words
- -- -
- -
- -
- -
- -
- -
Force wrap to test arrow line-wrap
-No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.
- - -
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+
+
+ Get product details
+
+
+
+ No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.
+ + + + + +Long words should break in the middle
+ + + + + + + + + + + + + + +Right-to-Left Languages
+
+
+ ברירת מחדל
+
+
+
+ ברירת מחדל - וידאו
+
+
+
+ ראשי
+
+
+
+ ראשי - וידאו
+
+
+
+ משני
+
+
+
+ לבנה
+
+
+
+ לבנה עם אייקון
+
+
+Deep Shadow RTL
+
+ When the CTA is found within the shadow root of an element which is itself within a RTL context,
+ it's own contents should also be displayed right-to-left, including the various box models, the placement
+ of the icon, and the direction of the arrow. Authors should not need to specify the direction with the
+ dir="rtl" attribute if it is added to a containing element.
+ In this demo, the shadow root's host element has a light blue background colour, in order distinguish it from the document content.
+
+
+ Brick
+
+
+ Brick Icon
+
+
+View a live version of this element to see how it can be customized.
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-cta.js"></script>
<section id="variants">
<h2>Variants</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</section>
<rh-context-provider id="dark" color-palette="darkest">
<h2>Dark Colour Context</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</rh-context-provider>
<section dir="rtl">
<h2>Right-to-Left Languages</h2>
<rh-cta><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</section>
<section dir="rtl">
<h2>Deep Shadow RTL</h2>
<p dir="ltr">When the CTA is found within the shadow root of an element which is itself within a RTL context.</p>
<shadow-root>
<template shadowroot="open">
<style>
:host {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
</style>
<rh-cta id="deep"><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</template>
</shadow-root>
</section>
<section id="resizing">
<h2>Resizing</h2>
<div class="resize">
<rh-cta><a href="#default">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play"><a href="#default-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary"><a href="#primary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary"><a href="#secondary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick"><a href="#brick">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Get product details</a></rh-cta>
</div>
</section>
<section id="resizing">
<h2>Extra-long words</h2>
<div class="resize">
<rh-cta>
<a href="#default">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play">
<a href="#default-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary">
<a href="#primary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play">
<a href="#primary-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary">
<a href="#secondary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick">
<a href="#brick">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user">
<a href="#brick-icon">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
</section>
<section id="wrap">
<h2>Force wrap to test arrow line-wrap</h2>
<p>No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.</p>
<div class="resize">
<rh-cta><a href="#default">Default link cta with longer text</a></rh-cta>
</div>
<div class="resize" dir="rtl">
<rh-cta><a href="#default">קריאה לפעולה בררית מחדל עם טקסט ארוך</a></rh-cta>
</div>
</section>
<section id="link-button" class="grid">
<h2>Link and button styles (displayed inline)</h2>
<rh-cta><a href="">Link</a></rh-cta>
<rh-cta><button>Button</button></rh-cta>
<rh-cta variant="primary"><a href="">Link</a></rh-cta>
<rh-cta variant="primary"><button>Button</button></rh-cta>
<rh-cta variant="secondary"><a href="">Link</a></rh-cta>
<rh-cta variant="secondary"><button>Button</button></rh-cta>
</section>
<rh-cta>
<a href="#">Call to Action</a>
</rh-cta>
<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
</script>