Merge pull request #456 from okta/release/0.1.2

Release/0.1.2
okta · Apr 6, 2020 · 88c8f4f · 88c8f4f
2 parents fb6e208 + 17825e4
commit 88c8f4f
Show file tree

Hide file tree

Showing 31 changed files with 106 additions and 162 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Odyssey is Okta’s official design system that consists of reusable components
 
 <!-- /TOC -->
 
-## 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/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

diff --git 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 <http://localhost:4000/>
 
-### 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/package.json b/packages/docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@okta/design-docs",
   "description": "Design System Docs",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "hexo": {
     "version": "3.9.0"
   },
@@ -23,7 +23,7 @@
     "last 2 versions"
   ],
   "devDependencies": {
-    "@okta/odyssey": "^0.1.1",
+    "@okta/odyssey": "^0.1.2",
     "choices.js": "^9.0.1",
     "hexo": "^3.2.0",
     "hexo-autoprefixer": "^2.0.0",

diff --git 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 <strong>lightest</strong> 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 <strong>base</strong> variant can be treated as a safe default. <strong>Dark</strong> 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
@@ -13,7 +13,7 @@
   </div>
 </aside>
 
-## 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
@@ -182,25 +182,25 @@ Our type variants include two <a href="https://developer.mozilla.org/en-US/docs/
 
 Our heading line-height should be used for any `font-size` set to `ms(4)` or higher.
 
-### Accessibility Concerns
+### Accessibility concerns
 
 Our body copy line-height is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Accessibility_concerns">MDN recommendation</a>. 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 <code>h1</code> for the topmost level of hierarchy.
 
 Do not rely on heading elements for styling purposes; instead use classes like <code>.callout--title</code> to style component headings.
 
 Following these guidelines will ensure a clean document outline, which will increase both SEO performance and accessibility.
 
-## Further Reading
+## Further reading
 
 <ul>
   <li>
@@ -211,7 +211,7 @@ Following these guidelines will ensure a clean document outline, which will incr
   </li>
 </ul>
 
-### Components Referenced
+### Components referenced
 
 <ul>
   <li>

diff --git a/packages/docs/source/components/card.md b/packages/docs/source/components/card.md
@@ -96,7 +96,7 @@ Cards can be used for a wide range of purposes and content types, so we've desig
 
 A card may be assembled from no fewer than 2 of these sections.
 
-### Featured Media
+### Featured media
 
 The featured media section can be used to showcase full bleed images or video. If your card employs a data visualization, consider including it in the main content area instead. It will benefit from context provided by the header or surrounding prose.
 
@@ -361,7 +361,7 @@ While cards do not have semantic states by default, your use case may require th
   ```
 </figure>
 
-### State Accessibility
+### State accessibility
 
 When indicating a card's state, remember that color is not an effective affordance for all users. Be sure to use a label that clearly communicates the state. You should also utilize the `aria-describedby` to inform assistive technologies of the relationship between `.card` and `.card--state`.
 

diff --git a/packages/docs/source/components/dropdown.md b/packages/docs/source/components/dropdown.md
@@ -123,7 +123,7 @@ A navigational element that creates more real estate to house additional navigat
   ```
 </figure>
 
-## Dropdown Anatomy
+## Dropdown anatomy
 
 Dropdowns offer a variety of optional parts that may be combined to provide the level of detail your use requires.
 
@@ -223,7 +223,7 @@ Dropdowns may include a header to provide additional context. If the associated
   ```
 </figure>
 
-### Dropdown Items
+### Dropdown items
 
 The bulk of dropdown content will be its items. In the case of navigational dropdowns, these will always be links.
 
@@ -602,7 +602,7 @@ When utilizing item descriptions, you should aim to limit your item count to fiv
   </li>
 </ul>
 
-### 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
 
 <ul>
   <li>

diff --git a/packages/docs/source/components/form.md b/packages/docs/source/components/form.md
@@ -82,7 +82,7 @@ Forms are a container for interactive controls used to submit information.
   ```
 </figure>
 
-## Form Anatomy
+## Form anatomy
 
 While their content may get complicated, our forms are designed to present a hierarchy that is straightforward to implement as well as use. Most forms will utilize a header, some amount of field sets (each containing fields or form controls), actions, and an optional footer.
 
@@ -130,7 +130,7 @@ If your form utilizes Read/Edit states, you may also include an "Edit" button to
   ```
 </figure>
 
-### Field Sets
+### Field sets
 
 Field sets are used to group related form controls. When grouping fields, be sure to include a `<legend>` to both contextualize how the fields are related and ensure a clear hierarchy.
 
@@ -591,7 +591,7 @@ Placeholder text disappears when a field is interacted with. For this reason, it
 
 Placeholder content is limited to static text. Additionally, placeholder text is truncated beyond the width of its input.
 
-#### Field Value Confusion
+#### Field value confusion
 
 Low-contrast placeholder styling may be illegible for some users; however, there's evidence to suggest that placeholders with compliant contrast can be mistaken for field values.
 
@@ -601,7 +601,7 @@ Regardless of styling, users with low digital literacy may not understand the pu
 
 ## Reference
 
-### Related Components
+### Related components
 
 <ul>
   <li>
@@ -636,7 +636,7 @@ Regardless of styling, users with low digital literacy may not understand the pu
   </li>
 </ul>
 
-### Further Reading
+### Further reading
 
 <ul>
   <li>

diff --git a/packages/docs/source/components/link.md b/packages/docs/source/components/link.md
@@ -87,7 +87,7 @@ Links should display a visible <code>:focus</code> state when users interact via
 
 When localizing links, avoid putting the text through a translator and applying the markup. Instead, consider the language's nuances and grammar to make the link and its surrounding messaging feel natural.
 
-## Further Reading
+## Further reading
 
 <ul>
   <li><a href="https://usabilitygeek.com/hyperlink-usability-guidelines-usable-links/ " target="_blank" rel="noopener">https://usabilitygeek.com/hyperlink-usability-guidelines-usable-links/</a></li>

diff --git a/packages/docs/source/components/meter.md b/packages/docs/source/components/meter.md
@@ -261,7 +261,7 @@ The meter tag is not supported on IE, Edge 12, Firefox 2-15, Chrome 4-7, Safari
 * Browsers offer different levels of support for screen readers and can vary quite a bit. For a full list of screen reader support, <a href="https://scottaohara.github.io/a11y_styled_form_controls/src/meter/" target="_blank" rel="noopener">see this article.</a>
 
 
-## Further Reading
+## Further reading
 
 <ul>
     <li>
@@ -273,4 +273,4 @@ The meter tag is not supported on IE, Edge 12, Firefox 2-15, Chrome 4-7, Safari
     <li>
         <a href="https://css-tricks.com/html5-meter-element/" target="_blank" rel="noopener">The HTML5 meter element</a> - <cite>Pankaj Parashar, CSS-Tricks (2013)</cite>
   </li>
-</ul>
+</ul>
diff --git a/packages/docs/source/components/modal.md b/packages/docs/source/components/modal.md
@@ -1,6 +1,6 @@
 # Modals
 
-## General Guidelines
+## General guidelines
 
 Modal dialogs are a powerful UI element. They are inserted above the main content and change the context to a special mode that requires user interaction. That is, they disable all other contexts until the user interacts with the modal itself.
 
@@ -72,7 +72,7 @@ Here are a few smells for when a modal dialog may be inappropriate:
 
 Modal dialogs are notorious for their accessibility issues, but don't worry! We've got your back.
 
-### Accessible Attributes
+### Accessible attributes
 
 The modal components makes use of several ARIA attributes in order to give assistive technologies (AT) as much information as possible.
 
@@ -94,7 +94,7 @@ The modal components makes use of several ARIA attributes in order to give assis
   </li>
 </ul>
 
-### Accessible Behavior
+### Accessible behavior
 
 When a modal dialog is opened, interaction is limited to the new context. While this may seem expected, it can surprise users - and is even worse for users requiring assistive technologies.
 
@@ -114,7 +114,7 @@ For convenience, users can exit the modal in a few ways:
 
 For users happy with their new context, we ensure their attention won't be misdirected. Scrolling on the main content becomes locked, and we inform the browser to lock the `tabindex` to the modal context. This way, regardless of input method, a user's interactions are limited to their new scope.
 
-## Legacy Support
+## Legacy support
 
 While our current usage of modals doesn't conform to the recommended guidelines above, the updated UI does come with a few additional benefits for our content-heavy configuration modals:
 
@@ -135,7 +135,7 @@ While our current usage of modals doesn't conform to the recommended guidelines
 
 <button class="ods-button is-ods-button-secondary" data-micromodal-trigger="ods-modal-form">Form Modal</button>
 
-## Further Reading
+## Further reading
 
 <ul>
   <li>

diff --git a/packages/docs/source/components/number-input.md b/packages/docs/source/components/number-input.md
@@ -1,4 +1,4 @@
-# Number Input
+# Number input
 
 > `<input>` elements of type "number" are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number'>MDN</a></cite>
 
@@ -26,7 +26,7 @@
 
 Number Inputs have the same available states as Text Inputs unless noted below.
 
-### Read Only
+### Read only
 
 > This Boolean attribute prevents the user from modifying the value of the input. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly'>MDN</a></cite>
 

diff --git a/packages/docs/source/components/select.md b/packages/docs/source/components/select.md
@@ -48,7 +48,7 @@ Finally, Select inputs should not have a set default choice unless a supermajori
   ```
 </figure>
 
-### Option Groups
+### Option groups
 
 Options may also be grouped within the Select dropdown list to help guide users.
 

diff --git a/packages/docs/source/components/switch.md b/packages/docs/source/components/switch.md
@@ -85,7 +85,7 @@ We use a `button` with the `switch` role instead of a checkbox. It functions ide
 
 The `aria-checked` attribute is required with either `true` or `false` values. `true` represents "on"; `false` represents "off". When the user clicks on the `switch`, a click event is fired, which changes the state of the `switch`. The handler also changes the value of the `aria-checked` attribute from `true` to `false` and the other way around.
 
-## Further Reading
+## Further reading
 
 <ul>
     <li>
@@ -113,4 +113,4 @@ function handleClickEvent(evt) {
       el.setAttribute("aria-checked", "true");
   }
 }
-</script>
+</script>