feat(WarningModal): add text confirmation option (#540)

* feat(WarningModal): add text confirmation option

* chore: clarify wording and clean up code

* test: update WarningModal snapshot

* fix(WarningModal): add default props to TextInput

* change confirmInputLabel to ReactNode

* fix(WarningModal): reword default confirmationInputLabel

Author: InsaneZein

cypress/component/WarningModal.cy.tsx

@@ -37,29 +37,57 @@ const CheckboxModal: React.FunctionComponent = () => {
   </>
 };
 
+const TextConfirmationModal: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Delete item?'
+      confirmButtonLabel='Yes'
+      cancelButtonLabel='No'
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}
+      textConfirmation={{ type: 'text', isRequired: true }}
+      deleteName='Item1'>
+      The item will be deleted.
+    </WarningModal>
+  </>
+};
+
 describe('WarningModal', () => {
   it('renders WarningModal', () => {
-    cy.mount(<BasicModal />)
+    cy.mount(<BasicModal />);
     cy.get('button').click();
     cy.get('[data-ouia-component-id="WarningModal"]').should('exist');
     cy.get('[data-ouia-component-id="WarningModal"]').contains('Unsaved changes');
     cy.get('[data-ouia-component-id="WarningModal"]').contains('Your page contains unsaved changes. Do you want to leave?');
   });
 
   it('confirm button should be disabled if checkbox is not checked', () => {
-    cy.mount(<CheckboxModal />)
+    cy.mount(<CheckboxModal />);
     cy.get('button').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
     cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled')
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
   });
 
   it('should reset the confirmation checkbox once reopened', () => {
-    cy.mount(<CheckboxModal />)
+    cy.mount(<CheckboxModal />);
     cy.get('button').click();
     cy.get('[data-ouia-component-id="WarningModal-confirm-checkbox"').click();
     cy.get('[data-ouia-component-id="WarningModal-confirm-button"').click();
     cy.get('button').click();
-    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled')
-  })
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
+  });
+
+  it('confirm button should be enabled only when confirmation text matches the item name', () => {
+    cy.mount(<TextConfirmationModal />);
+    cy.get('button').click();
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('abcd');
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('have.attr', 'disabled');
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').clear();
+    cy.get('[data-ouia-component-id="WarningModal-confirmation-text-input"').type('Item1');
+    cy.get('[data-ouia-component-id="WarningModal-confirm-button"').should('not.have.attr', 'disabled');
+  });
 });