From 0fd5696c68be6bc08fbe357b1851f35bc0d72d8b Mon Sep 17 00:00:00 2001 From: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Date: Mon, 6 Apr 2020 14:36:04 -0700 Subject: [PATCH 1/2] #263 Make all headlines sentence case (#454) --- README.md | 4 +-- packages/docs/README.md | 6 ++-- packages/docs/source/building-blocks/color.md | 2 +- .../source/building-blocks/iconography.md | 2 +- packages/docs/source/building-blocks/type.md | 10 +++---- packages/docs/source/components/card.md | 4 +-- packages/docs/source/components/dropdown.md | 10 +++---- packages/docs/source/components/form.md | 10 +++---- packages/docs/source/components/link.md | 2 +- packages/docs/source/components/meter.md | 4 +-- packages/docs/source/components/modal.md | 10 +++---- .../docs/source/components/number-input.md | 4 +-- packages/docs/source/components/select.md | 2 +- packages/docs/source/components/switch.md | 4 +-- packages/docs/source/components/table.md | 28 +++++++++---------- packages/docs/source/components/text-input.md | 8 +++--- packages/docs/source/components/toast.md | 6 ++-- packages/docs/source/components/tooltip.md | 8 +++--- packages/docs/source/components/top-bar.md | 2 +- .../docs/source/getting-started/status.md | 2 +- packages/docs/source/guidelines/data-viz.md | 14 +++++----- packages/docs/source/guidelines/deletion.md | 6 ++-- packages/docs/source/guidelines/friction.md | 4 +-- packages/docs/source/guidelines/previews.md | 4 +-- packages/docs/source/index.md | 4 +-- packages/docs/source/layouts/docs-prose.md | 20 ++++++------- packages/odyssey/README.md | 4 +-- 27 files changed, 92 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index 72fa120bd2..8405891489 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Odyssey is Okta’s official design system that consists of reusable components -## Getting Started +## Getting started We use [Yarn](https://github.com/yarnpkg/yarn) as our node package manager client. To install Yarn, check out their [installation instructions](https://yarnpkg.com/getting-started/install). @@ -32,7 +32,7 @@ cd odyssey yarn install ``` -### Running the Design System Docs +### Running the design system docs Want to see Odyssey in action? Our `docs` package contains a static website styled using Odyssey. Simply run the following command to launch it: diff --git a/packages/docs/README.md b/packages/docs/README.md index 516034673e..c8865cd874 100644 --- a/packages/docs/README.md +++ b/packages/docs/README.md @@ -4,7 +4,7 @@ Hello and welcome! These are the early days of Okta's design system, and things ## Contributing -### Grab All the Things +### Grab all the things These docs are maintained in the `docs` package, which exists to document `@okta/odyssey`. @@ -30,7 +30,7 @@ These docs are maintained in the `docs` package, which exists to document `@okta You may need to [install yarn](https://yarnpkg.com/en/docs/install) if it's not available. -### Serving the Docs +### Serving the docs 1. Start up Hexo: @@ -42,7 +42,7 @@ You may need to [install yarn](https://yarnpkg.com/en/docs/install) if it's not 2. Go to -### Odyssey Development +### Odyssey development In order to see your changes to the `@okta/odyssey` package reflected here during development, you'll need to link that package locally. diff --git a/packages/docs/source/building-blocks/color.md b/packages/docs/source/building-blocks/color.md index e707cf4fad..de17863f5f 100644 --- a/packages/docs/source/building-blocks/color.md +++ b/packages/docs/source/building-blocks/color.md @@ -29,7 +29,7 @@ These foundations are only available in the draft spec. The current palette is constrained to three shades per hue. Use lightest variants to highlight specific states in typically-white backgrounds (e.g. a Text Input might have a `cv('danger', 'lightest')` background during an error state. The base variant can be treated as a safe default. Dark shades should be used for `:hover`-esque states or to increase contrast. -## Semantic Hues +## Semantic hues Every selection from our palette should communicate meaning, not just be used for decoration. diff --git a/packages/docs/source/building-blocks/iconography.md b/packages/docs/source/building-blocks/iconography.md index 322a7524d6..73cdb8db1c 100644 --- a/packages/docs/source/building-blocks/iconography.md +++ b/packages/docs/source/building-blocks/iconography.md @@ -13,7 +13,7 @@ -## Messaging Icons +## Messaging icons Icons are widely leveraged across the Okta ecosystem (roughly several hundred). There is a small subset of icons that are displayed in critical touchpoints for our users. We have classified these as messaging icons. diff --git a/packages/docs/source/building-blocks/type.md b/packages/docs/source/building-blocks/type.md index 0a755ede0c..d67b8bff28 100644 --- a/packages/docs/source/building-blocks/type.md +++ b/packages/docs/source/building-blocks/type.md @@ -182,17 +182,17 @@ Our type variants include two MDN recommendation. A minimum value of 1.5 help text remain legible for low-vision users, as well as those with cognitive concerns. Unitless values ensure that page zooming behaves as expected. -## Line Length +## Line length For inline and block level content, the line length should be 50 to 75 characters long. In order to facilitate consistency across designs, `max-width: $max-line-length` can be helpful. -## Heading Implementation +## Heading implementation When constructing a component or page, always start with h1 for the topmost level of hierarchy. @@ -200,7 +200,7 @@ Do not rely on heading elements for styling purposes; instead use classes like < Following these guidelines will ensure a clean document outline, which will increase both SEO performance and accessibility. -## Further Reading +## Further reading -### Components Referenced +### Components referenced -### UI Text +### UI text When naming dropdown items and writing descriptions, try to be as succint and clear as possible. Remember that assistive technologies will read out the dropdown link and description. While context is important, long item descriptions may be frustrating. @@ -612,13 +612,13 @@ When naming dropdown items and writing descriptions, try to be as succint and cl Every dropdown container should utilize `aria-label='submenu'` to indicate that the user is in a second level of hierarchy. -### Tab Index +### Tab index Any dropdown trigger that is not a link should utilize `tabindex='0'` to ensure that the dropdown can be triggered by a `:focus` state. While the dropdown items are accessible to screen readers whether or not the menu is visible, sighted users should be able to trigger display via the keyboard. ## References -### Related Components +### Related components