RedHat-UX · bennypowers · Sep 6, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git a/docs/_includes/feedback.html b/docs/_includes/feedback.html
@@ -1,28 +1,15 @@
-{% set searchName = doc.tagName if doc.tagName else (title | slug) %}
-{% set related = searchName | relatedItems %}
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-  {% section %}
-    {% if related.length %}
-      <h2>Related elements or patterns</h2>
-      <ul id="related-items-list">{% for item in related %}
-        <li>
-          <a href="{{ item.url}}">{{ item.text }}</a>
-        </li>{% endfor %}
-      </ul>
-    {% elseif title === 'Patterns' %}
-      <h2>Elements</h2>
-      <p>To learn how to use our elements in your designs, visit the <a href="{{ '/elements/' | url }}">Elements</a> section.</p>
-    {% else %}
-      <h2>Patterns</h2>
-      <p>To learn how to use our patterns in your designs, visit the <a href="{{ '/patterns/' | url }}">Patterns</a> section.</p>
-    {% endif %}
-  {% endsection %}
+{% set related = (doc.tagName if doc.tagName else (title | slug)) | relatedItems %}
 
-  {% section %}
-    <h2>Feedback</h2>
-    <p>
-      To give feedback about anything on this page,
-      <a href="https://github.com/RedHat-UX/red-hat-design-system/discussions">contact us</a>.
-    </p>
-  {% endsection %}
-</div>
+{% feedback %}
+  {% if related.length %}
+    <h2>Related elements or patterns</h2>
+    <ul id="related-items-list">{% for item in related %}
+      <li>
+        <a href="{{ item.url}}">{{ item.text }}</a>
+      </li>{% endfor %}
+    </ul>
+  {% else %}
+    <h2>Other libraries</h2>
+    <p>To learn more about our other libraries, visit <a href="/get-started/">this page</a>.</p>
+  {% endif %}
+{% endfeedback %}
diff --git a/docs/_plugins/shortcodes.cjs b/docs/_plugins/shortcodes.cjs
@@ -4,10 +4,11 @@ const RenderInstallation = require('./shortcodes/renderInstallation.cjs');
 const ExampleImage = require('./shortcodes/example.cjs');
 const Cta = require('./shortcodes/cta.cjs');
 const Alert = require('./shortcodes/alert.cjs');
-const Section = require('./shortcodes/section.cjs');
+const { Section } = require('./shortcodes/section.cjs');
 const Demo = require('./shortcodes/demo.cjs');
 const SpacerTokensTable = require('./shortcodes/spacerTokensTable.cjs');
 const TokensTable = require('./shortcodes/tokensTable.cjs');
+const Feedback = require('./shortcodes/feedback.cjs');
 const renderCodeDocs = require('./shortcodes/renderCodeDocs.cjs');
 
 /** @typedef {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage} DocsPage */
@@ -18,17 +19,17 @@ const renderCodeDocs = require('./shortcodes/renderCodeDocs.cjs');
  * @property {object} page
  * @property {object} eleventy
  */
-
 module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(Section);
   eleventyConfig.addPlugin(RepoStatus);
   eleventyConfig.addPlugin(Playground);
   eleventyConfig.addPlugin(RenderInstallation);
   eleventyConfig.addPlugin(ExampleImage);
   eleventyConfig.addPlugin(Cta);
   eleventyConfig.addPlugin(Alert);
-  eleventyConfig.addPlugin(Section);
   eleventyConfig.addPlugin(Demo);
   eleventyConfig.addPlugin(SpacerTokensTable);
   eleventyConfig.addPlugin(TokensTable);
+  eleventyConfig.addPlugin(Feedback);
   eleventyConfig.addPlugin(renderCodeDocs);
 };
