Merge branch 'main' of github.com:RedHat-UX/red-hat-design-system int…

…o docs/avatar-anonymous-slot

.changeset/rh-cta-brick-full-width.md

@@ -0,0 +1,6 @@
+---
+"@rhds/elements": patch
+---
+`<rh-cta>`: `brick` variants are now full width.
+
+`<rh-cta variant="brick">` should only be used within grids. Check your layouts to make sure they adhere to the guidelines.

docs/_plugins/shortcodes/renderInstallation.cjs

@@ -3,7 +3,7 @@
 /**
  * @param {string} content
  */
-function renderInstallation(content, { lightdomcss = false } = {}) {
+function renderInstall(content, { lightdomcss = false } = {}) {
   /**
    * NB: since the data for this shortcode is no a POJO,
    * but a DocsPage instance, 11ty assigns it to this.ctx._
@@ -57,5 +57,5 @@ ${content ?? ''}
 }
 
 module.exports = function(eleventyConfig) {
-  eleventyConfig.addPairedShortcode('renderInstallation', renderInstallation);
+  eleventyConfig.addPairedShortcode('renderInstall', renderInstall);
 };

docs/assets/dsd-polyfill.js

@@ -0,0 +1,9 @@
+(function attachShadowRoots(root) {
+  root.querySelectorAll('template[shadowrootmode]').forEach(template => {
+    const mode = template.getAttribute('shadowrootmode');
+    const shadowRoot = template.parentNode.attachShadow({ mode });
+    shadowRoot.appendChild(template.content);
+    template.remove();
+    attachShadowRoots(shadowRoot);
+  });
+})(document);

elements/rh-accordion/docs/30-code.md

@@ -1,4 +1,4 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% band header="Usage" %}
 ```html

elements/rh-alert/docs/30-code.md

@@ -1,3 +1,3 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

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 %}

elements/rh-avatar/docs/30-code.md

@@ -1,9 +1,9 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% band header="Usage" %}
   ```html
     <rh-avatar></rh-avatar>
   ```
 {% endband %}
 
-{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

elements/rh-badge/docs/30-code.md

@@ -1,9 +1,9 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% band header="Usage" %}
 ```html
 <rh-badge number="1" aria-label="1 new message">1</rh-badge>
 ```
 {% endband %}
 
-{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

elements/rh-blockquote/docs/30-code.md

@@ -1,4 +1,4 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% band header="Usage" %}
 ```html

elements/rh-button/docs/30-code.md

@@ -1,9 +1,9 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 ## Usage
   {% playground tagName=button %}{% endplayground %}
   {% cta href="./demo/", target="_blank" %}
 View the demo in a new tab
   {% endcta %}
 
-{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

elements/rh-card/docs/30-code.md

@@ -1,3 +1,3 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

elements/rh-code-block/docs/40-code.md

@@ -1,4 +1,4 @@
-{% renderInstallation %}{% endrenderInstallation %}
+{% renderInstall %}{% endrenderInstall %}
 
 ## Usage
 

elements/rh-cta/demo/analytics.html

@@ -1,12 +1,4 @@
-<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">
-<link rel="stylesheet" href="/assets/prism.css">
-
-<script type="module" src="rh-cta.js"></script>
-<script type="module" src="analytics.js"></script>
-
-<p>In this demo, analytics events involving <code>&lt;rh-cta></code> elements are parsed by a 
+<p>In this demo, analytics events involving <code>&lt;rh-cta></code> elements are parsed by a
   document-level analytics event listener. Unlike <code>&lt;pfe-cta></code>, which implemented
   support for analytics internally, <code>&lt;rh-cta></code> users must implement their own
   analytics code, taking this demo as an example.</p>
@@ -64,3 +56,61 @@ <h2>Complex Case: Slotted Link, Deep CTA Analytics</h2>
 
 <h2>Last CTA Analytics Event</h2>
 <json-viewer>{}</json-viewer>
+
+<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="/assets/prism.css">
+
+<style>
+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;
+}
+</style>
+
+<script type="module">
+import '@rhds/elements/rh-cta/rh-cta.js';
+import 'https://ga.jspm.io/npm:[email protected]/prism.js';
+import 'https://ga.jspm.io/npm:[email protected]/plugins/autoloader/prism-autoloader.js';
+import 'https://ga.jspm.io/npm:@power-elements/[email protected]/json-viewer.js';
+
+customElements.define('slotted-link', class SlottedLinkElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' }).innerHTML = /* html */`
+      <rh-cta><slot name="default"></slot></rh-cta>
+      <rh-cta variant="primary"><slot name="primary"></slot></rh-cta>
+      <rh-cta variant="secondary"><slot name="secondary"></slot></rh-cta>
+      <rh-cta variant="brick"><slot name="brick"></slot></rh-cta>
+    `;
+  }
+});
+
+function deepClosest(event, selector) {
+  for (const node of event.composedPath().reverse()) {
+    if (node.matches?.(selector)) {
+      return node;
+    }
+  }
+  return event.target.closest(selector);
+}
+
+document.addEventListener('click', function(event) {
+  const cta = deepClosest(event, 'rh-cta');
+  if (cta) {
+    const { href, text, title } = cta.cta;
+    const color = cta.colorPalette;
+    const type = cta.variant ?? 'default';
+    const data = { href, text, title, color, type };
+    // for the purposes of the demo, let's enable console logging here
+    // eslint-disable-next-line no-console
+    console.log('CTA ANALYTICS EVENT', data);
+    document.querySelector('json-viewer').object = data;
+  }
+});
+</script>

