docs: element updates (#1256)

* docs: element updates

* docs: additional changes from review

* chore: add changeset

* docs: update changeset verbiage

.changeset/loud-dolphins-enjoy.md

@@ -0,0 +1,7 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-avatar>`:
+`<rh-code-block>`:  
+`<rh-navigation-secondary>`: Updated custom elements manifest summaries

docs/_plugins/rhds.cjs

@@ -198,6 +198,10 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     return related;
   });
 
+  eleventyConfig.addFilter('makeSentenceCase', function(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+  });
+
   eleventyConfig.addCollection('elementDocs', async function(collectionApi) {
     const { pfeconfig } = eleventyConfig?.globalData ?? {};
     /**
@@ -215,6 +219,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
         capitalize(filePath.split(path.sep).pop()?.split('.').shift()?.replace(/^\d+-/, '') ?? '');
       const pageSlug = slugify(pageTitle, { strict: true, lower: true });
       /** e.g. `/elements/call-to-action/code/index.html` */
+      const overviewHref = `/elements/${slug}/`;
       const permalink =
           pageSlug === 'overview' ? `/elements/${slug}/index.html`
         : `/elements/${slug}/${pageSlug}/index.html`;
@@ -232,6 +237,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
         screenshotPath,
         permalink,
         href,
+        overviewHref
       };
     }
 

docs/elements/index.md

@@ -1,6 +1,6 @@
 ---
 layout: layout-basic.njk
-title: Elements
+title: All elements
 summaries:
   audio-player: Plays audio clips and includes other features
   jump-links: Moves users to specific content when a link is selected
@@ -26,7 +26,7 @@ summaries:
 {%- for tagName, docs in collections.elementDocs | groupby('tagName') -%}
   {%- set doc = docs[0] -%}
   {%- set slug = doc.slug -%}
-  {%- set title = docs | getTitleFromDocs -%}
+  {%- set title = docs | getTitleFromDocs | makeSentenceCase -%}
   {%- set comingSoon = tagName in comingSoonItems  -%}
   {% if comingSoon %}
     {%- set title = [title, "(coming soon)"] | join(" ") -%}
@@ -42,7 +42,7 @@ summaries:
   {% endif %}
 
   <div class="padding-stacked">
-    {% if not comingSoon %}<a href="{{ doc.href | url }}">{% endif %}
+    {% if not comingSoon %}<a href="{{ doc.overviewHref | url }}">{% endif %}
       {% example palette="descriptive",
                  width=340,
                  alt=linkTitle,

elements/rh-avatar/rh-avatar.ts

@@ -25,7 +25,7 @@ DEFAULT_AVATARS.saturated = DEFAULT_AVATARS.dark;
 /**
  * An avatar is a small thumbnail representation of a user.
  *
- * @summary  An avatar is a small thumbnail representation of a user.
+ * @summary Visually represents a user in a masthead or navigation
  *
  * @slot name     - The subject's name
  * @slot subtitle - auxiliary information about the subject, e.g. job title

elements/rh-code-block/rh-code-block.ts

@@ -8,7 +8,7 @@ import style from './rh-code-block.css';
 
 /**
  * A code block is formatted text within a container.
- * @summary Formatted code strings in a container.
+ * @summary Formats code strings within a container
  * @slot - A non-executable script tag containing the sample content. JavaScript
  *         samples should use the type `text/sample-javascript`. HTML samples
  *         containing script tags must escape the closing `</script>` tag.

elements/rh-navigation-secondary/rh-navigation-secondary.ts

@@ -37,7 +37,7 @@ import { state } from 'lit/decorators/state.js';
 /**
  * The Secondary navigation is used to connect a series of pages together. It displays wayfinding content and links relevant to the page it is placed on. It should be used in conjunction with the [primary navigation](../navigation-primary).
  *
- * @summary  Guides users through a task with sequential steps
+ * @summary Propagates related content across a series of pages
  *
  * @slot logo           - Logo added to the main nav bar, expects `<a>Text</a> | <a><svg/></a> | <a><img/></a>` element
  * @slot nav            - Navigation list added to the main nav bar, expects `<ul>` element