diff --git a/packages/core/src/components/Alert/Alert.example.jsx b/packages/core/src/components/Alert/Alert.example.jsx index bb8f7e7205..f8651a144e 100644 --- a/packages/core/src/components/Alert/Alert.example.jsx +++ b/packages/core/src/components/Alert/Alert.example.jsx @@ -3,19 +3,16 @@ import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( -
+

This is a React Alert component.

 - + +

This is a React Alert component without a heading.

-
, document.getElementById('js-example') ); diff --git a/packages/core/src/components/Alert/_Alert.docs.scss b/packages/core/src/components/Alert/_Alert.docs.scss index 0ce0b89a0b..c07c2b1acc 100644 --- a/packages/core/src/components/Alert/_Alert.docs.scss +++ b/packages/core/src/components/Alert/_Alert.docs.scss @@ -5,14 +5,8 @@ Alert Alerts keep users informed of important and sometimes time-sensitive changes. -.ds-c-alert--error - Error message -.ds-c-alert--warn - Warning message -.ds-c-alert--success - Success message -.ds-c-alert--hide-icon - Hide icon - Markup: alert.example.html - Style guide: components.alert */ diff --git a/packages/core/src/components/Alert/alert.example-additional.html b/packages/core/src/components/Alert/alert.example-additional.html index c5d620376d..08f44e6731 100644 --- a/packages/core/src/components/Alert/alert.example-additional.html +++ b/packages/core/src/components/Alert/alert.example-additional.html @@ -1,21 +1,23 @@ -
-
-

{{lorem-s}}

+
+
+
+

{{lorem-s}}

+
-
-
-
-

{{lorem-l}}

+
+
+

{{lorem-l}}

+
-
-
-
-

Status heading

-

{{lorem-m}}

-
    -
  • Alert list item
    • -
  • Alert list item
    • -
- Link text +
+
+

Status heading

+

{{lorem-m}}

+
    +
  • Alert list item
    • +
  • Alert list item
    • +
+ Link text +
diff --git a/packages/core/src/components/Alert/alert.example.html b/packages/core/src/components/Alert/alert.example.html index a9891208e7..23c1459e7c 100644 --- a/packages/core/src/components/Alert/alert.example.html +++ b/packages/core/src/components/Alert/alert.example.html @@ -1,9 +1,47 @@ -
-
-

Status heading

-

- Lorem ipsum dolor sit link text, - consectetur adipiscing elit, sed do eiusmod. -

+
+
+
+

Informative status

+

+ Lorem ipsum dolor sit link text, + consectetur adipiscing elit, sed do eiusmod. +

+
+
+
+
+

Error status

+

+ Lorem ipsum dolor sit link text, + consectetur adipiscing elit, sed do eiusmod. +

+
+
+
+
+

Warning status

+

+ Lorem ipsum dolor sit link text, + consectetur adipiscing elit, sed do eiusmod. +

+
+
+
+
+

Success status

+

+ Lorem ipsum dolor sit link text, + consectetur adipiscing elit, sed do eiusmod. +

+
+
+
+
+

Status without icon

+

+ Lorem ipsum dolor sit link text, + consectetur adipiscing elit, sed do eiusmod. +

