diff --git a/libs/mep/mwpw-143159/timeline/timeline.css b/libs/blocks/timeline/timeline.css similarity index 85% rename from libs/mep/mwpw-143159/timeline/timeline.css rename to libs/blocks/timeline/timeline.css index 18f1de7c6d..ebf0842787 100644 --- a/libs/mep/mwpw-143159/timeline/timeline.css +++ b/libs/blocks/timeline/timeline.css @@ -1,10 +1,12 @@ .timeline { box-sizing: border-box; - padding: 0 0 var(--spacing-xl) 0; - width: var(--grid-container-width); - max-width: 968px; + padding: 0 var(--grid-margins-width) var(--spacing-xl) var(--grid-margins-width); + width: 100%; margin: 0 auto; } +.dialog-modal .timeline { + padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl); +} .timeline .row { display: grid; @@ -123,20 +125,19 @@ } @media screen and (min-width: 600px) { - .timeline { - width: 100%; - padding: 0 var(--grid-margins-width) var(--spacing-xl) var(--grid-margins-width); - } - .dialog-modal .timeline { padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl); } } -@media screen and (min-width: 1200px) { +@media screen and (min-width:1120px) { .timeline { - padding: 0 0 var(--spacing-xxl) 0; - width: 968px; - max-width: 100%; + padding-left: calc((100vw - 1000px) / 2); + padding-right: calc((100vw - 1000px) / 2); + } + + .dialog-modal .timeline { + padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl); } } + diff --git a/libs/mep/mwpw-143159/timeline/timeline.js b/libs/blocks/timeline/timeline.js similarity index 98% rename from libs/mep/mwpw-143159/timeline/timeline.js rename to libs/blocks/timeline/timeline.js index 8322c09592..ba2ea4aacf 100644 --- a/libs/mep/mwpw-143159/timeline/timeline.js +++ b/libs/blocks/timeline/timeline.js @@ -1,4 +1,4 @@ -import { createTag } from '../../../utils/utils.js'; +import { createTag } from '../../utils/utils.js'; function isColor(str) { const hexRegex = /^#(?:[0-9a-fA-F]{3}){1,2}$/; diff --git a/libs/utils/utils.js b/libs/utils/utils.js index 07fee41492..a2cf0032e9 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -75,6 +75,7 @@ const MILO_BLOCKS = [ 'tabs', 'table-of-contents', 'text', + 'timeline', 'walls-io', 'table', 'table-metadata', diff --git a/test/blocks/timeline/mocks/switchcolors.html b/test/blocks/timeline/mocks/switchcolors.html new file mode 100644 index 0000000000..13e81224b7 --- /dev/null +++ b/test/blocks/timeline/mocks/switchcolors.html @@ -0,0 +1,25 @@ + +
+
+
+

#FFCE2E

+

Day 1

+

If you start your free trial today | 7-day free trial

+
+
+
+
+

linear-gradient(to right, #E63888 0, #E9749A 100%)

+

Day 8

+

Your subscription starts and billing begins | 14-day full refund period

+
+
+
+
+

Day 21

+

Full refund period ends

+
+
+
+ + diff --git a/test/blocks/timeline/timeline.test.js b/test/blocks/timeline/timeline.test.js new file mode 100644 index 0000000000..204f3719a6 --- /dev/null +++ b/test/blocks/timeline/timeline.test.js @@ -0,0 +1,77 @@ +import { readFile } from '@web/test-runner-commands'; +import { expect } from '@esm-bundle/chai'; +import { setConfig } from '../../../libs/utils/utils.js'; + +const config = { codeRoot: '/libs' }; +setConfig(config); + +const { default: init } = await import('../../../libs/blocks/timeline/timeline.js'); + +describe('Timeline', () => { + beforeEach(async () => { + document.body.innerHTML = await readFile({ path: './mocks/body.html' }); + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + it('has 3 headers', async () => { + const timelineEl = document.querySelector('.timeline'); + init(timelineEl); + const headers = timelineEl.querySelectorAll('.timeline h3'); + expect(headers[0].textContent).to.equal('Day 1'); + expect(headers[1].textContent).to.equal('Day 8'); + expect(headers[2].textContent).to.equal('Day 21'); + }); + it('has 3 descriptions', async () => { + const timelineEl = document.querySelector('.timeline'); + init(timelineEl); + const descriptions = timelineEl.querySelectorAll('.timeline h3 + p'); + + expect(descriptions[0].textContent).to.equal('If you start your free trial today'); + expect(descriptions[1].textContent).to.equal('Your subscription starts and billing begins'); + expect(descriptions[2].textContent).to.equal('Full refund period ends'); + }); + it('has a payment period and a refund period section ', async () => { + const timelineEl = document.querySelector('.timeline'); + init(timelineEl); + const trialPeriod = timelineEl.querySelector('.row .left .period'); + const refundPeriod = timelineEl.querySelector('.row .right .period'); + + expect(trialPeriod.textContent).to.equal('7-day free trial'); + expect(refundPeriod.textContent).to.equal('14-day full refund period'); + expect(trialPeriod.style.background.includes('to right')).to.true; + }); + it('it sets bar background colors based on colors in free trial and refund period section', async () => { + const timelineEl = document.querySelector('.timeline'); + init(timelineEl); + const bars = timelineEl.querySelectorAll('.bar'); + + expect(bars[0].style.backgroundColor).to.equal('rgb(230, 56, 136)'); + expect(bars[1].style.backgroundColor).to.equal('rgb(233, 116, 154)'); + expect(bars[2].style.backgroundColor).to.equal('rgb(255, 206, 46)'); + }); + it('updates background linear gradient for rtl', async () => { + const timelineEl = document.querySelector('.timeline'); + timelineEl.parentElement.setAttribute('dir', 'rtl'); + init(timelineEl); + const trialPeriod = timelineEl.querySelector('.row .left .period'); + expect(trialPeriod.style.background.includes('to left')).to.be.true; + }); + describe('Timeline', () => { + beforeEach(async () => { + document.body.innerHTML = await readFile({ path: './mocks/switchcolors.html' }); + }); + afterEach(() => { + document.body.innerHTML = ''; + }); + it('handles linear-gradient for either side', async () => { + const timelineEl = document.querySelector('.timeline'); + init(timelineEl); + const refundPeriod = timelineEl.querySelector('.row .right .period'); + expect(refundPeriod.textContent).to.equal('14-day full refund period'); + expect(refundPeriod.style.background.includes('to left')).to.true; + }); + }); +});