diff --git a/.changeset/rh-cta-brick-full-width.md b/.changeset/rh-cta-brick-full-width.md new file mode 100644 index 0000000000..3126ae638b --- /dev/null +++ b/.changeset/rh-cta-brick-full-width.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- +``: `brick` variants are now full width. + +`` should only be used within grids. Check your layouts to make sure they adhere to the guidelines. diff --git a/docs/_plugins/shortcodes/renderInstallation.cjs b/docs/_plugins/shortcodes/renderInstallation.cjs index 019049f790..6254611a15 100644 --- a/docs/_plugins/shortcodes/renderInstallation.cjs +++ b/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); }; diff --git a/docs/assets/dsd-polyfill.js b/docs/assets/dsd-polyfill.js new file mode 100644 index 0000000000..f31505d9f9 --- /dev/null +++ b/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); diff --git a/elements/rh-accordion/docs/30-code.md b/elements/rh-accordion/docs/30-code.md index f2ba1a9ad1..91c0ebcbed 100644 --- a/elements/rh-accordion/docs/30-code.md +++ b/elements/rh-accordion/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/elements/rh-alert/docs/30-code.md b/elements/rh-alert/docs/30-code.md index 2d12318451..7993ce3cd6 100644 --- a/elements/rh-alert/docs/30-code.md +++ b/elements/rh-alert/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-audio-player/docs/40-code.md b/elements/rh-audio-player/docs/40-code.md index 7c5a707a69..8d7388ecd7 100644 --- a/elements/rh-audio-player/docs/40-code.md +++ b/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 %} diff --git a/elements/rh-avatar/docs/30-code.md b/elements/rh-avatar/docs/30-code.md index c71692f2f7..cdc99775ea 100644 --- a/elements/rh-avatar/docs/30-code.md +++ b/elements/rh-avatar/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -6,4 +6,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-badge/docs/30-code.md b/elements/rh-badge/docs/30-code.md index 40948d00e7..3ed8ee0798 100644 --- a/elements/rh-badge/docs/30-code.md +++ b/elements/rh-badge/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -6,4 +6,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-blockquote/docs/30-code.md b/elements/rh-blockquote/docs/30-code.md index 484e3a166d..aea19a12f7 100644 --- a/elements/rh-blockquote/docs/30-code.md +++ b/elements/rh-blockquote/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/elements/rh-button/docs/30-code.md b/elements/rh-button/docs/30-code.md index 07f3a8a3f6..c6eca2e12e 100644 --- a/elements/rh-button/docs/30-code.md +++ b/elements/rh-button/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage {% playground tagName=button %}{% endplayground %} @@ -6,4 +6,4 @@ View the demo in a new tab {% endcta %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-card/docs/30-code.md b/elements/rh-card/docs/30-code.md index 2d12318451..7993ce3cd6 100644 --- a/elements/rh-card/docs/30-code.md +++ b/elements/rh-card/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-code-block/docs/40-code.md b/elements/rh-code-block/docs/40-code.md index 589d01b739..24db170946 100644 --- a/elements/rh-code-block/docs/40-code.md +++ b/elements/rh-code-block/docs/40-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage diff --git a/elements/rh-cta/demo/analytics.html b/elements/rh-cta/demo/analytics.html index 4654900c69..50cb54de64 100644 --- a/elements/rh-cta/demo/analytics.html +++ b/elements/rh-cta/demo/analytics.html @@ -1,12 +1,4 @@ - - - - - - - - -

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.

@@ -64,3 +56,61 @@

Complex Case: Slotted Link, Deep CTA Analytics

Last CTA Analytics Event

{} + + + + + + + + diff --git a/elements/rh-cta/demo/analytics.js b/elements/rh-cta/demo/analytics.js deleted file mode 100644 index 3e204fdc36..0000000000 --- a/elements/rh-cta/demo/analytics.js +++ /dev/null @@ -1,38 +0,0 @@ -import 'https://ga.jspm.io/npm:prismjs@1.29.0/prism.js'; -import 'https://ga.jspm.io/npm:prismjs@1.29.0/plugins/autoloader/prism-autoloader.js'; -import 'https://ga.jspm.io/npm:@power-elements/json-viewer@2.1.1/json-viewer.js'; - -customElements.define('slotted-link', class SlottedLinkElement extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: 'open' }).innerHTML = /* html */` - - - - - `; - } -}); - -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; - } -}); diff --git a/elements/rh-cta/demo/brick.html b/elements/rh-cta/demo/brick.html new file mode 100644 index 0000000000..d36f37c1d4 --- /dev/null +++ b/elements/rh-cta/demo/brick.html @@ -0,0 +1,20 @@ + + + + + diff --git a/elements/rh-cta/demo/button.html b/elements/rh-cta/demo/button.html new file mode 100644 index 0000000000..5969067c3d --- /dev/null +++ b/elements/rh-cta/demo/button.html @@ -0,0 +1,46 @@ +
+

