RedHat-UX · bennypowers · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/README.md b/README.md
@@ -1,17 +1,14 @@
 # Red Hat Design System
 
-[Documentation](https://ux.redhat.com), [design tokens](https://red-hat-design-tokens.netlify.app),
-and [web components](https://ux.redhat.com/elements/) for building uniform 
-experiences with the Red Hat brand.
+[Documentation][docs], [design tokens][tokens], and [web components][elements] for building uniform experiences with the Red Hat brand.
 
 ## 🎨 For Designers
 
 RHDS provides Adobe XD libraries and design kits to aid in your design work.
 
 ## 💻 For Developers
 
-RHDS provides a collection of ready-made, framework-agnostic web components with Red Hat branding, 
-user experience, accessibility, and style guidelines built in.
+RHDS provides a collection of ready-made, framework-agnostic web components with Red Hat branding, user experience, accessibility, and style guidelines built in.
 
 ```html
 <rh-card>
@@ -25,5 +22,11 @@ user experience, accessibility, and style guidelines built in.
 
 ## Contributions are Welcome
 
-Would you like to contribute to the **documentation** or **design specs**? Read [the site contributing guide](https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DESIGN.md).  
-Would you like to contribute to **component development**? Read [the developer contributing guide](https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DEV.md).
+Would you like to contribute to the **documentation** or **design specs**? Read [the site contributing guide][contributing].  
+Would you like to contribute to **component development**? Read [the developer contributing guide][development].
+
+[docs]: https://ux.redhat.com
+[tokens]: https://red-hat-design-tokens.netlify.app
+[elements]: https://ux.redhat.com/elements/
+[contributing]: https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DESIGN.md
+[development]: https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DEV.md
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk
@@ -59,6 +59,9 @@
     PfIcon.getIconUrl = (set, icon) =>
       new URL(`/assets/packages/@patternfly/elements/pf-icon/icons/${set}/${icon}.js`, location.origin);
   </script>
+  <script type="module">
+  if (!('shadowRootMode' in HTMLTemplateElement.prototype)) { import('/assets/dsd-polyfill.js'); }
+  </script>
 </head>
 <body id="top" class="page {{ extraPageClasses }}" unresolved>
   <div class="body-inner">

diff --git a/docs/_plugins/shortcodes.cjs b/docs/_plugins/shortcodes.cjs
@@ -2,6 +2,7 @@ const Playground = require('./shortcodes/playground.cjs');
 const RepoStatus = require('./shortcodes/repoStatus.cjs');
 const RenderInstallation = require('./shortcodes/renderInstallation.cjs');
 const ExampleImage = require('./shortcodes/example.cjs');
+const Sample = require('./shortcodes/sample.cjs');
 const Cta = require('./shortcodes/cta.cjs');
 const Tag = require('./shortcodes/tag.cjs');
 const Swatch = require('./shortcodes/swatch.cjs');
@@ -27,6 +28,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(Playground);
   eleventyConfig.addPlugin(RenderInstallation);
   eleventyConfig.addPlugin(ExampleImage);
+  eleventyConfig.addPlugin(Sample);
   eleventyConfig.addPlugin(Cta);
   eleventyConfig.addPlugin(Swatch);
   eleventyConfig.addPlugin(Tag);

diff --git a/docs/_plugins/shortcodes/sample.cjs b/docs/_plugins/shortcodes/sample.cjs
@@ -0,0 +1,115 @@
+// @ts-check
+
+const { attrMap } = require('./helpers.cjs');
+const { tokens } = require('@rhds/tokens');
+
+/** @typedef {import('../shortcodes.cjs').EleventyContext} EleventyContext */
+
+/** Returns a string with common indent stripped from each line. Useful for templating HTML */
+function dedent(str) {
+  const stripped = str.replace(/^\n/, '');
+  const match = stripped.match(/^\s+/);
+  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
+}
+
+/** @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig */
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPairedShortcode('sample',
+    /**
+     * Example
+     * An example image or component
+     *
+     * @param {string}    content
+     * @param {object}    options
+     * @param {string}    [options.colorPalette] color palette for surface
+     * @param {string}    [options.style]        styles for the surface
+     * @param {string}    [options.class]        class name to use
+     * @param {boolean}   [options.picker]       show the color palette picker
+     * @param {boolean}   [options.stacked]      use the vertical layout
+     * @param {number}    [options.columns]      how many columns to show
+     * @param {'hidden'|'show'|'disclosure'}    [options.code]              vertical layout
+     * @this {EleventyContext}
+     */
+    function example(content, {
+      style = '',
+      colorPalette = 'lightest',
+      picker = false,
+      columns = 1,
+      code = 'show',
+      class: classNames = '',
+    } = {}) {
+      style = `--columns:${columns};${style}`;
+      const classes = new Set(classNames.split(' ').map(x => x.trim()));
+      /* eslint-disable indent */
+      return dedent(/* html */`\
+<script type="module" src="/assets/elements/uxdot-code-sample.js"></script>
+<uxdot-code-sample ${attrMap({ style, 'class': [...classes].join(' '), 'color-palette': colorPalette })}>
+  <template shadowrootmode="open">
+    <style>
+    :host {
+      position: relative;
+    }
+    rh-surface {
+      display: grid;
+      padding: var(--rh-space-4xl);
+      :host(.compact) & {
+        padding: var(--rh-space-2xl);
+      }
+      border-radius: var(--rh-border-radius-default);
+      border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle-on-light);
+      gap: var(--rh-space-md);
+      grid-template-columns: repeat(var(--columns), 1fr);
+      :host(.dont) & {
+        border-color: var(--rh-color-red-500);
+      }
+      @media (min-width: 992px) { /* --rh-media-md */
+        padding: var(--rh-space-7xl);
+        gap: var(--rh-space-lg);
+      }
+    }
+    label {
+      position: absolute;
+      inset-block-start: 2em;
+      inset-inline-start: 1em;
+    }
+    pf-icon.dont {
+      color: var(--rh-color-red-500);
+      position: absolute;
+      inset-block-start: var(--rh-space-xl);
+      inset-inline-start: var(--rh-space-sm);
+    }
+    slot[name="code"] {
+      display: block;
+      margin-block: var(--rh-space-lg);
+    }
+    ::slotted(:not(:defined)) {
+      opacity: 0;
+    }
+    </style>${!classes.has('dont') ? '' : /* html */`
+    <pf-icon class="dont"
+             icon="circle-exclamation"
+             size="lg"></pf-icon>`}${!picker ? '' : /* html */`
+    <label>Color Palette
+      <rh-context-picker id="picker"
+                         target="surface"
+                         color-palette="${colorPalette}"></rh-context-picker>
+    </label>`}
+    <rh-surface id="surface"
+                color-palette="${colorPalette}"
+                ${attrMap({ style })}
+    ><slot></slot></rh-surface>${code === 'hidden' ? '' : /* html*/ `
+    <slot name="code"></slot>`}
+  </template>
+  ${content}
+
+  <rh-code-block slot="code" compact>
+
+~~~html
+${dedent(content).trim()}
+~~~
+
+  </rh-code-block>
+</uxdot-code-sample>`);
+    /* eslint-enable indent */
+    });
+};
diff --git a/docs/assets/elements/uxdot-code-sample.js b/docs/assets/elements/uxdot-code-sample.js
@@ -0,0 +1,29 @@
+import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+
+import { LitElement } from 'lit';
+
+export class UxdotSample extends LitElement {
+  static is = 'uxdot-code-sample';
+
+  static properties = {
+    colorPalette: { reflect: true, attribute: 'color-palette' },
+    stacked: { reflect: true, type: Boolean },
+    picker: { reflect: true, type: Boolean },
+    columns: { reflect: true, type: Number },
+    code: { reflect: true, type: Boolean },
+  };
+
+  createRenderRoot() {
+    const template = this.querySelector('template[shadowrootmode]');
+    if (!template) {
+      return this.shadowRoot ?? super.createRenderRoot();
+    } else {
+      const mode = template.getAttribute('shadowrootmode');
+      (this.shadowRoot ?? this.attachShadow({ mode })).appendChild(template.content);
+      template.remove();
+      return this.shadowRoot;
+    }
+  }
+
+  static { customElements.define(this.is, this); }
+}
diff --git a/docs/assets/uxdot-search.js → docs/assets/elements/uxdot-search.js b/docs/assets/uxdot-search.js → docs/assets/elements/uxdot-search.js
diff --git a/docs/assets/tokens/tokens.js b/docs/assets/tokens/tokens.js
@@ -5,7 +5,7 @@ import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-footer/rh-footer-universal.js';
 
 // search bar
-import '/assets/uxdot-search.js';
+import '/assets/elements/uxdot-search.js';
 
 document
   .getElementById('search-input')

diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
@@ -18,7 +18,7 @@ it's near. Several cards can be used together to group related information.
     elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel 
     dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis. 
     Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -33,7 +33,7 @@ it's near. Several cards can be used together to group related information.
     dapibus risus. Nullam aliquam felis orci, eget cursus milacinia quis. 
     Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -48,7 +48,7 @@ it's near. Several cards can be used together to group related information.
     aliquam felis orci, eget cursus mi
     lacinia quis. Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -64,7 +64,7 @@ it's near. Several cards can be used together to group related information.
     aliquam felis orci, eget cursus mi
     lacinia quis. Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -76,7 +76,7 @@ it's near. Several cards can be used together to group related information.
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit 
     libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id 
     elit. Donec id elit non mi porta gravida at eget metus.</p>
-  <rh-cta priority="primary" slot="footer"><a href="#">Footer</a></rh-cta>
+  <rh-cta variant="primary" slot="footer"><a href="#">Footer</a></rh-cta>
 </rh-card>
 
 ## Image title bar

diff --git a/docs/scss/_utility.scss b/docs/scss/_utility.scss
@@ -283,6 +283,10 @@
 
   @include breakpoint(tango) {
     margin-top: -16px;
+
+    uxdot-code-sample + & {
+      margin-top: 16px;
+    }
   }
 }
 
@@ -720,8 +724,10 @@ pfe-jump-links-nav {
 // Alert styles
 
 rh-alert {
-  margin-top: 32px;
-  margin-bottom: 32px;
+  margin-block: 32px;
+  uxdot-code-sample & {
+    margin-block: 0;
+  }
 }
 
 .asset-header {

diff --git a/docs/scss/styles.scss b/docs/scss/styles.scss
@@ -158,3 +158,13 @@ body.page-docs rh-cta a[href^="http"]:after {
 rh-playground pre {
   max-height: 785px;
 }
+
+pf-icon.do {
+  color: var(--rh-color-green-500);
+  justify-self: center;
+}
+
+pf-icon.dont {
+  color: var(--rh-color-red-500);
+  justify-self: center;
+}
diff --git a/elements/rh-accordion/docs/00-overview.md b/elements/rh-accordion/docs/00-overview.md
@@ -1,15 +1,11 @@
 ## Overview
 {{ tagName | getElementDescription }}
 
-{% example palette="light",
-          alt="An accordion with four collapsed panels and one expanded panel",
-          src="./accordion-sample-element.png" %}
-
-## Sample element
+{% sample colorPalette="light", code="hidden" %}
 
 <rh-accordion>
   <rh-accordion-header>
-    <h2>Officia eu id pariatur enim exercitation ipsum laboris irure reprehenderit</h2>
+    <h2>What is the Red Hat subscription model?</h2>
   </rh-accordion-header>
   <rh-accordion-panel>
     <p>Exercitation officia pariatur minim exercitation elit anim aliquip nulla dolor. Labore non elit sunt commodo qui mollit quis anim in eu irure consectetur veniam. Proident non Lorem veniam fugiat do amet amet enim proident ullamco aliquip magna duis. Magna proident est in eiusmod enim in.</p>
@@ -21,7 +17,7 @@
     <p>Ea mollit dolore nisi id veniam nisi dolor est commodo sunt non proident. Commodo cillum dolore consequat labore laborum aliqua in ad quis laborum reprehenderit non. Eiusmod quis irure tempor anim tempor quis pariatur est. Tempor nostrud veniam reprehenderit incididunt quis incididunt. Qui pariatur aliquip officia consequat voluptate duis fugiat occaecat.</p>
   </rh-accordion-panel>
   <rh-accordion-header>
-    <h2>Consectetur id nisi do ipsum anim labore mollit cillum fugiat elit</h2>
+    <h2>What is included?</h2>
   </rh-accordion-header>
   <rh-accordion-panel>
     <p>Amet dolor deserunt consectetur enim. Amet irure esse est minim sint eu aliquip officia nulla dolore proident. Voluptate dolore nisi aute ut amet quis elit. Id voluptate et ipsum commodo aute do. Eu excepteur sunt ex nostrud sit cillum eu excepteur aliqua fugiat. Tempor ad exercitation amet ad tempor esse.</p>
@@ -30,15 +26,15 @@
     <p>Eiusmod in voluptate excepteur ea aute Lorem pariatur minim. Adipisicing adipisicing irure commodo sunt et ullamco consectetur dolore occaecat ad. Culpa commodo est ea sit laborum.</p>
   </rh-accordion-panel>
   <rh-accordion-header>
-    <h2>Culpa dolore aute ipsum ut quis nulla Lorem sit deserunt</h2>
+    <h2>Is support included?</h2>
   </rh-accordion-header>
   <rh-accordion-panel>
     <p>Ullamco culpa ad minim tempor id. Sit ad veniam pariatur incididunt occaecat sit in duis exercitation. Duis labore ullamco proident Lorem excepteur id commodo eiusmod.</p>
     <p>Eu labore labore proident in cupidatat excepteur incididunt. Et tempor fugiat culpa et ea in quis labore cupidatat nulla. Cillum eiusmod non adipisicing ullamco est exercitation. Sint velit anim exercitation qui magna commodo tempor.</p>
     <p>Ea laboris ullamco enim labore velit voluptate cupidatat do do ipsum enim cupidatat. Laboris excepteur voluptate veniam nulla laboris nostrud dolor aliquip et quis. Anim id irure ipsum culpa exercitation eiusmod consectetur ullamco velit ipsum. Id id eu eiusmod proident veniam. Sunt tempor voluptate ipsum consectetur excepteur aliquip ut labore et. Laborum excepteur tempor nisi deserunt do est in sint ex duis fugiat voluptate minim enim.</p>
   </rh-accordion-panel>
   <rh-accordion-header>
-    <h2>Ipsum exercitation eu esse incididunt nisi anim quis non ex anim pariatur labore deserunt</h2>
+    <h2>What subscription terms does Red Hat offer?</h2>
   </rh-accordion-header>
   <rh-accordion-panel>
     <p>Aliquip dolore elit duis pariatur in ipsum eu adipisicing eiusmod proident occaecat ullamco cupidatat. Do anim reprehenderit in anim qui eiusmod Lorem. Amet fugiat dolor sint incididunt excepteur fugiat anim dolor tempor aliqua nulla esse incididunt aliquip. Deserunt enim et laborum proident reprehenderit culpa labore deserunt minim enim. In aliqua irure sint nulla sit ullamco elit non.</p>
@@ -48,18 +44,18 @@
     <p>Sit amet minim sunt nisi ut dolore laboris enim est commodo. Mollit consectetur id aute duis. Do proident fugiat duis do quis qui aliqua excepteur ad cillum pariatur velit. Ea amet aute do sunt sint labore. Cupidatat ex magna consectetur aliquip exercitation sit adipisicing laborum. Magna officia reprehenderit duis dolore elit velit aliqua.</p>
     <p>Nisi labore nostrud mollit qui exercitation ea velit cupidatat esse. Fugiat exercitation culpa ipsum commodo mollit dolore anim nostrud Lorem sit deserunt fugiat. Sit minim esse eiusmod fugiat labore minim officia ipsum aliquip amet enim. Fugiat cillum sint consequat non. Aute do do Lorem eu reprehenderit ut do labore.</p>
   </rh-accordion-panel>
-  <rh-accordion-header>
-    <h2>Duis nisi ex irure dolore nulla et tempor adipisicing tempor commodo</h2>
+  <rh-accordion-header expanded>
+    <h2>Where can I learn more?</h2>
   </rh-accordion-header>
   <rh-accordion-panel>
-    <p>Tempor dolor non magna consectetur. Dolore Lorem aliqua fugiat cupidatat enim non ea duis ex nulla magna cillum nisi. Id sit aliquip ipsum consequat quis elit exercitation esse. Proident sit exercitation culpa nulla anim incididunt cillum enim qui adipisicing exercitation nulla. Voluptate eiusmod aliquip magna enim velit culpa voluptate. Ipsum qui consequat aliqua enim incididunt occaecat fugiat reprehenderit minim in reprehenderit ullamco in. Mollit duis consectetur exercitation exercitation nisi minim laborum do.</p>
-    <p>Incididunt esse ipsum excepteur id do. Occaecat eiusmod ad tempor incididunt labore in voluptate Lorem sunt. Aliquip culpa aliqua et aliquip elit et consequat commodo dolore. Enim duis dolor deserunt veniam eiusmod. Duis Lorem aliqua amet qui enim irure consectetur ipsum. Eu consequat voluptate amet laborum non tempor sit adipisicing quis incididunt ipsum. Consequat reprehenderit tempor mollit sint nisi nulla in cillum.</p>
-    <p>Commodo proident consectetur aute nostrud eiusmod proident aute officia aliqua fugiat Lorem incididunt consectetur. Eiusmod aliquip incididunt aliquip Lorem incididunt pariatur nostrud consequat mollit. Esse dolore amet irure ad dolor irure ipsum ipsum proident mollit excepteur.</p>
-    <p>Enim sit aute voluptate velit esse occaecat consequat qui adipisicing. Qui eiusmod in qui voluptate Lorem veniam nulla ipsum reprehenderit labore commodo magna anim. Anim amet eu amet sunt amet excepteur proident exercitation. Non duis magna duis officia excepteur veniam voluptate non ullamco. Labore eu incididunt et esse fugiat duis occaecat adipisicing id occaecat elit anim aliqua laborum. Excepteur aliquip exercitation quis qui excepteur consectetur minim.</p>
-    <p>Irure Lorem ad esse aliqua culpa Lorem ea ullamco consectetur aliqua Lorem nostrud consectetur esse. Eiusmod reprehenderit deserunt eu laborum aliquip et in. Do nisi adipisicing nulla reprehenderit reprehenderit. Ex do ex cillum laborum elit ad veniam culpa aute reprehenderit irure. Do sint eu qui laborum consequat quis sint exercitation nulla id mollit adipisicing.</p>
+    <p>Find out how to get the most out of your subscription.</p>
+    <rh-cta>
+      <a href="#">Talk to a Red Hatter</a>
+    </rh-cta>
   </rh-accordion-panel>
 </rh-accordion>
 
+{% endsample %}
 
 ## Demos
   View a live version of this component and see how it can be customized.
@@ -73,4 +69,4 @@
   - When you need to condense a large amount of related information into sections
   - When you need a way for users to read or compare sections of content simultaneously
 
-{% repoStatus type="Element" %} 
+{% repoStatus type="Element" %}