vanilla-framework 4.30.0 → 4.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
@classreference
|
|
3
|
+
newsletter-signup:
|
|
4
|
+
Newsletter signup:
|
|
5
|
+
.p-newsletter-signup:
|
|
6
|
+
Main element of the newsletter signup component.
|
|
7
|
+
.p-newsletter-signup--25-75:
|
|
8
|
+
Modifier class for a 25-75 split layout.
|
|
9
|
+
.p-newsletter-signup--50-50:
|
|
10
|
+
Modifier class for a 50-50 split layout.
|
|
11
|
+
.p-newsletter-signup--2-col:
|
|
12
|
+
Modifier class for a 2 column layout.
|
|
13
|
+
Takes at most 2 columns on large and medium dimensions.
|
|
14
|
+
Takes full width on small dimensions.
|
|
15
|
+
.p-newsletter-signup--4-col:
|
|
16
|
+
Modifier class for a 4 column layout.
|
|
17
|
+
Takes at most 4 columns on large and medium dimensions.
|
|
18
|
+
Takes full width on small dimensions.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
@import 'settings';
|
|
22
|
+
|
|
23
|
+
@mixin vf-p-newsletter-signup {
|
|
24
|
+
.p-newsletter-signup--2-col {
|
|
25
|
+
padding-bottom: 0;
|
|
26
|
+
|
|
27
|
+
@media (width < $breakpoint-small) {
|
|
28
|
+
padding-bottom: $spv--strip-regular * 0.5;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.p-newsletter-signup--4-col {
|
|
33
|
+
padding-bottom: 0;
|
|
34
|
+
|
|
35
|
+
@media (width < $breakpoint-large) {
|
|
36
|
+
padding-bottom: $spv--strip-regular * 0.5;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
package/scss/_vanilla.scss
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
@import 'patterns_notifications';
|
|
40
40
|
@import 'patterns_pagination';
|
|
41
41
|
@import 'patterns_pricing-block';
|
|
42
|
+
@import 'patterns_newsletter-signup';
|
|
42
43
|
@import 'patterns_pull-quotes';
|
|
43
44
|
@import 'patterns_rule';
|
|
44
45
|
@import 'patterns_search-and-filter';
|
|
@@ -133,6 +134,7 @@
|
|
|
133
134
|
@include vf-p-muted-heading;
|
|
134
135
|
@include vf-p-navigation;
|
|
135
136
|
@include vf-p-navigation-reduced;
|
|
137
|
+
@include vf-p-newsletter-signup;
|
|
136
138
|
@include vf-p-notification;
|
|
137
139
|
@include vf-p-pagination;
|
|
138
140
|
@include vf-p-pricing-block;
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
{#
|
|
2
|
+
All Params:
|
|
3
|
+
@param title_text: H2 title text
|
|
4
|
+
@param input_label: Label for the input field
|
|
5
|
+
@param checkbox_id: Name for the checkbox field, used for agreeing to something before submitting the form. This may vary based on the backend used to collect form responses.
|
|
6
|
+
@param checkbox_label: Label for the checkbox
|
|
7
|
+
@param layout: Layout variant for the section. Options are "50-50", "25-75", "2-col", and "4-col". Default is "25-75".
|
|
8
|
+
@param form_id: Form ID
|
|
9
|
+
@param form_action: Action URL for the form submission, typically the form endpoint.
|
|
10
|
+
@param return_url: URL to return to after form submission
|
|
11
|
+
@param top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
|
|
12
|
+
|
|
13
|
+
All Slots:
|
|
14
|
+
@slot description: Description text, one or more paragraphs
|
|
15
|
+
@slot addendum: Additional content to include in the form, such as a disclaimer or additional information
|
|
16
|
+
@slot hidden_fields: Additional hidden fields to include in the form
|
|
17
|
+
#}
|
|
18
|
+
{%- macro vf_newsletter_signup(form_id, return_url, title_text, form_action="https://ubuntu.com/marketo/submit", input_label="Work email", checkbox_id="canonicalUpdatesOptIn", checkbox_label="I agree to receive information about Canonical's products and services.", layout="25-75", top_rule_variant="default", caller=None) -%}
|
|
19
|
+
{% set layout = layout | trim %}
|
|
20
|
+
{% if layout not in ['50-50', '25-75', '2-col', '4-col'] %}
|
|
21
|
+
{% set layout = "25-75" %}
|
|
22
|
+
{% endif %}
|
|
23
|
+
{% set top_rule_variant = top_rule_variant | trim %}
|
|
24
|
+
{% if top_rule_variant not in ['muted', 'highlighted', 'default', 'none'] %}
|
|
25
|
+
{% set top_rule_variant = "default" %}
|
|
26
|
+
{% endif %}
|
|
27
|
+
{% set description = caller('description') %}
|
|
28
|
+
{% set addendum = caller('addendum') %}
|
|
29
|
+
{% set hidden_fields = caller('hidden_fields') %}
|
|
30
|
+
{% set is_section_level = layout in ['50-50', '25-75'] %}
|
|
31
|
+
{% set is_grid_level = layout in ['2-col', '4-col'] %}
|
|
32
|
+
{% set heading_level = 'h2' if is_section_level else 'h3' %}
|
|
33
|
+
{%- macro _top_rule() -%}
|
|
34
|
+
{% if top_rule_variant != 'none' %}
|
|
35
|
+
{% set rule_class = 'muted' if top_rule_variant == 'muted' else 'highlight' if top_rule_variant == 'highlighted' %}
|
|
36
|
+
<hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
|
|
37
|
+
{% endif %}
|
|
38
|
+
{%- endmacro -%}
|
|
39
|
+
{%- if is_section_level -%}
|
|
40
|
+
<section class="p-section">
|
|
41
|
+
{%- endif -%}
|
|
42
|
+
{{ _top_rule() | safe }}
|
|
43
|
+
<div class="grid-row--{% if is_section_level %}{{ layout }}-on-large{% else %}25-25-25-25{% endif %}">
|
|
44
|
+
{% if is_grid_level %}
|
|
45
|
+
{%- set upper_limit = 4 if layout == '2-col' else 3 -%}
|
|
46
|
+
{%- for number in range(1, upper_limit) -%}
|
|
47
|
+
{%- set col_content = caller('col_' + number|string) -%}
|
|
48
|
+
<div class="grid-col">{{ col_content | safe }}</div>
|
|
49
|
+
{%- endfor -%}
|
|
50
|
+
{% endif %}
|
|
51
|
+
<div class="grid-col{% if layout == '4-col' %}-4{% endif %} {% if is_grid_level %}p-newsletter-signup--{{ layout }}{% endif %}">
|
|
52
|
+
{%- if is_grid_level -%}
|
|
53
|
+
<hr class="p-rule--muted u-hide--large {% if layout == '2-col' %}u-hide--medium{% endif %}" />
|
|
54
|
+
{%- endif -%}
|
|
55
|
+
<{{ heading_level }}>{{ title_text }}</{{ heading_level }}>
|
|
56
|
+
{% if is_section_level %}</div>{% endif %}
|
|
57
|
+
{% if is_section_level %}<div class="grid-col">{% endif %}
|
|
58
|
+
{{ description | safe }}
|
|
59
|
+
<form action="{{ form_action }}" method="post" id="{{ form_id }}">
|
|
60
|
+
<label class="is-required" for="email">{{ input_label }}:</label>
|
|
61
|
+
<input required
|
|
62
|
+
id="email"
|
|
63
|
+
name="email"
|
|
64
|
+
maxlength="255"
|
|
65
|
+
type="email"
|
|
66
|
+
pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"
|
|
67
|
+
required="required" />
|
|
68
|
+
<label class="p-checkbox is-required">
|
|
69
|
+
<input required
|
|
70
|
+
class="p-checkbox__input"
|
|
71
|
+
value="yes"
|
|
72
|
+
aria-labelledby="{{ checkbox_id }}"
|
|
73
|
+
name="{{ checkbox_id }}"
|
|
74
|
+
type="checkbox" />
|
|
75
|
+
<span class="p-checkbox__label" id="{{ checkbox_id }}">{{ checkbox_label }}</span>
|
|
76
|
+
</label>
|
|
77
|
+
{% if addendum %}
|
|
78
|
+
{{ addendum | safe }}
|
|
79
|
+
{% else %}
|
|
80
|
+
<p>
|
|
81
|
+
By submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/terms-and-policies/privacy-policy">Canonical's Privacy Policy</a>.
|
|
82
|
+
</p>
|
|
83
|
+
{% endif %}
|
|
84
|
+
<button type="submit" class="u-no-margin--bottom">Sign up</button>
|
|
85
|
+
{% if hidden_fields %}
|
|
86
|
+
{{ hidden_fields | safe }}
|
|
87
|
+
{% else %}
|
|
88
|
+
<input type="hidden"
|
|
89
|
+
aria-hidden="true"
|
|
90
|
+
aria-label="hidden field"
|
|
91
|
+
name="returnURL"
|
|
92
|
+
value="{{ return_url }}" />
|
|
93
|
+
<input type="hidden"
|
|
94
|
+
aria-hidden="true"
|
|
95
|
+
aria-label="hidden field"
|
|
96
|
+
name="formid"
|
|
97
|
+
value="{{ form_id }}" />
|
|
98
|
+
<input type="hidden"
|
|
99
|
+
aria-hidden="true"
|
|
100
|
+
aria-label="hidden field"
|
|
101
|
+
name="productContext"
|
|
102
|
+
id="product-context"
|
|
103
|
+
value="" />
|
|
104
|
+
<input type="hidden"
|
|
105
|
+
aria-hidden="true"
|
|
106
|
+
aria-label="hidden field"
|
|
107
|
+
name="utm_campaign"
|
|
108
|
+
id="utm_campaign"
|
|
109
|
+
value="" />
|
|
110
|
+
<input type="hidden"
|
|
111
|
+
aria-hidden="true"
|
|
112
|
+
aria-label="hidden field"
|
|
113
|
+
name="utm_medium"
|
|
114
|
+
id="utm_medium"
|
|
115
|
+
value="" />
|
|
116
|
+
<input type="hidden"
|
|
117
|
+
aria-hidden="true"
|
|
118
|
+
aria-label="hidden field"
|
|
119
|
+
name="utm_source"
|
|
120
|
+
id="utm_source"
|
|
121
|
+
value="" />
|
|
122
|
+
<input type="hidden"
|
|
123
|
+
aria-hidden="true"
|
|
124
|
+
aria-label="hidden field"
|
|
125
|
+
name="utm_content"
|
|
126
|
+
id="utm_content"
|
|
127
|
+
value="" />
|
|
128
|
+
<input type="hidden"
|
|
129
|
+
aria-hidden="true"
|
|
130
|
+
aria-label="hidden field"
|
|
131
|
+
name="utm_term"
|
|
132
|
+
id="utm_term"
|
|
133
|
+
value="" />
|
|
134
|
+
<input type="hidden"
|
|
135
|
+
aria-hidden="true"
|
|
136
|
+
aria-label="hidden field"
|
|
137
|
+
name="GCLID__c"
|
|
138
|
+
id="GCLID__c"
|
|
139
|
+
value="" />
|
|
140
|
+
<input type="hidden"
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
aria-label="hidden field"
|
|
143
|
+
name="Facebook_Click_ID__c"
|
|
144
|
+
id="Facebook_Click_ID__c"
|
|
145
|
+
value="" />
|
|
146
|
+
<input type="hidden"
|
|
147
|
+
aria-hidden="true"
|
|
148
|
+
aria-label="hidden field"
|
|
149
|
+
id="preferredLanguage"
|
|
150
|
+
name="preferredLanguage"
|
|
151
|
+
maxlength="255"
|
|
152
|
+
value="" />
|
|
153
|
+
{% endif %}
|
|
154
|
+
</form>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
{%- if is_section_level -%}
|
|
158
|
+
</section>
|
|
159
|
+
{%- endif -%}
|
|
160
|
+
{%- endmacro -%}
|
|
@@ -3,9 +3,14 @@
|
|
|
3
3
|
@param title_text: H2 title text
|
|
4
4
|
@param list_items (Array<string>)
|
|
5
5
|
An array of HTML strings to be rendered
|
|
6
|
+
@param item_heading_level: Level of the heading to use, defaults to 2. Can be 2, or 4.
|
|
6
7
|
#}
|
|
7
|
-
{%- macro vf_text_spotlight(title_text, list_items=[], caller=None) -%}
|
|
8
|
+
{%- macro vf_text_spotlight(title_text, item_heading_level=2, list_items=[], caller=None) -%}
|
|
8
9
|
{% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
|
|
10
|
+
{% set item_heading_level = item_heading_level | trim %}
|
|
11
|
+
{%- if item_heading_level not in [2, 4] -%}
|
|
12
|
+
{%- set item_heading_level = 2 -%}
|
|
13
|
+
{%- endif -%}
|
|
9
14
|
<section class="p-section">
|
|
10
15
|
<hr class="p-rule is-fixed-width" />
|
|
11
16
|
<div class="grid-row--25-75-on-large">
|
|
@@ -15,7 +20,7 @@
|
|
|
15
20
|
<div class="grid-col">
|
|
16
21
|
{%- if has_list -%}
|
|
17
22
|
{%- for list_item in list_items -%}
|
|
18
|
-
<p class="p-heading--
|
|
23
|
+
<p class="p-heading--{{ item_heading_level }}">{{- list_item -}}</p>
|
|
19
24
|
{%- if not loop.last %}<hr class="p-rule--muted" />{%- endif %}
|
|
20
25
|
{%- endfor -%}
|
|
21
26
|
{%- else -%}
|