From ed24f698dec3e966aae9f507a6c07b464e94c2de Mon Sep 17 00:00:00 2001 From: Edbury Enegren Date: Tue, 8 Sep 2020 12:45:36 -0700 Subject: [PATCH 1/9] - add details/summary, pre, and dl/dt/dd --- packages/docs/base/elements.md | 91 ++++++++++++++++++- .../src/scss/base/_typography-list.scss | 19 ++++ .../src/scss/base/_typography-text.scss | 25 +++++ 3 files changed, 134 insertions(+), 1 deletion(-) diff --git a/packages/docs/base/elements.md b/packages/docs/base/elements.md index 0c4c34e146..f1fe990cb5 100644 --- a/packages/docs/base/elements.md +++ b/packages/docs/base/elements.md @@ -97,7 +97,6 @@ Odyssey takes care to provide additional style to the following HTML elements by ## del > The HTML `` element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The `` element can be used for the opposite purpose: to indicate text that has been added to the document. - MDN - ### Accessibility Many screen readers do not let users know of the presence of `del`. To fix this, you should consider using `data-a11y-start` and `data-a11y-end`, prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag. @@ -116,6 +115,68 @@ Many screen readers do not let users know of the presence of `del`. To fix this, ``` +## details +> The HTML Details Element (`
`) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the `` element. [...] If the first child of the `
` element is a ``, the contents of the `` element are used as the label for the disclosure widget. - MDN + +### IE11 support + +IE 11 incorrectly renders the `summary` element as "always open". Other than this behavior, it is safe for use. + +
+
+
+ What is Okta? +

Okta is the foundation for secure connections between people and technology. It’s a service that gives employees, customers, and partners secure access to the tools they need to do their most important work.

+
+
+ +```html +
+ What is Okta? +

Okta is the foundation for secure connections between people and technology. It’s a service that gives employees, customers, and partners secure access to the tools they need to do their most important work.

+
+``` +
+ +## dl +> The HTML `
` element represents a description list. The element encloses a list of groups of terms (specified using the `
` element) and descriptions (provided by `
` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). - MDN + +### Accessibility + +Screen readers announce `
` content differently - some may not indicate that the content is a list. To improve usability make sure each list item's content communicates its relationship to other list items. + +
+
+

Gentlemen of the Mushroom Kingdon

+
+
Mario
+
red hat, older twin brother, classic mustache
+
Luigi
+
green hat, younger twin brother, classic mustache
+
Wario
+
yellow hat, not a twin, kinked mustache
+
loves garlic
+
Waluigi
+
purple hat, not a twin, pointy mustache
+
+
+ +```html +

Gentlemen of the Mushroom Kingdon

+
+
Mario
+
red hat, older twin brother, classic mustache
+
Luigi
+
green hat, younger twin brother, classic mustache
+
Wario
+
yellow hat, not a twin, kinked mustache
+
loves garlic
+
Waluigi
+
purple hat, not a twin, pointy mustache
+
+``` +
+ ## em > The HTML `` element marks text that has stress emphasis. The `` element can be nested, with each level of nesting indicating a greater degree of emphasis. - MDN @@ -224,6 +285,29 @@ Many screen readers do not let users know of the presence of `ins`. To fix this, ``` +## pre +> The HTML `
` element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written. - MDN
+
+### Usage
+
+Since the `pre` tag preserves all whitespace, it's best to begin and end your content without linebreaks as below.
+
+

+  

+
const fruitColors = {
+  apple: 'red',
+  banana: 'yellow'
+}

+  

+
+```html
+
const fruitColors = {
+  apple: 'red',
+  banana: 'yellow'
+}

+```
+

+
 ## s 
 > The HTML `` element renders text with a strikethrough, or a line through it. Use the `` element to represent things that are no longer relevant or no longer accurate. However, `` is not appropriate when indicating document edits; for that, use the `` and `` elements, as appropriate. - MDN
 
@@ -302,6 +386,11 @@ You can also nest `strong`. Doing so will provide additional style.
 ```
 
 
