Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

Global notification and button refactoring #308

Merged
merged 5 commits into from
Feb 22, 2017
Merged

Global notification and button refactoring #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bad42af
Global error design and component
Feb 17, 2017
cc50bb0
Rewrote notifications based on design feedback
Feb 17, 2017
41301c6
Don't deprecate usa buttons yet
Feb 21, 2017
bc37ba9
Fix linting errors
Feb 21, 2017
f6475f0
Remove unnecessary library build step
Feb 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/components/_preview-bg-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, does this simplify the build at all? I think we can drop the compile-css step from https://github.com/18F/cg-style/pull/308/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R16

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed that, good idea.

<link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
<title>Cloud.gov Pattern Library</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/_preview-bg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
<title>Cloud.gov Pattern Library</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/_preview-layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
<title>Cloud.gov Pattern Library</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/components/action/button-outline/button-outline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{% if isOutline %}
<button class="usa-button usa-button-outline action action-{{ buttonStatus }}">{{ buttonText }}</button>
<button class="action action-outline action-{{ buttonStatus }}">{{ buttonText }}</button>
{% endif %}
2 changes: 1 addition & 1 deletion docs/src/components/components/action/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{% if isDefault %}
<button class="usa-button action action-{{ buttonStatus }} usa-button-{{ buttonStatus }}">{{ buttonText }}</button>
<button class="action action-{{ buttonStatus }} usa-button usa-button-{{ buttonStatus }}">{{ buttonText }}</button>
{% endif %}
2 changes: 1 addition & 1 deletion docs/src/components/components/action/link/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{% if isLink %}
<a class="action action-link action-{{ buttonStatus }}" href="javascript:void(0)">{{ buttonText }}</a>
<a class="action-link action-{{ buttonStatus }}" href="javascript:void(0)">{{ buttonText }}</a>
{% endif %}
3 changes: 3 additions & 0 deletions docs/src/components/components/notification/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Notification

Write documentation
22 changes: 22 additions & 0 deletions docs/src/components/components/notification/notification.config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
title: notification
preview: '@preview-bg'
status: prototype
variants:
- name: error
context:
status: 'error'
message: 'Something bad happened, please try again.'
actionText: 'Refresh'
- name: warning
context:
status: 'warning'
message: 'Something bad might happen, check this.'
actionText: 'Check thing'
- name: info
context:
status: 'info'
message: 'Here is some information'
- name: finish
context:
status: 'finish'
message: 'This is complete'
14 changes: 14 additions & 0 deletions docs/src/components/components/notification/notification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

<div class="notification notification-{{ status }}">
<div class="notification-wrap">
<p class="notification-message">{{ message }}</p>
{% if actionText %}
<button href="#" class="notification-action action action-outline action-white">
{{ actionText }}
</button>
{% endif %}
<a href="#" class="notification-dismiss" title="Dismiss notification">
<span class="usa-sr-only">Close</span>
</a>
</div>
</div>
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
"build-prefix": "postcss --use autoprefixer css/cloudgov-style.css -o ./css/cloudgov-style.css",
"build-img": "mkdir -p ./img && npm run copy-img && npm run svg",
"build-library": "npm run build-library-assets && fractal build && cp nginx.conf docs/build/",
"build-library-assets": "npm run clean && npm run build-css && npm run compile-css && npm run build-font && npm run build-img && npm run copy-library-assets",
"build-library-assets": "npm run clean && npm run build-css && npm run build-font && npm run build-img && npm run copy-library-assets",
"check-publish": "publish",
"compile-css": "cleancss ./css/cloudgov-style.css -o ./css/cloudgov-style-min.css",
"compile-js": "uglifyjs ./js/cloudgov-style.js -o ./js/cloudgov-style-min.js",
"copy-img": "cp -r node_modules/uswds/dist/img/* img/ && cp ./src/img/* ./img",
"copy-font": "mkdir -p ./fonts && cp node_modules/uswds/dist/fonts/* fonts/ && cp ./src/font/* ./fonts",
"copy-library-assets": "npm-run-all copy-library-assets-*",
"copy-library-assets-css": "mkdir -p ./docs/assets/css && cp ./css/cloudgov-style-min.css ./docs/src/main.css ./docs/assets/css",
"copy-library-assets-css": "mkdir -p ./docs/assets/css && cp ./css/cloudgov-style.css ./docs/src/main.css ./docs/assets/css",
"copy-library-assets-font": "mkdir -p ./docs/assets/fonts && cp ./fonts/* ./docs/assets/fonts",
"copy-library-assets-img": "mkdir -p ./docs/assets/img && cp -R ./img/* ./docs/assets/img",
"lint": "node node_modules/.bin/18f-stylelint-rules './src/css/**/*.scss'",
Expand Down
168 changes: 70 additions & 98 deletions src/css/components/actions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,129 +4,101 @@
@import '../../../node_modules/uswds/src/stylesheets/core/utilities.scss';
@import '../../../node_modules/uswds/src/stylesheets/core/defaults.scss';

