From be2565fe40f566765a9e20e386451d1d616cff00 Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Fri, 26 Jul 2024 14:05:35 -0400 Subject: [PATCH 1/3] docs(devs-start): fixing usage and tokens code blocks (#1724) --- docs/get-started/developers/tokens.md | 112 ++++++++++---------------- docs/get-started/developers/usage.md | 73 +++++++---------- docs/styles/styles.css | 2 +- 3 files changed, 75 insertions(+), 112 deletions(-) diff --git a/docs/get-started/developers/tokens.md b/docs/get-started/developers/tokens.md index c384f8e4dd..69728cbd45 100644 --- a/docs/get-started/developers/tokens.md +++ b/docs/get-started/developers/tokens.md @@ -8,6 +8,8 @@ permalink: /get-started/developers/tokens/index.html subnav: collection: sortedDevelopers order: 30 +importElements: + - rh-code-block --- ## How to install tokens @@ -15,9 +17,7 @@ subnav: Run the following git command to install RHDS tokens: - + @@ -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: - + @@ -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: - - - + + @@ -71,25 +65,17 @@ Reset a component's styles (preventing inheritance) by adding resetStyles to its Import tokens as JavaScript objects: - - - + + -or for tree-shakable imports: +Or tree-shakable imports: - - - + + @@ -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. - + 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: - + @@ -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}`. - - - - - + + + diff --git a/docs/get-started/developers/usage.md b/docs/get-started/developers/usage.md index 4e5dfa25d2..5b9b15f78f 100644 --- a/docs/get-started/developers/usage.md +++ b/docs/get-started/developers/usage.md @@ -27,9 +27,7 @@ React wrappers make it possible to use web components within React JSX files. Fo We'll bootstrap our React app using Vite. It's possible to use other tools for this, but that is out of the scope of this tutorial. - + This command will ask you to provide the project name, framework, and variant. @@ -40,9 +38,7 @@ This command will ask you to provide the project name, framework, and variant. Use the following command: - + @@ -53,27 +49,22 @@ to your file. Below is an example of importing `` and ``, an managing app state between them using react. - + @@ -87,10 +78,8 @@ To get web components to work with Vue, it’s pretty easy and straightforward. Add these two lines at the top of the `main.js` file in the `/src/` directory. - + @@ -99,24 +88,22 @@ Add these two lines at the top of the `main.js` file in the `/src/` directory. Add the import statements to the top of the ` + ## Other resources - [Red Hat Design System Wiki](https://github.com/RedHat-UX/red-hat-design-system/wiki) -- [Red Hat Brand Standard](https://www.redhat.com/en/about/brand/standards) +- [Red Hat Brand Standards](https://www.redhat.com/en/about/brand/standards)

Designers

diff --git a/docs/styles/styles.css b/docs/styles/styles.css index 5da66aa73d..8ae748de91 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -331,6 +331,6 @@ rh-alert p { /* TODO: Document this bug shouldn't have to force the font size the component is trying to set internally on #description */ - font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important; + font-size: var(--rh-font-size-body-text-md, 1rem) !important; } } From b661bebb1979d157f8a98edbe4943cba2439ed25 Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Fri, 26 Jul 2024 14:23:10 -0400 Subject: [PATCH 2/3] docs(nav): fixing broken link on Nav element Overview (#1726) docs(nav): fixing broken link Co-authored-by: Adam Johnson --- elements/rh-navigation/docs/00-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-navigation/docs/00-overview.md b/elements/rh-navigation/docs/00-overview.md index 1ed717f8f5..d523225bce 100644 --- a/elements/rh-navigation/docs/00-overview.md +++ b/elements/rh-navigation/docs/00-overview.md @@ -13,4 +13,4 @@ every page to ensure a consistent user experience across websites. ## Demos View a live version of this component to see how it can be customized. -View this component in action +View this component in action From 14ae69782d6cb7e6bbe45487e53167e22f095b9e Mon Sep 17 00:00:00 2001 From: Zack Hawkins Date: Fri, 2 Aug 2024 10:21:22 -0400 Subject: [PATCH 3/3] docs: quick and dirty icon update for in progress elements (#1734) * docs: quick and dirty icon update for in progress elements * docs: improve upon the icon placement in sidenav and header * docs: improve upon the icon placement in sidenav and header --------- Co-authored-by: Zack Hawkins Co-authored-by: Steven Spriggs --- CONTRIBUTING_DESIGN.md | 2 +- docs/_data/repoStatus.yaml | 26 ++++++++++++++++++- docs/_includes/layouts/base.njk | 9 +++++++ docs/_includes/layouts/pages/basic.njk | 1 + docs/_includes/layouts/pages/elements.njk | 7 +++-- docs/_includes/layouts/pages/home.njk | 1 + docs/_includes/layouts/pages/tokens.njk | 2 ++ docs/_includes/partials/component/sidenav.njk | 4 ++- 8 files changed, 47 insertions(+), 5 deletions(-) diff --git a/CONTRIBUTING_DESIGN.md b/CONTRIBUTING_DESIGN.md index f4a2af1ffc..120057cbe2 100644 --- a/CONTRIBUTING_DESIGN.md +++ b/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`, diff --git a/docs/_data/repoStatus.yaml b/docs/_data/repoStatus.yaml index 55c08846a7..b9619a9cdf 100644 --- a/docs/_data/repoStatus.yaml +++ b/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" diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index 8ba7fe5695..696f5ae58b 100644 --- a/docs/_includes/layouts/base.njk +++ b/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 -%} diff --git a/docs/_includes/layouts/pages/basic.njk b/docs/_includes/layouts/pages/basic.njk index 51582c7ce9..c125f3596d 100755 --- a/docs/_includes/layouts/pages/basic.njk +++ b/docs/_includes/layouts/pages/basic.njk @@ -5,6 +5,7 @@ importElements: - rh-footer - rh-alert - rh-subnav + - rh-tag --- diff --git a/docs/_includes/layouts/pages/elements.njk b/docs/_includes/layouts/pages/elements.njk index 2c9532cbb4..381df39f6f 100644 --- a/docs/_includes/layouts/pages/elements.njk +++ b/docs/_includes/layouts/pages/elements.njk @@ -5,7 +5,6 @@ eleventyComputed: title: "{{ doc.pageTitle }} | {{ slug | deslugify }}" importElements: - rh-alert - - rh-tag - rh-cta - rh-footer - rh-subnav @@ -13,6 +12,7 @@ eleventyComputed: - rh-table - rh-accordion - rh-badge + - rh-tag - "{{ doc.tagName or element.tagName }}" --- {%- if hasToc %} @@ -56,7 +56,10 @@ eleventyComputed:
0 %}class="has-toc"{% endif %}> -

{{ doc.alias or (slug | deslugify) }}

+ {%- set inProgress = doc.docsPage.manifest -%} + {%- set name = (doc.alias) or (slug | deslugify) %} + {%- set planned = isPlanned(repoStatus, name) %} +

{{ name }}{% if planned %} Planned{% endif %}

{%- set manifest = doc.docsPage.manifest -%} {%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%} {%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%} diff --git a/docs/_includes/layouts/pages/home.njk b/docs/_includes/layouts/pages/home.njk index 559759c2f7..a64774ae82 100755 --- a/docs/_includes/layouts/pages/home.njk +++ b/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' %} diff --git a/docs/_includes/layouts/pages/tokens.njk b/docs/_includes/layouts/pages/tokens.njk index 306cca7057..5c42328190 100644 --- a/docs/_includes/layouts/pages/tokens.njk +++ b/docs/_includes/layouts/pages/tokens.njk @@ -1,5 +1,7 @@ --- layout: layouts/base.njk +importElements: + - rh-tag ---