Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Timeline block #2925

Closed
wants to merge 5 commits into from
Closed

Add Timeline block #2925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
064a8be
Move files out of mep folder
markpadbe Sep 10, 2024
a88101b
Update to match grid-width-10
markpadbe Sep 10, 2024
3500537
Merge branch 'stage' into timelinerollout
markpadbe Sep 16, 2024
799d652
Merge branch 'stage' into timelinerollout
markpadbe Sep 18, 2024
c1949f3
Remove from mep folder and add unit tests
markpadbe Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions libs/mep/mwpw-143159/timeline/timeline.css → libs/blocks/timeline/timeline.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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);
}
}

2 changes: 1 addition & 1 deletion libs/mep/mwpw-143159/timeline/timeline.js → libs/blocks/timeline/timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}$/;
Expand Down
1 change: 1 addition & 0 deletions libs/utils/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const MILO_BLOCKS = [
'tabs',
'table-of-contents',
'text',
'timeline',
'walls-io',
'table',
'table-metadata',
Expand Down
25 changes: 25 additions & 0 deletions test/blocks/timeline/mocks/switchcolors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html dir="rtl">
<div class="timeline">
<div>
<div data-valign="middle">
<p>#FFCE2E</p>
<h3 id="day-1">Day 1</h3>
<p>If you start your free trial today | <strong>7-day free trial</strong></p>
</div>
</div>
<div>
<div data-valign="middle">
<p>linear-gradient(to right, #E63888 0, #E9749A 100%)</p>
<h3 id="day-8">Day 8</h3>
<p>Your subscription starts and billing begins | <strong>14-day full refund period</strong></p>
</div>
</div>
<div>
<div data-valign="middle">
<h3 id="day-21">Day 21</h3>
<p>Full refund period ends</p>
</div>
</div>
</div>
</div>
</html>
77 changes: 77 additions & 0 deletions test/blocks/timeline/timeline.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});
});
});
Loading