+## summary 
+> The HTML Disclosure Summary element (``) element specifies a summary, caption, or legend for a `
` element's disclosure box. Clicking the `` element toggles the state of the parent `
` element open and closed.
+
+See `details` for example.
+
 ## sup 
 > The HTML Superscript element (``) specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. - MDN
 
diff --git a/packages/odyssey/src/scss/base/_typography-list.scss b/packages/odyssey/src/scss/base/_typography-list.scss
index 4126a22b3e..bf44c22598 100644
--- a/packages/odyssey/src/scss/base/_typography-list.scss
+++ b/packages/odyssey/src/scss/base/_typography-list.scss
@@ -42,3 +42,22 @@ ul:not([class]) {
 ol:not([class]) {
   list-style-type: decimal;
 }
+
+dl:not([class]) {
+  display: grid;
+  grid-gap: $spacing-xs $spacing-m;
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  max-width: $max-line-length;
+  margin: 0 0 $spacing-s 0;
+  padding: 0;
+
+  dt {
+    grid-column: 1/1;
+    font-weight: 600;
+  }
+
+  dd {
+    grid-column: 2/2;
+    font-weight: 400;
+  }
+}
diff --git a/packages/odyssey/src/scss/base/_typography-text.scss b/packages/odyssey/src/scss/base/_typography-text.scss
index 9cf68c0035..f881a652c7 100644
--- a/packages/odyssey/src/scss/base/_typography-text.scss
+++ b/packages/odyssey/src/scss/base/_typography-text.scss
@@ -56,11 +56,21 @@ p {
   margin-bottom: $spacing-s;
   font-size: $size-body-sentence;
 
+  details & {
+    font-size: ms(0);
+  }
+
   &:last-child {
     margin-bottom: 0;
   }
 }
 
+pre {
+  font-family: $mono-font-family;
+  white-space: pre-wrap;
+  tab-size: 2;
+}
+
 cite {
   font-style: italic;
 }
@@ -113,6 +123,21 @@ small {
   font-size: $size-body-caption;
 }
 
+details {
+  font-size: ms(0);
+}
+
+summary {
+  border-radius: $base-border-radius;
+  font-size: ms(1);
+  font-weight: 600;
+  cursor: default;
+
+  &:focus {
+    @include outline;
+  }
+}
+
 kbd {
   display: inline-block;
   padding: 0 $spacing-xs;

From 55f59133a9d249325c0c197186685f70d5da565b Mon Sep 17 00:00:00 2001
From: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com>
Date: Thu, 17 Sep 2020 13:39:22 -0700
Subject: [PATCH 2/9] CD (Automatic Previews) (#661)

Provides continuous delivery of the `docs` package to ods.dev, our preview environment.

* Stores commit builds in folders named after the commit SHA it represents and uploads it to S3.

* Notifies the PR that a new build has been created and deployed, with the URL allowing for quick access/review

* Uses lambda@Edge and CloudFront to ensure that we can route a subdomain to an S3 folder. (e.g. `.ods.dev` maps to `s3Bucket/`

* Sets object expiration rules in S3 to 30 days

* Remove TravisCI in favor of GitHub Actions, which handles the [deployment (preview) workflow](.github/workflows/preview.yml)
---
 .github/workflows/preview.yml | 45 +++++++++++++++++++++++++++++++++++
 .travis.yml                   |  9 -------
 2 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 .github/workflows/preview.yml
 delete mode 100644 .travis.yml

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
new file mode 100644
index 0000000000..09c99a61e0
--- /dev/null
+++ b/.github/workflows/preview.yml
@@ -0,0 +1,45 @@
+name: Preview
+on:
+  pull_request:
+    branches: 
+      - master
+      - develop
+      - 'release/**'
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      
+      - uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+      
+      - name: install deps
+        run: yarn
+      
+      - name: test
+        run: ./node_modules/lerna/cli.js run test
+        
+      - name: build docs
+        run: yarn workspace @okta/design-docs build
+
+      - name: deploying docs to ods.dev
+        run: | 
+          SHA=$(git rev-parse --short ${{ github.event.pull_request.head.sha || github.sha }})
+          aws s3 sync ./packages/docs/dist/ s3://ods.dev/$SHA --delete
+      
+      - name: deployment complete
+        run: |
+          SHA=$(git rev-parse --short ${{ github.event.pull_request.head.sha || github.sha }})
+          curl \
+            -X POST \
+            $URL \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token $GITHUB_TOKEN" \
+            --data '{ "body": "πŸ€– The latest preview of this branch is now available here: https://'"$SHA"'.ods.dev" }'
+        env:
+          URL: ${{ github.event.pull_request.comments_url }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 27ab1434f5..0000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-language: node_js
-cache: yarn
-node_js:
-  - "12.13"
-sudo: false
-before_script:
-  - lerna run build
-script:
-  - lerna run test

From 2818a1c8cb088aff74392e025815d3261054ddb1 Mon Sep 17 00:00:00 2001
From: Edbury Enegren 
Date: Mon, 21 Sep 2020 16:04:10 -0700
Subject: [PATCH 3/9] - update text color and link docs

---
 packages/docs/base/color.md                   |  2 +-
 packages/docs/components/link.md              | 35 ++++---------------
 .../odyssey/src/scss/abstracts/_colors.scss   |  2 +-
 .../src/scss/base/_typography-link.scss       |  8 +++--
 .../styles/_samples.scss                      | 13 -------
 5 files changed, 14 insertions(+), 46 deletions(-)

diff --git a/packages/docs/base/color.md b/packages/docs/base/color.md
index f875eb7656..ddbf016a71 100644
--- a/packages/docs/base/color.md
+++ b/packages/docs/base/color.md
@@ -31,7 +31,7 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
           Gray 900
         
         
-          #212126
+          #1d1d21
         
         
           Titles, body copy, icons, shadows, tooltips
diff --git a/packages/docs/components/link.md b/packages/docs/components/link.md
index 468f08695e..b679c9352c 100644
--- a/packages/docs/components/link.md
+++ b/packages/docs/components/link.md
@@ -4,23 +4,18 @@
 
 Links are navigation elements displayed as text. A link can open another page or jump to a section of a page.
 
-## Types of links
-
-### Default
-
 

   

-    
Here is a regular link.

-    
Here is a hovered link.

+    
If you need more info, view the spec on MDN.

   

 
   ```html
