+ `;
+ }
+
+ async #onResize() {
+ const element = this.querySelector('[slot="element"]');
+ await element.updateComplete;
+ const er = this.getBoundingClientRect();
+ this.tags = Array.from(this.querySelectorAll('uxdot-anatomy-tag'), tag => {
+ const shadowSelector = tag.getAttribute('shadow-selector');
+ if (shadowSelector) {
+ const target = querySelectorDeep(shadowSelector, element);
+ if (target instanceof Element) {
+ const tr = target.getBoundingClientRect();
+ // TODO: position a la tooltip: left right top bottom, default to center
+ const x = tr.left + (tr.width / 2) - 1 - er.left;
+ const y = tr.top + (tr.height / 2) - 1 - er.top;
+ const label = tag.getAttribute('label');
+ const description = tag.getAttribute('description');
+ return {
+ x,
+ y,
+ // TODO: from attrs. thanks sspriggs for the idea
+ offsetX: 0,
+ offsetY: 0,
+ label,
+ description,
+ };
+ }
+ }
+ });
+ }
+}
diff --git a/docs/assets/elements/uxdot-code-sample.js b/docs/assets/elements/uxdot-code-sample.js
new file mode 100644
index 0000000000..1bd045053a
--- /dev/null
+++ b/docs/assets/elements/uxdot-code-sample.js
@@ -0,0 +1,40 @@
+import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+import '@rhds/elements/rh-surface/rh-surface.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 },
+ target: { },
+ 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;
+ }
+ }
+
+ updated(changed) {
+ if (changed.has('target')) {
+ const picker = this.shadowRoot.querySelector('rh-context-picker');
+ if (picker) {
+ picker.target = this.querySelector(this.target);
+ }
+ }
+ }
+
+ static { customElements.define(this.is, this); }
+}
diff --git a/docs/assets/qssd.js b/docs/assets/qssd.js
new file mode 100644
index 0000000000..1faed8efbb
--- /dev/null
+++ b/docs/assets/qssd.js
@@ -0,0 +1,231 @@
+/** @license MIT License
+
+Copyright (c) 2020 George Griffiths
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. */
+// npx esbuild --bundle --platform=browser --format=esm --target=es2022 --outfile=./docs/assets/qssd.js node_modules/query-selector-shadow-dom/src/querySelectorDeep.js
+
+/* eslint-disable */
+
+// node_modules/query-selector-shadow-dom/src/normalize.js
+function normalizeSelector(sel) {
+ function saveUnmatched() {
+ if (unmatched) {
+ if (tokens.length > 0 && /^[~+>]$/.test(tokens[tokens.length - 1])) {
+ tokens.push(' ');
+ }
+ tokens.push(unmatched);
+ }
+ }
+ var tokens = []; let match; let unmatched; let regex; const state = [0]; let next_match_idx = 0; let prev_match_idx; const not_escaped_pattern = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/; const whitespace_pattern = /^\s+$/; const state_patterns = [
+ /\s+|\/\*|["'>~+[(]/g,
+ // general
+ /\s+|\/\*|["'[\]()]/g,
+ // [..] set
+ /\s+|\/\*|["'[\]()]/g,
+ // (..) set
+ null,
+ // string literal (placeholder)
+ /\*\//g
+ // comment
+ ];
+ sel = sel.trim();
+ while (true) {
+ unmatched = '';
+ regex = state_patterns[state[state.length - 1]];
+ regex.lastIndex = next_match_idx;
+ match = regex.exec(sel);
+ if (match) {
+ prev_match_idx = next_match_idx;
+ next_match_idx = regex.lastIndex;
+ if (prev_match_idx < next_match_idx - match[0].length) {
+ unmatched = sel.substring(
+ prev_match_idx,
+ next_match_idx - match[0].length
+ );
+ }
+ if (state[state.length - 1] < 3) {
+ saveUnmatched();
+ if (match[0] === '[') {
+ state.push(1);
+ } else if (match[0] === '(') {
+ state.push(2);
+ } else if (/^["']$/.test(match[0])) {
+ state.push(3);
+ state_patterns[3] = new RegExp(match[0], 'g');
+ } else if (match[0] === '/*') {
+ state.push(4);
+ } else if (/^[\])]$/.test(match[0]) && state.length > 0) {
+ state.pop();
+ } else if (/^(?:\s+|[~+>])$/.test(match[0])) {
+ if (tokens.length > 0 && !whitespace_pattern.test(tokens[tokens.length - 1]) && state[state.length - 1] === 0) {
+ tokens.push(' ');
+ }
+ if (state[state.length - 1] === 1 && tokens.length === 5 && tokens[2].charAt(tokens[2].length - 1) === '=') {
+ tokens[4] = ` ${tokens[4]}`;
+ }
+ if (whitespace_pattern.test(match[0])) {
+ continue;
+ }
+ }
+ tokens.push(match[0]);
+ } else {
+ tokens[tokens.length - 1] += unmatched;
+ if (not_escaped_pattern.test(tokens[tokens.length - 1])) {
+ if (state[state.length - 1] === 4) {
+ if (tokens.length < 2 || whitespace_pattern.test(tokens[tokens.length - 2])) {
+ tokens.pop();
+ } else {
+ tokens[tokens.length - 1] = ' ';
+ }
+ match[0] = '';
+ }
+ state.pop();
+ }
+ tokens[tokens.length - 1] += match[0];
+ }
+ } else {
+ unmatched = sel.substr(next_match_idx);
+ saveUnmatched();
+ break;
+ }
+ }
+ return tokens.join('').trim();
+}
+
+// node_modules/query-selector-shadow-dom/src/querySelectorDeep.js
+function querySelectorAllDeep(selector, root = document, allElements = null) {
+ return _querySelectorDeep(selector, true, root, allElements);
+}
+function querySelectorDeep(selector, root = document, allElements = null) {
+ return _querySelectorDeep(selector, false, root, allElements);
+}
+function _querySelectorDeep(selector, findMany, root, allElements = null) {
+ selector = normalizeSelector(selector);
+ const lightElement = root.querySelector(selector);
+ if (document.head.createShadowRoot || document.head.attachShadow) {
+ if (!findMany && lightElement) {
+ return lightElement;
+ }
+ const selectionsToMake = splitByCharacterUnlessQuoted(selector, ',');
+ return selectionsToMake.reduce((acc, minimalSelector) => {
+ if (!findMany && acc) {
+ return acc;
+ }
+ const splitSelector = splitByCharacterUnlessQuoted(minimalSelector.replace(/^\s+/g, '').replace(/\s*([>+~]+)\s*/g, '$1'), ' ').filter(entry => !!entry).map(entry => splitByCharacterUnlessQuoted(entry, '>'));
+ const possibleElementsIndex = splitSelector.length - 1;
+ const lastSplitPart = splitSelector[possibleElementsIndex][splitSelector[possibleElementsIndex].length - 1];
+ const possibleElements = collectAllElementsDeep(lastSplitPart, root, allElements);
+ const findElements = findMatchingElement(splitSelector, possibleElementsIndex, root);
+ if (findMany) {
+ acc = acc.concat(possibleElements.filter(findElements));
+ return acc;
+ } else {
+ acc = possibleElements.find(findElements);
+ return acc || null;
+ }
+ }, findMany ? [] : null);
+ } else {
+ if (!findMany) {
+ return lightElement;
+ } else {
+ return root.querySelectorAll(selector);
+ }
+ }
+}
+function findMatchingElement(splitSelector, possibleElementsIndex, root) {
+ return element => {
+ let position = possibleElementsIndex;
+ let parent = element;
+ let foundElement = false;
+ while (parent && !isDocumentNode(parent)) {
+ let foundMatch = true;
+ if (splitSelector[position].length === 1) {
+ foundMatch = parent.matches(splitSelector[position]);
+ } else {
+ const reversedParts = [splitSelector[position]].flat().reverse();
+ let newParent = parent;
+ for (const part of reversedParts) {
+ if (!newParent || !newParent.matches(part)) {
+ foundMatch = false;
+ break;
+ }
+ newParent = findParentOrHost(newParent, root);
+ }
+ }
+ if (foundMatch && position === 0) {
+ foundElement = true;
+ break;
+ }
+ if (foundMatch) {
+ position--;
+ }
+ parent = findParentOrHost(parent, root);
+ }
+ return foundElement;
+ };
+}
+function splitByCharacterUnlessQuoted(selector, character) {
+ return selector.match(/\\?.|^$/g).reduce((p, c) => {
+ if (c === '"' && !p.sQuote) {
+ p.quote ^= 1;
+ p.a[p.a.length - 1] += c;
+ } else if (c === '\'' && !p.quote) {
+ p.sQuote ^= 1;
+ p.a[p.a.length - 1] += c;
+ } else if (!p.quote && !p.sQuote && c === character) {
+ p.a.push('');
+ } else {
+ p.a[p.a.length - 1] += c;
+ }
+ return p;
+ }, { a: [''] }).a;
+}
+function isDocumentNode(node) {
+ return node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.DOCUMENT_NODE;
+}
+function findParentOrHost(element, root) {
+ const { parentNode } = element;
+ return parentNode && parentNode.host && parentNode.nodeType === 11 ? parentNode.host : parentNode === root ? null : parentNode;
+}
+function collectAllElementsDeep(selector = null, root, cachedElements = null) {
+ let allElements = [];
+ if (cachedElements) {
+ allElements = cachedElements;
+ } else {
+ const findAllElements = function(nodes) {
+ for (const el of nodes) {
+ allElements.push(el);
+ if (el.shadowRoot) {
+ findAllElements(el.shadowRoot.querySelectorAll('*'));
+ }
+ }
+ };
+ if (root.shadowRoot) {
+ findAllElements(root.shadowRoot.querySelectorAll('*'));
+ }
+ findAllElements(root.querySelectorAll('*'));
+ }
+ return selector ? allElements.filter(el => el.matches(selector)) : allElements;
+}
+export {
+ collectAllElementsDeep,
+ querySelectorAllDeep,
+ querySelectorDeep
+};
diff --git a/docs/scss/_utility.scss b/docs/scss/_utility.scss
index 4d4a60d406..57a6a4d2e9 100644
--- 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
index 579dfeb464..ca9dc95324 100644
--- a/docs/scss/styles.scss
+++ b/docs/scss/styles.scss
@@ -170,3 +170,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
index e7ba52db40..aae50b3bf7 100644
--- 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" %}
-
Officia eu id pariatur enim exercitation ipsum laboris irure reprehenderit
+
What is the Red Hat subscription model?
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.
@@ -21,7 +17,7 @@
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.
-
Consectetur id nisi do ipsum anim labore mollit cillum fugiat elit
+
What is included?
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.
@@ -30,7 +26,7 @@
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.
-
Culpa dolore aute ipsum ut quis nulla Lorem sit deserunt
+
Is support included?
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.
@@ -38,7 +34,7 @@
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.
-
Ipsum exercitation eu esse incididunt nisi anim quis non ex anim pariatur labore deserunt
+
What subscription terms does Red Hat offer?
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.
@@ -48,18 +44,18 @@
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.
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.
-
-
Duis nisi ex irure dolore nulla et tempor adipisicing tempor commodo
+
+
Where can I learn more?
-
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.
-
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.
-
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.
-
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.
-
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.
+
Find out how to get the most out of your subscription.
+
+ Talk to a Red Hatter
+
+{% 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" %}
\ No newline at end of file
+{% repoStatus type="Element" %}
diff --git a/elements/rh-accordion/docs/10-style.md b/elements/rh-accordion/docs/10-style.md
index 63daecf22c..354a56d628 100644
--- a/elements/rh-accordion/docs/10-style.md
+++ b/elements/rh-accordion/docs/10-style.md
@@ -19,21 +19,41 @@ Accordion panels include title text, a chevron icon, body text, and other conten
### Sizes
There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines.
-{% example palette="light",
- alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’",
- src="../accordion-sizes.png" %}
+{% sample code="hidden" %}
+
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+Large size
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+Small size
+
+{% endsample %}
## Theme
An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not.
-### Light theme
-{% example palette="light",
- alt="Light theme accordion with an expanded panel",
- src="../accordion-theme-light.png" %}
-### Dark theme
-{% example palette="darkest",
- alt="Dark theme accordion with an expanded panel",
- src="../accordion-theme-dark.png" %}
+{% sample picker=true,
+ target="rh-accordion",
+ colorPalette="darkest",
+ code="hidden" %}
+
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+
+{% endsample %}
## Configuration
An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned.
@@ -45,16 +65,58 @@ An expanded panel does not have a maximum height, but it may scroll if constrain
### Nested panels
Panels can be nested to help organize complex or granular sections of content.
-{% example palette="light",
- alt="An accordion with an expanded panel and a nested expanded panel",
- src="../accordion-nested-panels.png" %}
+{% sample code="hidden" %}
+
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+
Interior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
Interior panel
+
Lorem ipsum dolor sit amet.
+
+
+
+
+{% endsample %}
### Stacked panels
Multiple panels can be expanded simultaneously even when nested.
-{% example palette="light",
- alt="An accordion with one collapsed panel on top and two stacked expanded panels below",
- src="../accordion-stacked-panels.png" %}
+{% sample code="hidden" %}
+
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
Exterior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+Multiple expanded exterior panels
+
+
Exterior panel
+
Lorem ipsum dolor sit amet.
+
Exterior panel expanded
+
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+
Interior panel
+
Lorem ipsum dolor sit amet.
+
Interior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
Interior panel expanded
+
Amet eget nulla porttitor dictumst nullam euismod imperdiet nunc sapien magnis ut aliquam proin et tristique sem platea vestibulum sagittis.
+
+
+
+Multiple expanded nested panels
+
+{% endsample %}
## Space
{% example palette="light",
@@ -122,4 +184,4 @@ Interaction states are visual representations used to communicate the status of
| Color - panel header | `#F2F2F2` | `#292929` |
| Color - focus ring | `#0066CC` | `#73BCF7` |
-{% endtokensTable %}
\ No newline at end of file
+{% endtokensTable %}
diff --git a/elements/rh-accordion/docs/accordion-nested-panels.png b/elements/rh-accordion/docs/accordion-nested-panels.png
deleted file mode 100755
index fbabdce227..0000000000
Binary files a/elements/rh-accordion/docs/accordion-nested-panels.png and /dev/null differ
diff --git a/elements/rh-accordion/docs/accordion-sample-element.png b/elements/rh-accordion/docs/accordion-sample-element.png
deleted file mode 100755
index c72012f942..0000000000
Binary files a/elements/rh-accordion/docs/accordion-sample-element.png and /dev/null differ
diff --git a/elements/rh-accordion/docs/accordion-stacked-panels.png b/elements/rh-accordion/docs/accordion-stacked-panels.png
deleted file mode 100755
index f409c8762c..0000000000
Binary files a/elements/rh-accordion/docs/accordion-stacked-panels.png and /dev/null differ
diff --git a/elements/rh-accordion/docs/accordion-theme-dark.png b/elements/rh-accordion/docs/accordion-theme-dark.png
deleted file mode 100755
index da8483d91a..0000000000
Binary files a/elements/rh-accordion/docs/accordion-theme-dark.png and /dev/null differ
diff --git a/elements/rh-accordion/docs/accordion-theme-light.png b/elements/rh-accordion/docs/accordion-theme-light.png
deleted file mode 100755
index 8f2f8569ba..0000000000
Binary files a/elements/rh-accordion/docs/accordion-theme-light.png and /dev/null differ
diff --git a/elements/rh-alert/docs/00-overview.md b/elements/rh-alert/docs/00-overview.md
index e8f5051fbb..dd8c5b2706 100644
--- a/elements/rh-alert/docs/00-overview.md
+++ b/elements/rh-alert/docs/00-overview.md
@@ -1,11 +1,25 @@
+
+
## Overview
{{ tagName | getElementDescription }}
## Sample element
-{% example palette="light",
- alt="Two examples of the alert element",
- src="alert-sample.svg" %}
+{% sample code="hidden" %}
+
+
+
+
+
+{% endsample %}
## Demos
diff --git a/elements/rh-alert/docs/10-style.md b/elements/rh-alert/docs/10-style.md
index 6e8adc195a..597c576024 100644
--- a/elements/rh-alert/docs/10-style.md
+++ b/elements/rh-alert/docs/10-style.md
@@ -1,3 +1,7 @@
+
+
## Style
@@ -23,26 +27,58 @@ An alert contains title text with an icon, body text, and a close button. They m
The required elements of an Inline alert are a thin top bar or thin border, icon, title, close button, and a container background. Supporting text and buttons may or may not be included below the title to add clarity or optional actions.
-{% example palette="light",
- alt="Two examples of an inline alert",
- src="../alert-style-inline.svg" %}
+{% sample code="hidden" %}
+
+
+
Your information has been submitted successfully.
+
+
+
+
Success
+
Your information has been submitted successfully.
+ Go back
+ Continue
+
+
+{% endsample %}
### Inline, alternate
The alternate Inline alert style includes a border instead of a line which can be used to express more urgency or better grab the attention of a user.
-{% example palette="light",
- alt="Two examples of an alternate design for inline alerts",
- src="../alert-style-inline-alt.svg" %}
+{% sample code="hidden" %}
+
+
+
Your information has been submitted successfully.
+
+
+
+
Success
+
Your information has been submitted successfully.
+ Go back
+ Continue
+
+
+{% endsample %}
### Toast
The required elements of a Toast alert are a thin top bar, icon, title, close button, and a white container with a subtle drop shadow. Supporting text and buttons may or may not be included below the title to add clarity or optional actions.
-{% example palette="light",
- alt="Two examples of a toast alert",
- src="../alert-style-toast.svg" %}
+{% sample code="hidden" %}
+
+
+
Your information has been submitted successfully.
+
+
+
+
Success
+
Your information has been submitted successfully.
+ Go back
+ Continue
+
+{% endsample %}
## Interaction states
diff --git a/elements/rh-alert/docs/20-guidelines.md b/elements/rh-alert/docs/20-guidelines.md
index 3a28aed2b7..b09eaf99ab 100644
--- a/elements/rh-alert/docs/20-guidelines.md
+++ b/elements/rh-alert/docs/20-guidelines.md
@@ -1,3 +1,7 @@
+
+
## Guidelines
@@ -26,9 +30,59 @@ Visit the [Color](/foundations/color) foundation page to learn more about how to
for status and severity.
{% endalert %}
-{% example palette="light",
- alt="Examples of the different colors indicating alert severity",
- src="../alert-severity.svg" %}
+{% sample code="hidden", columns=2 %}
+
+
+
Default
+
Information that is not urgent to know.
+
+
+
+
Default
+
Information that is not urgent to know.
+
+
+
+
Info
+
Information that is helpful to know.
+
+
+
+
Info
+
Information that is helpful to know.
+
+
+
+
Success
+
A process has completed successfully.
+
+
+
+
Success
+
A process has completed successfully.
+
+
+
+
Warning
+
A process has encountered an error.
+
+
+
+
Warning
+
A process has encountered an error.
+
+
+
+
Danger
+
A process failed due to errors.
+
+
+
+
Danger
+
A process failed due to errors.
+
+
+{% endsample %}
### Dismissal
@@ -43,10 +97,32 @@ Alert variants have different rules regarding their ability to be dismissed by a
If an issue cannot be resolved on the current page or if a user needs to correct a situation outside of the experience, use a [Dialog](/elements/dialog) instead.
{% endalert %}
-{% example palette="light",
- class="medium",
- alt="Alert element dismissal examples",
- src="../alert-dismissal-examples.svg" %}
+{% sample code="hidden", style="justify-items:center;" %}
+
+
+
Info
+
Your personal information will be secure after submitting.
+
+
+
+
Success
+
Your information has been submitted successfully.
+
+
+
+
+
+
Your Red Hat Enterprise Linux 9 trial will expire in 7 days
+
+
+
+
Danger
+
An error occurred when the system tried to log you out.
+ Try again
+ Contact support
+
+
+{% endsample %}
## Writing content
diff --git a/elements/rh-alert/docs/alert-sample.svg b/elements/rh-alert/docs/alert-sample.svg
deleted file mode 100644
index 3fafb3464a..0000000000
--- a/elements/rh-alert/docs/alert-sample.svg
+++ /dev/null
@@ -1,55 +0,0 @@
-
diff --git a/elements/rh-alert/docs/alert-severity.svg b/elements/rh-alert/docs/alert-severity.svg
deleted file mode 100644
index 8c79f0dcef..0000000000
--- a/elements/rh-alert/docs/alert-severity.svg
+++ /dev/null
@@ -1,201 +0,0 @@
-
diff --git a/elements/rh-alert/docs/alert-style-inline-alt.svg b/elements/rh-alert/docs/alert-style-inline-alt.svg
deleted file mode 100644
index 714cbb3b87..0000000000
--- a/elements/rh-alert/docs/alert-style-inline-alt.svg
+++ /dev/null
@@ -1,44 +0,0 @@
-
diff --git a/elements/rh-alert/docs/alert-style-inline.svg b/elements/rh-alert/docs/alert-style-inline.svg
deleted file mode 100644
index 58b45b121e..0000000000
--- a/elements/rh-alert/docs/alert-style-inline.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
diff --git a/elements/rh-alert/docs/alert-style-toast.svg b/elements/rh-alert/docs/alert-style-toast.svg
deleted file mode 100644
index 0685291e30..0000000000
--- a/elements/rh-alert/docs/alert-style-toast.svg
+++ /dev/null
@@ -1,54 +0,0 @@
-
diff --git a/elements/rh-audio-player/docs/00-overview.md b/elements/rh-audio-player/docs/00-overview.md
index 7d5108836c..dfe6bb8c14 100644
--- a/elements/rh-audio-player/docs/00-overview.md
+++ b/elements/rh-audio-player/docs/00-overview.md
@@ -2,7 +2,7 @@
{{ tagName | getElementDescription }}
## Sample element
-
+{% sample %}
+{% endsample %}
+
## Demos
View a live version of this component and see how it can be customized.
{% playground tagName=tagName %}{% endplayground %}
diff --git a/elements/rh-audio-player/docs/10-style.md b/elements/rh-audio-player/docs/10-style.md
index c14aa79e4f..ce4429887f 100644
--- a/elements/rh-audio-player/docs/10-style.md
+++ b/elements/rh-audio-player/docs/10-style.md
@@ -1,3 +1,35 @@
+
+
+
+
## Style
The audio player is a collection of elements used to play audio clips and browse [features](../features). There are also optional slots for an image and description text. The audio player must include the following elements **at a minimum**:
- Audio clip title
@@ -7,6 +39,7 @@ The audio player is a collection of elements used to play audio clips and browse
- Contextual menu
### Anatomy
+
{% example palette="light",
alt="Image of audio player anatomy showing all players with lots of annotations",
src="../audio-player-anatomy.png" %}
@@ -26,36 +59,250 @@ The audio player is a collection of elements used to play audio clips and browse
12) Contextual menu
{.example-notes}
+{#
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#}
+
## Sizes
+
There are three available sizes and the only difference is the amount of interface elements. The Compact and Mini players can be used on large breakpoints, but the Full player cannot be used on small breakpoints due to space constraints.
{% example palette="light",
alt="Image of all audio player sizes with text labels",
src="../audio-player-style-sizes.png" %}
+{# -- let's see if we can use container queries to make this display large size elements on mobile screens
+{% sample class="audio-player-layouts",
+ code="hidden",
+ columns=2 -%}
+
+
+
+
+ Full size
+
+
+
+
+
+
+ Compact size
+
+
+
+
+
+
+ Mini size - with contextual menu
+
+
+
+
+
+
+ Mini size - no contextual menu
+
+{%- endsample %}
+#}
+
## Theme
The audio player is available in both light and dark themes.
-### Light theme
{% example palette="light",
alt="Image of light theme audio players",
src="../audio-player-theme-light.png" %}
+{#
+{% sample class="audio-player-layouts",
+ code="hidden",
+ columns=2 -%}
+
+
+
+
+
+
+
+
+
+
+
+
+{%- endsample %}
+#}
+
### Dark theme
+
{% example palette="darkest",
alt="Image of dark theme audio players",
src="../audio-player-theme-dark.png" %}
+{#
+{% sample class="audio-player-layouts",
+ code="hidden",
+ columns=2,
+ colorPalette="darkest" -%}
+
+
+
+
+
+
+
+
+
+
+
+
+{%- endsample %}
+#}
+
### Custom theme
{% alert title="Helpful tip" %}
If your audio player requires a custom theme, [contact](https://github.com/orgs/RedHat-UX/discussions) the design system team.
{% endalert %}
-
{% example palette="darkest",
alt="Image of custom theme audio players",
src="../audio-player-theme-custom.png" %}
+{#
+{% sample class="audio-player-layouts custom",
+ code="hidden",
+ columns=2,
+ colorPalette="darkest" -%}
+
+
+
+
+
+
+
+
+
+
+
+
+{%- endsample %}
+#}
+
## Configuration
The size of audio players change if an image is included or not.
diff --git a/elements/rh-audio-player/docs/20-features.md b/elements/rh-audio-player/docs/20-features.md
index e6e66dad1e..1979dcaa4c 100644
--- a/elements/rh-audio-player/docs/20-features.md
+++ b/elements/rh-audio-player/docs/20-features.md
@@ -1,23 +1,110 @@
-## Features
+
+
+## Features
Three features are included and are accessible within the contextual menu.
-## Contextual menu
+## Contextual menu
Pressing the `More options` button opens the contextual menu. The description and title are visible in the Full player but not in the Compact player, so there is an extra option in the contextual menu so users can access that information.
{% example palette="none",
alt="Image of all audio player sizes showing the open contextual menu",
src="../audio-player-contextual-menu.png" %}
-## Content panel
+## Content panel
When a feature is selected, the audio player expands and reveals the content panel. In the Full player, some interface elements get smaller, rearrange, or become hidden. In the Compact and Mini players, the content panel is below the controls. The `More options` button changes to a `Close` button as well which allows users to close the panel and return to the audio player at any time.
-{% example palette="light",
- alt="Image of all audio player sizes showing the open content panel",
- src="../audio-player-content-panel.png" %}
-
-
-
-## Audio info
+{% sample class="audio-player-features",
+ code="hidden" -%}
+
+
+
+
+
+
+
+ Full player with content panel visible
+
+
+
+
+
+
+
+
+ Compact player with content panel visible
+
+
+
+
+
+
+
+
+ Mini player with content panel visible
+
+{%- endsample %}
+
+
+## Audio info
Displays the description and title in the Compact player only.
{% example palette="light",
diff --git a/elements/rh-card/docs/00-overview.md b/elements/rh-card/docs/00-overview.md
index b0df169a28..d58b24ccc1 100644
--- a/elements/rh-card/docs/00-overview.md
+++ b/elements/rh-card/docs/00-overview.md
@@ -1,21 +1,27 @@
## Overview
- {{ tagName | getElementDescription }}
-
+{{ tagName | getElementDescription }}
## Sample element
- {% example palette="light",
- width=360,
- alt="Example of a card element",
- src="card.svg" %}
+{% sample %}
+
+
Case study
+
Company Z enhances digital guest
+ experience with Red Hat container
+ and automation technology
+
+ Read more
+
+
+{% endsample %}
-## Demos
- View a live version of this component and see how it can be customized.
- {% playground tagName=tagName %}{% endplayground %}
- {% cta href="./demo/", target="_blank" %}
- View the `` demo in a new tab
- {% endcta %}
+## Demos
+View a live version of this component and see how it can be customized.
+{% playground tagName=tagName %}{% endplayground %}
+{% cta href="./demo/", target="_blank" %}
+ View the `` demo in a new tab
+{% endcta %}
- {% repoStatus type="Element" %}
+{% repoStatus type="Element" %}
diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md
index ec1fd311a6..410699309f 100644
--- a/elements/rh-card/docs/10-style.md
+++ b/elements/rh-card/docs/10-style.md
@@ -1,3 +1,4 @@
+
## Style
Cards can be used in light and dark themes. They act as a blank canvas where
@@ -13,17 +14,47 @@
## Theme
- {% example palette="light",
- class="inline-flex centered",
- width=784,
- alt="Card in light theme",
- src="../card-theme-light.svg" %}
-
- {% example palette="darkest",
- class="inline-flex centered",
- width=784,
- alt="Card in dark theme",
- src="../card-theme-dark.svg" %}
+{% sample code="hidden", columns=2, picker=true %}
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat lorem ullamcorper a. Curabitur tempor ante vitae ultrices dignissim. Nullam ut urna eros. Morbi interdum luctus lacus, lacinia tempor purus
+
+ Call to action
+
+
+{% endsample %}
### Color
Cards are secondary layouts that shouldn’t command too much attention and
diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index e5cb778e79..ee0a1ee42c 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -1,3 +1,5 @@
+
+
## Usage
### Variants
There are several card variants that can be used for a variety of use cases.
@@ -85,11 +87,52 @@ There are several card variants that can be used for a variety of use cases.
content. For example, grouping a basic card with a pricing card will look bad
because they’re not very similar.
- {% example palette="light",
- class="inline-flex centered",
- width=784,
- alt="Grouping of a card",
- src="../card-usage-grouping.svg" %}
+ {% sample code="hidden", columns=2 %}
+
+
+
+
Logo
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat
+
+ Call to action
+
+
+
+
+
+ {% endsample %}
These cards can be grouped together because they have similar styles and
content {.footnote}
@@ -111,8 +154,6 @@ There are several card variants that can be used for a variety of use cases.
alt="Alternative card usage",
src="../card-usage-other.svg" %}
-
-
## Best practices
The minimum width of a card in any layout is four columns and the maximum
number of cards that can be used in a row is three.
@@ -126,20 +167,35 @@ There are several card variants that can be used for a variety of use cases.
Don’t use a primary call to action in any card unless the primary action of a
page is positioned inside of that card.
- {% example palette="wrong",
- class="inline-flex centered",
- width=360,
- alt="Card width error",
- src="../card-bestpractice-2.svg" %}
+ {% sample class="dont", code="hidden" %}
+
+
+
Try our learning subscription
+
Get limited, self-service access to select labs and courses with a free trial of Red Hat Learning Subscription
+
+ Learn for free
+
+
+
+ {% endsample %}
Don’t use multiple calls to action in one card. Instead, distribute them to
other cards.
- {% example palette="wrong",
- class="inline-flex centered",
- width=360,
- alt="Multiple calls to action",
- src="../card-bestpractice-3.svg" %}
+ {% sample class="dont", code="hidden" %}
+
+
+
Try our learning subscription
+
Get limited, self-service access to select labs and courses with a free trial of Red Hat Learning Subscription
+
+ Continue
+
+
+ Learn more
+
+
+
+ {% endsample %}
@@ -150,11 +206,54 @@ There are several card variants that can be used for a variety of use cases.
determined by the tallest card. Don’t place inconsistent amounts of content in
cards, as this will impact how scannable the group will appear to users.
- {% example palette="light",
- class="inline-flex centered",
- width=784,
- alt="Card height behavior",
- src="../card-behavior-height.svg" %}
+ {% sample code="hidden", columns=2 %}
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat lorem ullamcorper a. Curabitur tempor ante vitae ultrices dignissim.
+
+ Learn more
+
+
+
+
+
+ {% endsample %}
+
### Interactivity
If a card contains only one link destination, the entire container and any
@@ -167,7 +266,6 @@ There are several card variants that can be used for a variety of use cases.
alt="Card interaction",
src="../card-behavior-interaction.svg" %}
-
## Interaction states
Since cards can consist of a variety of elements, refer to the specific
interaction states that are assigned to each style and component for more
diff --git a/elements/rh-card/docs/card-behavior-height.svg b/elements/rh-card/docs/card-behavior-height.svg
deleted file mode 100644
index 6e4fb5b46b..0000000000
--- a/elements/rh-card/docs/card-behavior-height.svg
+++ /dev/null
@@ -1,50 +0,0 @@
-
diff --git a/elements/rh-card/docs/card-bestpractice-2.svg b/elements/rh-card/docs/card-bestpractice-2.svg
deleted file mode 100644
index bfc7a15928..0000000000
--- a/elements/rh-card/docs/card-bestpractice-2.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/elements/rh-card/docs/card-bestpractice-3.svg b/elements/rh-card/docs/card-bestpractice-3.svg
deleted file mode 100644
index fb4e686dec..0000000000
--- a/elements/rh-card/docs/card-bestpractice-3.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/elements/rh-card/docs/card-theme-dark.svg b/elements/rh-card/docs/card-theme-dark.svg
deleted file mode 100644
index 33ca20c1e5..0000000000
--- a/elements/rh-card/docs/card-theme-dark.svg
+++ /dev/null
@@ -1,58 +0,0 @@
-
diff --git a/elements/rh-card/docs/card-theme-light.svg b/elements/rh-card/docs/card-theme-light.svg
deleted file mode 100644
index 9f4164b1c4..0000000000
--- a/elements/rh-card/docs/card-theme-light.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-
diff --git a/elements/rh-card/docs/card-usage-grouping.svg b/elements/rh-card/docs/card-usage-grouping.svg
deleted file mode 100644
index 4eea4e4548..0000000000
--- a/elements/rh-card/docs/card-usage-grouping.svg
+++ /dev/null
@@ -1,58 +0,0 @@
-
diff --git a/elements/rh-card/docs/custom-variants.css b/elements/rh-card/docs/custom-variants.css
new file mode 100644
index 0000000000..08fa5c577b
--- /dev/null
+++ b/elements/rh-card/docs/custom-variants.css
@@ -0,0 +1,42 @@
+[color-palette^="light"] {
+ --bar-header-context-background-color: var(--rh-color-surface-light, #e0e0e0);
+}
+
+[color-palette^="dark"] {
+ --bar-header-context-background-color: var(--rh-color-surface-dark, #383838);
+}
+
+rh-card {
+ &:not(:defined) {
+ display: block;
+ opacity: 0;
+ width: 363px;
+ height: 495px;
+ }
+
+ &.full {
+ &::part(header) { margin: 0; }
+
+ & img {
+ object-position: right;
+ object-fit: cover;
+ height: 229px;
+ }
+ }
+
+ &.bar {
+ &::part(header) {
+ margin: 0;
+ padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
+ text-transform: uppercase;
+ font-weight: var(--rh-font-weight-heading-regular, 300);
+ font-size: var(--rh-font-size-body-text-md, 1rem);
+ background-color: var(--bar-header-context-background-color);
+ flex-flow: row wrap;
+ }
+
+ & pf-icon[slot="header"] {
+ color: var(--rh-color-surface-dark);
+ }
+ }
+}
diff --git a/elements/rh-card/docs/fedora.jpg b/elements/rh-card/docs/fedora.jpg
new file mode 100644
index 0000000000..1e3b71cd57
Binary files /dev/null and b/elements/rh-card/docs/fedora.jpg differ
diff --git a/elements/rh-timestamp/docs/10-style.md b/elements/rh-timestamp/docs/10-style.md
index 9aa0222b02..ee39df94ef 100644
--- a/elements/rh-timestamp/docs/10-style.md
+++ b/elements/rh-timestamp/docs/10-style.md
@@ -1,7 +1,7 @@
-## Style
+## Style
A timestamp is a simple line of text that displays date and time values.
-### Anatomy
+### Anatomy
{% example palette="light",
alt="Anatomy of a timestamp which is a simple line of text showing the date first and then the time after",
src="../timestamp-anatomy.png" %}
@@ -28,15 +28,15 @@ Two lines of text with timestamps applied, one is showing no styling and the oth
A timestamp can be used in the same themes as text.
### Light theme
-
-
-
+{% sample %}
+
+{% endsample %}
### Dark theme
-
-
-
+{% sample colorPalette="darkest" %}
+
+{% endsample %}
## Interaction states
-If a timestamp is linked, the interaction states are the same as a [link](https://ux.redhat.com/patterns/link/). Go to the Link page to see the interaction states.
\ No newline at end of file
+If a timestamp is linked, the interaction states are the same as a [link](https://ux.redhat.com/patterns/link/). Go to the Link page to see the interaction states.
diff --git a/elements/rh-timestamp/docs/20-guidelines.md b/elements/rh-timestamp/docs/20-guidelines.md
index 148b7fc219..e731c13583 100644
--- a/elements/rh-timestamp/docs/20-guidelines.md
+++ b/elements/rh-timestamp/docs/20-guidelines.md
@@ -1,193 +1,152 @@
-## Usage
+
+
+## Usage
Use a timestamp to display date and time values.
### Default
-By default, a timestamp will display the current date and time based on the current locale if the `date` attribute is not set.
+By default, a timestamp will display the current date and time based on the
+current locale if the `date` attribute is not set.
-
-
-
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
## Basic formats
-The format of the displayed content can be customized by setting the `date-format` and/or `time-format` attributes. Setting only one of the attributes will display only the date or time, depending on which attribute is set. The possible options are **full**, **long**, **medium**, and **short**.
-
-You can also set the `display-suffix` attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+The format of the displayed content can be customized by setting the
+`date-format` and/or `time-format` attributes. Setting only one of the
+attributes will display only the date or time, depending on which attribute is
+set. The possible options are **full**, **long**, **medium**, and **short**.
+
+You can also set the `display-suffix` attribute to display a custom suffix at
+the end of the displayed content. This will not override a timezone that is
+already displayed from the applied time format.
+
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
+
+
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
+
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
+
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
## Behavior
### Custom format
-The format of the displayed content can be further customized by setting the custom-format attributes. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be set.
-
-
-
-
-
-
-
-
+The format of the displayed content can be further customized by setting the
+custom-format attributes. Read [datetime format options][formatoptions] for a
+list of options that can be set.
+
+{% sample columns=1, class='compact' %}
+
+
+{% endsample %}
### Adding a tooltip
-To add a tooltip that displays the timestamp content as a UTC time, you can wrap `rh-timestamp` with `rh-tooltip` and set the `UTC` attribute on an additional `rh-timestamp`.
-
-{% example palette="light",
- alt="Timestamp with a tooltip on top showing the time with the UTC acronym at the end",
- src="../timestamp-tooltip-1.png" %}
-
-
-
-
-
-{% example palette="light",
- alt="Timestamp with a tooltip on top showing the time and the words Coordinated Universal Time at the end",
- src="../timestamp-tooltip-2.png" %}
-
-
-
-
+To add a tooltip that displays the timestamp content as a UTC time, you can wrap
+`rh-timestamp` with `rh-tooltip` and set the `UTC` attribute on an additional
+`rh-timestamp`.
+
+{% sample columns=1, class='compact' %}
+
+
+
+
+{% endsample %}
+
+{% sample columns=1, class='compact' %}
+
+
+
+
+{% endsample %}
### Relative time
To display relative time, set the `relative` attribute on `rh-timestamp`.
-
-
-
-
-
-
-
-
-
-
-
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
-
-
-
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
### Relative time with tooltip
To display relative time, set the `relative` attribute on `rh-timestamp`.
-{% example palette="light",
- alt="Timestamp with a tooltip on top showing what the date and time would be 11 months previous",
- src="../timestamp-tooltip-3.png" %}
-
-
-
-
-
-{% example palette="light",
- alt="Timestamp with a tooltip on top showing what the date and time would be in one year",
- src="../timestamp-tooltip-4.png" %}
-
-
-
-
+{% sample columns=1, class='compact' %}
+
+
+
+
+{% endsample %}
+
+{% sample columns=1, class='compact' %}
+
+
+
+
+{% endsample %}
### Set a locale other than default
-The default locale is inferred by the browser. To set the locale to something else, set the `locale` attribute.
+The default locale is inferred by the browser. To set the locale to something
+else, set the `locale` attribute.
-
-
-
-
-
### UTC timestamp
Set the `UTC` attribute.
-
-
-
-
-
-
-
+{% sample columns=1, class='compact' %}
+
+{% endsample %}
## Responsive design
Just like text, a timestamp will break to two lines as breakpoints get smaller.
@@ -206,6 +165,8 @@ Just like text, a timestamp will break to two lines as breakpoints get smaller.
### Headings
Do not apply a timestamp to headings.
-
+
+