From 6cab6dde4fda610cc7d62975d37239ea12a3f03f Mon Sep 17 00:00:00 2001 From: Laura Gerhardt Date: Thu, 30 May 2019 11:40:03 -0400 Subject: [PATCH 1/5] add badge code and guidance --- docs/_components/badges.md | 36 ++++++++++++++++++++ src/img/alerts/success-badge.svg | 1 + src/img/alerts/unphishable.svg | 3 ++ src/scss/components/_verification-badge.scss | 25 ++++++++++++++ src/scss/styles.scss | 1 + src/scss/uswds-theme/_color.scss | 1 + src/scss/uswds-theme/_spacing.scss | 1 + 7 files changed, 68 insertions(+) create mode 100644 docs/_components/badges.md create mode 100644 src/img/alerts/success-badge.svg create mode 100644 src/img/alerts/unphishable.svg create mode 100644 src/scss/components/_verification-badge.scss diff --git a/docs/_components/badges.md b/docs/_components/badges.md new file mode 100644 index 00000000..3ae1fcc6 --- /dev/null +++ b/docs/_components/badges.md @@ -0,0 +1,36 @@ +--- +title: Badges +lead: > + Badges are used to encourage user behavior throughout the site. +--- + +Badges can help signal to the user that they had completed a workflow desired by Login.gov. Primarily, these are used on our user account page to encourage more secure practices. + +Badges are comprised with a div using the `verification-badge` class and then a `span` with a small svg image and the text of the badge. + +## An unphishable badge example + +{% capture example %} +
+ + unphishable icon + Unphishable + +
+{% endcapture %} +{% include helpers/code-example.html code=example %} + +## An verified account badge example + +{% capture example %} +
+ + verification icon + Verified Account + +
+{% endcapture %} +{% include helpers/code-example.html code=example %} + + + diff --git a/src/img/alerts/success-badge.svg b/src/img/alerts/success-badge.svg new file mode 100644 index 00000000..7f521a87 --- /dev/null +++ b/src/img/alerts/success-badge.svg @@ -0,0 +1 @@ +success \ No newline at end of file diff --git a/src/img/alerts/unphishable.svg b/src/img/alerts/unphishable.svg new file mode 100644 index 00000000..0c3271a2 --- /dev/null +++ b/src/img/alerts/unphishable.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss new file mode 100644 index 00000000..cd09e3ca --- /dev/null +++ b/src/scss/components/_verification-badge.scss @@ -0,0 +1,25 @@ +$space-1: .5rem !default; +$space-2: 1rem !default; + +.verification-badge { + text-align: center; + top: $space-1; + + span { + background-color: map-get($site-palette, 'site-white'); + border: 1px solid map-get($site-palette, 'site-green'); + border-radius: $theme-border-radius-xxl; + box-sizing: border-box; + display: inline-block; + padding: $space-1 $space-2; + white-space: nowrap; + } +} + +@media #{$theme-site-margins-breakpoint} { + .verification-badge { + margin: -$space-1 0 0; + position: static; + text-align: right; + } +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index a9b13bf8..945b8426 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -24,3 +24,4 @@ @import 'components/sidenav'; @import 'components/typography'; @import 'components/tooltips'; +@import 'components/verification-badge'; diff --git a/src/scss/uswds-theme/_color.scss b/src/scss/uswds-theme/_color.scss index aafa7fa7..819bfff6 100644 --- a/src/scss/uswds-theme/_color.scss +++ b/src/scss/uswds-theme/_color.scss @@ -43,6 +43,7 @@ $site-palette: ( 'site-dark-green': #116523, 'site-green': #18852e, 'site-light-green': #ebfcef, + 'site-white': #ffffff, ); $project-color-shortcodes: $site-palette; diff --git a/src/scss/uswds-theme/_spacing.scss b/src/scss/uswds-theme/_spacing.scss index a8654e3c..e1679c29 100644 --- a/src/scss/uswds-theme/_spacing.scss +++ b/src/scss/uswds-theme/_spacing.scss @@ -41,6 +41,7 @@ Border radius $theme-border-radius-sm: 2px; $theme-border-radius-md: 0.5; $theme-border-radius-lg: 1; +$theme-border-radius-xxl: 24px !default; /* ---------------------------------------- From 661ad7e21071602ed6ba7f844082f1d4f4e73ff9 Mon Sep 17 00:00:00 2001 From: Laura Gerhardt Date: Thu, 30 May 2019 16:48:17 -0400 Subject: [PATCH 2/5] add lg prefix to badge --- docs/_components/badges.md | 4 ++-- src/scss/components/_verification-badge.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/_components/badges.md b/docs/_components/badges.md index 3ae1fcc6..f94aedc8 100644 --- a/docs/_components/badges.md +++ b/docs/_components/badges.md @@ -11,7 +11,7 @@ Badges are comprised with a div using the `verification-badge` class and then a ## An unphishable badge example {% capture example %} -
+
unphishable icon Unphishable @@ -23,7 +23,7 @@ Badges are comprised with a div using the `verification-badge` class and then a ## An verified account badge example {% capture example %} -
+
verification icon Verified Account diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss index cd09e3ca..c3eb3923 100644 --- a/src/scss/components/_verification-badge.scss +++ b/src/scss/components/_verification-badge.scss @@ -1,7 +1,7 @@ $space-1: .5rem !default; $space-2: 1rem !default; -.verification-badge { +.lg-verification-badge { text-align: center; top: $space-1; @@ -17,7 +17,7 @@ $space-2: 1rem !default; } @media #{$theme-site-margins-breakpoint} { - .verification-badge { + .lg-verification-badge { margin: -$space-1 0 0; position: static; text-align: right; From 79a188fc0e1917acda0ab9128fa765df680fe420 Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 31 May 2019 09:22:20 -0700 Subject: [PATCH 3/5] adjusting alignment of text, adding guidance --- docs/_components/badges.md | 25 +++++++++----------- src/scss/components/_verification-badge.scss | 22 ++++++++++------- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/docs/_components/badges.md b/docs/_components/badges.md index f94aedc8..627ac8ef 100644 --- a/docs/_components/badges.md +++ b/docs/_components/badges.md @@ -4,33 +4,30 @@ lead: > Badges are used to encourage user behavior throughout the site. --- -Badges can help signal to the user that they had completed a workflow desired by Login.gov. Primarily, these are used on our user account page to encourage more secure practices. +Badges can help signal to the user that they had completed a workflow desired by Login.gov. Primarily, these are used on our user account page to encourage more secure practices. -Badges are comprised with a div using the `verification-badge` class and then a `span` with a small svg image and the text of the badge. +Badges are comprised with a div using the `lg-verification-badge` class and a small SVG image alongside a `span` of text. ## An unphishable badge example +The unphishable badge is used to indicate that an account is only using security keys as its MFA method. + {% capture example %}
- - unphishable icon - Unphishable - + unphishable icon + Unphishable
{% endcapture %} {% include helpers/code-example.html code=example %} -## An verified account badge example +## A verified account badge example + +A verfied account badge is used to indicate that an account has completed the identity verification process. {% capture example %}
- - verification icon - Verified Account - + verification icon + Verified Account
{% endcapture %} {% include helpers/code-example.html code=example %} - - - diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss index c3eb3923..5590dc65 100644 --- a/src/scss/components/_verification-badge.scss +++ b/src/scss/components/_verification-badge.scss @@ -2,17 +2,21 @@ $space-1: .5rem !default; $space-2: 1rem !default; .lg-verification-badge { - text-align: center; - top: $space-1; + + background-color: map-get($site-palette, 'site-white'); + border: 1px solid map-get($site-palette, 'site-green'); + border-radius: $theme-border-radius-xxl; + box-sizing: border-box; + display: inline-block; + padding: $space-1 $space-2; + white-space: nowrap; + + img { + margin-right: $space-1; + } span { - background-color: map-get($site-palette, 'site-white'); - border: 1px solid map-get($site-palette, 'site-green'); - border-radius: $theme-border-radius-xxl; - box-sizing: border-box; - display: inline-block; - padding: $space-1 $space-2; - white-space: nowrap; + vertical-align: text-top; } } From 98f59ce0ce8e0e835022a4f0360ec7ebbc736ed0 Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 31 May 2019 09:29:19 -0700 Subject: [PATCH 4/5] change to units function --- src/scss/components/_verification-badge.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss index 5590dc65..5931b03e 100644 --- a/src/scss/components/_verification-badge.scss +++ b/src/scss/components/_verification-badge.scss @@ -4,15 +4,15 @@ $space-2: 1rem !default; .lg-verification-badge { background-color: map-get($site-palette, 'site-white'); - border: 1px solid map-get($site-palette, 'site-green'); + border: units(1px) solid map-get($site-palette, 'site-green'); border-radius: $theme-border-radius-xxl; box-sizing: border-box; display: inline-block; - padding: $space-1 $space-2; + padding: units(1) units(2); white-space: nowrap; img { - margin-right: $space-1; + margin-right: units(1); } span { @@ -22,7 +22,7 @@ $space-2: 1rem !default; @media #{$theme-site-margins-breakpoint} { .lg-verification-badge { - margin: -$space-1 0 0; + margin: units(-1) 0 0; position: static; text-align: right; } From 5280cf012cac6895a904bd5d97d13ab8b510225c Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 31 May 2019 09:29:55 -0700 Subject: [PATCH 5/5] remove space variable --- src/scss/components/_verification-badge.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss index 5931b03e..298b5965 100644 --- a/src/scss/components/_verification-badge.scss +++ b/src/scss/components/_verification-badge.scss @@ -1,6 +1,3 @@ -$space-1: .5rem !default; -$space-2: 1rem !default; - .lg-verification-badge { background-color: map-get($site-palette, 'site-white');