docs: importmap for uxdot-elements

docs/_includes/layouts/pages/basic.njk

@@ -6,7 +6,7 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
-  import "/assets/javascript/elements/uxdot-feedback.js"
+  import "@uxdot/elements/uxdot-feedback.js"
   import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-footer/rh-footer.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
@@ -16,7 +16,9 @@ layout: layouts/base.njk
 </script>
 
 {%- if tokenSearch %}
-<script type="module" src="/assets/javascript/elements/uxdot-search.js" data-helmet></script>
+<script type="module" data-helmet>
+  import "@uxdot/elements/uxdot-search.js";
+</script>
 <script type="module" src="/assets/javascript/tokens.js" data-helmet></script>
 {%- endif %}
 {% include 'partials/component/masthead.njk' %}

docs/_includes/layouts/pages/element.11ty.ts

@@ -85,7 +85,9 @@ export default class ElementsPage {
       </noscript>
 
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-copy-permalink.js';
+        import '@uxdot/elements/uxdot-best-practice.js';
         import '@rhds/elements/rh-alert/rh-alert.js';
         import '@rhds/elements/rh-cta/rh-cta.js';
         import '@rhds/elements/rh-surface/rh-surface.js';
@@ -232,7 +234,9 @@ export default class ElementsPage {
         });
 
     return html`
-      <script data-helmet type="module" src="/assets/javascript/elements/uxdot-installation-tabs.js"></script>
+      <script data-helmet type="module">
+        import "@uxdot/elements/uxdot-installation-tabs.js";
+      </script>
       <style data-helmet>${''/* NOTE: adapted from theming/developers.css - better to wrap the localhost behaviour? */}
       uxdot-installation-tabs {
         border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
@@ -804,8 +808,8 @@ export default class ElementsPage {
       </style>
 
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-copy-button.js';
-        import '/assets/javascript/elements/uxdot-header.js';
+        import '@uxdot/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-header.js';
         import 'playground-elements';
         import '@rhds/elements/rh-button/rh-button.js';
         import '@rhds/elements/rh-card/rh-card.js';

docs/_includes/layouts/pages/has-toc.njk

@@ -12,7 +12,7 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-toc.js';
+  import '@uxdot/elements/uxdot-toc.js';
 </script>
 
 {% include 'partials/component/masthead.njk' %}

docs/_includes/layouts/pages/pattern.njk

@@ -8,7 +8,7 @@ layout: layouts/pages/has-toc.njk
   import '@rhds/elements/rh-subnav/rh-subnav.js';
   import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
-  import "/assets/javascript/elements/uxdot-pattern.js";
+  import "@uxdot/elements/uxdot-pattern.js";
 </script>
 
 {{ content | safe }}

docs/_includes/layouts/pages/tokens.njk

@@ -4,7 +4,7 @@ layout: layouts/base.njk
 
 <script type="module" data-helmet>
   import '@rhds/elements/rh-tag/rh-tag.js';
-  import '/assets/javascript/elements/uxdot-header.js';
+  import '@uxdot/elements/uxdot-header.js';
 </script>
 
 <style data-helmet>

docs/_includes/partials/component/feedback.11ty.cjs

@@ -29,7 +29,7 @@ module.exports = class Feedback {
     }).sort((a, b) => a.text < b.text ? -1 : a.text > b.text ? 1 : 0);
     return dedent(html`
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-feedback.js';
+        import '@uxdot/elements/uxdot-feedback.js';
       </script>
       <uxdot-feedback>${!related.length ? html`
         <h2>Other libraries</h2>

docs/_includes/partials/component/header.njk

@@ -1,13 +1,18 @@
 {%- set tagName = tagName or doc.tagName or element.tagName or doc.docsPage.tagName -%}
 {%- set headingId = (heading if heading else title) | lower | slug -%}
-{%- set manifest = (doc and doc.docsPage and doc.docsPage.manifest) -%}
-{%- if manifest == (doc and doc.docsPage) -%}{% set manifest = null %}{% endif %}
-{% set prettyName -%}{{ (doc.alias or doc.slug or element.slug or '') | deslugify | capitalize }}{% endset %}
-{% set tabs = doc.tabs or (collections[subnav.collection or ''] | sort(attribute="data.subnav.order")) %}
-{% set demos = manifest and manifest.getDemos(doc.docsPage.tagName) %}
+{%- set manifest = doc and doc.docsPage and doc.docsPage.manifest -%}
+{%- if manifest == doc and doc.docsPage -%}
+  {% set manifest = null %}
+{% endif -%}
+{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug or '') | deslugify | capitalize }}{% endset %}
+{%- set tabs = doc.tabs -%}
+{%- if not tabs and subnav.collection -%}
+  {% set tabs = collections[subnav.collection] | sort(attribute = "data.subnav.order") %}
+{%- endif -%}
+{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-header.js';
+  import '@uxdot/elements/uxdot-header.js';
 </script>
 
 {% if tabs %}

docs/_includes/partials/component/token-search.html

@@ -1,5 +1,5 @@
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-search.js';
+  import '@uxdot/elements/uxdot-search.js';
 </script>
 
 <form slot="search" id="search-tokens" action="/tokens/search">

docs/_includes/partials/javascript/global.html

@@ -17,9 +17,9 @@
 
   {# only load components that need hydrated (aka interactivity) #}
   <script type="module">
-    import '/assets/javascript/elements/uxdot-copy-permalink.js';
-    import '/assets/javascript/elements/uxdot-sidenav.js';
-    import '/assets/javascript/elements/uxdot-example.js';
+    import '@uxdot/elements/uxdot-copy-permalink.js';
+    import '@uxdot/elements/uxdot-sidenav.js';
+    import '@uxdot/elements/uxdot-example.js';
   </script>
 
   <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>

docs/about/index.md

@@ -25,7 +25,7 @@ tags:
 </style>
 
 <script data-helmet type="module">
-  import '/assets/javascript/elements/uxdot-hero.js'
+  import '@uxdot/elements/uxdot-hero.js'
   import '@rhds/elements/rh-icon/rh-icon.js';
   import '@rhds/elements/rh-card/rh-card.js';
 </script>

docs/assets/javascript/tokens-pages.js

@@ -1,4 +1,4 @@
-import '/assets/javascript/elements/uxdot-copy-button.js';
+import '@uxdot/elements/uxdot-copy-button.js';
 import '@rhds/elements/rh-card/rh-card.js';
 import { ContextChangeEvent } from '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
 

docs/assets/javascript/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/javascript/elements/uxdot-search.js';
+import '@uxdot/elements/uxdot-search.js';
 
 document
     .getElementById('search-input')

docs/foundations/color/usage.md

@@ -12,7 +12,7 @@ subnav:
 ---
 
 <script data-helmet type="module">
-  import '/assets/javascript/elements/uxdot-best-practice.js';
+  import '@uxdot/elements/uxdot-best-practice.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-tag/rh-tag.js';
   import '@rhds/elements/rh-table/rh-table.js';

docs/get-started/designers.md

@@ -11,7 +11,7 @@ tags:
       data-helmet>
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-table/rh-table.js';

docs/get-started/developers/installation.md

@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
 </script>

docs/get-started/developers/tokens.md

@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
 </script>
 

docs/get-started/developers/usage.md

@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
 </script>
 

docs/patterns/logo-wall/guidelines.md

@@ -11,15 +11,21 @@ subnav:
   order: 3
 ---
 
-<script data-helmet type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>
+<script type="module" data-helmet>
+  import "@uxdot/elements/uxdot-best-practice.js";
+</script>
 
 ## Usage
 
-Use a logo wall when you need to display multiple Red Hat and/or partner logos in a group.
+Use a logo wall when you need to display multiple Red Hat and/or partner logos 
+in a group.
 
 ## Variants
 
-A logo wall is available in two styles: bordered and borderless. Both variants can be either interactive or static. However, it is recommended to use the bordered variant for interactive logos and the borderless variant for static logos.
+A logo wall is available in two styles: bordered and borderless. Both variants 
+can be either interactive or static. However, it is recommended to use the 
+bordered variant for interactive logos and the borderless variant for static 
+logos.
 
 ### Bordered
 
@@ -41,27 +47,35 @@ A logo wall is available in two styles: bordered and borderless. Both variants c
 
 ## Layout
 
-Ensure that all logos are at a size in which they are clearly legible. Use your best judgment to ensure that logos are neither too large nor too small and are proportionate to other elements on the page.
+Ensure that all logos are at a size in which they are clearly legible. Use your 
+best judgment to ensure that logos are neither too large nor too small and are 
+proportionate to other elements on the page.
 
 Here are some guidelines to follow if you’re unsure:
  - On desktop, there should be a maximum of 6 logos in a row.
  - On mobile, there should be a maximum of 2 logos in a row.
 
 ### Responsive sizing
 
-Each logo is in a container. The size of each container and logo is determined by the designer but should abide by best practices. Designers should ensure that all logos are of a similar size and proportionate to each other. Logos are centered vertically and horizontally within the container.
+Each logo is in a container. The size of each container and logo is determined 
+by the designer but should abide by best practices. Designers should ensure that 
+all logos are of a similar size and proportionate to each other. Logos are 
+centered vertically and horizontally within the container.
 
 ### Bordered
-Logo sizes may decrease on smaller screens, however the container will retain 16px padding on all sides. Logos are horizontally and vertically aligned.
+Logo sizes may decrease on smaller screens, however the container will retain 
+16px padding on all sides. Logos are horizontally and vertically aligned.
 
 ### Borderless
-Logo sizes may decrease on smaller screens. Logo containers can adjust margins and padding for smaller screens. Logos are horizontally and vertically aligned.
+Logo sizes may decrease on smaller screens. Logo containers can adjust margins 
+and padding for smaller screens. Logos are horizontally and vertically aligned.
 
 ## Best practices
 
 ### Color contrast
 
-When displaying our partners' logos, it is essential to respect their brand identity by ensuring that their logos meet accessibility standards.
+When displaying our partners' logos, it is essential to respect their brand 
+identity by ensuring that their logos meet accessibility standards.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
@@ -87,8 +101,9 @@ When displaying our partners' logos, it is essential to respect their brand iden
 
 ### Art Direction
 
-When alternating graphics depending on the color palette, You should be careful select
-only the themable container which is the direct ancestor of the logo wall.
+When alternating graphics depending on the color palette, You should be careful 
+select only the themable container which is the direct ancestor of the logo 
+wall.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">

docs/patterns/tile/index.md

@@ -17,7 +17,7 @@ subnav:
 <link rel="stylesheet" data-helmet href="/styles/samp.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
 </script>
 

docs/theming/color-palettes.md

@@ -15,7 +15,7 @@ order: 2
       href="../color-palettes.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';

docs/theming/customizing.md

@@ -9,7 +9,7 @@ order: 3
       href="../color-palettes.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';

docs/theming/developers.md

@@ -18,7 +18,7 @@ order: 4
       href="../developers.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';

elements/rh-site-status/docs/20-guidelines.md

@@ -1,5 +1,3 @@
-<script data-helmet type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>
-
 <style data-helmet>
   .example {
     width: 100%;

eleventy.config.ts

@@ -105,8 +105,7 @@ export default function(eleventyConfig: UserConfig) {
         'lit-html': '/assets/packages/lit-html/lit-html.js',
         'lit-html/': '/assets/packages/lit-html/',
         'prism-esm/': '/assets/packages/prism-esm/',
-        '@lit-labs/ssr-client/lit-element-hydrate-support.js':
-          '/assets/packages/@lit-labs/ssr-client/lit-element-hydrate-support.js',
+        '@lit-labs/ssr-client/lit-element-hydrate-support.js': '/assets/packages/@lit-labs/ssr-client/lit-element-hydrate-support.js',
         '@rhds/tokens': '/assets/packages/@rhds/tokens/js/tokens.js',
         '@rhds/tokens/css/': '/assets/packages/@rhds/tokens/css/',
         '@rhds/tokens/': '/assets/packages/@rhds/tokens/js/',
@@ -117,6 +116,7 @@ export default function(eleventyConfig: UserConfig) {
         '@patternfly/elements/': '/assets/packages/@patternfly/elements/',
         '@patternfly/icons/': '/assets/packages/@patternfly/icons/',
         '@patternfly/pfe-core/': '/assets/packages/@patternfly/pfe-core/',
+        '@uxdot/elements/': '/assets/javascript/elements/',
         'playground-elements': 'https://cdn.jsdelivr.net/npm/[email protected]/+esm',
       },
     },
@@ -194,28 +194,28 @@ export default function(eleventyConfig: UserConfig) {
 
   eleventyConfig.addPlugin(LitPlugin, {
     componentModules: [
-      'elements/rh-button/rh-button.js',
-      'elements/rh-tag/rh-tag.js',
-      'elements/rh-code-block/rh-code-block.js',
-      'elements/rh-icon/rh-icon.js',
-      'elements/rh-surface/rh-surface.js',
-      'elements/rh-skip-link/rh-skip-link.js',
-      'elements/rh-footer/rh-footer-universal.js',
-      'docs/assets/javascript/elements/uxdot-masthead.js',
+      'docs/assets/javascript/elements/uxdot-best-practice.js',
+      'docs/assets/javascript/elements/uxdot-copy-button.js',
+      'docs/assets/javascript/elements/uxdot-copy-permalink.js',
+      'docs/assets/javascript/elements/uxdot-example.js',
+      'docs/assets/javascript/elements/uxdot-feedback.js',
       'docs/assets/javascript/elements/uxdot-header.js',
-      'docs/assets/javascript/elements/uxdot-sidenav.js',
       'docs/assets/javascript/elements/uxdot-hero.js',
-      'docs/assets/javascript/elements/uxdot-feedback.js',
-      'docs/assets/javascript/elements/uxdot-copy-permalink.js',
-      'docs/assets/javascript/elements/uxdot-copy-button.js',
+      'docs/assets/javascript/elements/uxdot-installation-tabs.js',
+      'docs/assets/javascript/elements/uxdot-masthead.js',
+      'docs/assets/javascript/elements/uxdot-pattern.js',
       'docs/assets/javascript/elements/uxdot-repo-status-list.js',
-      'docs/assets/javascript/elements/uxdot-best-practice.js',
       'docs/assets/javascript/elements/uxdot-search.js',
+      'docs/assets/javascript/elements/uxdot-sidenav.js',
       'docs/assets/javascript/elements/uxdot-toc.js',
-      'docs/assets/javascript/elements/uxdot-pattern.js',
-      'docs/assets/javascript/elements/uxdot-example.js',
-      'docs/assets/javascript/elements/uxdot-installation-tabs.js',
+      'elements/rh-button/rh-button.js',
+      'elements/rh-code-block/rh-code-block.js',
+      'elements/rh-footer/rh-footer-universal.js',
+      'elements/rh-icon/rh-icon.js',
+      'elements/rh-skip-link/rh-skip-link.js',
       'elements/rh-subnav/rh-subnav.js',
+      'elements/rh-surface/rh-surface.js',
+      'elements/rh-tag/rh-tag.js',
     ],
   });