+
diff --git a/packages/core/src/components/Badge/Badge.e2e.test.js b/packages/core/src/components/Badge/Badge.e2e.test.js index aa8ee3dc59..5049628c46 100644 --- a/packages/core/src/components/Badge/Badge.e2e.test.js +++ b/packages/core/src/components/Badge/Badge.e2e.test.js @@ -5,10 +5,6 @@ import assertNoAxeViolations from '../../helpers/e2e/assertNoAxeViolations'; import { getElementByClassName } from '../../helpers/e2e'; const rootURL = `${ROOT_URL}/example/components.badge/`; -const infoURL = `${ROOT_URL}/example/components.badge..ds-c-badge--info/`; -const successURL = `${ROOT_URL}/example/components.badge..ds-c-badge--success/`; -const warnURL = `${ROOT_URL}/example/components.badge..ds-c-badge--warn/`; -const alertURL = `${ROOT_URL}/example/components.badge..ds-c-badge--alert/`; describe('Badge component', () => { it('Badge should render', async() => { @@ -18,51 +14,7 @@ describe('Badge component', () => { expect(el).toBeTruthy(); }); - it('Info badge should render', async() => { - await driver.get(infoURL); - - const el = await getElementByClassName('ds-c-badge'); - expect(el).toBeTruthy(); - }); - - it('Success badge should render', async() => { - await driver.get(successURL); - - const el = await getElementByClassName('ds-c-badge'); - expect(el).toBeTruthy(); - }); - - it('Warning badge should render', async() => { - await driver.get(warnURL); - - const el = await getElementByClassName('ds-c-badge'); - expect(el).toBeTruthy(); - }); - - it('Alert badge should render', async() => { - await driver.get(alertURL); - - const el = await getElementByClassName('ds-c-badge'); - expect(el).toBeTruthy(); - }); - it('Badge should have no accessibility violations', async() => { await assertNoAxeViolations(rootURL); }); - - it('Info badge should have no accessibility violations', async() => { - await assertNoAxeViolations(infoURL); - }); - - it('Success badge should have no accessibility violations', async() => { - await assertNoAxeViolations(successURL); - }); - - it('Warning badge should have no accessibility violations', async() => { - await assertNoAxeViolations(warnURL); - }); - - it('Alert badge should have no accessibility violations', async() => { - await assertNoAxeViolations(alertURL); - }); }); diff --git a/packages/core/src/components/Badge/_Badge.docs.scss b/packages/core/src/components/Badge/_Badge.docs.scss index e7cbb58cf1..77bb6ef54f 100644 --- a/packages/core/src/components/Badge/_Badge.docs.scss +++ b/packages/core/src/components/Badge/_Badge.docs.scss @@ -5,11 +5,6 @@ Badges hold small amounts of information and draw attention to new or important @uswds https://standards.usa.gov/components/labels/ -.ds-c-badge--info - Info badge -.ds-c-badge--success - Success badge -.ds-c-badge--warn - Warning badge -.ds-c-badge--alert - Alert or error badge - Markup: badge.example.html Style guide: components.badge diff --git a/packages/core/src/components/Badge/badge.example.html b/packages/core/src/components/Badge/badge.example.html index 7e35b5acf1..5aa2b64158 100644 --- a/packages/core/src/components/Badge/badge.example.html +++ b/packages/core/src/components/Badge/badge.example.html @@ -1,3 +1,35 @@ -5 -Badge label -Badge label +
+
+ 1 + Badge label + Larger badge label +
+
+ 2 + Info badge + Larger info badge +
+
+ 3 + Success badge + Larger success badge +
+
+ 4 + Warning badge + Larger warning badge +
+
+ 5 + Alert badge + Larger alert badge +
+
diff --git a/packages/core/src/components/Button/Button.e2e.test.js b/packages/core/src/components/Button/Button.e2e.test.js index 568efbc2ba..4015f45470 100644 --- a/packages/core/src/components/Button/Button.e2e.test.js +++ b/packages/core/src/components/Button/Button.e2e.test.js @@ -5,11 +5,6 @@ import assertNoAxeViolations from '../../helpers/e2e/assertNoAxeViolations'; import { getElementByClassName } from '../../helpers/e2e'; const rootURL = `${ROOT_URL}/example/components.button/`; -const primaryURL = `${ROOT_URL}/example/components.button..ds-c-button--primary/`; -const transparentURL = `${ROOT_URL}/example/components.button..ds-c-button--transparent/`; -const dangerURL = `${ROOT_URL}/example/components.button..ds-c-button--danger/`; -const successURL = `${ROOT_URL}/example/components.button..ds-c-button--success/`; -const disabledURL = `${ROOT_URL}/example/components.button..ds-c-button--disabled/`; describe('Button component', () => { it('Button should render', async() => { @@ -22,24 +17,4 @@ describe('Button component', () => { it('Button should have no accessibility violations', async() => { await assertNoAxeViolations(rootURL); }); - - it('Primary button should have no accessibility violations', async() => { - await assertNoAxeViolations(primaryURL); - }); - - it('Transparent button should have no accessibility violations', async() => { - await assertNoAxeViolations(transparentURL); - }); - - it('Danger button should have no accessibility violations', async() => { - await assertNoAxeViolations(dangerURL); - }); - - it('Success button should have no accessibility violations', async() => { - await assertNoAxeViolations(successURL); - }); - - it('Disabled button should have no accessibility violations', async() => { - await assertNoAxeViolations(disabledURL); - }); }); diff --git a/packages/core/src/components/Button/Button.scss b/packages/core/src/components/Button/Button.scss index 6dd95417c8..ee69551ab1 100644 --- a/packages/core/src/components/Button/Button.scss +++ b/packages/core/src/components/Button/Button.scss @@ -17,12 +17,15 @@ text-decoration: none; &:focus, - &:hover { + &:hover, + &.ds-c-button--focus, + &.ds-c-button--hover { border-color: $color-primary-darker; color: $color-primary-darker; } - &:active { + &:active, + &.ds-c-button--active { border-color: $color-primary-darkest; color: $color-primary-darkest; } @@ -46,23 +49,28 @@ color: $color-white; &:focus, - &:hover { + &:hover, + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { + border-color: transparent; color: $color-white; } - &:focus { + &:focus, + &.ds-c-button--focus { background-color: $button-primary-bg--focus; - border-color: transparent; } - &:hover { + &:hover, + &.ds-c-button--hover { background-color: $button-primary-bg--hover; - border-color: transparent; } - &:active { + &:active, + &.ds-c-button--active { background-color: $button-primary-bg--active; - border-color: transparent; } } @@ -74,7 +82,10 @@ &:focus, &:hover, - &:active { + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { border-color: transparent; } } @@ -85,15 +96,19 @@ color: $color-white; &:focus, - &:hover { + &:hover, + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { background-color: $color-error-dark; border-color: transparent; color: $color-white; } - &:active { + &:active, + &.ds-c-button--active { background-color: $color-error-darkest; - border-color: transparent; } } @@ -103,15 +118,19 @@ color: $color-white; &:focus, - &:hover { + &:hover, + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { background-color: $color-success-dark; border-color: transparent; color: $color-white; } - &:active { + &:active, + &.ds-c-button--active { background-color: $color-success-darker; - border-color: transparent; } } @@ -122,9 +141,12 @@ color: $color-gray-dark; pointer-events: none; + &:focus, &:hover, &:active, - &:focus { + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { background-color: $color-gray-lighter; border-color: transparent; color: $color-gray-dark; @@ -139,9 +161,12 @@ Inverse buttons background-color: $color-background-inverse; border-color: $border-color-inverse; - &:active, &:focus, - &:hover { + &:hover, + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { border-color: $color-base-inverse; } } @@ -150,14 +175,18 @@ Inverse buttons .ds-c-button--transparent-inverse { color: $color-base-inverse; - &:active, &:focus, - &:hover { + &:hover, + &:active, + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { color: $color-base-inverse; opacity: 0.8; } - &:active { + &:active, + &.ds-c-button--active { opacity: 0.6; } } @@ -169,9 +198,12 @@ Inverse buttons color: $color-muted-inverse; pointer-events: none; + &:focus, &:hover, &:active, - &:focus { + &.ds-c-button--focus, + &.ds-c-button--hover, + &.ds-c-button--active { background-color: $color-background-inverse; border-color: $color-background-inverse; color: $color-muted-inverse; diff --git a/packages/core/src/components/Button/_Button.docs.scss b/packages/core/src/components/Button/_Button.docs.scss index 786c82e979..0f40d43f62 100644 --- a/packages/core/src/components/Button/_Button.docs.scss +++ b/packages/core/src/components/Button/_Button.docs.scss @@ -5,28 +5,11 @@ Button Use buttons to signal actions. -.ds-c-button--primary - The primary call-to-action -.ds-c-button--transparent - A button closer to resembling an anchor element -.ds-c-button--danger - Indicates an action is destructive or dangerous -.ds-c-button--success - Indicates a positive or successful action -.ds-c-button--disabled - Disabled button - - Markup: button.example.html Style guide: components.button */ -/* -Inverse buttons - -Examples of buttons on a dark background. - -Markup: button-inverse.example.html - -Style guide: components.button.inverse -*/ - /* Button icons diff --git a/packages/core/src/components/Button/button-inverse.example.html b/packages/core/src/components/Button/button-inverse.example.html deleted file mode 100644 index e6211c730a..0000000000 --- a/packages/core/src/components/Button/button-inverse.example.html +++ /dev/null @@ -1,10 +0,0 @@ -
- - - - - - -
diff --git a/packages/core/src/components/Button/button.example.html b/packages/core/src/components/Button/button.example.html index ad0a40dab5..04772781af 100644 --- a/packages/core/src/components/Button/button.example.html +++ b/packages/core/src/components/Button/button.example.html @@ -1,10 +1,128 @@ - + + + + +
Primary button
+ + + + + +
Danger button
+ + + + + +
Success button
+ + + + + +
Transparent button
+ - - + Hover + + + + +
Size variant buttons
+ + + + +
Inverse buttons
+
+ + + + + + +
diff --git a/packages/core/src/components/ChoiceList/Choice.e2e.test.js b/packages/core/src/components/ChoiceList/Choice.e2e.test.js index bf9281e316..d3530f9f70 100644 --- a/packages/core/src/components/ChoiceList/Choice.e2e.test.js +++ b/packages/core/src/components/ChoiceList/Choice.e2e.test.js @@ -5,7 +5,6 @@ import assertNoAxeViolations from '../../helpers/e2e/assertNoAxeViolations'; import { getElementByClassName } from '../../helpers/e2e'; const rootURL = `${ROOT_URL}/example/components.choice.choicelist/`; -const inverseURL = `${ROOT_URL}/example/components.choice.inversed/`; describe('Choice component', () => { it('Should render', async() => { @@ -18,8 +17,4 @@ describe('Choice component', () => { it('Should have no accessibility violations', async() => { await assertNoAxeViolations(rootURL); }); - - it('Inverse layout should have no accessibility violations', async() => { - await assertNoAxeViolations(inverseURL); - }); }); diff --git a/packages/core/src/components/ChoiceList/_ChoiceList.docs.scss b/packages/core/src/components/ChoiceList/_ChoiceList.docs.scss index fa8729fc83..80bf2f36b5 100644 --- a/packages/core/src/components/ChoiceList/_ChoiceList.docs.scss +++ b/packages/core/src/components/ChoiceList/_ChoiceList.docs.scss @@ -10,14 +10,6 @@ Markup: checkbox-radio.example.html Style guide: components.choice */ -/* -Inverse theme - -Markup: checkbox-radio-inverse.example.html - -Style guide: components.choice.inversed -*/ - /* Right-to-Left @@ -28,14 +20,6 @@ Markup: checkbox-radio-right-to-left.example.html Style guide: components.choice.rtl */ -/* -Size variants - -Markup: checkbox-radio-size.example.html - -Style guide: components.choice.size -*/ - /* `` diff --git a/packages/core/src/components/ChoiceList/checkbox-radio-inverse.example.html b/packages/core/src/components/ChoiceList/checkbox-radio-inverse.example.html deleted file mode 100644 index 2a264fdc82..0000000000 --- a/packages/core/src/components/ChoiceList/checkbox-radio-inverse.example.html +++ /dev/null @@ -1,69 +0,0 @@ -
-
- Historical figures - - Select all that apply - - - - - - - - - -
-
- Select a historical figure - - - - - - -
-
diff --git a/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html b/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html deleted file mode 100644 index 54897513d0..0000000000 --- a/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html +++ /dev/null @@ -1,50 +0,0 @@ -
-
-
- Size variants - Select a size - - - - -
-
-
-
- Size variants - Select a size - - - - -
-
-
diff --git a/packages/core/src/components/ChoiceList/checkbox-radio.example.html b/packages/core/src/components/ChoiceList/checkbox-radio.example.html index 7ea3c14962..cb122c0db9 100644 --- a/packages/core/src/components/ChoiceList/checkbox-radio.example.html +++ b/packages/core/src/components/ChoiceList/checkbox-radio.example.html @@ -1,68 +1,127 @@ -
- Historical figures - Select all that apply - - - - - - - - -
-
- Select a historical figure - - - - - - -
+
+
+ Checkbox example + Helpful hint text + + + + + + +
+
+ Radio example + + Example error message + + + + + + + +
+
+ Small choice variants + + + + +
+
+
+ Inverse example + Helpful hint text + Error message example + + + + + + +
+
+
diff --git a/packages/core/src/components/Dropdown/Dropdown.example.html b/packages/core/src/components/Dropdown/Dropdown.example.html index 47ff755dae..bbb20d355d 100644 --- a/packages/core/src/components/Dropdown/Dropdown.example.html +++ b/packages/core/src/components/Dropdown/Dropdown.example.html @@ -10,7 +10,7 @@ -
+
, document.getElementById('js-example') ); diff --git a/packages/core/src/components/TextField/_TextField.docs.scss b/packages/core/src/components/TextField/_TextField.docs.scss index a54ac1ee21..4177b2a50e 100644 --- a/packages/core/src/components/TextField/_TextField.docs.scss +++ b/packages/core/src/components/TextField/_TextField.docs.scss @@ -10,14 +10,6 @@ Markup: textfield.example.html Style guide: components.text-field */ -/* -Inverse theme - -Markup: textfield-inverse.example.html - -Style guide: components.text-field.inverse -*/ - /* `` diff --git a/packages/core/src/components/TextField/textfield-inverse.example.html b/packages/core/src/components/TextField/textfield-inverse.example.html deleted file mode 100644 index 3f393a8f4b..0000000000 --- a/packages/core/src/components/TextField/textfield-inverse.example.html +++ /dev/null @@ -1,47 +0,0 @@ -
- - - - - - - - -
diff --git a/packages/core/src/components/TextField/textfield.example.html b/packages/core/src/components/TextField/textfield.example.html index 1d7ab21c8d..a83a4f5ddf 100644 --- a/packages/core/src/components/TextField/textfield.example.html +++ b/packages/core/src/components/TextField/textfield.example.html @@ -1,7 +1,23 @@ -