Skip to content

Commit 0443bf8

Browse files
tylerstickatylersticka
authored
Add styles for Mailchimp signup forms (#2187)
1 parent 96dbffa commit 0443bf8

File tree

4 files changed

+173
-0
lines changed

4 files changed

+173
-0
lines changed

‎.changeset/quiet-news-impress.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': minor
3+
---
4+
5+
Add styles for Mailchimp signup forms.

‎src/vendor/mailchimp/_mailchimp.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@use '../../mixins/button';
2+
@use '../../mixins/input';
3+
@use '../../mixins/ms';
4+
@use '../../mixins/spacing';
5+
@use '../../compiled/tokens/scss/size';
6+
7+
/// Mailchimp form customizations
8+
///
9+
/// These assume Mailchimp's CSS is not included.
10+
///
11+
/// @link https://mailchimp.com/help/css-hooks-for-customizing-forms/
12+
/// @link https://mailchimp.com/help/customize-embedded-signup-form/
13+
14+
#mc_embed_signup_scroll {
15+
@include spacing.vertical-rhythm;
16+
}
17+
18+
#mc_embed_shell {
19+
.indicates-required {
20+
color: var(--theme-color-text-muted);
21+
font-size: ms.step(-1);
22+
text-align: end;
23+
24+
+ * {
25+
margin-block-start: 0;
26+
}
27+
}
28+
29+
.mc-field-group {
30+
display: grid;
31+
gap: #{size.$spacing-gap-form-group-default};
32+
}
33+
34+
input {
35+
&:not([type='checkbox']):not([type='radio']):not([type='submit']):not(
36+
[type='hidden']
37+
) {
38+
@include input.default;
39+
}
40+
}
41+
42+
.button {
43+
@include button.default;
44+
}
45+
46+
.asterisk {
47+
color: var(--theme-color-icon-error);
48+
}
49+
}

‎src/vendor/mailchimp/demo/signup.twig‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<div class="o-container o-container--pad o-container--prose">
2+
<div class="o-container__content o-rhythm">
3+
<div id="mc_embed_shell">
4+
<div id="mc_embed_signup">
5+
<form
6+
action="#"
7+
method="post"
8+
id="mc-embedded-subscribe-form"
9+
name="mc-embedded-subscribe-form"
10+
class="validate"
11+
target="_self"
12+
novalidate=""
13+
>
14+
<div id="mc_embed_signup_scroll">
15+
<div class="c-heading c-heading--level-2 c-heading--with-permalink">
16+
<div class="c-heading__main">
17+
<a
18+
class="c-heading__permalink"
19+
href="#download-the-checklist-and-get-cloud-four-in-your-inbox"
20+
>
21+
<svg
22+
width="24"
23+
height="24"
24+
viewBox="0 0 24 24"
25+
aria-hidden="true"
26+
class="c-icon"
27+
>
28+
<path
29+
d="M13.68 10.17L13 9.5a3.8 3.8 0 00-5.37 0l-4 4a3.79 3.79 0 000 5.37l1.33 1.33a3.81 3.81 0 005.38 0l1.34-1.34"
30+
fill="none"
31+
stroke-linecap="round"
32+
stroke-width="2"
33+
></path>
34+
<path
35+
d="M10.32 13.53l.67.67a3.79 3.79 0 005.37 0l4-4a3.81 3.81 0 000-5.38l-1.3-1.36a3.81 3.81 0 00-5.38 0L12.34 4.8"
36+
fill="none"
37+
stroke-linecap="round"
38+
stroke-width="2"
39+
></path>
40+
</svg>
41+
<span class="u-hidden-visually"
42+
>Permalink to Download the checklist and get Cloud Four in
43+
your inbox</span
44+
>
45+
</a>
46+
<h2
47+
class="c-heading__content"
48+
id="download-the-checklist-and-get-cloud-four-in-your-inbox"
49+
>
50+
Download the checklist and get Cloud Four in your inbox
51+
</h2>
52+
</div>
53+
</div>
54+
55+
<div class="indicates-required">
56+
<span class="asterisk">*</span> indicates required
57+
</div>
58+
<div class="mc-field-group">
59+
<label for="mce-EMAIL"
60+
>Email Address <span class="asterisk">*</span></label
61+
><input
62+
type="email"
63+
name="EMAIL"
64+
class="required email"
65+
id="mce-EMAIL"
66+
required=""
67+
value=""
68+
/>
69+
</div>
70+
<div hidden="">
71+
<input type="hidden" name="tags" value="EXAMPLE" />
72+
</div>
73+
<div id="mce-responses" class="clear">
74+
<div
75+
class="response"
76+
id="mce-error-response"
77+
style="display: none"
78+
></div>
79+
<div
80+
class="response"
81+
id="mce-success-response"
82+
style="display: none"
83+
></div>
84+
</div>
85+
<div aria-hidden="true" style="position: absolute; left: -5000px">
86+
<input type="text" name="EXAMPLE" tabindex="-1" value="" />
87+
</div>
88+
<div class="clear">
89+
<input
90+
type="submit"
91+
name="subscribe"
92+
id="mc-embedded-subscribe"
93+
class="button"
94+
value="Subscribe"
95+
/>
96+
</div>
97+
</div>
98+
</form>
99+
</div>
100+
</div>
101+
</div>
102+
</div>

‎src/vendor/mailchimp/mailchimp.stories.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Canvas, Meta, Story } from '@storybook/addon-docs';
2+
import signupDemo from './demo/signup.twig';
3+
4+
<Meta
5+
title="Vendor/Mailchimp"
6+
parameters={{
7+
layout: 'fullscreen',
8+
}}
9+
/>
10+
11+
# Mailchimp
12+
13+
For convenience, we apply some default styles to Mailchimp signup forms. These assume that the "Remove CSS styles" option has been checked when [building the form](https://mailchimp.com/help/customize-embedded-signup-form/#Customize_your_embedded_form).
14+
15+
<Canvas>
16+
<Story name="Signup Form">{signupDemo.bind(this)}</Story>
17+
</Canvas>

0 commit comments

Comments
 (0)