src/components/global: update styling for SectionHeading component (#602

)

* update section heading styling + refactor ProfileDetail titles

* cleanup docs

* remove duplicate setion-heading tests

---------

Co-authored-by: Šimon Macek <[email protected]>

src/components/__tests__/ListCardFollow.cy.js

@@ -1,11 +1,6 @@
-import { colors } from 'quasar';
 import ListCardFollow from '../homepage/ListCardFollow.vue';
 import { i18n } from '../../boot/i18n';
 
-// colors
-const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
-
 // selectors
 const cardListFollow = 'card-list-follow';
 const cardListFollowColTitle = 'card-list-follow-col-title';
@@ -80,10 +75,7 @@ function coreTests() {
   it('renders title', () => {
     cy.window().then(() => {
       cy.dataCy(sectionHeadingTitle)
-        .should('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', black)
-        .and('contain', i18n.global.t('index.cardListFollow.title'))
+        .should('contain', i18n.global.t('index.cardListFollow.title'))
         .then(($title) => {
           expect($title.text()).to.equal(
             i18n.global.t('index.cardListFollow.title'),

src/components/__tests__/ListCardOffer.cy.js

@@ -1,4 +1,3 @@
-import { colors } from 'quasar';
 import ListCardOffer from '../homepage/ListCardOffer.vue';
 import { i18n } from '../../boot/i18n';
 
@@ -7,9 +6,6 @@ import { cardsOffer } from 'src/mocks/homepage';
 const title = i18n.global.t('index.cardListOffer.title');
 const cards = cardsOffer;
 
-const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
-
 describe('<ListCardOffer>', () => {
   it('has translation for all strings', () => {
     cy.testLanguageStringsInContext(
@@ -33,10 +29,7 @@ describe('<ListCardOffer>', () => {
     it('renders title', () => {
       cy.window().then(() => {
         cy.dataCy('section-heading-title')
-          .should('have.css', 'font-size', '20px')
-          .and('have.css', 'font-weight', '500')
-          .and('have.color', black)
-          .and('contain', title)
+          .should('contain', title)
           .then(($title) => {
             expect($title.text()).to.equal(title);
           });
@@ -83,10 +76,7 @@ describe('<ListCardOffer>', () => {
     it('renders title', () => {
       cy.window().then(() => {
         cy.dataCy('section-heading-title')
-          .should('have.css', 'font-size', '20px')
-          .and('have.css', 'font-weight', '500')
-          .and('have.color', black)
-          .and('contain', title)
+          .should('contain', title)
           .then(($title) => {
             expect($title.text()).to.equal(title);
           });

src/components/__tests__/ListCardPost.cy.js

@@ -10,7 +10,6 @@ const button = {
 };
 
 const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
 const gray10 = getPaletteColor('grey-10');
 
 describe('<ListCardPost>', () => {
@@ -127,10 +126,7 @@ describe('<ListCardPost>', () => {
 function coreTests() {
   it('renders title', () => {
     cy.dataCy('section-heading-title')
-      .should('have.css', 'font-size', '20px')
-      .and('have.css', 'font-weight', '500')
-      .and('have.color', black)
-      .and('contain', title)
+      .should('contain', title)
       .then(($title) => {
         expect($title.text()).to.equal(title);
       });

src/components/__tests__/ListCardProgress.cy.js

@@ -1,10 +1,6 @@
-import { colors } from 'quasar';
 import ListCardProgress from '../homepage/ListCardProgress.vue';
 import { i18n } from '../../boot/i18n';
 
-const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
-
 describe('<ListCardProgress>', () => {
   let cards;
   let stats;
@@ -42,10 +38,7 @@ describe('<ListCardProgress>', () => {
     it('renders title', () => {
       cy.window().then(() => {
         cy.dataCy('section-heading-title')
-          .should('have.css', 'font-size', '20px')
-          .and('have.css', 'font-weight', '500')
-          .and('have.color', black)
-          .and('contain', i18n.global.t('index.progressSlider.title'))
+          .should('contain', i18n.global.t('index.progressSlider.title'))
           .then(($title) => {
             expect($title.text()).to.equal(
               i18n.global.t('index.progressSlider.title'),

src/components/__tests__/ProfileDetails.cy.js

@@ -3,8 +3,8 @@ import ProfileDetails from 'components/profile/ProfileDetails.vue';
 import { i18n } from '../../boot/i18n';
 import { PaymentState } from '../../../src/components/types/Profile';
 
+// colors
 const { getPaletteColor } = colors;
-const grey10 = getPaletteColor('grey-10');
 const green = getPaletteColor('green');
 const red = getPaletteColor('red');
 
@@ -131,10 +131,11 @@ function coreTests() {
       // page title
       cy.dataCy(selectorTitlePersonalDetails)
         .should('be.visible')
-        .and('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', grey10)
-        .and('contain', i18n.global.t('profile.titlePersonalDetails'));
+        .within(() => {
+          cy.dataCy('section-heading-title')
+            .should('be.visible')
+            .and('contain', i18n.global.t('profile.titlePersonalDetails'));
+        });
       // row nickname
       cy.dataCy(selectorNickname).should('be.visible');
       // row email
@@ -148,10 +149,11 @@ function coreTests() {
       // title challenge details
       cy.dataCy(selectorTitleChallengeDetails)
         .should('be.visible')
-        .and('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', grey10)
-        .and('contain', i18n.global.t('profile.titleChallengeDetails'));
+        .within(() => {
+          cy.dataCy('section-heading-title')
+            .should('be.visible')
+            .and('contain', i18n.global.t('profile.titleChallengeDetails'));
+        });
       // row organizationType
       cy.dataCy(selectorOrganizationType)
         .find(dataSelectorLabel)
@@ -191,10 +193,11 @@ function coreTests() {
       // title challenge details
       cy.dataCy(selectorTitleStarterPackage)
         .should('be.visible')
-        .and('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', grey10)
-        .and('contain', i18n.global.t('profile.titleStarterPackage'));
+        .within(() => {
+          cy.dataCy('section-heading-title')
+            .should('be.visible')
+            .and('contain', i18n.global.t('profile.titleStarterPackage'));
+        });
       // row package
       cy.dataCy(selectorPackage)
         .find(dataSelectorLabel)
@@ -492,10 +495,11 @@ function coreTests() {
       // title
       cy.dataCy(selectorTitleRegistrationDetails)
         .should('be.visible')
-        .and('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', grey10)
-        .and('contain', i18n.global.t('profile.titleRegistrationDetails'));
+        .within(() => {
+          cy.dataCy('section-heading-title')
+            .should('be.visible')
+            .and('contain', i18n.global.t('profile.titleRegistrationDetails'));
+        });
       // payment state
       cy.dataCy(selectorPaymentState)
         .find(dataSelectorLabel)

src/components/__tests__/RoutesApps.cy.js

@@ -1,11 +1,7 @@
-import { colors } from 'quasar';
 import RoutesApps from 'components/routes/RoutesApps.vue';
 import { i18n } from '../../boot/i18n';
 import { rideToWorkByBikeConfig } from 'src/boot/global_vars';
 
-const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
-
 const urlAppStore = rideToWorkByBikeConfig.urlAppStore;
 const urlGooglePlay = rideToWorkByBikeConfig.urlGooglePlay;
 
@@ -54,17 +50,11 @@ function coreTests() {
     cy.dataCy('routes-apps-title-auto')
       .find('[data-cy="section-heading-title"]')
       .should('be.visible')
-      .and('have.css', 'font-size', '20px')
-      .and('have.css', 'font-weight', '500')
-      .and('have.color', black)
       .and('contain.text', i18n.global.t('routes.titleAutomaticLogging'));
     // hint automatic
     cy.dataCy('routes-apps-title-auto')
       .find('[data-cy="section-heading-perex"]')
       .should('be.visible')
-      .and('have.css', 'font-size', '14px')
-      .and('have.css', 'font-weight', '400')
-      .and('have.color', black)
       .and('contain.text', i18n.global.t('routes.hintAutomaticLogging'));
     cy.dataCy('banner-routes-app')
       .should('be.visible')
@@ -73,17 +63,11 @@ function coreTests() {
     cy.dataCy('routes-apps-title-manual')
       .find('[data-cy="section-heading-title"]')
       .should('be.visible')
-      .and('have.css', 'font-size', '20px')
-      .and('have.css', 'font-weight', '500')
-      .and('have.color', black)
       .and('contain.text', i18n.global.t('routes.titleManualLogging'));
     // hint manual
     cy.dataCy('routes-apps-title-manual')
       .find('[data-cy="section-heading-perex"]')
       .should('be.visible')
-      .and('have.css', 'font-size', '14px')
-      .and('have.css', 'font-weight', '400')
-      .and('have.color', black)
       .and('contain.text', i18n.global.t('routes.hintManualLogging'));
     // buttons container
     cy.dataCy('routes-apps-buttons')

src/components/__tests__/RoutesBottomPanel.cy.js

@@ -40,8 +40,6 @@ describe('<RoutesBottomPanel>', () => {
       // title visible
       cy.dataCy('section-heading-title')
         .should('be.visible')
-        .and('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
         .and(
           'contain',
           i18n.global.t('routes.titleBottomPanel', routeMultiple, {
@@ -86,8 +84,6 @@ function singleRouteTests() {
     // title visible
     cy.dataCy('section-heading-title')
       .should('be.visible')
-      .and('have.css', 'font-size', '20px')
-      .and('have.css', 'font-weight', '500')
       .and(
         'contain',
         i18n.global.t('routes.titleBottomPanel', routeSingle, {

src/components/__tests__/SectionHeading.cy.js

@@ -1,8 +1,21 @@
+import { colors } from 'quasar';
 import SectionHeading from 'components/global/SectionHeading.vue';
 import { i18n } from '../../boot/i18n';
 
+// colors
+const { getPaletteColor } = colors;
+const grey10 = getPaletteColor('grey-10');
+
+// selectors
+const selectorSectionHeading = 'section-heading';
+const selectorSectionHeadingTitle = 'section-heading-title';
+const selectorSectionHeadingPerex = 'section-heading-perex';
+
+// variables
 const title = 'Example title';
 const perex = 'Example perex';
+const titleFontSize = 24;
+const titleFontWeight = '700';
 
 describe('<SectionHeading>', () => {
   it('has translation for all strings', () => {
@@ -50,11 +63,14 @@ describe('<SectionHeading>', () => {
 
 function coreTests() {
   it('renders component', () => {
-    cy.dataCy('section-heading').should('be.visible');
-    cy.dataCy('section-heading-title')
+    cy.dataCy(selectorSectionHeading).should('be.visible');
+    cy.dataCy(selectorSectionHeadingTitle)
       .should('be.visible')
-      .and('contain', title);
-    cy.dataCy('section-heading-perex')
+      .and('contain', title)
+      .and('have.css', 'font-size', `${titleFontSize}px`)
+      .and('have.css', 'font-weight', titleFontWeight)
+      .and('have.color', grey10);
+    cy.dataCy(selectorSectionHeadingPerex)
       .should('be.visible')
       .and('contain', perex);
   });

src/components/__tests__/SliderProgress.cy.js

@@ -6,7 +6,6 @@ import { routesConf } from '../../router/routes_conf';
 
 // colors
 const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
 const grey10 = getPaletteColor('grey-10');
 const primary = getPaletteColor('primary');
 
@@ -92,9 +91,6 @@ function coreTests() {
     cy.window().then(() => {
       // title
       cy.dataCy(selectorSectionHeadingTitle)
-        .should('have.css', 'font-size', '20px')
-        .and('have.css', 'font-weight', '500')
-        .and('have.color', black)
         .and('contain', i18n.global.t('index.progressSlider.title'))
         .then(($title) => {
           expect($title.text()).to.equal(

src/components/global/SectionHeading.vue

@@ -33,14 +33,14 @@ export default defineComponent({
   <div v-if="$slots.default || $slots.perex" data-cy="section-heading">
     <h2
       v-if="$slots.default"
-      class="text-h6 text-black q-my-none"
+      class="text-h5 text-weight-bold text-grey-10 q-my-none"
       data-cy="section-heading-title"
     >
       <slot />
     </h2>
     <div
       v-if="$slots.perex"
-      class="q-mt-md text-subtitle2 text-weight-regular text-black"
+      class="q-mt-md text-subtitle2 text-weight-regular text-grey-10"
       data-cy="section-heading-perex"
     >
       <slot name="perex"></slot>