From b5740b5338fb5ecb29082980e210cf4bfba9e5ce Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 5 Oct 2020 15:30:24 -0400 Subject: [PATCH] LG-3427: Size desktop selfie capture aligned to ID inputs in review step (#4260) * LG-3427: Size desktop selfie capture aligned to ID inputs in review step **Why**: Per design, for consistent width of inputs on Review Issues step. * Add stylesheet for ReviewIssuesStep component * Disable PostCSS loader **Why**: Errors if plugins provided, warns if plugins not provided. Not intending to use any plugins. Wasted overhead to run loader when unused. * Ignore SCSS imports in test runner * Accept optional class on SelfieCapture component * Remove width constraint on selfie field if taking photo --- .mocharc.js | 2 +- .postcssrc.yml | 3 --- .../components/review-issues-step.jsx | 11 +++++++++-- .../components/review-issues-step.scss | 3 +++ .../document-capture/components/selfie-capture.jsx | 4 +++- app/views/idv/shared/_document_capture.html.erb | 1 + config/webpack/environment.js | 7 +++++++ config/webpacker.yml | 3 +++ .../components/selfie-capture-spec.jsx | 6 ++++++ spec/javascripts/support/babel.js | 1 - spec/javascripts/support/mocha.js | 7 +++++++ 11 files changed, 40 insertions(+), 8 deletions(-) delete mode 100644 .postcssrc.yml create mode 100644 app/javascript/packages/document-capture/components/review-issues-step.scss delete mode 100644 spec/javascripts/support/babel.js create mode 100644 spec/javascripts/support/mocha.js diff --git a/.mocharc.js b/.mocharc.js index 8afe5665937..edc006b3b2f 100644 --- a/.mocharc.js +++ b/.mocharc.js @@ -1,7 +1,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'test'; module.exports = { - require: ['./spec/javascripts/support/babel.js'], + require: ['./spec/javascripts/support/mocha.js'], file: 'spec/javascripts/spec_helper.js', extension: ['js', 'jsx'], }; diff --git a/.postcssrc.yml b/.postcssrc.yml deleted file mode 100644 index 150dac3c6c6..00000000000 --- a/.postcssrc.yml +++ /dev/null @@ -1,3 +0,0 @@ -plugins: - postcss-import: {} - postcss-cssnext: {} diff --git a/app/javascript/packages/document-capture/components/review-issues-step.jsx b/app/javascript/packages/document-capture/components/review-issues-step.jsx index 6396cf336aa..6204ef70ea9 100644 --- a/app/javascript/packages/document-capture/components/review-issues-step.jsx +++ b/app/javascript/packages/document-capture/components/review-issues-step.jsx @@ -6,6 +6,7 @@ import AcuantCapture from './acuant-capture'; import SelfieCapture from './selfie-capture'; import FormErrorMessage from './form-error-message'; import ServiceProviderContext from '../context/service-provider'; +import './review-issues-step.scss'; /** * @typedef ReviewIssuesStepValue @@ -79,7 +80,7 @@ function ReviewIssuesStep({ bannerText={t(`doc_auth.headings.${side}`)} value={value[side]} onChange={(nextValue) => onChange({ [side]: nextValue })} - className="id-card-file-input" + className="id-card-file-input document-capture-review-issues-step__input" errorMessage={sideError ? : undefined} /> ); @@ -103,7 +104,7 @@ function ReviewIssuesStep({ value={value.selfie} onChange={(nextSelfie) => onChange({ selfie: nextSelfie })} allowUpload={false} - className="id-card-file-input" + className="id-card-file-input document-capture-review-issues-step__input" errorMessage={selfieError ? : undefined} /> ) : ( @@ -112,6 +113,12 @@ function ReviewIssuesStep({ value={value.selfie} onChange={(nextSelfie) => onChange({ selfie: nextSelfie })} errorMessage={selfieError ? : undefined} + className={[ + 'document-capture-review-issues-step__input', + !value.selfie && 'document-capture-review-issues-step__input--unconstrained-width', + ] + .filter(Boolean) + .join(' ')} /> )} diff --git a/app/javascript/packages/document-capture/components/review-issues-step.scss b/app/javascript/packages/document-capture/components/review-issues-step.scss new file mode 100644 index 00000000000..a5743641bf6 --- /dev/null +++ b/app/javascript/packages/document-capture/components/review-issues-step.scss @@ -0,0 +1,3 @@ +.document-capture-review-issues-step__input:not(.document-capture-review-issues-step__input--unconstrained-width) { + max-width: 375px; +} diff --git a/app/javascript/packages/document-capture/components/selfie-capture.jsx b/app/javascript/packages/document-capture/components/selfie-capture.jsx index ec42b869f17..8fd8a87b775 100644 --- a/app/javascript/packages/document-capture/components/selfie-capture.jsx +++ b/app/javascript/packages/document-capture/components/selfie-capture.jsx @@ -22,12 +22,13 @@ import useFocusFallbackRef from '../hooks/use-focus-fallback-ref'; * @prop {Blob|string|null|undefined} value Current value. * @prop {(nextValue:Blob|string|null)=>void} onChange Change handler. * @prop {ReactNode=} errorMessage Error to show. + * @prop {string=} className Optional additional class names to apply to wrapper element. */ /** * @param {SelfieCaptureProps} props Props object. */ -function SelfieCapture({ value, onChange, errorMessage }, ref) { +function SelfieCapture({ value, onChange, errorMessage, className }, ref) { const instanceId = useInstanceId(); const { t } = useI18n(); const labelRef = useRef(/** @type {HTMLDivElement?} */ (null)); @@ -132,6 +133,7 @@ function SelfieCapture({ value, onChange, errorMessage }, ref) { isCapturing && 'selfie-capture--capturing', shownErrorMessage && 'selfie-capture--error', value && 'selfie-capture--has-value', + className, ] .filter(Boolean) .join(' '); diff --git a/app/views/idv/shared/_document_capture.html.erb b/app/views/idv/shared/_document_capture.html.erb index 9e67ef3b65c..1e1848bba4d 100644 --- a/app/views/idv/shared/_document_capture.html.erb +++ b/app/views/idv/shared/_document_capture.html.erb @@ -115,3 +115,4 @@ window.LoginGov.assets = <%= raw asset_keys.map { |key| [key, asset_path(key)] }.to_h.to_json %>; <% end %> <%= javascript_pack_tag 'document-capture' %> +<%= stylesheet_pack_tag 'document-capture' %> diff --git a/config/webpack/environment.js b/config/webpack/environment.js index 411bea1baef..5d7f8c479c0 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,7 +1,14 @@ const { environment } = require('@rails/webpacker'); +environment.loaders.delete('moduleSass'); +environment.loaders.delete('moduleCss'); +environment.loaders.delete('css'); + const babelLoader = environment.loaders.get('babel'); babelLoader.include.push(/node_modules\/@18f\/identity-/); babelLoader.exclude = /node_modules\/(?!@18f\/identity-)/; +const sassLoader = environment.loaders.get('sass'); +sassLoader.use = sassLoader.use.filter(({ loader }) => loader !== 'postcss-loader'); + module.exports = environment; diff --git a/config/webpacker.yml b/config/webpacker.yml index 30be5d25900..de4ca47f163 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -13,6 +13,9 @@ default: &default # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false + # Extract and emit a css file + extract_css: true + extensions: - .jsx - .js diff --git a/spec/javascripts/packages/document-capture/components/selfie-capture-spec.jsx b/spec/javascripts/packages/document-capture/components/selfie-capture-spec.jsx index 573867a5a57..8286a1a79b7 100644 --- a/spec/javascripts/packages/document-capture/components/selfie-capture-spec.jsx +++ b/spec/javascripts/packages/document-capture/components/selfie-capture-spec.jsx @@ -89,4 +89,10 @@ describe('document-capture/components/selfie-capture', () => { await findByText('doc_auth.buttons.take_picture_retry'); }); + + it('accepts additional className to apply to container element', () => { + const { container } = render(); + + expect(container.querySelector('.selfie-capture.example')).to.be.ok(); + }); }); diff --git a/spec/javascripts/support/babel.js b/spec/javascripts/support/babel.js deleted file mode 100644 index 8e291c1befc..00000000000 --- a/spec/javascripts/support/babel.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@babel/register')({ ignore: [/node_modules\/(?!@18f\/identity-)/] }); diff --git a/spec/javascripts/support/mocha.js b/spec/javascripts/support/mocha.js new file mode 100644 index 00000000000..9a30d7caeee --- /dev/null +++ b/spec/javascripts/support/mocha.js @@ -0,0 +1,7 @@ +const babelRegister = require('@babel/register'); + +babelRegister({ ignore: [/node_modules\/(?!@18f\/identity-)/] }); + +// Ignore SCSS imports. These are handled by Webpack in the browser build, but will cause parse +// errors if loaded in Node. +require.extensions['.scss'] = () => {};