diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 07782968375f..42129ae79838 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -70,6 +70,7 @@ export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?"; export const MESSAGE_LABEL = 'Description'; export const NAME_PLACEHOLDER = 'Your Name'; export const NAME_LABEL = 'Name'; +export const IS_REQUIRED_LABEL = '(required)'; export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!'; export const FEEDBACK_WIDGET_SOURCE = 'widget'; diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts index b70bf008d24d..e762ace9e91d 100644 --- a/packages/feedback/src/integration.ts +++ b/packages/feedback/src/integration.ts @@ -8,6 +8,7 @@ import { EMAIL_LABEL, EMAIL_PLACEHOLDER, FORM_TITLE, + IS_REQUIRED_LABEL, MESSAGE_LABEL, MESSAGE_PLACEHOLDER, NAME_LABEL, @@ -105,6 +106,7 @@ export class Feedback implements Integration { messageLabel = MESSAGE_LABEL, namePlaceholder = NAME_PLACEHOLDER, nameLabel = NAME_LABEL, + isRequiredLabel = IS_REQUIRED_LABEL, successMessageText = SUCCESS_MESSAGE_TEXT, onFormClose, @@ -152,6 +154,7 @@ export class Feedback implements Integration { messagePlaceholder, nameLabel, namePlaceholder, + isRequiredLabel, successMessageText, onFormClose, diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index c2642b54d09c..c10abeab5887 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -149,6 +149,11 @@ export interface FeedbackTextConfiguration { * Message after feedback was sent successfully */ successMessageText: string; + + /** + * Label shown when an input field is required + */ + isRequiredLabel: string; } /** diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts index 9b90cf547477..a0d1ff5694e5 100644 --- a/packages/feedback/src/widget/Form.ts +++ b/packages/feedback/src/widget/Form.ts @@ -53,6 +53,7 @@ export function Form({ emailPlaceholder, messageLabel, messagePlaceholder, + isRequiredLabel, cancelButtonLabel, submitButtonLabel, @@ -176,7 +177,8 @@ export function Form({ 'span', { className: 'form__label__text' }, nameLabel, - isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'), + isNameRequired && + createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), ), nameEl, ], @@ -195,7 +197,8 @@ export function Form({ 'span', { className: 'form__label__text' }, emailLabel, - isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'), + isEmailRequired && + createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), ), emailEl, ], @@ -213,7 +216,7 @@ export function Form({ 'span', { className: 'form__label__text' }, messageLabel, - createElement('span', { className: 'form__label__text--required' }, ' (required)'), + createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`), ), messageEl, ], diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts index 2332aa950b1c..20eea7c9d43c 100644 --- a/packages/feedback/src/widget/createWidget.ts +++ b/packages/feedback/src/widget/createWidget.ts @@ -200,6 +200,7 @@ export function createWidget({ messagePlaceholder: options.messagePlaceholder, nameLabel: options.nameLabel, namePlaceholder: options.namePlaceholder, + isRequiredLabel: options.isRequiredLabel, defaultName: (userKey && user && user[userKey.name]) || '', defaultEmail: (userKey && user && user[userKey.email]) || '', onClosed: () => { diff --git a/packages/feedback/test/widget/Dialog.test.ts b/packages/feedback/test/widget/Dialog.test.ts index 69a333f69813..7be40e92704b 100644 --- a/packages/feedback/test/widget/Dialog.test.ts +++ b/packages/feedback/test/widget/Dialog.test.ts @@ -23,6 +23,7 @@ function renderDialog({ messagePlaceholder = 'What is the issue?', cancelButtonLabel = 'Cancel!', submitButtonLabel = 'Submit!', + isRequiredLabel = '(needed!)', ...rest }: Partial = {}) { return Dialog({ @@ -44,6 +45,7 @@ function renderDialog({ messagePlaceholder, cancelButtonLabel, submitButtonLabel, + isRequiredLabel, ...rest, }) as NonNullableFields>; } diff --git a/packages/feedback/test/widget/Form.test.ts b/packages/feedback/test/widget/Form.test.ts index 7b45cabd8503..1ffa57ffce09 100644 --- a/packages/feedback/test/widget/Form.test.ts +++ b/packages/feedback/test/widget/Form.test.ts @@ -20,6 +20,7 @@ function renderForm({ messagePlaceholder = 'What is the issue?', cancelButtonLabel = 'Cancel!', submitButtonLabel = 'Submit!', + isRequiredLabel = '(needed!)', ...rest }: Partial = {}) { return Form({ @@ -37,6 +38,7 @@ function renderForm({ messagePlaceholder, cancelButtonLabel, submitButtonLabel, + isRequiredLabel, ...rest, }) as NonNullableFields>; } @@ -89,9 +91,9 @@ describe('Form', () => { 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! (required)'); - expect(emailLabel.textContent).toBe('Email! (required)'); - expect(messageLabel.textContent).toBe('Description! (required)'); + expect(nameLabel.textContent).toBe('Name! (needed!)'); + expect(emailLabel.textContent).toBe('Email! (needed!)'); + expect(messageLabel.textContent).toBe('Description! (needed!)'); const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement; const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement; diff --git a/packages/feedback/test/widget/createWidget.test.ts b/packages/feedback/test/widget/createWidget.test.ts index c2a5f50daebc..92236e3f6430 100644 --- a/packages/feedback/test/widget/createWidget.test.ts +++ b/packages/feedback/test/widget/createWidget.test.ts @@ -5,6 +5,7 @@ import { EMAIL_LABEL, EMAIL_PLACEHOLDER, FORM_TITLE, + IS_REQUIRED_LABEL, MESSAGE_LABEL, MESSAGE_PLACEHOLDER, NAME_LABEL, @@ -47,6 +48,7 @@ const DEFAULT_OPTIONS = { messageLabel: MESSAGE_LABEL, namePlaceholder: NAME_PLACEHOLDER, nameLabel: NAME_LABEL, + isRequiredLabel: IS_REQUIRED_LABEL, successMessageText: SUCCESS_MESSAGE_TEXT, onFormClose: jest.fn(),