From 3566c12cf2d616530c02b02c4032cff5ae7f970d Mon Sep 17 00:00:00 2001 From: Ray Estrada Date: Tue, 28 Nov 2023 16:26:07 -0800 Subject: [PATCH] VOTE-246 refactor the loading of css Remove react shortcode --- assets/styles/main.scss | 2 +- assets/styles/nvrf.scss | 105 ++++++++++++++++++++++++++++++++ content/en/nvrf-test/index.html | 2 - gulp/nvrf.js | 4 +- gulp/styles.js | 2 +- layouts/nvrf/single.html | 3 + layouts/shortcodes/nvrfapp.html | 4 -- package-lock.json | 8 +-- package.json | 2 +- 9 files changed, 117 insertions(+), 15 deletions(-) create mode 100644 assets/styles/nvrf.scss delete mode 100644 layouts/shortcodes/nvrfapp.html diff --git a/assets/styles/main.scss b/assets/styles/main.scss index b289db20b..5f6f0f416 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -20,8 +20,8 @@ $theme-show-notifications: false, @forward "usa-language-selector"; // NVRF dependencies --------------- // @forward "usa-card"; -@forward "usa-process-list"; @forward "usa-step-indicator"; +@forward "usa-icon-list"; @forward "uswds-fonts"; @forward "uswds-helpers"; diff --git a/assets/styles/nvrf.scss b/assets/styles/nvrf.scss new file mode 100644 index 000000000..61aa24a42 --- /dev/null +++ b/assets/styles/nvrf.scss @@ -0,0 +1,105 @@ +.nvrf-app-container { + /* Global */ + .usa-button { + background-color: #11385B; + } + + .usa-card__container { + border-radius: 0; + border-color: #000; + } + .error-container { + border-left: 3px solid #b50909; + padding-left: 15px; + } + + .error-text { + color: #b50909; + } + + .back-button { + background-color: transparent; + } + + .divider-grey { + display: inline-block; + height: 1px; + width:100%; + border: 1px solid #DCDEE0; + } + + .usa-form a:visited { + color: unset; + } + + .link-button-outline { + background-color: rgba(0,0,0,0); + box-shadow: inset 0 0 0 2px #11385B; + color: #11385B; + text-decoration: none; + } + + .link-button-outline:hover { + color: white !important; + background-color: #11385B; + } + + .link-button-filled { + color: white !important; + text-decoration: none; + } + + /* Form */ + @media only screen and (min-width: 640px) { + .bottom { + position: absolute; + bottom: 0; + } + } + + .input-example { + min-height: 154px; + } + + .fieldset { + display: contents; + } + + .usa-step-indicator__header { + display: none !important; + } + + .confirm-info .usa-button { + background-color: inherit; + } + + /* RegistrationOptions */ + .divider { + position: relative; + } + + .divider > span { + display: block; + height: 48px; + width: 48px; + line-height: 46px; + border-radius: 30px; + background-color: #DEE9F0;; + color: #11385B; + + text-align: center; + font-size: 18px; + margin-left: calc(50% - 24px); + } + + .divider:after { + content: ''; + position: absolute; + width: 100%; + height: 2px; /* suit your need */ + background: #DEE9F0; /* suit your need */ + top: 50%; + left: 0; + z-index: -1; + } +} diff --git a/content/en/nvrf-test/index.html b/content/en/nvrf-test/index.html index 27d6f07e1..52da85826 100644 --- a/content/en/nvrf-test/index.html +++ b/content/en/nvrf-test/index.html @@ -4,5 +4,3 @@ type = "nvrf" meta_description = "Vote.gov is a United States government website that provides trusted voting information and can help you find voter registration rules for your state." +++ - -{{< nvrfapp >}} diff --git a/gulp/nvrf.js b/gulp/nvrf.js index d3caf1fd8..b1b5c4ff4 100644 --- a/gulp/nvrf.js +++ b/gulp/nvrf.js @@ -6,10 +6,10 @@ var destPagePath = 'nvrf-test'; gulp.task('nvrf-assets', function () { var stream = gulp.src([ - './node_modules/vote-gov-nvrf-app/dist/assets/*' + './node_modules/vote-gov-nvrf-app/dist/assets/index.js' ]); - return stream.pipe(gulp.dest('./static/assets/nvrf/assets')); + return stream.pipe(gulp.dest('./static/assets/nvrf')); }); diff --git a/gulp/styles.js b/gulp/styles.js index edada69ce..57b3de1a4 100644 --- a/gulp/styles.js +++ b/gulp/styles.js @@ -27,7 +27,7 @@ gulp.task('styles', gulp.series('scss-lint', function () { log(colors.cyan('styles'), 'Compiling Sass assets'); var scssStream = scss({includePaths: ["node_modules/@uswds/uswds/packages"]}); - var stream = gulp.src('./assets/styles/main.scss'); + var stream = gulp.src(['./assets/styles/main.scss', './assets/styles/nvrf.scss']); if (process.env.NODE_ENV === 'production') { log(colors.cyan('styles'), 'Compressing styles'); diff --git a/layouts/nvrf/single.html b/layouts/nvrf/single.html index 713c70325..f97ef2aee 100644 --- a/layouts/nvrf/single.html +++ b/layouts/nvrf/single.html @@ -3,17 +3,20 @@ {{ partial "head.html" . }} + {{ partial "header.html" . }}
{{ .Content }} +
{{ partial "footer.html" . }} {{ partial "analytics.html" . }} {{ partial "scripts.html" . }} + diff --git a/layouts/shortcodes/nvrfapp.html b/layouts/shortcodes/nvrfapp.html deleted file mode 100644 index 099d5cef4..000000000 --- a/layouts/shortcodes/nvrfapp.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - - diff --git a/package-lock.json b/package-lock.json index 6b4faff51..79ce1681d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "sass": "^1.56.1", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", - "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#v0.1.0" + "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#feature/VOTE-246-nvrf-int" }, "devDependencies": { "axe-core": "^4.5.2", @@ -14418,7 +14418,7 @@ }, "node_modules/vote-gov-nvrf-app": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/usagov/vote-gov-nvrf-app.git#109f237ddea10156980b46b7af515fa97fa32bec", + "resolved": "git+ssh://git@github.com/usagov/vote-gov-nvrf-app.git#091152b68b60e03dd56a28ad19690fee17deb982", "hasInstallScript": true, "dependencies": { "@trussworks/react-uswds": "^4.2.1", @@ -25565,8 +25565,8 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, "vote-gov-nvrf-app": { - "version": "git+ssh://git@github.com/usagov/vote-gov-nvrf-app.git#109f237ddea10156980b46b7af515fa97fa32bec", - "from": "vote-gov-nvrf-app@github:usagov/vote-gov-nvrf-app#v0.1.0", + "version": "git+ssh://git@github.com/usagov/vote-gov-nvrf-app.git#091152b68b60e03dd56a28ad19690fee17deb982", + "from": "vote-gov-nvrf-app@github:usagov/vote-gov-nvrf-app#feature/VOTE-246-nvrf-int", "requires": { "@trussworks/react-uswds": "^4.2.1", "@types/react": "^18.0.37", diff --git a/package.json b/package.json index 507dd159b..8e177b0a0 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "sass": "^1.56.1", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", - "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#v0.1.0" + "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#feature/VOTE-246-nvrf-int" }, "devDependencies": { "axe-core": "^4.5.2",