Skip to content

Commit

Permalink
Merge pull request #700 from okta/release/0.6.0
Browse files Browse the repository at this point in the history
Release: 0.6.0
  • Loading branch information
edburyenegren-okta committed Oct 2, 2020
2 parents e925f40 + edefeab commit 923342a
Show file tree
Hide file tree
Showing 41 changed files with 1,147 additions and 73 deletions.
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
# Resources
# - [CODEOWNERS] https://help.github.com/articles/about-codeowners

* @rajaguruduraisamy-okta @ganeshsomasundaram-okta @jmelberg-okta @jeffbelser-okta
* @rajaguruduraisamy-okta @ganeshsomasundaram-okta @jmelberg-okta @jeffbelser-okta @santhoshbalakrishnan

*.md @okta/design-system
*.scss @okta/design-system
Expand Down
73 changes: 73 additions & 0 deletions .github/workflows/preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
name: preview
on:
pull_request:
branches:
- master
- develop
- 'release/**'
jobs:
deployment:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
with:
ref: ${{ github.event.pull_request.head.sha }}

- name: cofigure aws
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: set $SHA7
run: echo ::set-env name=SHA7::$(git rev-parse --short ${{ github.event.pull_request.head.sha || github.sha }})

- name: set $PREVIEW_URL
run: echo ::set-env name=PREVIEW_URL::"https://"$SHA7".ods.dev"

- name: get COMMIT_MSG
run: |
MSG=$(git log --format=%B -n 1 ${{ github.event.after }})
echo "::set-env name=COMMIT_MSG::${MSG}"
- name: install dependencies
run: yarn

- name: test
run: ./node_modules/lerna/cli.js run test

- name: build docs
run: yarn workspace @okta/design-docs build

- name: 'deploy: create'
uses: bobheadxi/[email protected]
id: deployment
with:
step: start
token: ${{ secrets.GITHUB_TOKEN }}
env: preview
ref: ${{ github.head_ref }}

- name: 'deploy: 🚀 start'
run: |
aws s3 sync ./packages/docs/dist/ s3://ods.dev/$SHA7 --delete
- name: 'deploy: update status'
uses: bobheadxi/[email protected]
if: always()
with:
step: finish
token: ${{ secrets.GITHUB_TOKEN }}
status: ${{ job.status }}
deployment_id: ${{ steps.deployment.outputs.deployment_id }}
env_url: ${{ env.PREVIEW_URL }}

- name: 'notify: slack'
run: sh ./scripts/notify-slack.sh
env:
INCOMING_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
AUTHOR_NAME: ${{github.actor}}
BRANCH_NAME: ${{github.head_ref}}
PULL_REQUEST_ID: ${{github.event.pull_request.number}}
9 changes: 0 additions & 9 deletions .travis.yml

This file was deleted.

2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.5.1",
"version": "0.6.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
Expand Down
76 changes: 76 additions & 0 deletions packages/docs/.vuepress/components/Toast.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<template>
<aside
role="status"
v-if="active"
:class="[
'ods-toast',
'is-ods-toast-' + variant,
dismissed && 'is-toast-dismissed'
]"
>
<span class="ods-toast--icon">
<svg
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="ods-icon"
aria-hidden="true"
>
<path
v-if="variant"
fill-rule="evenodd"
clip-rule="evenodd"
:d="icon[variant]"
fill="currentColor"
/>
</svg>
</span>
<h1 class="ods-toast--title">{{ title }}</h1>
<p class="ods-toast--body">{{ body }}</p>
<button
class="ods-toast--dismiss"
aria-label="Dismiss toast"
v-on:click="dismiss()"
></button>
</aside>
</template>