-  Link
+  If you need more info, view the spec on MDN.
   ```
 
 

 
-The :active state of a link does not have any unique styling, so it matches the :hover styling.
+## Specialty cases
 
 ### Mailto
 
@@ -47,7 +42,7 @@ Use an external link when:
   
  • Opening the link in the current tab would result in a significant loss of data or interruption of flow (e.g. while filling out a long form)
    • 
 
 
-(See Google Developer Documentation for security and performance considerations when using external links)
+(See Google Developer Documentation for security and performance considerations when using external links)
 
 
    
   
    
@@ -71,32 +66,16 @@ Odyssey has removed unique styling for `:visited` links. This is an intentional
   
  • Try to limit a link to at most 3 words
    • 
   
  • Choose link text that describes the destination (e.g. "Settings"), rather than generic text (e.g. "Click here" or a URL)
    • 
   
  • Avoid using a link <a> for actions; use a button <button> instead
    • 
-  
  • Avoid underlining text for purely decorative purposes, as it will be mistaken for linked text
    • 
 
 
-### Styling
-
-By default, links embedded inside blocks of prose text are underlined, while links used inside navigational menus and nav bars do not require an underline and may be custom-styled.
-
-Link styling can also be adjusted for branding, theme, or contextual purposes. Examples include color, font size, or font weight. Be mindful of consistency with the system you are designing for.
-
 ### Accessibility
 
-Links should display a visible :focus state when users interact via keyboard.
+Links in Odyssey are not underlined, but do maintain a minimum 3:1 contrast ratio with our body text color and a 4.5:1 contrast ratio with our available background colors. If you deviate from these standards via overrides, please ensure that your links have a non-color indicator, e.g. an underline.
+
+Links should display a visible :focus state when users interact via keyboard. Odyssey preserves the default `:focus` state for each browser.
 
 ### Localization
 
 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
-
-
-
 :::
diff --git a/packages/odyssey/src/scss/abstracts/_colors.scss b/packages/odyssey/src/scss/abstracts/_colors.scss
index d01e8d0bed..84cf3ec73b 100644
--- a/packages/odyssey/src/scss/abstracts/_colors.scss
+++ b/packages/odyssey/src/scss/abstracts/_colors.scss
@@ -23,7 +23,7 @@ $colors: (
     '200': #d7d7dc,
     '500': #8c8c96,
     '600': #6e6e78,
-    '900': #212126,
+    '900': #1d1d21,
   ),
   'blue': (
     '000': #f2f5ff,
diff --git a/packages/odyssey/src/scss/base/_typography-link.scss b/packages/odyssey/src/scss/base/_typography-link.scss
index 464efea3d1..5217e52ac3 100644
--- a/packages/odyssey/src/scss/base/_typography-link.scss
+++ b/packages/odyssey/src/scss/base/_typography-link.scss
@@ -13,14 +13,16 @@
 // limitations under the License.
 
 a {
-  color: cv('blue');
+  color: cv('blue', '500');
+  text-decoration: none;
 
   &:hover {
-    color: $color-primary-dark;
+    color: cv('blue', '500');
+    text-decoration: underline;
   }
 
   &:visited {
-    color: cv('blue');
+    color: cv('blue', '500');
   }
 
   /* stylelint-disable selector-no-qualifying-type */
diff --git a/packages/vuepress-theme-nimatron/styles/_samples.scss b/packages/vuepress-theme-nimatron/styles/_samples.scss
index 1dcf8d7683..3fcd26c02f 100644
--- a/packages/vuepress-theme-nimatron/styles/_samples.scss
+++ b/packages/vuepress-theme-nimatron/styles/_samples.scss
@@ -207,23 +207,10 @@ $spacing-units: (
   margin-bottom: $spacing-xl;
 }
 
-.nimatron--rendered .is-link-default {
-  color: $color-primary-base;
-}
-
-.nimatron--rendered .is-link-default:hover,
-.nimatron--rendered .is-link-hover {
-  color: $color-primary-dark;
-}
-
 .is-rendered-success {
   background: cv('green', '500');
 }
 
-.is-link-visited {
-  color: cv('purple');
-}
-
 .sample--external-link-icon {
   content: '';
   display: inline-block;

From 35f1b4d8272625b46d525343f2a2afa94f36e276 Mon Sep 17 00:00:00 2001
From: Edbury Enegren 
Date: Wed, 23 Sep 2020 15:21:45 -0700
Subject: [PATCH 4/9] - adds standalone search inputs - adds attached button
 variant - hides non-standard clear "x" for cross-browser consistency

---
 packages/docs/components/text-input.md        | 71 +++++++++++++++++++
 .../src/scss/abstracts/_functions.scss        |  7 +-
 .../src/scss/components/_input-field.scss     | 18 +++++
 .../odyssey/src/scss/components/_label.scss   |  4 ++
 .../src/scss/components/_text-input.scss      | 20 ++++++
 5 files changed, 117 insertions(+), 3 deletions(-)

diff --git a/packages/docs/components/text-input.md b/packages/docs/components/text-input.md
index 984e1d2a63..9296ccea00 100644
--- a/packages/docs/components/text-input.md
+++ b/packages/docs/components/text-input.md
@@ -173,6 +173,77 @@ Note, when indicating a validation error, please use a `.ods-field--error` to in
 
 ## Additional types
 
+### Standalone Search
+
+> `` elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent. - MDN
+
+Odyssey's standalone search is styled to provide minimal UI while maintaining accessibility when searching outside of normal form contexts. Inputs with `type="search"` will render with the "Search" UI indicator as well as a visually hidden label.
+
+Unlike other inputs, we recommend using the `placeholder` attribute to indicate the scope of your search input. This text should match the hidden label.
+
+
    
+  
    
+    
    
+      
    
+        
+        
+      
    
+    
    
+  
    
+
+  ```html
+  
    
+    
    
+      
+      
+    
    
+  
    
+  ```
+
    
+
+We also provide a variant with an attached button for in-page searching or when placeholder text is undesirable. Please follow our Button guidelines when using these variants.
+
+
    
+  
    
+    
    
+      
    
+        
+        
+      
    
+    
    
+  
    
+
+  ```html
+  
    
+    
    
+      
+      
+    
    
+  
    
+  ```
+
    
+
+
+
    
+  
    
+    
    
+      
    
+        
+        
+      
    
+    
    
+  
    
+
+  ```html
+  
    
+    
    
+      
+      
+    
    
+  
    
+  ```
+
    
+
 ### Text area
 
 > The HTML `