LG-3427: Size desktop selfie capture aligned to ID inputs in review s…

…tep (#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

@@ -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'],
 };

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 ? <FormErrorMessage error={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 ? <FormErrorMessage error={selfieError} /> : undefined}
             />
           ) : (
@@ -112,6 +113,12 @@ function ReviewIssuesStep({
               value={value.selfie}
               onChange={(nextSelfie) => onChange({ selfie: nextSelfie })}
               errorMessage={selfieError ? <FormErrorMessage error={selfieError} /> : undefined}
+              className={[
+                'document-capture-review-issues-step__input',
+                !value.selfie && 'document-capture-review-issues-step__input--unconstrained-width',
+              ]
+                .filter(Boolean)
+                .join(' ')}
             />
           )}
         </>

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;
+}

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(' ');

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' %>

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;

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

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(<SelfieCapture className="example" />);
+
+    expect(container.querySelector('.selfie-capture.example')).to.be.ok();
+  });
 });

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'] = () => {};