Skip to content

Commit afa740a

Browse files
maths22maths22
authored
Updates to mirror mjml 4.18 (#12)
* Updates to mirror mjml 4.18 Also fixes bug in social image height * Add more tests and fix issues
1 parent e1c634c commit afa740a

31 files changed

+1138
-467
lines changed

‎data/accordion-font-family.mjml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-accordion css-class="my-accordion-1" font-family="serif">
6+
<mj-accordion-element>
7+
<mj-accordion-title>Why use an accordion?</mj-accordion-title>
8+
<mj-accordion-text>
9+
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
10+
</mj-accordion-text>
11+
</mj-accordion-element>
12+
</mj-accordion>
13+
</mj-column>
14+
</mj-section>
15+
<mj-section>
16+
<mj-column>
17+
<mj-accordion css-class="my-accordion-2" font-family="serif">
18+
<mj-accordion-element font-family="sans-serif">
19+
<mj-accordion-title font-family="monospace">Why use an accordion?</mj-accordion-title>
20+
<mj-accordion-text font-family="monospace">
21+
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
22+
</mj-accordion-text>
23+
</mj-accordion-element>
24+
</mj-accordion>
25+
</mj-column>
26+
</mj-section>
27+
</mj-body>
28+
</mjml>

‎data/accordion-padding.mjml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-accordion>
6+
<mj-accordion-element>
7+
<mj-accordion-title padding="20px" padding-bottom="40px" padding-left="40px" padding-right="40px" padding-top="40px">Why use an accordion?</mj-accordion-title>
8+
<mj-accordion-text padding="20px" padding-bottom="40px" padding-left="40px" padding-right="40px" padding-top="40px">
9+
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
10+
</mj-accordion-text>
11+
</mj-accordion-element>
12+
</mj-accordion>
13+
</mj-column>
14+
</mj-section>
15+
</mj-body>
16+
</mjml>

‎data/accordionTitle-fontWeight.mjml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-attributes>
4+
<mj-accordion border="none" padding="1px" />
5+
<mj-accordion-element icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png" icon-unwrapped-url="https://i.imgur.com/KKHenWa.png" icon-height="24px" icon-width="24px" />
6+
<mj-accordion-title font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif" background-color="#fff" color="#031017" padding="15px" font-size="18px" />
7+
<mj-accordion-text font-family="Open Sans, Helvetica, Arial, sans-serif" background-color="#fafafa" padding="15px" color="#505050" font-size="14px" />
8+
</mj-attributes>
9+
</mj-head>
10+
<mj-body>
11+
<mj-section padding="20px" background-color="#ffffff">
12+
<mj-column background-color="#dededd">
13+
<mj-accordion>
14+
<mj-accordion-element>
15+
<mj-accordion-title font-weight="bold" css-class="accordion-title">Why use an accordion?</mj-accordion-title>
16+
<mj-accordion-text font-weight="bold">
17+
<span style="line-height:20px">
18+
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
19+
</span>
20+
</mj-accordion-text>
21+
</mj-accordion-element>
22+
<mj-accordion-element>
23+
<mj-accordion-title font-weight="700" css-class="accordion-title">How it works</mj-accordion-title>
24+
<mj-accordion-text font-weight="700">
25+
<span style="line-height:20px">
26+
Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.
27+
</span>
28+
</mj-accordion-text>
29+
</mj-accordion-element>
30+
</mj-accordion>
31+
</mj-column>
32+
</mj-section>
33+
</mj-body>
34+
</mjml>

‎data/carousel-hoverSupported.mjml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-carousel thumbnails="supported">
6+
<mj-carousel-image src="https://placehold.co/450x300/333/ccc/png" />
7+
<mj-carousel-image src="https://placehold.co/450x300/ccc/000/png" />
8+
<mj-carousel-image src="https://placehold.co/450x300/f45e43/fff/png" />
9+
</mj-carousel>
10+
</mj-column>
11+
</mj-section>
12+
</mj-body>
13+
</mjml>

‎data/column-border-radius.mjml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column border-radius="50px" inner-border-radius="40px" padding="50px" border="5px solid #000" inner-border="5px solid #666">
5+
<mj-text>Hello World</mj-text>
6+
</mj-column>
7+
</mj-section>
8+
</mj-body>
9+
</mjml>

‎data/html-comments.mjml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-text>
6+
<p>View source to see comments below</p>
7+
<!-- comment with standard spaces -->
8+
<br>
9+
<!--comment without spaces-->
10+
<br>
11+
<!-- comment with 5 spaces -->
12+
</mj-text>
13+
</mj-column>
14+
</mj-section>
15+
</mj-body>
16+
</mjml>

‎data/navbar-ico-padding.mjml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-navbar hamburger="hamburger" ico-padding="20px" ico-padding-bottom="20px" ico-padding-left="30px" ico-padding-right="40px" ico-padding-top="50px" >
6+
<mj-navbar-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-navbar-link>
7+
<mj-navbar-link href="/try-it-live" color="#ffffff">Try it live</mj-navbar-link>
8+
</mj-navbar>
9+
</mj-column>
10+
</mj-section>
11+
</mj-body>
12+
</mjml>

‎data/social-align.mjml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-social mode="vertical">
6+
<mj-social-element name="facebook" href="https://mjml.io/" icon-position="right" align="right"css-class="my-social-element">
7+
Facebook
8+
</mj-social-element>
9+
</mj-social>
10+
</mj-column>
11+
</mj-section>
12+
</mj-body>
13+
</mjml>

‎data/social-icon-height.mjml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column css-class="my-social-element">
5+
<mj-social icon-height="40px">
6+
<mj-social-element name="facebook" href="https://mjml.io/" css-class="my-social-element">
7+
Facebook
8+
</mj-social-element>
9+
</mj-social>
10+
</mj-column>
11+
</mj-section>
12+
</mj-body>
13+
</mjml>

‎data/table-cellspacing.mjml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<mjml>
2+
<mj-body>
3+
<mj-section>
4+
<mj-column>
5+
<mj-table border="1px solid #000" width="auto" cellpadding="20" cellspacing="10" css-class="my-table">
6+
<tr style="border-bottom:1px solid #000;text-align:left;">
7+
<th style="background:#ddd;">Year</th>
8+
<th style="background:#ddd;">Language</th>
9+
<th style="background:#ddd;">Inspired from</th>
10+
</tr>
11+
<tr>
12+
<td style="background:#ddd;">1995</td>
13+
<td style="background:#ddd;">PHP</td>
14+
<td style="background:#ddd;">C, Shell Unix</td>
15+
</tr>
16+
</mj-table>
17+
</mj-column>
18+
</mj-section>
19+
</mj-body>
20+
</mjml>

0 commit comments

Comments
 (0)