From ddfdd306570b0a15c72fb7d0916f2de9324d1dd6 Mon Sep 17 00:00:00 2001 From: Jim Bumgardner Date: Wed, 20 Dec 2023 20:10:17 -0800 Subject: [PATCH] Added support for category headers. --- docs/pages/content-design/odi-style-guide.md | 2 ++ .../plain-language-checklist.md | 2 ++ .../plain-language-equity-standard.md | 2 ++ docs/pages/content-design/principles.md | 3 ++- .../content-design/recommended-reading.md | 2 ++ .../innovation-skills-accelerator.md | 4 +++- .../product-craft-accessibility.md | 2 ++ docs/pages/product-management/run-of-show.md | 2 ++ docs/site/_includes/layouts/page.njk | 5 +++++ docs/site/_includes/layouts/single-column.njk | 3 +++ docs/src/css/sass/ds-site-global.scss | 21 +++++++++++++++++++ 11 files changed, 46 insertions(+), 2 deletions(-) diff --git a/docs/pages/content-design/odi-style-guide.md b/docs/pages/content-design/odi-style-guide.md index 7b804950..2a62a245 100644 --- a/docs/pages/content-design/odi-style-guide.md +++ b/docs/pages/content-design/odi-style-guide.md @@ -1,6 +1,8 @@ --- title: ODI’s style guide description: How ODI keeps our writing consistent, including the reasons for our choices +headerlabel: Guides and playbooks +headericon: book ---

These are the Office of Data and Innovation’s conventions and standard terms for writing. Our content design principles provide general guidance in how to write well.

diff --git a/docs/pages/content-design/plain-language-checklist.md b/docs/pages/content-design/plain-language-checklist.md index e08088ab..d425ffb5 100644 --- a/docs/pages/content-design/plain-language-checklist.md +++ b/docs/pages/content-design/plain-language-checklist.md @@ -2,6 +2,8 @@ title: Plain language checklist description: ODI's detailed guide for making sure content is in plain language layout: single-column +headerlabel: Guides and playbooks +headericon: book --- Adapted from the US Department of Labor’s [Use plain language for claimant notices](https://www.dol.gov/agencies/eta/ui-modernization/claimant-notices) diff --git a/docs/pages/content-design/plain-language-equity-standard.md b/docs/pages/content-design/plain-language-equity-standard.md index c9fa1221..67f219f9 100644 --- a/docs/pages/content-design/plain-language-equity-standard.md +++ b/docs/pages/content-design/plain-language-equity-standard.md @@ -2,6 +2,8 @@ layout: page title: Plain language equity standard description: ODI’s recommendations for how to help everyone understand content +headerlabel: Standards and principles +headericon: star ---

All state departments should:

diff --git a/docs/pages/content-design/principles.md b/docs/pages/content-design/principles.md index 82b8790f..a49e3f7f 100644 --- a/docs/pages/content-design/principles.md +++ b/docs/pages/content-design/principles.md @@ -2,8 +2,9 @@ title: Content design principles description: ODI’s 7 keys for writing great content, including ways to implement them layout: single-column +headerlabel: Standards and principles +headericon: star --- -

Great content takes work. The good news is that anyone can do it.

These 7 principles contain strategies and tips to help you write excellent content. diff --git a/docs/pages/content-design/recommended-reading.md b/docs/pages/content-design/recommended-reading.md index cc4dc927..747326ee 100644 --- a/docs/pages/content-design/recommended-reading.md +++ b/docs/pages/content-design/recommended-reading.md @@ -1,6 +1,8 @@ --- title: "Recommended reading: content design" description: Articles, guides, and tools to learn more about content design +headerlabel: Recommended reading +headericon: bookmark ---

The Office of Data and Innovation (ODI) periodically reviews and adds new resources. We select resources that are easy for people new to plain language and content design to understand and put into practice.

diff --git a/docs/pages/human-centered-design/innovation-skills-accelerator.md b/docs/pages/human-centered-design/innovation-skills-accelerator.md index 801243ba..5b54900a 100644 --- a/docs/pages/human-centered-design/innovation-skills-accelerator.md +++ b/docs/pages/human-centered-design/innovation-skills-accelerator.md @@ -3,6 +3,8 @@ title: Innovation Skills Accelerator description: A 15-unit, self-paced course available to all State of California staff layout: single-column keywords: +headerlabel: Training +headericon: ribbon ---

This 15-unit, self-paced course covers:

@@ -14,6 +16,6 @@ keywords: State of California staff can take the Accelerator for free. Just sign up with your ca.gov email address. - +Sign up for the Accelerator Note: Clicking this link will take you from the Innovation Hub to innovate-us.org. This is not a state website. Be mindful of the information you provide while using that website. Their terms of use apply to any information you share with them. diff --git a/docs/pages/product-management/product-craft-accessibility.md b/docs/pages/product-management/product-craft-accessibility.md index 02d044f3..9d3bc523 100644 --- a/docs/pages/product-management/product-craft-accessibility.md +++ b/docs/pages/product-management/product-craft-accessibility.md @@ -1,6 +1,8 @@ --- title: "Product craft: accessibility" description: Videos, guides, and presentations about how to help everyone access information +headerlabel: Recommended reading +headericon: bookmark ---

Making things accessible is an important part of product management. These are the ODI product managers’ favorite accessibility resources.

diff --git a/docs/pages/product-management/run-of-show.md b/docs/pages/product-management/run-of-show.md index bf3ec607..a8427479 100644 --- a/docs/pages/product-management/run-of-show.md +++ b/docs/pages/product-management/run-of-show.md @@ -2,6 +2,8 @@ title: Run-of-show description: How to keep things organized in the lead up to a launch, announcement, or update layout: single-column +headerlabel: Templates +headericon: templates ---

A run-of-show tracker is a single unified table, organized by day and time.

diff --git a/docs/site/_includes/layouts/page.njk b/docs/site/_includes/layouts/page.njk index 7f8f5311..af374e14 100644 --- a/docs/site/_includes/layouts/page.njk +++ b/docs/site/_includes/layouts/page.njk @@ -14,9 +14,14 @@
+
+ {% if headerlabel %} +
{{ headerlabel }}
+ {% endif %}

{{ title | safe }}

+
{% block contentNavigation %} diff --git a/docs/site/_includes/layouts/single-column.njk b/docs/site/_includes/layouts/single-column.njk index 3a4640ae..aa2c2d40 100644 --- a/docs/site/_includes/layouts/single-column.njk +++ b/docs/site/_includes/layouts/single-column.njk @@ -14,6 +14,9 @@
+ {% if headerlabel %} +
{{ headerlabel }}
+ {% endif %}

{{ title | safe }}

diff --git a/docs/src/css/sass/ds-site-global.scss b/docs/src/css/sass/ds-site-global.scss index e8f17a98..e91de57a 100644 --- a/docs/src/css/sass/ds-site-global.scss +++ b/docs/src/css/sass/ds-site-global.scss @@ -109,6 +109,27 @@ span.title-card-header-label { vertical-align:middle; } +div.content-page-header { + font-size: 14px; + border: 1px solid ; + font-weight: 400; + height: 26px; + padding-right:12px; + border-radius:8px; + display: inline-block; + position: relative; + background-image: url(/img/tile-icon-star.png); + background-repeat: no-repeat; + background-size: 24px; + background-position: left 4px center; + padding-left: 32px; +} + +span.content-page-header-label { + vertical-align:middle; +} + + /* HOW TO USE TILES */ div.howtouse-grid-wrapper { display: grid;