<script>
export default {
data: () => ({
active: true,
dismissed: false,
// TODO: Replace with vue Icon component when available.
icon: {
info:
"M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13ZM8 4C8 4.55228 7.55228 5 7 5C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3C7.55228 3 8 3.44772 8 4ZM8 6V11H6V6H8Z",
caution:
"M6.52856 1.29141L1.05633 12.2371C0.881095 12.5876 1.13594 13 1.52777 13H12.4722C12.8641 13 13.1189 12.5876 12.9437 12.2371L7.47144 1.29141C7.2772 0.902874 6.7228 0.902874 6.52856 1.29141ZM8 4.50001H6V9.00001H8V4.50001ZM7 12C7.55228 12 8 11.5523 8 11C8 10.4477 7.55228 10 7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12Z",
danger:
"M6.63381 1.15168L1.15168 6.63381C0.949439 6.83605 0.949439 7.16395 1.15168 7.36619L6.63381 12.8483C6.83605 13.0506 7.16395 13.0506 7.36619 12.8483L12.8483 7.36619C13.0506 7.16395 13.0506 6.83605 12.8483 6.63381L7.36619 1.15168C7.16395 0.949439 6.83605 0.949439 6.63381 1.15168ZM6 3.00001H8V8H6V3.00001ZM8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9C7.55228 9 8 9.44771 8 10Z",
success:
"M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13ZM9.50016 3.42651L6.63849 8.8669L4.22481 7.07784C3.89245 6.83149 3.42613 6.89322 3.16837 7.21769C2.90629 7.5476 2.95548 8.02808 3.27889 8.29728L6.32704 10.8344C6.67432 11.1235 7.19733 11.0221 7.41313 10.6239L10.9026 4.18507C11.1185 3.78675 10.963 3.28766 10.5598 3.08475C10.173 2.89009 9.70251 3.04183 9.50016 3.42651Z"
}
}),
props: {
title: String,
body: String,
variant: {
type: String,
default: "info"
}
},
methods: {
dismiss() {
this.dismissed = true;
}
},
mounted() {
this.$el.addEventListener("animationend", ({ animationName }) => {
if (animationName === "ods-toast-out") {
this.active = false;
}
});
}
};
</script>
26 changes: 26 additions & 0 deletions packages/docs/.vuepress/components/ToastPen.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div class="ods-toast-pen">
<Toast
v-for="toast in toasts"
:variant="toast.variant"
:title="'This is the ' + toast.variant + ' toast title'"
body="This is supplemental information."
/>
</div>
</template>

<script>
export default {
components: { Toast: () => import("./Toast.vue") },
data: () => ({
toasts: []
}),
methods: {
addToast(variant) {
this.toasts.push({
variant
});
}
}
};
</script>
2 changes: 1 addition & 1 deletion packages/docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ module.exports = {
{ title: 'Tag', link: '/components/tag/', isVisible: true },
{ title: 'Table', link: '/components/table', isVisible: true },
{ title: 'Text Input', link: '/components/text-input', isVisible: true },
{ title: 'Toast', link: '/components/toast', isVisible: false },
{ title: 'Toast', link: '/components/toast', isVisible: true },
{ title: 'Tooltip', link: '/components/tooltip', isVisible: true },
{ title: 'Top Bar', link: '/components/top-bar', isVisible: false },
],
Expand Down
21 changes: 19 additions & 2 deletions packages/docs/base/color.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
Gray 900
</td>
<td>
<code>#212126</code>
<code>#1d1d21</code>
</td>
<td>
Titles, body copy, icons, shadows, tooltips
Expand Down Expand Up @@ -231,7 +231,7 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
</td>
</tr>
<tr>
<th scope="row" rowspan="4">
<th scope="row" rowspan="5">
Green
</th>
<td class="is-sample-table-swatch">
Expand All @@ -250,6 +250,23 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
N/A
</td>
</tr>
<tr>
<td class="is-sample-table-swatch">
<span class="sample-color sample-color--green-600"></span>
</td>
<td class="is-sample-table-token">
Green 600
</td>
<td>
<code>#008055</code>
</td>
<td>
Background color for success messaging
</td>
<td>
Headlines, body copy, fail states, buttons
</td>
</tr>
<tr>
<td class="is-sample-table-swatch">
<span class="sample-color sample-color--green-500"></span>
Expand Down
91 changes: 90 additions & 1 deletion packages/docs/base/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ Odyssey takes care to provide additional style to the following HTML elements by
## del <a name="del"></a>
> The HTML `<del>` 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 `<ins>` element can be used for the opposite purpose: to indicate text that has been added to the document. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del'>MDN</a></cite>