diff --git a/docs/_plugins/shortcodes/feedback.cjs b/docs/_plugins/shortcodes/feedback.cjs
@@ -0,0 +1,33 @@
+const { section } = require('./section.cjs');
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPairedShortcode('feedback',
+    /**
+     * Demo
+     * A live component demo
+     * @param {string} content
+     * @param {object} options
+     * @param {string} options.headline       (Optional) Text to go in the heading
+     * @param {string} options.palette        Palette to apply, e.g. lightest, light see components/_section.scss
+     * @param {string} options.headingLevel   The heading level, defaults to 3
+     */
+    function demoShortcode(content) {
+      return /* html*/`
+
+<div class="multi-column--min-300-wide section section--palette-default container feedback">
+  ${section.call(this, content)?.trim() || /* html */`
+    <h2>Other libraries</h2>
+    <p>To learn more about our other libraries, visit <a href="/get-started/">this page</a>.</p>
+  `}
+  ${section.call(this, /* html */`
+    <h2>Feedback</h2>
+    <p>
+      To give feedback about anything on this page,
+      <a href="https://github.com/RedHat-UX/red-hat-design-system/discussions">contact us</a>.
+    </p>
+  `)}
+</div>
+
+`;
+    });
+};
diff --git a/docs/_plugins/shortcodes/renderCodeDocs.cjs b/docs/_plugins/shortcodes/renderCodeDocs.cjs
@@ -4,12 +4,12 @@ import('@patternfly/pfe-tools/11ty/DocsPage.js');
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPairedShortcode('renderCodeDocs',
     function renderCodeDocs(content, kwargs = {}) {
-    /**
-     * NB: since the data for this shortcode is no a POJO,
-     * but a DocsPage instance, 11ty assigns it to this.ctx._
-     * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
-     * @type {DocsPage}
-     */
+      /**
+       * NB: since the data for this shortcode is no a POJO,
+       * but a DocsPage instance, 11ty assigns it to this.ctx._
+       * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
+       * @type {DocsPage}
+       */
       const docsPage = this.ctx._;
 
       const level = kwargs.level ?? 2;
@@ -33,4 +33,3 @@ module.exports = function(eleventyConfig) {
     }
   );
 };
-
diff --git a/docs/_plugins/shortcodes/section.cjs b/docs/_plugins/shortcodes/section.cjs
@@ -1,26 +1,24 @@
 const { attrMap } = require('./helpers.cjs');
 
