diff --git a/.pfe.config.json b/.pfe.config.json index 3238753a4f..24499216d2 100644 --- a/.pfe.config.json +++ b/.pfe.config.json @@ -16,8 +16,7 @@ "description": "Red Hat Design System", "componentSubpath": "elements", "stylesheets": [ - "/docs/assets/base.css", - "/docs/assets/demos.css" + "/docs/styles/dev-server/styles.css" ] } } diff --git a/CONTRIBUTING_DESIGN.md b/CONTRIBUTING_DESIGN.md index 1334a2ea78..f4a2af1ffc 100644 --- a/CONTRIBUTING_DESIGN.md +++ b/CONTRIBUTING_DESIGN.md @@ -57,7 +57,7 @@ Most pages should have front matter that looks like this: ```jinja --- -layout: layout-basic.njk +layout: layouts/pages/basic.njk title: Grid order: -10 tags: @@ -73,7 +73,7 @@ tags: ### Getting pages into the navigation The navigation is an included template: -`pages/component/header.njk` +`pages/partials/component/sidenav.njk` It is a mixture of hardcoding and dynamic listing so that it's _hopefully_ easy to understand. @@ -129,14 +129,14 @@ Here's a two simple examples: ```jinja --- -layout: layout-basic.njk +layout: layouts/pages/basic.njk title: Example page --- ``` ```jinja --- -layout: layout-home.njk +layout: layouts/pages/home.njk title: Home --- ``` @@ -146,7 +146,7 @@ This tells 11ty what the page template should be (relative to the `pages` folder Here's an example including tags, which is a multi-value piece of data. ```jinja --- -layout: layout-basic.njk +layout: layouts/pages/basic.njk title: Accordion Element tags: - javascript @@ -164,7 +164,7 @@ the components to be used on the page: ```jinja --- -layout: layout-basic.njk +layout: layouts/pages/basic.njk title: Card tags: - component diff --git a/docs/404.njk b/docs/404.njk index 7d2fb6488f..465b133aec 100644 --- a/docs/404.njk +++ b/docs/404.njk @@ -1,35 +1,30 @@ --- -layout: layout-basic.njk +layout: layouts/pages/basic.njk title: Oops! permalink: 404.html --- - -{% import 'component/components.njk' as components %} - -
-

404 error

-

This is embarrassing, we can’t find that page

-

Try one of these popular links instead

- -
+
+

404 error

+

This is embarrassing, we can’t find that page

+

Try one of these popular links instead

+ +
-
+
+

Contact us

+

If you feel that you reached this page in error, contact us and we'll point you in the right direction.

-
- {% call components.section("Feedback or requests") -%} -

Do you have any feedback? Or do you need to request something? Create an issue in our GitHub repo if so.

- {%- endcall %} -
-
- {% call components.section("Contact us") -%} -

If you feel that you reached this page in error, contact us and we'll point you in the right direction.

- {%- endcall %} -
-
+ +

Feedback or requests

+

Do you have any feedback? Or do you need to request something? Create an issue in our GitHub repo if so.

+ + diff --git a/docs/_data/comingSoonItems.yaml b/docs/_data/comingSoonItems.yaml index ac522796d9..48f333d1d3 100644 --- a/docs/_data/comingSoonItems.yaml +++ b/docs/_data/comingSoonItems.yaml @@ -1,2 +1,3 @@ - rh-breadcrumb -- rh-footnote \ No newline at end of file +- rh-footnote +- rh-jump-links \ No newline at end of file diff --git a/docs/_data/playgrounds.cjs b/docs/_data/playgrounds.cjs index b4d7b5c9fc..139b065396 100644 --- a/docs/_data/playgrounds.cjs +++ b/docs/_data/playgrounds.cjs @@ -109,8 +109,12 @@ module.exports = async function(data) { const playgroundConfigsMap = new Map(); - const baseCssPath = url.pathToFileURL(path.join(process.cwd(), 'docs/assets/base.css')); - const baseCssSource = await fs.readFile(baseCssPath.pathname, 'utf8'); + const resetCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/reset.css')); + const resetCSSSource = await fs.readFile(resetCSS.pathname, 'utf8'); + const fontsCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/fonts.css')); + const fontsCSSSource = await fs.readFile(fontsCSS.pathname, 'utf8'); + const typographyCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/typography.css')); + const typographyCSSSource = await fs.readFile(typographyCSS.pathname, 'utf8'); for (const [primaryElementName, demos] of Object.entries(demoManifests)) { const fileMap = new Map(); @@ -121,25 +125,24 @@ module.exports = async function(data) { } const demoSource = await fs.readFile(demo.filePath, 'utf8'); - const fragment = parseFragment(demoSource); - const baseCssPathPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../'; + const cssPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../'; append( fragment, Tools.createCommentNode('playground-fold'), Tools.createElement('link', { rel: 'stylesheet', - href: 'https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css', + href: `${cssPrefix}reset.css`, }), Tools.createElement('link', { rel: 'stylesheet', - href: 'https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css', + href: `${cssPrefix}fonts.css`, }), Tools.createElement('link', { rel: 'stylesheet', - href: `${baseCssPathPrefix}rhds-demo-base.css`, + href: `${cssPrefix}typography.css`, }), Tools.createTextNode('\n\n'), Tools.createCommentNode('playground-fold-end'), @@ -148,10 +151,8 @@ module.exports = async function(data) { const filename = getDemoFilename(demo); /** @see docs/_plugins/rhds.cjs demoPaths transform */ - const base = url.pathToFileURL(path.join(process.cwd(), - 'elements', - primaryElementName, - 'demo/')); + const base = + url.pathToFileURL(path.join(process.cwd(), 'elements', primaryElementName, 'demo/')); const docsDir = url.pathToFileURL(path.join(process.cwd(), 'docs/')); const isMainDemo = filename === 'demo/index.html'; const demoSlug = filename.split('/').at(1); @@ -160,7 +161,8 @@ module.exports = async function(data) { if (subresourceURL && !subresourceURL.startsWith('http')) { const subresourceFileURL = !subresourceURL.startsWith('/') ? // non-tabular ternary - new URL(subresourceURL, base) + + new URL(subresourceURL, base) : new URL(subresourceURL.replace('/', './'), docsDir); try { const resourceName = @@ -174,18 +176,26 @@ module.exports = async function(data) { fileMap.set(resourceName, { content, hidden: true }); } } catch (e) { - throw new SubresourceError( - `Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`, - e, - subresourceFileURL, - ); + throw new SubresourceError(`Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`, e, subresourceFileURL); } } }; - fileMap.set('demo/rhds-demo-base.css', { + fileMap.set('demo/reset.css', { + contentType: 'text/css', + content: resetCSSSource, + hidden: true, + }); + + fileMap.set('demo/fonts.css', { + contentType: 'text/css', + content: fontsCSSSource, + hidden: true, + }); + + fileMap.set('demo/typography.css', { contentType: 'text/css', - content: baseCssSource, + content: typographyCSSSource, hidden: true, }); @@ -204,9 +214,10 @@ module.exports = async function(data) { const attrs = getAttrMap(el); await addSubresourceURL(attrs.href); } catch (e) { - // we can swallow the error for the demo base file because we wrote it ourselves above. + // we can swallow the error for the demo typography and font file because we wrote it ourselves above. // maybe not the most elegant solution, but it works - if (e.subresourceFileURL?.href?.endsWith('rhds-demo-base.css')) { + if (e.subresourceFileURL?.href?.endsWith('typography.css') + || e.subresourceFileURL?.href?.endsWith('fonts.css')) { continue; } else { // In order to surface the error to the user, let's enable console logging diff --git a/docs/_includes/component/about.njk b/docs/_includes/component/about.njk deleted file mode 100644 index f7207f2369..0000000000 --- a/docs/_includes/component/about.njk +++ /dev/null @@ -1,33 +0,0 @@ -{# - Section macro - Creates a section of the page with a heading - - @param headline Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 2 -#} - -{% macro section(headline, palette = "default", headingLevel = "2") %} -
- {{ headline }} - {{ caller() }} -
-{% endmacro %} - -{# - Example - An example image or component - - @param headline (Optional) Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 3 -#} - -{% macro example(headline, palette = "light", headingLevel = "3") %} -
- {% if headline %} - {{ headline }} - {% endif %} - {{ caller() }} -
-{% endmacro %} diff --git a/docs/_includes/component/components.njk b/docs/_includes/component/components.njk deleted file mode 100644 index 75619c77f3..0000000000 --- a/docs/_includes/component/components.njk +++ /dev/null @@ -1,35 +0,0 @@ -{# - Section macro - Creates a section of the page with a heading - - @param headline Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 2 -#} - -{% macro section(headline, palette = "default", headingLevel = "2") %} -
- - {{ headline }} - {{ caller() }} -
-{% endmacro %} - -{# - Example - An example image or component - - @param headline (Optional) Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 3 -#} - -{% macro example(headline, palette = "light", headingLevel = "3") %} -
- {% if headline %} - - {{ headline }} - {% endif %} - {{ caller() }} -
-{% endmacro %} diff --git a/docs/_includes/component/documentation.njk b/docs/_includes/component/documentation.njk deleted file mode 100755 index 1942b6335d..0000000000 --- a/docs/_includes/component/documentation.njk +++ /dev/null @@ -1,10 +0,0 @@ -{% macro output(content) %} -
- -

Documentation

- - - {{ content | safe }} - -
-{% endmacro%} \ No newline at end of file diff --git a/docs/_includes/component/foundations.njk b/docs/_includes/component/foundations.njk deleted file mode 100644 index f7207f2369..0000000000 --- a/docs/_includes/component/foundations.njk +++ /dev/null @@ -1,33 +0,0 @@ -{# - Section macro - Creates a section of the page with a heading - - @param headline Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 2 -#} - -{% macro section(headline, palette = "default", headingLevel = "2") %} -
- {{ headline }} - {{ caller() }} -
-{% endmacro %} - -{# - Example - An example image or component - - @param headline (Optional) Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 3 -#} - -{% macro example(headline, palette = "light", headingLevel = "3") %} -
- {% if headline %} - {{ headline }} - {% endif %} - {{ caller() }} -
-{% endmacro %} diff --git a/docs/_includes/component/get-started.njk b/docs/_includes/component/get-started.njk deleted file mode 100644 index f7207f2369..0000000000 --- a/docs/_includes/component/get-started.njk +++ /dev/null @@ -1,33 +0,0 @@ -{# - Section macro - Creates a section of the page with a heading - - @param headline Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 2 -#} - -{% macro section(headline, palette = "default", headingLevel = "2") %} -
- {{ headline }} - {{ caller() }} -
-{% endmacro %} - -{# - Example - An example image or component - - @param headline (Optional) Text to go in the heading - @param palette Palette to apply, e.g. lightest, light see components/_section.scss - @param headingLevel The heading level, defaults to 3 -#} - -{% macro example(headline, palette = "light", headingLevel = "3") %} -
- {% if headline %} - {{ headline }} - {% endif %} - {{ caller() }} -
-{% endmacro %} diff --git a/docs/_includes/component/header.njk b/docs/_includes/component/header.njk deleted file mode 100755 index e0180926e3..0000000000 --- a/docs/_includes/component/header.njk +++ /dev/null @@ -1,206 +0,0 @@ -
-
- - - -
- - - - - -
- -
-
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk deleted file mode 100644 index 32f1f44865..0000000000 --- a/docs/_includes/layout-base.njk +++ /dev/null @@ -1,67 +0,0 @@ -{%- set extraPageClasses = bodyClasses or "" -%} -{%- if title -%} - {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%} -{%- endif -%} - - - - - - {{ data.title or title }} | Red Hat design system - - - - - - - - - - - - - - - - - - - - - {% sassFile false %} - {% for stylesheet in stylesheets %} - - {% endfor %} - - - - - - {% for tag in importElements %} - - {% endfor %} - - - - - - -
- {{ content | safe }} -
- - diff --git a/docs/_includes/layout-basic.njk b/docs/_includes/layout-basic.njk deleted file mode 100755 index 00545c842a..0000000000 --- a/docs/_includes/layout-basic.njk +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: layout-base.njk -importElements: - - rh-cta - - rh-footer - - rh-alert ---- - -{% include 'component/header.njk' %} - -
-
-
-
-

{{ title }}

-
-
-
-
- {% if hasToc %} - {{ content | toc | safe }} - {% endif %} - {{ content | safe }} -
-
-
- {% include 'component/footer.njk' %} -
diff --git a/docs/_includes/layout-home.njk b/docs/_includes/layout-home.njk deleted file mode 100755 index b93d5f9481..0000000000 --- a/docs/_includes/layout-home.njk +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: layout-base.njk -importElements: - - rh-cta - - rh-footer ---- - -{% include 'component/header.njk' %} - -
-
- {{ content | safe }} -
- - {% include 'component/footer.njk' %} -
diff --git a/docs/_includes/layout-with-subnav.njk b/docs/_includes/layout-with-subnav.njk deleted file mode 100644 index 81f792b66d..0000000000 --- a/docs/_includes/layout-with-subnav.njk +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: layout-base.njk -importElements: - - rh-alert - - rh-cta - - rh-footer - - rh-subnav - - rh-tag - - rh-badge - - rh-code-block ---- - -{% include 'component/header.njk' %} - -
-
-
-
-

{{ heading or title }}

- {% if subNavCollection %} - - {% for tab in collections[subNavCollection] %} - - {{ tab.data.title }} - {% endfor %} - - {% endif %} -
-
-
-
- {% if hasToc %} - {{ content | toc | safe }} - {% endif %} - {{ content | safe }} -
-
-
- {% include 'component/footer.njk' %} -
\ No newline at end of file diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk new file mode 100644 index 0000000000..3699907608 --- /dev/null +++ b/docs/_includes/layouts/base.njk @@ -0,0 +1,41 @@ +{%- set extraPageClasses = bodyClasses or "" -%} +{%- if title -%} + {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%} +{%- endif -%} + + + + + {% include "../partials/meta.html" %} + + + + {# On browsers that don't yet support native declarative shadow DOM, a + paint can occur after some or all pre-rendered HTML has been parsed, + but before the declarative shadow DOM polyfill has taken effect. This + paint is undesirable because it won't include any component shadow DOM. + To prevent layout shifts that can result from this render, we use a + "dsd-pending" attribute to ensure we only paint after we know + shadow DOM is active. #} + + {# if javascript is turned off we want to ensure the page renders #} + + + {% include "../partials/javascript/global.html" %} + + + + Skip to main content + {{ content | safe }} + + diff --git a/docs/_includes/layout-demo.njk b/docs/_includes/layouts/demo.njk similarity index 75% rename from docs/_includes/layout-demo.njk rename to docs/_includes/layouts/demo.njk index 2b06163269..b03e610481 100644 --- a/docs/_includes/layout-demo.njk +++ b/docs/_includes/layouts/demo.njk @@ -5,11 +5,10 @@ {{ demo.title or demo.tagName }} | Red Hat Design System + - - - - + + diff --git a/docs/_includes/layouts/pages/basic.njk b/docs/_includes/layouts/pages/basic.njk new file mode 100755 index 0000000000..e1ddaa39dd --- /dev/null +++ b/docs/_includes/layouts/pages/basic.njk @@ -0,0 +1,44 @@ +--- +layout: layouts/base.njk +importElements: + - rh-cta + - rh-footer + - rh-alert + - rh-subnav +--- + + + + +{% if hasToc %} + + +{% endif %} +{% if tokenSearch %} + + +{% endif %} + +{% include 'partials/component/masthead.njk' %} +{% include 'partials/component/sidenav.njk' %} +
+ +
0 %}class="has-toc"{% endif %}> + + {% include 'partials/component/header.njk' %} + {% if hasToc and (content | toc).length > 0 %} + + {% endif %} + +
+ {{ content | safe }} +
+ +
+ {% include "partials/component/back-to-top.njk" %} +
+{% include 'partials/component/footer.njk' %} diff --git a/docs/_includes/layouts/pages/home.njk b/docs/_includes/layouts/pages/home.njk new file mode 100755 index 0000000000..559759c2f7 --- /dev/null +++ b/docs/_includes/layouts/pages/home.njk @@ -0,0 +1,15 @@ +--- +layout: layouts/base.njk +importElements: + - rh-cta + - rh-footer +--- + +{% include 'partials/component/masthead.njk' %} +{% include 'partials/component/sidenav.njk' %} +
+ {{ content | safe }} + {% include "partials/component/back-to-top.njk" %} +
+{% include 'partials/component/footer.njk' %} + diff --git a/docs/_includes/layout-tokens.njk b/docs/_includes/layouts/pages/tokens.njk similarity index 62% rename from docs/_includes/layout-tokens.njk rename to docs/_includes/layouts/pages/tokens.njk index 9e34fb19a0..306cca7057 100644 --- a/docs/_includes/layout-tokens.njk +++ b/docs/_includes/layouts/pages/tokens.njk @@ -1,16 +1,8 @@ --- -layout: layout-base.njk +layout: layouts/base.njk --- -{% include 'component/header.njk' %} - -
-
-
-
+{% include 'partials/component/masthead.njk' %} +{% include 'partials/component/sidenav.njk' %} +
+
+

{{ title }}

-
-
-
-
{{ content | safe }}
-
- {% include 'component/footer.njk' %} + + +
+ {{ content | safe }} +
+ + {% include "partials/component/back-to-top.njk" %}
- +{% include 'partials/component/footer.njk' %} + diff --git a/docs/_includes/accessibility/1.2.1-A.md b/docs/_includes/partials/accessibility/1.2.1-A.md similarity index 100% rename from docs/_includes/accessibility/1.2.1-A.md rename to docs/_includes/partials/accessibility/1.2.1-A.md diff --git a/docs/_includes/accessibility/1.2.2-A.md b/docs/_includes/partials/accessibility/1.2.2-A.md similarity index 100% rename from docs/_includes/accessibility/1.2.2-A.md rename to docs/_includes/partials/accessibility/1.2.2-A.md diff --git a/docs/_includes/accessibility/1.3.1-A.md b/docs/_includes/partials/accessibility/1.3.1-A.md similarity index 100% rename from docs/_includes/accessibility/1.3.1-A.md rename to docs/_includes/partials/accessibility/1.3.1-A.md diff --git a/docs/_includes/accessibility/1.4.1-A.md b/docs/_includes/partials/accessibility/1.4.1-A.md similarity index 100% rename from docs/_includes/accessibility/1.4.1-A.md rename to docs/_includes/partials/accessibility/1.4.1-A.md diff --git a/docs/_includes/accessibility/2.1.1-A.md b/docs/_includes/partials/accessibility/2.1.1-A.md similarity index 100% rename from docs/_includes/accessibility/2.1.1-A.md rename to docs/_includes/partials/accessibility/2.1.1-A.md diff --git a/docs/_includes/accessibility/2.1.3-AAA.md b/docs/_includes/partials/accessibility/2.1.3-AAA.md similarity index 100% rename from docs/_includes/accessibility/2.1.3-AAA.md rename to docs/_includes/partials/accessibility/2.1.3-AAA.md diff --git a/docs/_includes/accessibility/2.4.3-A.md b/docs/_includes/partials/accessibility/2.4.3-A.md similarity index 100% rename from docs/_includes/accessibility/2.4.3-A.md rename to docs/_includes/partials/accessibility/2.4.3-A.md diff --git a/docs/_includes/accessibility/2.5.5-AAA.md b/docs/_includes/partials/accessibility/2.5.5-AAA.md similarity index 100% rename from docs/_includes/accessibility/2.5.5-AAA.md rename to docs/_includes/partials/accessibility/2.5.5-AAA.md diff --git a/docs/_includes/accessibility/ariaguide.md b/docs/_includes/partials/accessibility/ariaguide.md similarity index 91% rename from docs/_includes/accessibility/ariaguide.md rename to docs/_includes/partials/accessibility/ariaguide.md index ac2374ccb9..5afdcc3451 100644 --- a/docs/_includes/accessibility/ariaguide.md +++ b/docs/_includes/partials/accessibility/ariaguide.md @@ -1,4 +1,3 @@ -{% section %} ## ARIA Authoring Practices Guide (APG) Learn to use the accessibility semantics defined by the [Accessible Rich Internet Application](https://www.w3.org/WAI/) @@ -7,4 +6,3 @@ Learn to use the accessibility semantics defined by the View APG resources -{% endsection %} diff --git a/docs/_includes/accessibility/focusorder.md b/docs/_includes/partials/accessibility/focusorder.md similarity index 100% rename from docs/_includes/accessibility/focusorder.md rename to docs/_includes/partials/accessibility/focusorder.md diff --git a/docs/_includes/accessibility/wcag.md b/docs/_includes/partials/accessibility/wcag.md similarity index 99% rename from docs/_includes/accessibility/wcag.md rename to docs/_includes/partials/accessibility/wcag.md index 753b88276e..80f8175f3c 100644 --- a/docs/_includes/accessibility/wcag.md +++ b/docs/_includes/partials/accessibility/wcag.md @@ -1,4 +1,5 @@ ## Web Content Accessibility Guidelines +

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines diff --git a/docs/_includes/partials/component/back-to-top.njk b/docs/_includes/partials/component/back-to-top.njk new file mode 100644 index 0000000000..5c03c0ca56 --- /dev/null +++ b/docs/_includes/partials/component/back-to-top.njk @@ -0,0 +1,45 @@ + + + +

+ +
+ + \ No newline at end of file diff --git a/docs/_includes/feedback.html b/docs/_includes/partials/component/feedback.html similarity index 92% rename from docs/_includes/feedback.html rename to docs/_includes/partials/component/feedback.html index ff2ad10e31..88cfd9904a 100644 --- a/docs/_includes/feedback.html +++ b/docs/_includes/partials/component/feedback.html @@ -1,6 +1,6 @@ {% set related = (doc.tagName if doc.tagName else (title | slug)) | relatedItems %} -{% feedback %} + {% if related.length %}

Related elements or patterns