feat(cta)!: href

.changeset/mighty-vans-dress.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Removed previously-deprecated `color-palette` attribute

.changeset/mighty-vans-skate.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Deprecated `rhCta.cta` public property. This will be removed in the
+next major version.

.changeset/shaky-yaks-win.md

@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `href` attribute. When set, do not slot an anchor or button,
+instead, slot in the link text.
+
+These two are equivalent:
+
+```html
+<rh-cta>
+  <a href="/elements">Elements</a>
+</rh-cta>
+```
+
+```html
+<rh-cta href="/elements">Elements</rh-cta>
+```

.changeset/wet-readers-shine.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `icon-set` attribute to better control icon loading
+
+```html
+<rh-cta icon="success" icon-set="custom">...</rh-cta>
+```

elements/rh-cta/README.md

@@ -5,9 +5,7 @@ A Call to action is a styled link that directs a user to other pages or sometime
 
 As a link
 ```html
-<rh-cta>
-  <a href="/subscribe">Subscribe</a>
-</rh-cta>
+<rh-cta href="/subscribe">Subscribe</rh-cta>
 ```
 
 As a button
@@ -16,3 +14,10 @@ As a button
   <button>Watch live</button>
 </rh-cta>
 ```
+
+With a slotted anchor
+```html
+<rh-cta>
+  <a href="/subscribe">Subscribe</a>
+</rh-cta>
+```

elements/rh-cta/demo/analytics.html

@@ -3,61 +3,127 @@
   support for analytics internally, <code>&lt;rh-cta></code> users must implement their own
   analytics code, taking this demo as an example.</p>
 
-<pre class="language-javascript"><code class="language-javascript">
-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;
-    console.log('CTA ANALYTICS EVENT', { href, text, title, color, type });
-  }
-});
-</code></pre>
+<section data-analytics-category="simple">
+  <h2>Simple Case: Light DOM</h2>
+  <rh-cta data-analytics-linktype="cta"
+          data-analytics-text="Default">
+    <a href="#default">Default</a>
+  </rh-cta>
+  <rh-cta variant="primary"
+          data-analytics-linktype="cta"
+          data-analytics-text="Primary">
+    <a href="#primary">Primary</a>
+  </rh-cta>
+  <rh-cta variant="secondary"
+          data-analytics-linktype="cta"
+          data-analytics-text="Secondary">
+    <a href="#secondary">Secondary</a>
+  </rh-cta>
+  <rh-cta variant="brick"
+          data-analytics-linktype="cta"
+          data-analytics-text="Brick">
+    <a href="#brick">Brick</a>
+  </rh-cta>
 
-<section>
-  <h2>Simple Case: Light DOM Analytics</h2>
-  <rh-cta><a href="#default">Default</a></rh-cta>
-  <rh-cta variant="primary"><a href="#primary">Primary</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>
+  <section data-analytics-category="href-attr">
+    <h3>Using <code>href</code> attribute</h3>
+    <rh-cta href="#default"
+            data-analytics-linktype="cta"
+            data-analytics-text="Default">Default</rh-cta>
+    <rh-cta href="#primary"
+            variant="primary"
+            data-analytics-linktype="cta"
+            data-analytics-text="Primary">Primary</rh-cta>
+    <rh-cta href="#secondary"
+            variant="secondary"
+            data-analytics-linktype="cta"
+            data-analytics-text="Secondary">Secondary</rh-cta>
+    <rh-cta href="#brick"
+            variant="brick"
+            data-analytics-linktype="cta"
+            data-analytics-text="Brick">Brick</rh-cta>
+  </section>
 </section>
 
-<section>
-  <h2>Advanced Case: Deep Shadow Analytics</h2>
+<section data-analytics-category="shadow">
+  <h2>Advanced Case: Deep Shadow</h2>
   <shadow-root>
-    <template shadowroot="open" shadowrootmode="open">
-      <rh-cta><a href="#default">Default</a></rh-cta>
-      <rh-cta variant="primary"><a href="#primary">Primary</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>
+    <template shadowrootmode="open">
+      <rh-cta data-analytics-linktype="cta"
+              data-analytics-text="Default">
+        <a href="#default">Default</a>
+      </rh-cta>
+      <rh-cta variant="primary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Primary">
+        <a href="#primary">Primary</a>
+      </rh-cta>
+      <rh-cta variant="secondary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Secondary">
+        <a href="#secondary">Secondary</a>
+      </rh-cta>
+      <rh-cta variant="brick"
+              style="width:auto;"
+              data-analytics-linktype="cta"
+              data-analytics-text="Brick">
+        <a href="#brick">Brick</a>
+      </rh-cta>
+    </template>
+  </shadow-root>
+  <h3>Using <code>href</code> attribute</h3>
+  <shadow-root data-analytics-category="href-attr">
+    <template shadowrootmode="open">
+      <rh-cta href="#default"
+              data-analytics-linktype="cta"
+              data-analytics-text="Default">Default</rh-cta>
+      <rh-cta href="#primary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Primary"
+              variant="primary">Primary</rh-cta>
+      <rh-cta href="#secondary"
+              data-analytics-linktype="cta"
+              data-analytics-text="Secondary"
+              variant="secondary">Secondary</rh-cta>
+      <rh-cta href="#brick"
+              style="width:auto;"
+              variant="brick"
+              data-analytics-linktype="cta"
+              data-analytics-text="Brick">Brick</rh-cta>
     </template>
   </shadow-root>
 </section>
 
-<section>
-  <h2>Complex Case: Slotted Link, Deep CTA Analytics</h2>
+<section data-analytics-category="slotted">
+  <h2>Complex Case: Slotted Link, Deep CTA</h2>
   <slotted-link>
-    <a slot="default" href="#default">Default</a>
-    <a slot="primary" href="#primary">Primary</a>
-    <a slot="secondary" href="#secondary">Secondary</a>
-    <a slot="brick" href="#brick">Brick</a>
+    <a slot="default"
+       data-analytics-linktype="cta"
+       data-analytics-text="Default"
+       href="#default">Default</a>
+    <a slot="primary"
+       data-analytics-linktype="cta"
+       data-analytics-text="Primary"
+       href="#primary">Primary</a>
+    <a slot="secondary"
+       data-analytics-linktype="cta"
+       data-analytics-text="Secondary"
+       href="#secondary">Secondary</a>
+    <a slot="brick"
+       data-analytics-linktype="cta"
+       data-analytics-text="Brick"
+       href="#brick">Brick</a>
   </slotted-link>
 </section>
 
 <h2>Last CTA Analytics Event</h2>
 <json-viewer>{}</json-viewer>
 
 <style>
+rh-cta[variant="brick"] {
+  /* for demo reviewer ergonomics, even though this is against style guidelines */
+  width: auto;
+}
 json-viewer {
   --json-viewer-background: white;
   --json-viewer-boolean-color: #f76707;
@@ -70,43 +136,35 @@ <h2>Last CTA Analytics Event</h2>
 </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>
-    `;
-  }
-});
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import 'https://ga.jspm.io/npm:@power-elements/[email protected]/json-viewer.js';
 