### 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.
Expand All @@ -116,6 +115,68 @@ Many screen readers do not let users know of the presence of `del`. To fix this,
```
</figure>

## details <a name="details"></a>
> The HTML Details Element (`<details>`) 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 `<summary>` element. [...] If the first child of the `<details>` element is a `<summary>`, the contents of the `<summary>` element are used as the label for the disclosure widget. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details'>MDN</a></cite>
### IE11 support

IE 11 incorrectly renders the `summary` element as "always open". Other than this behavior, it is safe for use.

<figure class="nimatron--example">
<div class="nimatron--rendered">
<details>
<summary>What is Okta?</summary>
<p>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.</p>
</details>
</div>

```html
<details>
<summary>What is Okta?</summary>
<p>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.</p>
</details>
```
</figure>

## dl <a name="dl"></a>
> The HTML `<dl>` element represents a description list. The element encloses a list of groups of terms (specified using the `<dt>` element) and descriptions (provided by `<dd>` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl'>MDN</a></cite>
### Accessibility

Screen readers announce `<dl>` 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.

<figure class="nimatron--example">
<div class="nimatron--rendered">
<h4>Gentlemen of the Mushroom Kingdon</h4>
<dl>
<dt>Mario</dt>
<dd>red hat, older twin brother, classic mustache</dd>
<dt>Luigi</dt>
<dd>green hat, younger twin brother, classic mustache</dd>
<dt>Wario</dt>
<dd>yellow hat, not a twin, kinked mustache</dd>
<dd>loves garlic</dd>
<dt>Waluigi</dt>
<dd>purple hat, not a twin, pointy mustache</dd>
</dl>
</div>

```html
<h4>Gentlemen of the Mushroom Kingdon</h4>
<dl>
<dt>Mario</dt>
<dd>red hat, older twin brother, classic mustache</dd>
<dt>Luigi</dt>
<dd>green hat, younger twin brother, classic mustache</dd>
<dt>Wario</dt>
<dd>yellow hat, not a twin, kinked mustache</dd>
<dd>loves garlic</dd>
<dt>Waluigi</dt>
<dd>purple hat, not a twin, pointy mustache</dd>
</dl>
```
</figure>

## em <a name="em"></a>
> The HTML `<em>` element marks text that has stress emphasis. The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em'>MDN</a></cite>
Expand Down Expand Up @@ -224,6 +285,29 @@ Many screen readers do not let users know of the presence of `ins`. To fix this,
```
</figure>

## pre <a name="pre"></a>
> The HTML `<pre>` 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. - <cite><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre">MDN</a></cite>
### Usage

Since the `pre` tag preserves all whitespace, it's best to begin and end your content without linebreaks as below.

<figure class="nimatron--example">
<div class="nimatron--rendered">
<pre><code>const fruitColors = {
apple: 'red',
banana: 'yellow'
}</code></pre>
</div>

```html
<pre><code>const fruitColors = {
apple: 'red',
banana: 'yellow'
}</code></pre>
```
</figure>

## s <a name="s"></a>
> The HTML `<s>` element renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the `<del>` and `<ins>` elements, as appropriate. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s'>MDN</a></cite>
Expand Down Expand Up @@ -302,6 +386,11 @@ You can also nest `strong`. Doing so will provide additional style.
```
</figure>

## summary <a name="summary"></a>
> The HTML Disclosure Summary element (`<summary>`) element specifies a summary, caption, or legend for a `<details>` element's disclosure box. Clicking the `<summary>` element toggles the state of the parent `<details>` element open and closed.
See <a href="#details">`details`</a> for example.

## sup <a name="sup"></a>
> The HTML Superscript element (`<sup>`) 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. - <cite><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup'>MDN</a></cite>
Expand Down
Loading

0 comments on commit 923342a

Please sign in to comment.