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

MWPW-158077 rollout new Timeline block #2926

Merged
merged 7 commits into from
Sep 23, 2024
Merged

MWPW-158077 rollout new Timeline block #2926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 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
7c6b093
Merge branch 'stage' into timelinerollout
markpadbe Sep 19, 2024
a4c9375
Add mock to test
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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious what the reason was to switch to 1120

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was part of a request for 10 col max width and mirrors what I see in the codebase for .section.grid-width-10

.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
23 changes: 23 additions & 0 deletions test/blocks/timeline/mocks/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="timeline">
<div>
<div data-valign="middle">
<p>linear-gradient(to right, #E63888 0, #E9749A 100%)</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>#FFCE2E</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>
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