From 2226b33081e2584c61f2f0ca897326d5a66f2f1d Mon Sep 17 00:00:00 2001 From: Bernard Date: Tue, 8 Dec 2020 17:31:17 -0600 Subject: [PATCH] [WNMGDS-711] Update doc site for child ds (#896) * Use options.name in doc site * Make analytics tag only appear on core * Consistently use the same description * Updated snapshot Co-authored-by: Scott Weber --- package.json | 2 +- .../design-system-docs/src/pages/index.md | 4 +- .../generateDocPage.test.js.snap | 15 +++--- .../docs/generatePages/generateDocPage.js | 46 +++++++++++-------- 4 files changed, 36 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index f05f4969c6..fdf0c525fb 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "workspaces": [ "packages/*" ], - "description": "A shared set of design and code elements for creating accessible and consistent websites", + "description": "A set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.", "repository": "https://github.com/CMSgov/design-system", "scripts": { "start": "yarn cmsds start", diff --git a/packages/design-system-docs/src/pages/index.md b/packages/design-system-docs/src/pages/index.md index e86ba536a8..dbef24eeea 100644 --- a/packages/design-system-docs/src/pages/index.md +++ b/packages/design-system-docs/src/pages/index.md @@ -3,9 +3,9 @@ title: Introduction weight: -100 --- -The design system is a set of open-source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, [utility classes]({{root}}/utilities/overview), and a [grid framework]({{root}}/utilities/grid/) to allow teams to quickly prototype and build accessible, responsive, production-ready websites. +The design system is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, [utility classes]({{root}}/utilities/overview), and a [grid framework]({{root}}/utilities/grid/) to allow teams to quickly prototype and build accessible, responsive, production-ready websites. -It is currently being applied to [HealthCare.gov](https://www.healthcare.gov/). It is open-source and freely available to use by anyone. +It is currently being applied to [HealthCare.gov](https://www.healthcare.gov/) and [Medicare.gov](https://www.medicare.gov/). It is open-source and freely available to use by anyone. ## Getting started diff --git a/packages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap b/packages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap index c244c00804..f19f7549d3 100644 --- a/packages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap +++ b/packages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap @@ -2,14 +2,13 @@ exports[`generateDocPage generates correct head and uri 1`] = ` Object { - "head": "Button - CMS Design System - - - - -", + "head": " + Button - undefined + + + + + ", "uri": "components/button", } `; diff --git a/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js b/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js index c004f8e6d6..9627d98355 100644 --- a/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js +++ b/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js @@ -33,19 +33,24 @@ function generateDocPage(routes, page, docsPath, options) { const rootPath = options.rootPath && options.rootPath !== '' ? `${options.rootPath}/` : ''; - const head = `${seo(page, rootPath)} - - - - ${analytics()}`; + // TODO: Add the ability for child design systems to customize this easier, i.e. use their own tealium utag + const head = ` + ${seo(page, options)} + + + + ${options.core ? analytics() : ''} + `; const body = ` -
${componentRenderer()}
- -`; +
${componentRenderer()}
+ + + `; + return savePage( { uri: page.referenceURI, @@ -63,29 +68,30 @@ function generateDocPage(routes, page, docsPath, options) { */ function analytics() { const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev'; - return ` -`; + return ` + + + `; } /** * Output SEO tags for the documentation's permalink page * @param {Object} page - * @param {String} rootPath - Root docs site path * @return {String} */ -function seo(page) { +function seo(page, options) { const html = []; if (page.referenceURI === '') { // Homepage html.push( - '' + '' ); - html.push('CMS Design System | An open source design and front-end toolkit'); + html.push(`${options.name} | An open source design and front-end toolkit`); } else { - html.push(`${page.header} - CMS Design System`); + html.push(`${page.header} - ${options.name}`); } return html.join('');