LG-3865: Update React button component prop names to align to design system

app/javascript/packages/document-capture/components/acuant-capture.jsx

@@ -363,7 +363,7 @@ function AcuantCapture(
       <div className="margin-top-2">
         {isMobile && (
           <Button
-            isSecondary={!value}
+            isOutline={!value}
             isUnstyled={!!value}
             onClick={startCaptureOrTriggerUpload}
             className={value ? 'margin-right-1' : 'margin-right-2'}

app/javascript/packages/document-capture/components/button.jsx

@@ -5,17 +5,15 @@
 /**
  * @typedef ButtonProps
  *
- * @prop {ButtonType=}              type        Button type, defaulting to "button".
- * @prop {(ReactMouseEvent)=>void=} onClick     Click handler.
- * @prop {ReactNode=}               children    Element children.
- * @prop {boolean=}                 isPrimary   Whether button should be styled as primary button.
- * @prop {boolean=}                 isSecondary Whether button should be styled as secondary button.
- * @prop {boolean=}                 isDisabled  Whether button is disabled.
- * @prop {boolean=}                 isUnstyled  Whether button should be unstyled, visually as a
- *                                              link.
- * @prop {boolean=}                 isVisuallyDisabled Whether button should appear disabled (but
- *                                                     remain clickable).
- * @prop {string=}                  className   Optional additional class names.
+ * @prop {ButtonType=} type Button type, defaulting to "button".
+ * @prop {(ReactMouseEvent)=>void=} onClick Click handler.
+ * @prop {ReactNode=} children Element children.
+ * @prop {boolean=} isWide Whether button should be styled as primary button.
+ * @prop {boolean=} isOutline Whether button should be styled as secondary button.
+ * @prop {boolean=} isDisabled Whether button is disabled.
+ * @prop {boolean=} isUnstyled Whether button should be unstyled, visually as a link.
+ * @prop {boolean=} isVisuallyDisabled Whether button should appear disabled (but remain clickable).
+ * @prop {string=} className Optional additional class names.
  */
 
 /**
@@ -25,17 +23,18 @@ function Button({
   type = 'button',
   onClick,
   children,
-  isPrimary,
-  isSecondary,
+  isWide,
+  isOutline,
   isDisabled,
   isUnstyled,
   isVisuallyDisabled,
   className,
 }) {
   const classes = [
     'btn',
-    isPrimary && 'btn-primary btn-wide',
-    isSecondary && 'btn-secondary',
+    isWide && 'btn-wide',
+    !isOutline && !isUnstyled && 'btn-primary',
+    isOutline && 'btn-secondary',
     isUnstyled && 'btn-link',
     isVisuallyDisabled && 'btn-disabled',
     className,

app/javascript/packages/document-capture/components/form-steps.jsx

@@ -257,7 +257,7 @@ function FormSteps({
       />
       <Button
         type="submit"
-        isPrimary
+        isWide
         className="display-block margin-y-5"
         isVisuallyDisabled={!canContinue}
       >

spec/javascripts/packages/document-capture/components/button-spec.jsx

@@ -13,7 +13,7 @@ describe('document-capture/components/button', () => {
     expect(button.nodeName).to.equal('BUTTON');
     expect(button.type).to.equal('button');
     expect(button.classList.contains('btn')).to.be.true();
-    expect(button.classList.contains('btn-primary')).to.be.false();
+    expect(button.classList.contains('btn-primary')).to.be.true();
     expect(button.classList.contains('btn-secondary')).to.be.false();
     expect(button.classList.contains('btn-wide')).to.be.false();
     expect(button.classList.contains('btn-link')).to.be.false();
@@ -32,8 +32,8 @@ describe('document-capture/components/button', () => {
     expect(onClick.getCall(0).args[0]).to.equal('click');
   });
 
-  it('renders as primary', () => {
-    const { getByText } = render(<Button isPrimary>Click me</Button>);
+  it('renders as wide', () => {
+    const { getByText } = render(<Button isWide>Click me</Button>);
 
     const button = getByText('Click me');
 
@@ -43,8 +43,8 @@ describe('document-capture/components/button', () => {
     expect(button.classList.contains('btn-link')).to.be.false();
   });
 
-  it('renders as secondary', () => {
-    const { getByText } = render(<Button isSecondary>Click me</Button>);
+  it('renders as outline', () => {
+    const { getByText } = render(<Button isOutline>Click me</Button>);
 
     const button = getByText('Click me');