Links

+ + Link + + + + Link + + + + Link + +
+ +
+

Buttons

+ + + + + + + + + + + +
+ + + + diff --git a/elements/rh-cta/demo/color-context.html b/elements/rh-cta/demo/color-context.html index 1a29c48f53..cf7f27ce73 100644 --- a/elements/rh-cta/demo/color-context.html +++ b/elements/rh-cta/demo/color-context.html @@ -1,6 +1,6 @@ + -

Dark Colour Context

Default Default Video Primary @@ -10,11 +10,22 @@

Dark Colour Context

Brick Video - - - - + + diff --git a/elements/rh-cta/demo/demo.css b/elements/rh-cta/demo/demo.css deleted file mode 100644 index afdf8e8ccb..0000000000 --- a/elements/rh-cta/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/rh-cta/demo/resizing.html b/elements/rh-cta/demo/resizing.html new file mode 100644 index 0000000000..a1784dbf91 --- /dev/null +++ b/elements/rh-cta/demo/resizing.html @@ -0,0 +1,125 @@ +
+
+ + 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.

+ +
+ Default link cta with longer text +
+ +
+ + קריאה לפעולה בררית מחדל עם טקסט ארוך + +
+ +

Long words should break in the middle

+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+ +
+ + Supercalifragilisticexpialidocious + +
+
+ + + + diff --git a/elements/rh-cta/demo/rh-cta.html b/elements/rh-cta/demo/rh-cta.html index 546f8be200..1aac713fd4 100644 --- a/elements/rh-cta/demo/rh-cta.html +++ b/elements/rh-cta/demo/rh-cta.html @@ -1,160 +1,7 @@ - - - - + + Call to Action + -
-

Variants

- Default - Default Video - Primary - Video - Secondary - Brick - Brick Icon -
- - -

Dark Colour Context

- Default - Default Video - Primary - Video - Secondary - Brick - Brick Icon - - -
-

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

-
- Get product details -
-
-
- Get product details -
-
-
- Get product details -
-
-
- Get product details -
-
-
- Get product details -
-
-
- Get product details -
-
-
- Get product details -
-
- -
-

Extra-long words

-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
-
- - Supercalifragilisticexpialidocious - -
-
- -
-

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.

-
- Default link cta with longer text -
-
- קריאה לפעולה בררית מחדל עם טקסט ארוך -
-
- - + diff --git a/elements/rh-cta/demo/rh-cta.js b/elements/rh-cta/demo/rh-cta.js deleted file mode 100644 index 89f70bbb9c..0000000000 --- a/elements/rh-cta/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/rh-cta/demo/right-to-left.html b/elements/rh-cta/demo/right-to-left.html new file mode 100644 index 0000000000..2ef1b5d523 --- /dev/null +++ b/elements/rh-cta/demo/right-to-left.html @@ -0,0 +1,118 @@ +
+
+

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. +

