Skip to content

Commit

Permalink
fix: correct heading order throughout build site docs [SRED-243] (#404)
Browse files Browse the repository at this point in the history
  • Loading branch information
hs4man21 authored May 18, 2023
1 parent f819435 commit cc5af05
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
};
return (
<Panel id="open-nav">
<Container id="sidebar-container" as="nav" aria-label="Sections" >
<Container id="sidebar-container" as="nav" aria-label="Sections">
{navigation &&
navigation.map((nav, index) => {
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ export default function TableOfContents({ css, headings }) {

return (
<Container css={css}>
<Header css={{ margin: "0 $025" }} as="h3">
<Header
css={{ margin: "0 $025" }} as="h2"
>
Table of Contents
</Header>
<List>
Expand Down
4 changes: 3 additions & 1 deletion build.washingtonpost.com/docs/foundations/color.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: Color
description: Color token values are defined by their context. There are two contexts "light" and "dark" context. Toggle the sun/moon in the top right of the site to see each context.
---

### Table of contents
<BR />

## Table of contents

- [Theme and semantic tokens](/foundations/color#Theme_and_Semantic_tokens)
- [Color tokens](/foundations/color#Color%20tokens)
Expand Down
2 changes: 1 addition & 1 deletion build.washingtonpost.com/docs/foundations/icons.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ description:

If you do not see an icon that you require for your project, please refer to our [WAM (WPDS-Asset manager)](/foundations/wam) on how to contribute.

## <BR />
<BR />

## Available icons

Expand Down
20 changes: 10 additions & 10 deletions build.washingtonpost.com/docs/foundations/principles.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json";

## Guidance

#### Hierarchy and layout structure
### Hierarchy and layout structure

Utilize color to separate sections of information and highlight elements of importance.

Expand All @@ -42,7 +42,7 @@ Utilize color to separate sections of information and highlight elements of impo

<BR size="xl" />

#### Affordance
### Affordance

Use color to create an [affordance](https://www.merriam-webster.com/dictionary/affordance#:~:text=Definition%20of%20affordance,those%20affordances%20are%20fairly%20obvious) to signal interaction, call to action, or a link.

Expand All @@ -58,7 +58,7 @@ Use color to create an [affordance](https://www.merriam-webster.com/dictionary/a

<BR size="xl" />

#### System status
### System status

`Semantic colors` represent system status of default, success, or failed states when completing an action or goal.

Expand All @@ -75,7 +75,7 @@ Use color to create an [affordance](https://www.merriam-webster.com/dictionary/a

<BR size="xl" />

#### Editorial tone
### Editorial tone

Color used within the editorial palette to differentiate content with various lines of coverage.

Expand All @@ -92,7 +92,7 @@ Color used within the editorial palette to differentiate content with various li

<BR size="xl" />

#### Illustration
### Illustration

Apply color to illustrations and icons to achieve a visual style that varies across editorial tones, product functions, and sub-brand art direction.

Expand All @@ -108,7 +108,7 @@ Apply color to illustrations and icons to achieve a visual style that varies acr

<BR size="xl" />

#### Brand recognition
### Brand recognition

Sub-brands have a unique palette, art direction, visual look, and distinction from The Washington Post brand.

Expand All @@ -125,7 +125,7 @@ Sub-brands have a unique palette, art direction, visual look, and distinction fr

<BR size="xl" />

#### Visual information
### Visual information

Continuous and categorical datasets projected in a chart or map often require color to distinguish types of information and values.

Expand Down Expand Up @@ -287,7 +287,7 @@ assigns a color intention.

<BR size="xl" />

#### How to use theme
### How to use theme

Theme tokens with `on`(`onPrimary` or `onMessage`) in the name are paired with the base alias. One example is `onPrimary`
is used when an element or content is on the `primary` color token.
Expand Down Expand Up @@ -394,7 +394,7 @@ a static color add `-static` at the end of a color token name and it will lock t

<BR />

#### Example
### Example

Our theme token `onCta` and semantic color token `onMessage` both are tied to `gray-600-static`
to ensure they remain with the correct minimal color contrast needed for the element to be accessible.
Expand Down Expand Up @@ -440,7 +440,7 @@ contrast ratio outlined by WCAG 2.0 level AA.

<BR />

#### Accessible
### Accessible

One of our theme tokens named `accessible` is accessible on the target background (`gray600` or `gray0`).

Expand Down
4 changes: 3 additions & 1 deletion build.washingtonpost.com/docs/foundations/typography.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: Typography
description:
---

### Table of contents
<BR />

## Table of contents

- [Font](/foundations/typography#Font)
- [Font size](/foundations/typography#Font%20size)
Expand Down
4 changes: 3 additions & 1 deletion build.washingtonpost.com/docs/foundations/wam.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: Asset-Manager (WAM)
description: WPDS Asset-Manager (also known as WAM) manages all assets as raw SVG files. The asset manager is an independent package that allows for more streamlined management of our assets.
---

### Table of contents
<BR />

## Table of contents

- [Getting started](foundations/wam#Getting%20started)
- [Design principles](/foundations/wam#Design%20principles)
Expand Down
4 changes: 3 additions & 1 deletion build.washingtonpost.com/docs/zzz/color-codes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: The Source of Truth
description: Curious about the RGBA and Hex values for our wonderful color tokens? Ponder no longer!
---

### Table of contents
<BR />

## Table of contents

- [Light tokens](/zzz/color-codes#Light%20tokens)
- [Dark tokens](/zzz/color-codes#Dark%20tokens)
Expand Down

4 comments on commit cc5af05

@vercel
Copy link

@vercel vercel bot commented on cc5af05 May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on cc5af05 May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit – ./build.washingtonpost.com

wpds-ui-kit-git-main.preview.now.washingtonpost.com
build.washingtonpost.com
wpds-ui-kit.preview.now.washingtonpost.com

@vercel
Copy link

@vercel vercel bot commented on cc5af05 May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit-vitejs-example – ./apps/vite-project

wpds-ui-kit-vitejs-example.preview.now.washingtonpost.com
wpds-ui-kit-vitejs-example-git-main.preview.now.washingtonpost.com

@vercel
Copy link

@vercel vercel bot commented on cc5af05 May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit-storybook – ./

wpds-ui-kit-storybook-git-main.preview.now.washingtonpost.com
wpds-ui-kit-storybook.preview.now.washingtonpost.com

Please sign in to comment.