From 8003e474a2e77e45c62a3c138201ee48e7b7e5cc Mon Sep 17 00:00:00 2001 From: Laurie Reynolds Date: Mon, 25 Nov 2024 14:10:19 -0800 Subject: [PATCH] fix(arpa_reporting): add main and h1 elements - axe-dev finding (#3753) * fix(arpa_reporting): add main and h1 elements - axe-dev finding * fix(arpa reporter): update colors to fix color contrast * fix(arpa reporter): update colors --- .../components/PageNavigation.vue | 175 +++++++++--------- .../scss/colors-base-tokens.scss | 77 ++++++++ .../scss/colors-semantic-tokens.scss | 75 ++++++++ .../client/src/arpa_reporter/scss/fonts.scss | 61 ++++++ .../client/src/arpa_reporter/scss/index.scss | 127 +++++++++++-- .../arpa_reporter/views/AgenciesView.spec.js | 2 + .../src/arpa_reporter/views/AgenciesView.vue | 2 +- .../src/arpa_reporter/views/AgencyView.vue | 2 +- .../src/arpa_reporter/views/HomeView.vue | 7 +- .../views/ReportingPeriodView.vue | 2 +- .../views/ReportingPeriodsView.vue | 2 +- .../arpa_reporter/views/SubrecipientView.vue | 2 +- .../arpa_reporter/views/SubrecipientsView.vue | 2 +- .../src/arpa_reporter/views/UploadView.vue | 1 + .../src/arpa_reporter/views/UploadsView.vue | 2 +- .../src/arpa_reporter/views/UsersView.vue | 2 +- .../arpa_reporter/views/ValidationView.vue | 2 +- 17 files changed, 431 insertions(+), 112 deletions(-) create mode 100644 packages/client/src/arpa_reporter/scss/colors-base-tokens.scss create mode 100644 packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss create mode 100644 packages/client/src/arpa_reporter/scss/fonts.scss diff --git a/packages/client/src/arpa_reporter/components/PageNavigation.vue b/packages/client/src/arpa_reporter/components/PageNavigation.vue index f1a0372ca..7dbbc2ef2 100644 --- a/packages/client/src/arpa_reporter/components/PageNavigation.vue +++ b/packages/client/src/arpa_reporter/components/PageNavigation.vue @@ -14,7 +14,7 @@ Reporting Period Ending:
- {{ email }} + {{ email }}
- - + + + + + @@ -221,9 +222,9 @@ export default { }, navLinkClass(to) { if (this.$route.path === to) { - return 'nav-link active'; + return 'nav-link usdr-tab-nav-link active'; } - return 'nav-link'; + return 'nav-link usdr-tab-nav-link'; }, dateFormat(d) { return moment(d) diff --git a/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss b/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss new file mode 100644 index 000000000..8c9b09fdd --- /dev/null +++ b/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss @@ -0,0 +1,77 @@ +/** + * colors-base-tokens.scss + * + * Color base token definition file, based on USDR style guide. + * + * Please refer to USDR style guide definition in Figma: + * https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1 + */ + +// USDR BRAND +$usdr-brand-primary: #305CE0; +$usdr-brand-secondary: #071A51; + +// BLUE +$raw-blue-50: #EAF5FE; +$raw-blue-100: #D8ECFE; +$raw-blue-200: #B3DAFF; +$raw-blue-300: #8EC5FF; +$raw-blue-400: #61A6FF; +$raw-blue-500: #3D80FB; +$raw-blue-600: #305CE0; +$raw-blue-700: #2348C2; +$raw-blue-800: #0D2F81; +$raw-blue-900: #0D2F81; + +// GRAY +$raw-gray-50: #F4F7F9; +$raw-gray-100: #ECF0F3; +$raw-gray-200: #DAE0E5; +$raw-gray-300: #B1B8BE; +$raw-gray-400: #879097; +$raw-gray-500: #6D7278; +$raw-gray-600: #43464A; +$raw-gray-700: #1F2123; +$raw-gray-800: #121212; +$raw-gray-900: #0A0A0A; +$raw-black-alpha-600: rgba(0, 0, 0, 48); + +// GREEN +$raw-green-50: #DAFCE4; +$raw-green-100: #C5F6D4; +$raw-green-200: #9FE6B7; +$raw-green-300: #77D498; +$raw-green-400: #43B874; +$raw-green-500: #20975A; +$raw-green-600: #107747; +$raw-green-700: #15603F; +$raw-green-800: #173D2B; +$raw-green-900: #142B20; + +// YELLOW +$raw-yellow-50: #FEF5CD; +$raw-yellow-100: #FBEBA7; +$raw-yellow-200: #F2D564; +$raw-yellow-300: #E2BE3C; +$raw-yellow-400: #C69F20; +$raw-yellow-500: #A67F12; +$raw-yellow-550: #956F0D; +$raw-yellow-600: #85620B; +$raw-yellow-700: #6F4F0B; +$raw-yellow-800: #493109; +$raw-yellow-900: #362305; + +// RED +$raw-red-50: #FEF0EF; +$raw-red-100: #FDE5E3; +$raw-red-200: #FCCAC7; +$raw-red-300: #F8AFA9; +$raw-red-400: #ED8780; +$raw-red-500: #DC5B56; +$raw-red-600: #C22E31; +$raw-red-700: #A8161E; +$raw-red-800: #6D1210; +$raw-red-900: #4C110B; + +// WHITE +$raw-white: #FFFFFF; diff --git a/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss b/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss new file mode 100644 index 000000000..7dd8603c3 --- /dev/null +++ b/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss @@ -0,0 +1,75 @@ +/** + * colors-semantic-tokens.scss + * + * Semantic token definition for USDR style guide. + * + * Please refer to USDR style guide definition in Figma: + * https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1 + */ + +@import './colors-base-tokens.scss'; + +// USDR BRAND +$brand-primary: $usdr-brand-primary; +$brand-hover: $raw-blue-700; +$brand-active: $raw-blue-800; +$brand-content: $raw-white; +$brand-accent: $raw-blue-100; +$brand-accentContent: $raw-gray-700; + +// POSITIVE +$positive-default: $raw-green-600; +$positive-hover: $raw-green-700; +$positive-active: $raw-green-800; +$positive-content: $raw-white; +$positive-accent: $raw-green-100; +$positive-accentContent: $raw-gray-700; + +// NEGATIVE +$negative-default: $raw-red-600; +$negative-hover: $raw-red-700; +$negative-active: $raw-red-800; +$negative-content: $raw-white; +$negative-accent: $raw-red-100; +$negative-accentContent: $raw-gray-700; + +// WARNING +$warning-default: $raw-yellow-550; +$warning-hover: $raw-yellow-600; +$warning-active: $raw-yellow-700; +$warning-content: $raw-white; +$warning-accent: $raw-yellow-50; +$warning-accentContent: $raw-gray-700; + +// INFO +$info-default: $raw-blue-600; +$info-hover: $raw-blue-700; +$info-active: $raw-blue-800; +$info-content: $raw-white; +$info-accent: $raw-blue-100; +$info-accentContent: $raw-gray-700; + +// SURFACE +$surface-foreground: $raw-white; +$surface-background: $raw-white; +$surface-accent: $raw-gray-50; +$surface-canvas: $raw-gray-50; +$surface-overlay: $raw-black-alpha-600; + +// BORDER +$border: $raw-gray-300; +$border-hover: $raw-gray-400; + +// ICON +$icon-default: $raw-gray-600; + +// INTERACTIVE +$interactive-active: $raw-blue-50; + +// TEXT +$text-primary: $raw-gray-700; +$text-secondary: $raw-gray-600; +$text-placeholder: $raw-gray-500; + +// LINKS +$link-back: $raw-gray-500; \ No newline at end of file diff --git a/packages/client/src/arpa_reporter/scss/fonts.scss b/packages/client/src/arpa_reporter/scss/fonts.scss new file mode 100644 index 000000000..4b2664462 --- /dev/null +++ b/packages/client/src/arpa_reporter/scss/fonts.scss @@ -0,0 +1,61 @@ +/** + * fonts.scss + * + * Set font styles across GOST frontend. + */ + +// IMPORT FONTS FROM GOOGLE FONTS: +// INTER MEDIUM 500 (BODY FONT) +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); + +// SET BODY FONTS TO INTER +body { + font-family: Inter, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 500; + color: $text-primary; +} + +// Setting the same styles for heading elements and heading classes so there's flexibility in separating semantic headings from visual heading style +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { + font-weight: 700; + line-height: 120%; +} + +h1, .h1 { // called 'headingXL' in USDR Design System + font-size: 2.375rem; // 38px +} + +h2, .h2 { // 'headingLarge' + font-size: 1.875rem; // 30px +} + +h3, .h3 { // 'headingMedium' + font-size: 1.25rem; +} + +h4, .h4 { // 'headingSmall' + font-size: 1rem; +} + +h5, .h5, p { // 'headingXS' and 'body' + font-size: 0.875rem; // 14px +} + +h6, .h6, .caption { // 'caption' + font-size: 0.8125rem; // 13px +} + +// SET BODY FONTS TO INTER +body { + font-family: Inter, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 500; +} + +/* Bold text of active tabs and grant detail labels */ +.nav-tabs .nav-link.active, .data-label { + font-weight: 700; +} \ No newline at end of file diff --git a/packages/client/src/arpa_reporter/scss/index.scss b/packages/client/src/arpa_reporter/scss/index.scss index 6724c32f3..af1da43fb 100644 --- a/packages/client/src/arpa_reporter/scss/index.scss +++ b/packages/client/src/arpa_reporter/scss/index.scss @@ -1,22 +1,123 @@ -// override theme variables here +/** + * custom.scss + * + * Theme definition file, based on USDR style guide. + * Imports sub-files: + * - ./fonts.scss + * - ./colors-semantic-tokens.scss + * - ./colors-base-tokens.scss + * + * Please refer to USDR style guide definition in Figma: + * https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1 + */ -$theme-colors: ( - "primary": #1565c0, - "secondary": #607d8b, -); +// IMPORT USDR DESIGN SYSTEM SEMANTIC TOKENS +@import './colors-semantic-tokens.scss'; -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #2c3e50; -} +// LIGHT THEME (SEMANTIC TOKEN) DEFINITION - SASS MAP +$theme-colors: ( + ) !default; +$theme-colors: map-merge(( // DEFAULT BOOTSTRAP COLORS + "blue": #007bff, + "indigo": #6610f2, + "purple": #6f42c1, + "pink": #e83e8c, + "red": #dc3545, + "orange": #fd7e14, + "yellow": #ffc107, + "green": #28a745, + "teal": #20c997, + "cyan": #17a2b8, + "white": #fff, + "gray": #6c757d, + "gray-dark": #343a40, + // USDR BRAND COLORS + "primary": $usdr-brand-primary, + "secondary": $usdr-brand-secondary, + "success": $positive-default, + "info": $info-default, + "warning": $warning-default, + "danger": $negative-default, + "light": $raw-gray-100, + "dark": $raw-gray-800, + ), + $theme-colors +); @import 'bootstrap/scss/bootstrap.scss'; @import 'bootstrap-vue/src/index.scss'; @import 'vue-select/src/scss/vue-select.scss'; -// @import '@braid/vue-formulate/themes/snow/snow.scss'; +// SET USDR FONTS +@import './fonts.scss'; + +/* Dropshadow for the header */ +.header-dropshadow { + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); +} + +/* Card with dropshadow - used on login screen */ +.dropshadow-card { + box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), + 0px 4px 6px -2px rgba(0, 0, 0, 0.05); + border-bottom: 1px solid #DFE1E6, 1px solid white; + border-radius: 16px; +} + +hr { + border-color: $border; +} + +/* Dashboard colors */ +.color-gray { + color: $text-placeholder; +} + +.color-yellow { + color: $warning-default; +} + +.color-red { + color: $negative-default; +} + +.color-green { + color: $positive-default; +} + +.usdr-tab-nav-link { + color: #305CE0; +} + +.usdr-nav-link { + color: rgba(0,0,0); + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.usdr-navbar-text { + color: rgba(0,0,0) +} + +.btn.usdr-btn-primary, +.btn.usdr-btn-primary:hover { + color: #ffff; + background-color: $usdr-brand-primary; + border-color: $usdr-brand-primary; +} + +.btn.usdr-btn-info, +.btn.usdr-btn-info:hover { + color: #ffffff; + background-color: #008299; + border-color: #008299; +} -/* NOTE: This file was copied from scss/index.scss (git @ ada8bfdc98) in the arpa-reporter repo on 2022-09-23T20:05:47.735Z */ \ No newline at end of file +/* Allows truncation (text-truncate) for flex items */ +.has-flexi-truncate { + -webkit-box-flex: 1; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + min-width: 0; +} \ No newline at end of file diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.spec.js b/packages/client/src/arpa_reporter/views/AgenciesView.spec.js index d806becf6..a467bdd44 100644 --- a/packages/client/src/arpa_reporter/views/AgenciesView.spec.js +++ b/packages/client/src/arpa_reporter/views/AgenciesView.spec.js @@ -28,6 +28,8 @@ describe('AgenciesView.vue', () => { const r = wrapper.find('tbody'); expect(r.text()).toContain('Agency 1'); expect(r.text()).toContain('Agency 2'); + const header = wrapper.find('h1'); + expect(header.text()).toContain('Agencies'); }); }); diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.vue b/packages/client/src/arpa_reporter/views/AgenciesView.vue index 40c0a6ff4..690f65f8f 100644 --- a/packages/client/src/arpa_reporter/views/AgenciesView.vue +++ b/packages/client/src/arpa_reporter/views/AgenciesView.vue @@ -1,6 +1,6 @@