-function deepClosest(event, selector) {
-  for (const node of event.composedPath().reverse()) {
-    if (node.matches?.(selector)) {
-      return node;
+  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" style="width:auto;"><slot name="brick"></slot></rh-cta>
+      `;
     }
-  }
-  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;
-  }
-});
+  document.addEventListener('click', function(event) {
+    const data = event.composedPath().reduceRight((acc, node) => {
+      if (node instanceof HTMLElement) {
+        for (const [datakey, value] of Object.entries(node.dataset)) {
+          if (datakey.startsWith('analytics')) {
+            const key = datakey.replace(/^analytics(.)/, (_, m) => m.toLowerCase());
+            acc[key] = `${acc[key] ?? ''}|${value}`.replace(/^\|/,'');
+          }
+        }
+      }
+      return acc;
+    }, {});
+    if (data.linktype === 'cta') {
+      document.querySelector('json-viewer').object = data;
+    }
+  });
 </script>

elements/rh-cta/demo/href-attribute.html

@@ -0,0 +1,31 @@
+<section>
+  <rh-cta href="#default">Default</rh-cta>
+  <rh-cta href="#default-video" icon="play-circle">Default Video</rh-cta>
+  <rh-cta href="#primary" variant="primary">Primary</rh-cta>
+  <rh-cta href="#primary-video" variant="primary" icon="play-circle">Video</rh-cta>
+  <rh-cta href="#secondary" variant="secondary">Secondary</rh-cta>
+  <div id="brick">
+    <rh-cta href="#brick" variant="brick">Brick</rh-cta>
+    <rh-cta href="#brick-icon" variant="brick" icon="user">Brick Icon</rh-cta>
+  </div>
+</section>
+
+<style>
+  section {
+    display: flex;
+    gap: var(--rh-space-lg, 16px);
+    flex-flow: row wrap;
+    max-width: 750px;
+    margin: var(--rh-space-2xl, 32px) auto;
+  }
+
+  #brick {
+    display: flex;
+    width: 100%;
+    gap: var(--rh-space-lg, 16px);
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>

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

@@ -1,6 +1,4 @@
-<rh-cta>
-  <a href="#">Call to Action</a>
-</rh-cta>
+<rh-cta href="#">Call to Action</rh-cta>
 
 <script type="module">
   import '@rhds/elements/rh-cta/rh-cta.js';

elements/rh-cta/docs/00-overview.md

@@ -10,18 +10,16 @@
 
 ## Sample element
 
-<rh-cta variant="primary">
-  <a href="#primary">Primary</a>
-</rh-cta>
+<rh-cta variant="primary"
+        href="#primary">Primary</rh-cta>
 
 ## Demo
 
 View a live version of this element to see how it can be customized.
 
 {% playground tagName=tagName %}{% endplayground %}
 
-<rh-cta><a href="{{ './demo/' | url }}">Full screen demo</a></rh-cta>
-
+<rh-cta href="{{ './demo/' | url }}">Full screen demo</rh-cta>
 
 ## When to use