isNameRequired and isEmailRequired

Author: c298lee

packages/feedback/src/widget/Dialog.ts

@@ -45,6 +45,8 @@ export function Dialog({
   showBranding,
   showName,
   showEmail,
+  isNameRequired,
+  isEmailRequired,
   colorScheme,
   isAnonymous,
   defaultName,
@@ -102,6 +104,8 @@ export function Dialog({
     showEmail,
     showName,
     isAnonymous,
+    isEmailRequired,
+    isNameRequired,
 
     defaultName,
     defaultEmail,

packages/feedback/src/widget/Form.ts

@@ -8,6 +8,8 @@ export interface FormComponentProps
     | 'showName'
     | 'showEmail'
     | 'isAnonymous'
+    | 'isNameRequired'
+    | 'isEmailRequired'
     | Exclude<keyof FeedbackTextConfiguration, 'buttonLabel' | 'formTitle' | 'successMessageText'>
   > {
   /**
@@ -58,6 +60,8 @@ export function Form({
   showName,
   showEmail,
   isAnonymous,
+  isNameRequired,
+  isEmailRequired,
 
   defaultName,
   defaultEmail,
@@ -110,19 +114,21 @@ export function Form({
 
   const nameEl = createElement('input', {
     id: 'name',
-    type: showName ? 'text' : 'hidden',
-    ['aria-hidden']: showName ? 'false' : 'true',
+    type: showName || isNameRequired? 'text' : 'hidden',
+    ['aria-hidden']: showName || isNameRequired? 'false' : 'true',
     name: 'name',
+    required: isNameRequired,
     className: 'form__input',
     placeholder: namePlaceholder,
     value: defaultName,
   });
 
   const emailEl = createElement('input', {
     id: 'email',
-    type: showEmail ? 'text' : 'hidden',
-    ['aria-hidden']: showEmail ? 'false' : 'true',
+    type: showEmail || isEmailRequired? 'text' : 'hidden',
+    ['aria-hidden']: showEmail || isEmailRequired? 'false' : 'true',
     name: 'email',
+    required: isEmailRequired,
     className: 'form__input',
     placeholder: emailPlaceholder,
     value: defaultEmail,
@@ -161,28 +167,46 @@ export function Form({
       errorEl,
 
       !isAnonymous &&
-        showName &&
+        (showName || isNameRequired) &&
         createElement(
           'label',
           {
             htmlFor: 'name',
             className: 'form__label',
           },
+          isNameRequired ? [
+            createElement(
+              'span',
+              { className: 'form__label__text' },
+              nameLabel,
+              createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+            ),
+            nameEl,
+          ] :
           [nameLabel, nameEl],
         ),
-      !isAnonymous && !showName && nameEl,
+      !isAnonymous && !(showName||isNameRequired) && nameEl,
 
       !isAnonymous &&
-        showEmail &&
+        (showEmail || isEmailRequired) &&
         createElement(
           'label',
           {
             htmlFor: 'email',
             className: 'form__label',
           },
+          isEmailRequired ? [
+            createElement(
+              'span',
+              { className: 'form__label__text' },
+              emailLabel,
+              createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+            ),
+            emailEl,
+          ] :
           [emailLabel, emailEl],
         ),
-      !isAnonymous && !showEmail && emailEl,
+      !isAnonymous && !(showEmail||isEmailRequired) && emailEl,
 
       createElement(
         'label',

packages/feedback/src/widget/createWidget.ts

@@ -159,6 +159,8 @@ export function createWidget({
         showName: options.showName,
         showEmail: options.showEmail,
         isAnonymous: options.isAnonymous,
+        isNameRequired: options.isNameRequired,
+        isEmailRequired: options.isEmailRequired,
         formTitle: options.formTitle,
         cancelButtonLabel: options.cancelButtonLabel,
         submitButtonLabel: options.submitButtonLabel,

packages/feedback/test/widget/Dialog.test.ts

@@ -10,6 +10,8 @@ function renderDialog({
   showEmail = true,
   showBranding = false,
   isAnonymous = false,
+  isNameRequired = false,
+  isEmailRequired = false,
   formTitle = 'Feedback',
   defaultName = 'Foo Bar',
   defaultEmail = 'foo@example.com',
@@ -30,6 +32,8 @@ function renderDialog({
     isAnonymous,
     showName,
     showEmail,
+    isNameRequired,
+    isEmailRequired,
     showBranding,
     defaultName,
     defaultEmail,

packages/feedback/test/widget/Form.test.ts

@@ -9,6 +9,8 @@ function renderForm({
   showName = true,
   showEmail = true,
   isAnonymous = false,
+  isNameRequired = false,
+  isEmailRequired = false,
   defaultName = 'Foo Bar',
   defaultEmail = 'foo@example.com',
   nameLabel = 'Name',
@@ -25,6 +27,8 @@ function renderForm({
     isAnonymous,
     showName,
     showEmail,
+    isNameRequired,
+    isEmailRequired,
     defaultName,
     defaultEmail,
     nameLabel,
@@ -80,13 +84,15 @@ describe('Form', () => {
       emailPlaceholder: 'foo@example.org!',
       messageLabel: 'Description!',
       messagePlaceholder: 'What is the issue?!',
+      isNameRequired: true,
+      isEmailRequired: true,
     });
 
     const nameLabel = formComponent.el.querySelector('label[htmlFor="name"]') as HTMLLabelElement;
     const emailLabel = formComponent.el.querySelector('label[htmlFor="email"]') as HTMLLabelElement;
     const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
-    expect(nameLabel.textContent).toBe('Name!');
-    expect(emailLabel.textContent).toBe('Email!');
+    expect(nameLabel.textContent).toBe('Name! (required)');
+    expect(emailLabel.textContent).toBe('Email! (required)');
     expect(messageLabel.textContent).toBe('Description! (required)');
 
     const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
@@ -110,6 +116,30 @@ describe('Form', () => {
     message.dispatchEvent(new KeyboardEvent('keyup'));
   });
 
+  it('submit is enabled if name is required and is not empty', () => {
+    const formComponent = renderForm({isNameRequired: true});
+
+    const name = formComponent.el.querySelector('[name="name"]') as HTMLTextAreaElement;
+
+    name.value = 'Foo Bar';
+    name.dispatchEvent(new KeyboardEvent('keyup'));
+
+    name.value = '';
+    name.dispatchEvent(new KeyboardEvent('keyup'));
+  });
+
+  it('submit is enabled if email is required and is not empty', () => {
+    const formComponent = renderForm({isEmailRequired: true});
+
+    const email = formComponent.el.querySelector('[name="email"]') as HTMLTextAreaElement;
+
+    email.value = 'foo@example.org';
+    email.dispatchEvent(new KeyboardEvent('keyup'));
+
+    email.value = '';
+    email.dispatchEvent(new KeyboardEvent('keyup'));
+  });
+
   it('can show error', () => {
     const formComponent = renderForm();
     const errorEl = formComponent.el.querySelector('.form__error-container') as HTMLDivElement;
@@ -148,6 +178,8 @@ describe('Form', () => {
   it('does not show name or email inputs for anonymous mode', () => {
     const onSubmit = jest.fn();
     const formComponent = renderForm({
+      isNameRequired: true,
+      isEmailRequired: true,
       isAnonymous: true,
       onSubmit,
     });