Merge branch 'main' into docs/card-pattern-explanation

CONTRIBUTING_DESIGN.md

@@ -10,7 +10,7 @@ contributing guide](./CONTRIBUTING_DEV.md#prerequisites)
 
 Once set up, run the 11ty development server with the following command:
 ```bash
-npm run watch:docs
+npm run serve
 ```
 
 This will start eleventy and a watch process that will reload the site if `*.njk`, `*.md`, `*.scss`,

docs/_data/repoStatus.yaml

@@ -167,6 +167,18 @@
       status: N/A
     - name: Documentation
       status: Ready
+- name: "Navigation (primary)"
+  type: "Element"
+  overallStatus: "Planned"
+  libraries:
+    - name: Figma library
+      status: Planned
+    - name: RH Elements
+      status: Planned
+    - name: RH Shared Libs
+      status: Planned
+    - name: Documentation
+      status: Planned
 - name: "Navigation Secondary"
   type: "Element"
   overallStatus: "Available"
@@ -198,11 +210,23 @@
     - name: Figma library
       status: Ready
     - name: RH Elements
-      status: Ready
+      status: Planned
     - name: WebRH
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Progress steps"
+  type: "Element"
+  overallStatus: "Available"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: RH Elements
+      status: Planned
+    - name: WebRH
+      status: Ready
+    - name: Documentation
+      status: Ready      
 - name: "Skip Link"
   type: "Element"
   overallStatus: "New"

docs/_includes/layouts/base.njk

@@ -1,3 +1,12 @@
+---js
+{
+  isPlanned: function(repoStatus, name) {
+    const element = repoStatus.find(element => element.name === name);
+    return element && element.libraries.find(library => library.name === 'RH Elements').status === "Planned";
+  }
+}
+---
+
 {%- set extraPageClasses = bodyClasses or "" -%}
 {%- if title -%}
   {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%}

docs/_includes/layouts/pages/basic.njk

@@ -5,6 +5,7 @@ importElements:
   - rh-footer
   - rh-alert
   - rh-subnav
+  - rh-tag
 ---
 <link rel="stylesheet" href="/styles/pages/backpage.css">
 

docs/_includes/layouts/pages/elements.njk

@@ -5,14 +5,14 @@ eleventyComputed:
   title: "{{ doc.pageTitle }} | {{ slug | deslugify }}"
   importElements:
     - rh-alert
-    - rh-tag
     - rh-cta
     - rh-footer
     - rh-subnav
     - rh-code-block
     - rh-table
     - rh-accordion
     - rh-badge
+    - rh-tag
     - "{{ doc.tagName or element.tagName }}"
 ---
 {%- if hasToc %}
@@ -56,7 +56,10 @@ eleventyComputed:
 <main id="main">
   <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
     <uxdot-header has-subnav>
-      <h1 id="{{ slug }}" class="page-title">{{ doc.alias or (slug | deslugify) }}</h1>
+      {%- set inProgress = doc.docsPage.manifest -%}
+      {%- set name = (doc.alias) or (slug | deslugify) %}
+      {%- set planned = isPlanned(repoStatus, name) %}
+      <h1 id="{{ slug }}" class="page-title">{{ name }}{% if planned %} <rh-tag icon="bell" color="gray">Planned</rh-tag>{% endif %}</h1>
       {%- set manifest = doc.docsPage.manifest -%}
       {%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
       {%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}

docs/_includes/layouts/pages/home.njk

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 importElements:
   - rh-cta
   - rh-footer
+  - rh-tag
 ---
 
 {% include 'partials/component/masthead.njk' %}

docs/_includes/layouts/pages/tokens.njk

@@ -1,5 +1,7 @@
 ---
 layout: layouts/base.njk
+importElements:
+  - rh-tag
 ---
 
 <style>

docs/_includes/partials/component/sidenav.njk

@@ -33,10 +33,12 @@
                     {%- set slug = fst.slug -%}
                     {%- set href = '/elements/' + slug + '/' -%}
                     {%- set active = href === page.url -%}
+                    {%- set name = (fst.alias) or (slug | deslugify) %}
+                    {%- set planned = isPlanned(repoStatus, name) %}
                     {% if not (tagName in comingSoonItems) %}
                       <li>
                         <uxdot-sidenav-dropdown-menu-item {{ 'active' if active }}>
-                          <a href="{{ href }}">{{ (fst.alias) or (slug | deslugify) }}</a>
+                          <a href="{{ href }}">{{ (fst.alias) or (slug | deslugify) }}{% if planned %} <rh-tag icon="bell" color="gray">Planned</rh-tag>{% endif %}</a>
                         </uxdot-sidenav-dropdown-menu-item>
                       </li>
                     {% endif %}

docs/get-started/developers/tokens.md

@@ -8,16 +8,16 @@ permalink: /get-started/developers/tokens/index.html
 subnav:
   collection: sortedDevelopers
   order: 30
+importElements: 
+  - rh-code-block
 ---
 
 ## How to install tokens
 
 Run the following git command to install RHDS tokens:
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  npm i @rhds/tokens
-  </script>
+  <script type="text/sample-javascript">npm i @rhds/tokens</script>
 </rh-code-block>
 
 
@@ -31,14 +31,12 @@ We use [style-dictionary](https://amzn.github.io/style-dictionary/) to transform
 Apply defaults to the document root by importing the global stylesheet:
 
 <rh-code-block>
-  <script type="text/html">
-  <link rel="stylesheet" href="/url/to/@rhds/tokens/css/global.css">
-  <style>
-    :is(h1, h2, h3, h4, h5, h6) {
-      font-family: var(--rh-font-family-heading);
-    }
-  </style>
-  </script>
+  <script type="text/html"><link rel="stylesheet" href="/url/to/@rhds/tokens/css/global.css">
+<style>
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--rh-font-family-heading);
+  }
+</style></script>
 </rh-code-block>
 
 
@@ -47,17 +45,13 @@ Apply defaults to the document root by importing the global stylesheet:
 Reset a component's styles (preventing inheritance) by adding resetStyles to its static Constructible Style Sheet list:
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  import { resetStyles } from '@rhds/tokens/css/reset.css.js';
-  import style from './rh-jazz-hands.css';
-  </script>
-
-  <script type="text/sample-javascript">
-  @customElement('rh-jazz-hands')
-  export class RhJazzHands extends LitElement {
-    static readonly styles = [...resetStyles, style];
-  }
-  </script>
+  <script type="text/sample-javascript">import { resetStyles } from '@rhds/tokens/css/reset.css.js';
+import style from './rh-jazz-hands.css';
+</script>
+<script type="text/sample-javascript">@customElement('rh-jazz-hands')
+export class RhJazzHands extends LitElement {
+  static readonly styles = [...resetStyles, style];
+}</script>
 </rh-code-block>
 
 
@@ -71,25 +65,17 @@ Reset a component's styles (preventing inheritance) by adding resetStyles to its
 Import tokens as JavaScript objects:
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  import { tokens } from '@rhds/tokens';
-  </script>
-
-  <script type="text/sample-javascript">
-  html`<span style="color: ${tokens.get('--rh-color-blue-300')}">I'm blue</span>`;
-  </script>
+  <script type="text/sample-javascript">import { tokens } from '@rhds/tokens';
+</script>
+<script type="text/sample-javascript">html`<span style="color: ${tokens.get('--rh-color-blue-300')}">I'm blue</span>`;</script>
 </rh-code-block>
 
-or for tree-shakable imports:
+Or tree-shakable imports:
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  import { ColorBlue300 } from '@rhds/tokens/values.js';
-  </script>
-
-  <script type="text/sample-javascript">
-  html`<span style="color: ${ColorBlue300}">I'm blue</span>`;
-  </script>
+  <script type="text/sample-javascript">import { ColorBlue300 } from '@rhds/tokens/values.js';
+</script>
+<script type="text/sample-javascript">html`<span style="color: ${ColorBlue300}">I'm blue</span>`;</script>
 </rh-code-block>
 
 
@@ -100,9 +86,7 @@ or for tree-shakable imports:
 Editor snippets complete prefixes like `--rh-color-brand` to their CSS custom properties, complete with fallback.
 
 <rh-code-block>
-  <script type="text/css">
-  color: var(--rh-color-brand, #ee0000);
-  </script>
+  <script type="text/css">color: var(--rh-color-brand, #ee0000);</script>
 </rh-code-block>
 
 They also provide reverse lookup. For example,  if you want to choose between all the tokens with the  value `#e00`, you can do so by completing the prefix `e00`.
@@ -118,12 +102,10 @@ Download the VSIX bundle that’s linked at the bottom of our [“Release v1.0.0
 Use LuaSnip to load snippets in Neovim:
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  require 'luasnip.loaders.from_vscode'.lazy_load { paths = {
-    -- Path to the built project, perhaps in your `node_modules`
-    '~/Developer/redhat-ux/red-hat-design-tokens/editor/vscode'
-  } }
-  </script>
+  <script type="text/sample-javascript">require 'luasnip.loaders.from_vscode'.lazy_load { paths = {
+  -- Path to the built project, perhaps in your `node_modules`
+  '~/Developer/redhat-ux/red-hat-design-tokens/editor/vscode'
+} }</script>
 </rh-code-block>
 
 
@@ -146,28 +128,22 @@ Vim users can load the [vim-hexokinase](https://github.com/RRethy/vim-hexokinase
 Use the following config (lua syntax, for Neovim users) to configure hexokinase to display color values next to color aliases like `{color.brand.red}`.
 
 <rh-code-block>
-  <script type="text/sample-javascript">
-  vim.g.Hexokinase_optInPatterns = {
-    'full_hex', 'triple_hex',
-    'rgb', 'rgba',
-    'hsl', 'hsla',
-    'colour_names',
-  }
-  </script>
-
-  <script type="text/sample-javascript">
-  vim.g.Hexokinase_ftOptOutPatterns = {
-    json = { 'colour_names' },
-    yaml = { 'colour_names' },
-  }
-  </script>
-
-  <script type="text/sample-javascript">
-  vim.g.Hexokinase_palettes = {
-    -- replace with path to the built tokens package on your drive
-    vim.fn.expand'~/Developer/redhat-ux/red-hat-design-tokens/editor/neovim/hexokinase.json'
-  }
-  </script>
+  <script type="text/sample-javascript">vim.g.Hexokinase_optInPatterns = {
+  'full_hex', 'triple_hex',
+  'rgb', 'rgba',
+  'hsl', 'hsla',
+  'colour_names',
+}
+</script>
+<script type="text/sample-javascript">vim.g.Hexokinase_ftOptOutPatterns = {
+  json = { 'colour_names' },
+  yaml = { 'colour_names' },
+}
+</script>
+<script type="text/sample-javascript">vim.g.Hexokinase_palettes = {
+  -- replace with path to the built tokens package on your drive
+  vim.fn.expand'~/Developer/redhat-ux/red-hat-design-tokens/editor/neovim/hexokinase.json'
+}</script>
 </rh-code-block>
 
 <uxdot-feedback>