-module.exports = function(eleventyConfig) {
-  eleventyConfig.addPairedShortcode('section',
-    /**
-     * Section macro
-     * Creates a section of the page with a heading
-     *
-     * @param {string} content
-     * @param {object} options
-     * @param {string} options.headline       Text to go in the heading
-     * @param {string} options.palette        Palette to apply, e.g. lightest, light see components/_section.scss
-     * @param {string} options.headingLevel   The heading level, defaults to 2
-     */
-    function(content, {
-      headline = null,
-      palette = 'default',
-      headingLevel = '2',
-      style = null,
-      class: className = null,
-    } = {}) {
-      const classes = `section section--palette-${palette} ${className ?? ''} container`;
-      return /* html*/`
+/**
+ * Section macro
+ * Creates a section of the page with a heading
+ *
+ * @param {string} content
+ * @param {object} options
+ * @param {string} options.headline       Text to go in the heading
+ * @param {string} options.palette        Palette to apply, e.g. lightest, light see components/_section.scss
+ * @param {string} options.headingLevel   The heading level, defaults to 2
+ */
+function section(content, {
+  headline = null,
+  palette = 'default',
+  headingLevel = '2',
+  style = null,
+  class: className = null,
+} = {}) {
+  const classes = `section section--palette-${palette} ${className ?? ''} container`;
+  return /* html*/`
 <section ${attrMap({ style, class: classes })}>${!headline ? '' : `
 
   ${Array.from({ length: headingLevel }, () => '#').join('')} ${headline} {.section-title .pfe-jump-links-panel__section} `}
@@ -30,5 +28,10 @@ ${content}
 </section>
 
 `;
-    });
-};
+}
+
+function Section(eleventyConfig) {
+  eleventyConfig.addPairedShortcode('section', section);
+}
+
+module.exports = { Section, section };
diff --git a/docs/about/how-we-build.njk b/docs/about/how-we-build.njk
@@ -154,14 +154,7 @@ tags:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide">
-
-  {% call about.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-  {% call about.section("Other resources") -%}
-    <p>To learn how to use our design system kit and libraries, visit <a href="../../get-started">this page</a>.</p>
-  {%- endcall %}
-
-</div>
+{% feedback %}
+  <h2>Other resources</h2>
+  <p>To learn how to use our design system kit and libraries, visit <a href="/get-started/">this page</a>.</p>
+{% endfeedback %}
diff --git a/docs/design-code-status.njk b/docs/design-code-status.njk
@@ -300,14 +300,8 @@ title: Design/code status
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
+{% feedback %}
+  <h2>Release notes</h2>
+  <p>To see what foundations, tokens, elements, or patterns have been released recently, visit <a href="/release-notes/">this page</a>.</p>
+{% endfeedback %}
 
-  {% call components.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-  {% call components.section("Release notes") -%}
-    <p>To see what foundations or components have been released recently, visit <a href="../release-notes">this page</a>.</p>
-  {%- endcall %}
-
-</div>
diff --git a/docs/elements/index.md b/docs/elements/index.md
@@ -61,4 +61,7 @@ summaries:
   To request a new element or if updates need to be made to an existing element, <a href="https://github.com/RedHat-UX/red-hat-design-system/issues/new/choose" target="_blank">create a GitHub issue</a>.
 {% endsection %}
 
-{% include 'feedback.html' %}
+{% feedback %}
+  <h2>Elements</h2>
+  <p>To learn how to use our elements in your designs, visit the <a href="{{ '/elements/' | url }}">Elements</a> section.</p>
+{% endfeedback %}
diff --git a/docs/foundations/color.njk b/docs/foundations/color.njk
@@ -483,14 +483,8 @@ includeComponent:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
+{% feedback %}
+  <h2>Foundations</h2>
+  <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
+{% endfeedback %}
 
-  {% call foundations.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-  {% call foundations.section("Foundations") -%}
-    <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
-  {%- endcall %}
-
-</div>
diff --git a/docs/foundations/grid.njk b/docs/foundations/grid.njk
@@ -179,14 +179,9 @@ tags:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
+{% feedback %}
+  <h2>Foundations</h2>
+  <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
+{% endfeedback %}
 
-  {% call foundations.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
 
-  {% call foundations.section("Foundations") -%}
-    <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
-  {%- endcall %}
-
-</div>
diff --git a/docs/foundations/personalization.njk b/docs/foundations/personalization.njk
@@ -371,14 +371,7 @@ includeComponent:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-
-  {% call components.section("Patterns") -%}
-    <p>To learn how to use our other patterns in your designs, visit the <a href="/patterns">Patterns</a> section.</p>
-  {%- endcall %}
-
-  {% call components.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-</div>
+{% feedback %}
+  <h2>Foundations</h2>
+  <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
+{% endfeedback %}
diff --git a/docs/foundations/spacing.njk b/docs/foundations/spacing.njk
@@ -531,14 +531,8 @@ tags:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
+{% feedback %}
+  <h2>Foundations</h2>
+  <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
+{% endfeedback %}
 
-  {% call foundations.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-  {% call foundations.section("Foundations") -%}
-    <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
-  {%- endcall %}
-
-</div>
diff --git a/docs/foundations/typography.njk b/docs/foundations/typography.njk
@@ -445,14 +445,7 @@ tags:
 
 {%- endcall %}
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-
-  {% call foundations.section("Feedback") -%}
-    <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-  {%- endcall %}
-
-  {% call foundations.section("Foundations") -%}
-    <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
-  {%- endcall %}
-
-</div>
+{% feedback %}
+  <h2>Foundations</h2>
+  <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
+{% endfeedback %}
diff --git a/docs/get-started.njk b/docs/get-started.njk
@@ -47,17 +47,9 @@ order: 0
 
 {%- endcall %}
 
-<!-- Cross links -->
-
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-  <div>
-    {% call getstarted.section("Feedback") -%}
-      <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-    {%- endcall %}
-  </div>
-  <div>
-    {% call getstarted.section("Explore") -%}
-      <p>Our libraries include <a href="../elements">elements</a>, <a href="fts-starter-kit">patterns</a>, <a href="icon-libraries">icons</a>, and <a href="product-logo-library">product logos</a> to help you design Red Hat experiences.</p>
-    {%- endcall %}
-  </div>
-</div>
+{% feedback %}
+  <h2>Explore</h2>
+  <p>Our libraries include <a href="/elements/">elements</a>, <a href="/patterns/">patterns</a>,
+  <a href="/get-started/icon-libraries">icons</a>,
+  and <a href="/get-started/product-logo-library">product logos</a> to help you design Red Hat experiences.</p>
+{% endfeedback %}
diff --git a/docs/get-started/design-system-kit.njk b/docs/get-started/design-system-kit.njk
@@ -204,17 +204,7 @@ includeComponent:
 
 {%- endcall %}
 
-<!-- Cross links -->
-
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-  <div>
-    {% call getstarted.section("Feedback") -%}
-      <p>To give feedback about anything on this page, <a href="mailto:[email protected]">contact us</a>.</p>
-    {%- endcall %}
-  </div>
-  <div>
-    {% call getstarted.section("Other libraries") -%}
-      <p>To learn more about our other libraries, visit <a href="../../get-started">this page</a>.</p>
-    {%- endcall %}
-  </div>
-</div>
+{% feedback %}
+  <h2>Other libraries</h2>
+  <p>To learn more about our other libraries, visit <a href="/get-started/">this page</a>.</p>
+{% endfeedback %}