.action-link {
color: $color-blue;
font-size: inherit;
font-weight: bold;
text-decoration: underline;

&:visited { color: $color-blue; }
/* stylelint-disable plugin/name-format */
@mixin button-color ($main_color, $hover_color) {
background-color: $main_color;

&:hover {
color: $color-textblack;
background-color: $hover_color;
}

&.usa-button {
padding-bottom: 0.55rem;
padding-top: 0.55rem;
&.action-link,
&.action-outline,
&.usa-button-outline {
color: $main_color;

&:focus,
&:active,
&:hover {
color: $hover_color;
}
}
}
/* stylelint-enable */

& + .action {
margin-left: $grid-1;
// TODO remove once usa-button deprecated
.usa-button {
&:hover {
background: $color-textblack;
}
}

// Extra specificity due to WDS.
.action {

&.action-cautious {
background-color: $color-lightgray;

&.action-link {
background-color: transparent;
color: $color-lightgray;
}

&.usa-button-outline {
background-color: transparent;
box-shadow: inset 0 0 0 1px $color-lightgray;
color: $color-lightgray;
}
&:hover {
background: $color-textblack;
}
}

&.action-warning {
background-color: $color-warning;

&:hover {
background-color: $color-textblack;
}

&.action-link {
background-color: transparent;
color: $color-warning;
&:hover {
color: $color-textblack;
}
}
/* stylelint-disable selector-no-qualifying-type */
a.action {
padding-bottom: 0.55rem;
padding-top: 0.55rem;
}
/* stylelint-enable */

&.usa-button-outline {
background-color: $color-white;
box-shadow: inset 0 0 0 1px $color-warning;
color: $color-warning;
.action-primary {
@include button-color($color-primary, $color-textblack);
}

&:hover {
box-shadow: inset 0 0 0 1px $color-textblack;
color: $color-textblack;
}
}
}
.action-base {
@include button-color($color-textblack, $color-primary);
}

&.action-finish {
background-color: $color-finish;
.action-cautious {
@include button-color($color-lightgray, $color-lightgray);
}

&:hover {
background-color: $color-textblack;
color: $color-white;
}
.action-warning {
@include button-color($color-warning, $color-textblack);
}

&.action-link {
background-color: transparent;
color: $color-finish;
.action-finish {
@include button-color($color-textgreen, $color-textblack);
}

&:hover {
color: $color-textblack;
}
}
.action-white {
@include button-color(white, $color-primary);
}

&.usa-button-outline {
background-color: $color-white;
box-shadow: inset 0 0 0 1px $color-finish;
color: $color-finish;
.action-outline {
box-shadow: inset 0 0 0 1px;
background-color: transparent;

&:hover {
box-shadow: inset 0 0 0 1px $color-textblack;
color: $color-textblack;
}
&.action-outline {
&:focus,
&:hover,
&:active {
background-color: transparent;
box-shadow: inset 0 0 0 1px;
}
}
}

&.action-base {
background-color: $color-textblack;

&:hover {
background-color: $color-blue;
color: $color-white;
}

&.action-link {
background-color: transparent;
color: $color-textblack;

&:hover {
color: $color-blue;
}
}
.action-link {
background-color: transparent;
color: $color-blue;
font-size: inherit;
font-weight: bold;
text-decoration: underline;

&.usa-button-outline {
background-color: $color-white;
box-shadow: inset 0 0 0 1px $color-textblack;
color: $color-textblack;
&:hover {
background-color: transparent;
color: $color-textblack;
}

&:hover {
box-shadow: inset 0 0 0 1px $color-blue;
color: $color-blue;
}
}
& + .action-link,
& + .action {
margin-left: $grid-1;
}
}

Expand Down
1 change: 1 addition & 0 deletions src/css/components/all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
@import 'nav.scss';
@import 'nav-breadcrumb.scss';
@import 'nav_toggle.scss';
@import 'notification.scss';
@import 'overview.scss';
@import 'page_header.scss';
@import 'panel.scss';
Expand Down
1 change: 1 addition & 0 deletions src/css/components/nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
justify-content: flex-end;
}
.action {
&.action-outline,
&.usa-button-outline {
margin: -.25rem 0 0 0;
padding: .55rem 1rem;
Expand Down
Loading