+
+ + + +
+ + + + + diff --git a/elements/rh-cta/demo/variants.html b/elements/rh-cta/demo/variants.html new file mode 100644 index 0000000000..f12445354a --- /dev/null +++ b/elements/rh-cta/demo/variants.html @@ -0,0 +1,51 @@ +
+ + Default + + + + Default Video + + + + Primary + + + + Video + + + + Secondary + + +
+ + Brick + + + Brick Icon + +
+
+ + + + + diff --git a/elements/rh-cta/docs/30-code.md b/elements/rh-cta/docs/30-code.md index 240898fb7c..5159b9035e 100644 --- a/elements/rh-cta/docs/30-code.md +++ b/elements/rh-cta/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -8,4 +8,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index cbeb71ffbb..df8e5bca94 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -314,6 +314,12 @@ svg { * BRICK *****************************************************************************/ +:host([variant="brick"]) { + display: inline-block !important; + max-width: 100%; + width: 100%; +} + :host([variant="brick"]) #container { border-style: solid; font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif); diff --git a/elements/rh-dialog/docs/30-code.md b/elements/rh-dialog/docs/30-code.md index 2768a91bd1..add15fd861 100644 --- a/elements/rh-dialog/docs/30-code.md +++ b/elements/rh-dialog/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -12,4 +12,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-footer/docs/30-code.md b/elements/rh-footer/docs/30-code.md index 85d1a53ddd..a9138a7acc 100644 --- a/elements/rh-footer/docs/30-code.md +++ b/elements/rh-footer/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} @@ -11,4 +11,4 @@ {% renderCodeDocs for='rh-footer-links' %}{% endrenderCodeDocs %} {% renderCodeDocs for='rh-footer-social-link' %}{% endrenderCodeDocs %} - \ No newline at end of file + diff --git a/elements/rh-navigation-secondary/docs/30-code.md b/elements/rh-navigation-secondary/docs/30-code.md index 188333cbd9..b66637d494 100644 --- a/elements/rh-navigation-secondary/docs/30-code.md +++ b/elements/rh-navigation-secondary/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true%}{% endrenderInstallation %} +{% renderInstall lightdomcss=true%}{% endrenderInstall %} {% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-pagination/docs/30-code.md b/elements/rh-pagination/docs/30-code.md index e126c74da3..2260f620c9 100644 --- a/elements/rh-pagination/docs/30-code.md +++ b/elements/rh-pagination/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -14,4 +14,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-spinner/docs/30-code.md b/elements/rh-spinner/docs/30-code.md index 64b135c053..b8f67d4aff 100644 --- a/elements/rh-spinner/docs/30-code.md +++ b/elements/rh-spinner/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ### Default/Large Spinner @@ -17,4 +17,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-stat/docs/30-code.md b/elements/rh-stat/docs/30-code.md index 9cace89675..fc45e56114 100644 --- a/elements/rh-stat/docs/30-code.md +++ b/elements/rh-stat/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html @@ -9,4 +9,4 @@ ``` {% endband %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-subnav/docs/30-code.md b/elements/rh-subnav/docs/30-code.md index 5727ed89dc..2c39d7b22d 100644 --- a/elements/rh-subnav/docs/30-code.md +++ b/elements/rh-subnav/docs/30-code.md @@ -1,3 +1,3 @@ -{% renderInstallation lightdomcss=true %}{% endrenderInstallation %} +{% renderInstall lightdomcss=true %}{% endrenderInstall %} -{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-tabs/docs/30-code.md b/elements/rh-tabs/docs/30-code.md index a2ec4c5ab0..9615805ffa 100644 --- a/elements/rh-tabs/docs/30-code.md +++ b/elements/rh-tabs/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage ```html @@ -18,4 +18,4 @@ {% renderCodeDocs for='rh-tab' %}{% endrenderCodeDocs %} -{% renderCodeDocs for='rh-tab-panel' %}{% endrenderCodeDocs %} \ No newline at end of file +{% renderCodeDocs for='rh-tab-panel' %}{% endrenderCodeDocs %} diff --git a/elements/rh-tag/docs/30-code.md b/elements/rh-tag/docs/30-code.md index 528bd5d771..03cb5702d4 100644 --- a/elements/rh-tag/docs/30-code.md +++ b/elements/rh-tag/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/elements/rh-timestamp/docs/30-code.md b/elements/rh-timestamp/docs/30-code.md index b50c098b12..04664aac70 100644 --- a/elements/rh-timestamp/docs/30-code.md +++ b/elements/rh-timestamp/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} {% band header="Usage" %} ```html diff --git a/elements/rh-tooltip/docs/30-code.md b/elements/rh-tooltip/docs/30-code.md index 239250e858..c6eca2e12e 100644 --- a/elements/rh-tooltip/docs/30-code.md +++ b/elements/rh-tooltip/docs/30-code.md @@ -1,4 +1,4 @@ -{% renderInstallation %}{% endrenderInstallation %} +{% renderInstall %}{% endrenderInstall %} ## Usage {% playground tagName=button %}{% endplayground %} diff --git a/web-dev-server.config.js b/web-dev-server.config.js index 30adc1378d..2302a23fb6 100644 --- a/web-dev-server.config.js +++ b/web-dev-server.config.js @@ -22,10 +22,10 @@ export default pfeDevServerConfig({ } return next(); }, - /** redirect requests for /assets/prism.css css to /docs/assets/prism.css */ + /** redirect requests for /assets/* css to /docs/assets/prism.css */ function(ctx, next) { - if (ctx.path === '/assets/prism.css') { - ctx.redirect('/docs/assets/prism.css'); + if (ctx.path.startsWith('/assets/')) { + ctx.redirect(`/docs${ctx.path}`); } return next(); }