vanilla-framework 4.25.0 → 4.26.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 +1 -1
- package/scss/_base_icon-definitions.scss +13 -0
- package/scss/_patterns_badge.scss +7 -1
- package/scss/_patterns_icons.scss +8 -1
- package/templates/_macros/vf_cta-section.jinja +100 -0
- package/templates/_macros/vf_text-spotlight.jinja +32 -0
- package/templates/_macros/vf_tiered-list.jinja +41 -44
package/package.json
CHANGED
|
@@ -1513,3 +1513,16 @@
|
|
|
1513
1513
|
@mixin vf-icon-quote-themed {
|
|
1514
1514
|
@include vf-themed-icon($light-value: vf-icon-quote-url($colors--light-theme--icon), $dark-value: vf-icon-quote-url($colors--dark-theme--icon));
|
|
1515
1515
|
}
|
|
1516
|
+
|
|
1517
|
+
// history
|
|
1518
|
+
@function vf-icon-history-url($color) {
|
|
1519
|
+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' d='M2.482 5.066a6.25 6.25 0 1 1 .288 6.356'/%3E%3Cpath stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' d='M1.75 1.75v4h4M8 4v4l2 2'/%3E%3C/svg%3E");
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
@mixin vf-icon-history($color: $colors--light-theme--icon) {
|
|
1523
|
+
background-image: vf-icon-history-url($color);
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
@mixin vf-icon-history-themed {
|
|
1527
|
+
@include vf-themed-icon($light-value: vf-icon-history-url($colors--light-theme--icon), $dark-value: vf-icon-history-url($colors--dark-theme--icon));
|
|
1528
|
+
}
|
|
@@ -6,11 +6,17 @@
|
|
|
6
6
|
background-color: $colors--theme--text-default; // inverse the theme by using the text color
|
|
7
7
|
border-radius: 1rem;
|
|
8
8
|
box-sizing: content-box;
|
|
9
|
-
color: $colors--theme--background-default; // inverse the theme by using the
|
|
9
|
+
color: $colors--theme--background-default; // inverse the theme by using the background color
|
|
10
|
+
display: inline-block;
|
|
10
11
|
margin-bottom: 0;
|
|
11
12
|
max-width: 4ch;
|
|
13
|
+
// the minimum content width should be the total desired width (the line-height)
|
|
14
|
+
// minus the space already taken up by the left and right padding
|
|
15
|
+
// Makes the shortest badge a perfect circle and keeps it related to line-height (of %x-small-text) and padding (below)
|
|
16
|
+
min-width: map-get($line-heights, x-small) - (2 * $spv--x-small);
|
|
12
17
|
overflow: hidden;
|
|
13
18
|
padding: 0 $spv--x-small;
|
|
19
|
+
text-align: center;
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
.p-badge,
|
|
@@ -2067,4 +2067,11 @@
|
|
|
2067
2067
|
}
|
|
2068
2068
|
}
|
|
2069
2069
|
|
|
2070
|
-
|
|
2070
|
+
@mixin vf-p-icon-history {
|
|
2071
|
+
.p-icon--history {
|
|
2072
|
+
@extend %icon;
|
|
2073
|
+
@include vf-icon-history-themed;
|
|
2074
|
+
}
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
// **Base and Pattern mixins accurate as of July 2025**
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# All Params
|
|
2
|
+
# title_text: H2 title text
|
|
3
|
+
# variant: variant for the cta section. Options are "default", "block". Default is "default".
|
|
4
|
+
# layout: Layout type of cta section. Options are "100", "25-75".
|
|
5
|
+
|
|
6
|
+
# All Slots
|
|
7
|
+
# description: Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
|
|
8
|
+
# cta: Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
|
|
9
|
+
|
|
10
|
+
# Variants:
|
|
11
|
+
# default-100: Full-width CTA with title and link text
|
|
12
|
+
# Params:
|
|
13
|
+
# title_text: H2 title text - optional
|
|
14
|
+
# variant: default
|
|
15
|
+
# layout: 100
|
|
16
|
+
|
|
17
|
+
# Slots:
|
|
18
|
+
# cta: The cta link - required
|
|
19
|
+
|
|
20
|
+
# default-25-75: 25-75 percent width CTA with title and link text
|
|
21
|
+
# Params:
|
|
22
|
+
# title_text: H2 title text - optional
|
|
23
|
+
# variant: default
|
|
24
|
+
# layout: 25-75
|
|
25
|
+
|
|
26
|
+
# Slots:
|
|
27
|
+
# cta: The cta link - required
|
|
28
|
+
|
|
29
|
+
# block-100: Full width CTA with title, description and cta block with action links
|
|
30
|
+
# Params:
|
|
31
|
+
# title_text: H2 title text - required
|
|
32
|
+
# variant: block
|
|
33
|
+
# layout: 100
|
|
34
|
+
|
|
35
|
+
# Slots:
|
|
36
|
+
# description: Paragraph-style (one or more) content below the title - Optional
|
|
37
|
+
# cta: Call-to-action block (required)
|
|
38
|
+
|
|
39
|
+
# block-25-75: 25-75 percent width CTA with title, description and cta block with action links
|
|
40
|
+
# Params:
|
|
41
|
+
# title_text: H2 title text - required
|
|
42
|
+
# variant: block
|
|
43
|
+
# layout: 25-75
|
|
44
|
+
|
|
45
|
+
# Slots:
|
|
46
|
+
# description: Paragraph-style (one or more) content below the title - Optional
|
|
47
|
+
# cta: Call-to-action block (required)
|
|
48
|
+
|
|
49
|
+
{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None) -%}
|
|
50
|
+
{% set description_content = caller('description') %}
|
|
51
|
+
{% set has_description = description_content|trim|length > 0 %}
|
|
52
|
+
{% set cta_content = caller('cta') %}
|
|
53
|
+
{% set has_cta = cta_content|trim|length > 0 %}
|
|
54
|
+
{#- User can pass layout as "X-Y" or "X/Y" -#}
|
|
55
|
+
{% set layout = layout | trim | replace('/', '-') %}
|
|
56
|
+
{% if layout not in ['100', '25-75'] %}
|
|
57
|
+
{% set layout = "100" %}
|
|
58
|
+
{% endif %}
|
|
59
|
+
{% set variant = variant | trim %}
|
|
60
|
+
{% if variant not in ['default', 'block'] %}
|
|
61
|
+
{% set variant = "default" %}
|
|
62
|
+
{% endif %}
|
|
63
|
+
{%- macro _description_block() -%}
|
|
64
|
+
{% if has_description %}{{ description_content }}{% endif %}
|
|
65
|
+
{%- endmacro -%}
|
|
66
|
+
{%- macro _cta_block() -%}
|
|
67
|
+
{% if has_cta -%}<div class="p-cta-block">{{ cta_content }}</div>{% endif %}
|
|
68
|
+
{%- endmacro -%}
|
|
69
|
+
{%- macro _cta_default_variant() -%}
|
|
70
|
+
<h2>
|
|
71
|
+
{%- if title_text -%}
|
|
72
|
+
{{ title_text }}
|
|
73
|
+
<br />
|
|
74
|
+
{%- endif -%}
|
|
75
|
+
{{ cta_content }}
|
|
76
|
+
</h2>
|
|
77
|
+
{%- endmacro -%}
|
|
78
|
+
{%- macro _cta_block_variant() -%}
|
|
79
|
+
<h2>{{ title_text }}</h2>
|
|
80
|
+
{{ _description_block() -}}
|
|
81
|
+
{{ _cta_block() }}
|
|
82
|
+
{%- endmacro -%}
|
|
83
|
+
{%- macro _cta_variant() -%}
|
|
84
|
+
{%- if variant == 'default' -%}
|
|
85
|
+
{{ _cta_default_variant() }}
|
|
86
|
+
{%- elif variant == 'block' -%}
|
|
87
|
+
{{ _cta_block_variant() }}
|
|
88
|
+
{%- endif -%}
|
|
89
|
+
{%- endmacro -%}
|
|
90
|
+
<hr class="p-rule is-fixed-width u-no-margin--bottom" />
|
|
91
|
+
<section class="p-strip is-deep">
|
|
92
|
+
{%- if layout == "25-75" -%}
|
|
93
|
+
<div class="grid-row">
|
|
94
|
+
<div class="grid-col-start-large-3 grid-col-9">{{ _cta_variant() }}</div>
|
|
95
|
+
</div>
|
|
96
|
+
{%- elif layout == "100" -%}
|
|
97
|
+
<div class="u-fixed-width">{{ _cta_variant() }}</div>
|
|
98
|
+
{%- endif -%}
|
|
99
|
+
</section>
|
|
100
|
+
{%- endmacro -%}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{#
|
|
2
|
+
All Params:
|
|
3
|
+
@param title_text: H2 title text
|
|
4
|
+
@param list_items (Array<string>)
|
|
5
|
+
An array of HTML strings to be rendered
|
|
6
|
+
#}
|
|
7
|
+
{%- macro vf_text_spotlight(title_text, list_items=[], caller=None) -%}
|
|
8
|
+
{% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
|
|
9
|
+
<section class="p-section">
|
|
10
|
+
<hr class="p-rule is-fixed-width" />
|
|
11
|
+
<div class="row--25-75-on-large">
|
|
12
|
+
<div class="col">
|
|
13
|
+
<h2 class="p-text--small-caps">{{ title_text }}</h2>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col">
|
|
16
|
+
{%- if has_list -%}
|
|
17
|
+
{%- for list_item in list_items -%}
|
|
18
|
+
<p class="p-heading--2">{{- list_item -}}</p>
|
|
19
|
+
{%- if not loop.last %}<hr class="p-rule--muted" />{%- endif %}
|
|
20
|
+
{%- endfor -%}
|
|
21
|
+
{%- else -%}
|
|
22
|
+
<div class="p-notification--caution">
|
|
23
|
+
<div class="p-notification__content">
|
|
24
|
+
<h5 class="p-notification__title">Caution</h5>
|
|
25
|
+
<p class="p-notification__message">List items must be between 2 and 7.</p>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
{%- endif -%}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</section>
|
|
32
|
+
{%- endmacro -%}
|
|
@@ -20,48 +20,43 @@
|
|
|
20
20
|
|
|
21
21
|
<div class="p-section u-fixed-width">
|
|
22
22
|
<hr class="p-rule">
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div class="p-section--shallow">
|
|
23
|
+
<div class="p-section--shallow">
|
|
24
|
+
{% if has_description == true -%}
|
|
25
|
+
{%- if is_description_full_width_on_desktop == true -%}
|
|
26
|
+
<div class="u-fixed-width">
|
|
28
27
|
{{ title_content }}
|
|
29
28
|
</div>
|
|
30
|
-
</div>
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
<div class="row">
|
|
31
|
+
<div class="col-6 col-start-large-7">
|
|
32
|
+
{{ description_content }}
|
|
33
|
+
</div>
|
|
35
34
|
</div>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<div class="col-6">
|
|
40
|
-
<div class="p-section--shallow">
|
|
35
|
+
{%- else -%}
|
|
36
|
+
<div class="row">
|
|
37
|
+
<div class="col-6">
|
|
41
38
|
{{ title_content }}
|
|
42
39
|
</div>
|
|
43
|
-
</div>
|
|
44
40
|
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
<div class="col-6">
|
|
42
|
+
{{ description_content }}
|
|
43
|
+
</div>
|
|
47
44
|
</div>
|
|
48
|
-
|
|
49
|
-
{%-
|
|
50
|
-
|
|
51
|
-
<div class="u-fixed-width">
|
|
52
|
-
<div class="p-section--shallow">
|
|
45
|
+
{%- endif -%}
|
|
46
|
+
{%- else -%}
|
|
47
|
+
<div class="u-fixed-width">
|
|
53
48
|
{{ title_content }}
|
|
54
49
|
</div>
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
{%- endif %}
|
|
51
|
+
</div>
|
|
57
52
|
|
|
58
53
|
{#-
|
|
59
54
|
When there is a CTA, we use shallow spacing to space the list away from the CTA.
|
|
60
55
|
When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
|
|
61
56
|
-#}
|
|
62
57
|
{%- if has_cta -%}
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
<div class="p-section--shallow">
|
|
59
|
+
{%- endif -%}
|
|
65
60
|
{%- for number in range(1, 25) -%}
|
|
66
61
|
{%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
|
|
67
62
|
{%- set has_title_content = list_item_title_content|trim|length > 0 -%}
|
|
@@ -72,27 +67,29 @@
|
|
|
72
67
|
iterating through 25 potential list items -#}
|
|
73
68
|
{%- if has_title_content and has_description_content -%}
|
|
74
69
|
{%- if is_list_full_width_on_tablet == true %}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
70
|
+
{#- Skip the first HR -#}
|
|
71
|
+
{%- if number != 1 %}
|
|
72
|
+
<div class="row">
|
|
73
|
+
<div class="col-9 col-start-large-4">
|
|
74
|
+
<hr class="is-muted">
|
|
75
|
+
</div>
|
|
78
76
|
</div>
|
|
79
|
-
|
|
77
|
+
{%- endif -%}
|
|
80
78
|
|
|
81
79
|
<div class="row">
|
|
82
|
-
<div class="col-3 col-start-large-4">
|
|
83
|
-
{{ list_item_title_content }}
|
|
84
|
-
</div>
|
|
80
|
+
<div class="col-3 col-start-large-4">{{ list_item_title_content }}</div>
|
|
85
81
|
|
|
86
|
-
<div class="col-6">
|
|
87
|
-
{{ list_item_description_content }}
|
|
88
|
-
</div>
|
|
82
|
+
<div class="col-6">{{ list_item_description_content }}</div>
|
|
89
83
|
</div>
|
|
90
84
|
{%- else %}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
85
|
+
{#- Skip the first HR -#}
|
|
86
|
+
{%- if number != 1 %}
|
|
87
|
+
<div class="row">
|
|
88
|
+
<div class="col-9 col-start-large-4">
|
|
89
|
+
<hr class="is-muted">
|
|
90
|
+
</div>
|
|
94
91
|
</div>
|
|
95
|
-
|
|
92
|
+
{%- endif -%}
|
|
96
93
|
|
|
97
94
|
<div class="row">
|
|
98
95
|
<div class="col-medium-3 col-3 col-start-large-4">
|
|
@@ -106,13 +103,13 @@
|
|
|
106
103
|
{%- endif -%}
|
|
107
104
|
{%- endif -%}
|
|
108
105
|
{% endfor %}
|
|
109
|
-
|
|
110
|
-
|
|
106
|
+
{%- if has_cta -%}
|
|
107
|
+
</div>
|
|
111
108
|
{%- endif -%}
|
|
112
109
|
|
|
113
110
|
{% if has_cta == true -%}
|
|
114
111
|
<div class="row">
|
|
115
|
-
<hr class="p-rule--muted"
|
|
112
|
+
<hr class="p-rule--muted">
|
|
116
113
|
<div class="col-6 col-start-large-7">
|
|
117
114
|
<p>
|
|
118
115
|
{{ cta_content }}
|
|
@@ -121,4 +118,4 @@
|
|
|
121
118
|
</div>
|
|
122
119
|
{%- endif %}
|
|
123
120
|
</div>
|
|
124
|
-
{%- endmacro %}
|
|
121
|
+
{%- endmacro %}
|