diff --git a/frontend/cypress/integration/components/mailingForm.spec.js b/frontend/cypress/integration/components/mailingForm.spec.js index 8c3e90c6..df22c1e2 100644 --- a/frontend/cypress/integration/components/mailingForm.spec.js +++ b/frontend/cypress/integration/components/mailingForm.spec.js @@ -6,11 +6,11 @@ describe('Mailing forms', () => { cy.get('[data-cy=mailing-form]'); // By referencing general-tab items we are ensuring that it is selected by default // Check if name label exists and is required - cy.get('[data-cy=general-name-label]').contains('Name *'); + cy.get('[data-cy=general-name-label]').contains('Name').should('have.class', 'required'); // Check if email label exists and is required - cy.get('[data-cy=general-email-label]').contains('Email *'); + cy.get('[data-cy=general-email-label]').contains('Email').should('have.class', 'required'); // Check if message label exists and is required - cy.get('[data-cy=general-message-label]').contains('Message *'); + cy.get('[data-cy=general-message-label]').contains('Message').should('have.class', 'required'); // Ensure send button is disabled cy.get('[data-cy=general-send-button]').should('be.disabled'); // Fill in valid name @@ -34,18 +34,18 @@ describe('Mailing forms', () => { // Ensure the mailing form exists in the Sponsors page cy.get('[data-cy=mailing-form]'); // Check if name label changed to the sponsorship form version - cy.get('[data-cy=sponsorship-name-label]').contains('Company Name *'); + cy.get('[data-cy=sponsorship-name-label]').contains('Company Name').should('have.class', 'required'); }); it('checks labels and validation of a feedback form', () => { // Visit engage page cy.visit('/#/engage'); // Select feedback form tab - cy.get('[data-cy=feedback-form-tab]').click(); + cy.get('[data-cy=feedback-form-selector]').click(); // Check if name label is not required (marked with *) - cy.get('[data-cy=feedback-name-label]').should('not.contain', '*'); + cy.get('[data-cy=feedback-name-label]').should('not.have.class', 'required'); /// Check if email label is not required (marked with *) - cy.get('[data-cy=feedback-email-label]').should('not.contain', '*'); + cy.get('[data-cy=feedback-email-label]').should('not.have.class', 'required'); // Ensure send button is disabled cy.get('[data-cy=feedback-send-button]').should('be.disabled'); // Fill in valid message diff --git a/frontend/src/components/MailingForm.vue b/frontend/src/components/MailingForm.vue index 20041237..46cda266 100644 --- a/frontend/src/components/MailingForm.vue +++ b/frontend/src/components/MailingForm.vue @@ -12,26 +12,23 @@ - @@ -60,6 +57,11 @@ export default { isType(name) { return this.type === name; }, + getLabelClass(isRequired) { + const lc = 'text-body-1 input-label'; + if (isRequired) return lc.concat(' required'); + return lc; + }, send() { APIClient.mailingAPI(MAILING_URL[this.type], this.name, this.email, this.body) .then((res) => { @@ -97,8 +99,8 @@ export default { float:left; } -.required -{ +.required:after { + content:" *"; color: red; -} + } diff --git a/frontend/src/views/Engage.vue b/frontend/src/views/Engage.vue index eb50433a..4db5c423 100644 --- a/frontend/src/views/Engage.vue +++ b/frontend/src/views/Engage.vue @@ -72,30 +72,24 @@ - - + +

Still have some questions?

+
- - Enquiry - - - - - + + + Enquiry + + + Feedback + + - - Feedback - - - - - + + + -
+ @@ -109,6 +103,7 @@ import APIClient from '../utils/APIClient'; export default { name: 'Engage', data: () => ({ + activeForm: 'general', socialLinks: [], faqLinks: [] }),