elements/rh-cta/demo/brick.html

@@ -0,0 +1,20 @@
+<div id="grid">
+  <rh-cta variant="brick"><a href="#">Link #1</a></rh-cta>
+  <rh-cta variant="brick"><a href="#">Link #2</a></rh-cta>
+  <rh-cta variant="brick"><a href="#">Link #3</a></rh-cta>
+  <rh-cta variant="brick">
+    <a href="#default">Supercalifragilisticexpialidocious</a>
+  </rh-cta>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
+
+<style>
+  #grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+</style>

elements/rh-cta/demo/button.html

@@ -0,0 +1,46 @@
+<section>
+  <h2>Links</h2>
+  <rh-cta>
+    <a href="#">Link</a>
+  </rh-cta>
+
+  <rh-cta variant="primary">
+    <a href="#">Link</a>
+  </rh-cta>
+
+  <rh-cta variant="secondary">
+    <a href="#">Link</a>
+  </rh-cta>
+</section>
+
+<section>
+  <h2>Buttons</h2>
+  <rh-cta>
+    <button>Button</button>
+  </rh-cta>
+
+  <rh-cta variant="primary">
+    <button>Button</button>
+  </rh-cta>
+
+  <rh-cta variant="secondary">
+    <button>Button</button>
+  </rh-cta>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
+
+<style>
+section {
+  display: grid;
+  gap: var(--rh-space-md, 8px) var(--rh-space-xl, 24px);
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  padding: var(--rh-space-lg, 16px);
+}
+
+h2 {
+  grid-column: -1/1;
+}
+</style>

elements/rh-cta/demo/color-context.html

@@ -1,6 +1,6 @@
 <rh-context-picker target="dark"></rh-context-picker>
+
 <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>
@@ -10,11 +10,22 @@ <h2>Dark Colour Context</h2>
   <rh-cta variant="brick" icon="circle-play"><a href="#brick-video">Brick Video</a></rh-cta>
 </rh-context-provider>
 
-<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>
 <script type="module">
-import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+  import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
 </script>
 
+
+<style>
+
+rh-context-provider {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 16px;
+  padding: 1em 2em;
+  margin-inline: -2em;
+  margin-block: 1em;
+}
+
+</style>