@energysage/es-ds-components 3.1.4 → 3.1.5
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/components/es-cta-banner.vue +91 -22
- package/package.json +1 -1
|
@@ -3,7 +3,8 @@ interface Props {
|
|
|
3
3
|
alignMobile?: 'left' | 'center' | 'right';
|
|
4
4
|
background?: 'none' | 'blue-300-radial' | 'dark-blue';
|
|
5
5
|
hasButton?: boolean;
|
|
6
|
-
|
|
6
|
+
sideImageContainerClass?: string;
|
|
7
|
+
variant?: 'default' | 'stacked' | 'semi-wide' | 'wide';
|
|
7
8
|
// deprecated
|
|
8
9
|
dark?: boolean;
|
|
9
10
|
}
|
|
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
11
12
|
alignMobile: 'center',
|
|
12
13
|
background: 'none',
|
|
13
14
|
hasButton: false,
|
|
15
|
+
sideImageContainerClass: 'flex-shrink-0 ml-100',
|
|
14
16
|
variant: 'default',
|
|
15
17
|
// deprecated
|
|
16
18
|
dark: false,
|
|
@@ -25,6 +27,10 @@ const lgFirst = computed(() => {
|
|
|
25
27
|
return props.hasButton ? '8' : '6';
|
|
26
28
|
}
|
|
27
29
|
|
|
30
|
+
if (props.variant === 'semi-wide') {
|
|
31
|
+
return props.hasButton ? '7' : '5';
|
|
32
|
+
}
|
|
33
|
+
|
|
28
34
|
return props.hasButton ? '7' : '4';
|
|
29
35
|
});
|
|
30
36
|
|
|
@@ -37,9 +43,29 @@ const lgSecond = computed(() => {
|
|
|
37
43
|
return props.hasButton ? '4' : '6';
|
|
38
44
|
}
|
|
39
45
|
|
|
46
|
+
if (props.variant === 'semi-wide') {
|
|
47
|
+
return props.hasButton ? '5' : '7';
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
return props.hasButton ? '5' : '8';
|
|
41
51
|
});
|
|
42
52
|
|
|
53
|
+
const xlFirst = computed(() => {
|
|
54
|
+
if (props.variant === 'semi-wide') {
|
|
55
|
+
return props.hasButton ? '7' : '5';
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return lgFirst.value;
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
const xlSecond = computed(() => {
|
|
62
|
+
if (props.variant === 'semi-wide') {
|
|
63
|
+
return props.hasButton ? '5' : '7';
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return lgSecond.value;
|
|
67
|
+
});
|
|
68
|
+
|
|
43
69
|
const xxlFirst = computed(() => {
|
|
44
70
|
if (props.variant === 'stacked') {
|
|
45
71
|
return '12';
|
|
@@ -49,6 +75,10 @@ const xxlFirst = computed(() => {
|
|
|
49
75
|
return props.hasButton ? '8' : '6';
|
|
50
76
|
}
|
|
51
77
|
|
|
78
|
+
if (props.variant === 'semi-wide') {
|
|
79
|
+
return props.hasButton ? '8' : '6';
|
|
80
|
+
}
|
|
81
|
+
|
|
52
82
|
return props.hasButton ? '8' : '5';
|
|
53
83
|
});
|
|
54
84
|
|
|
@@ -61,51 +91,68 @@ const xxlSecond = computed(() => {
|
|
|
61
91
|
return props.hasButton ? '4' : '6';
|
|
62
92
|
}
|
|
63
93
|
|
|
94
|
+
if (props.variant === 'semi-wide') {
|
|
95
|
+
return props.hasButton ? '4' : '6';
|
|
96
|
+
}
|
|
97
|
+
|
|
64
98
|
return props.hasButton ? '4' : '7';
|
|
65
99
|
});
|
|
66
100
|
</script>
|
|
67
101
|
|
|
68
102
|
<template>
|
|
69
103
|
<es-card
|
|
104
|
+
class="es-card position-relative"
|
|
70
105
|
:class="[
|
|
71
106
|
{
|
|
72
107
|
'bg-dark-blue border-dark-blue text-white': dark || background === 'dark-blue',
|
|
73
108
|
'bg-blue-300-radial-gradient': background === 'blue-300-radial',
|
|
74
|
-
'
|
|
75
|
-
'
|
|
109
|
+
'es-card--default': variant === 'default',
|
|
110
|
+
'es-card--semi-wide': variant === 'semi-wide',
|
|
111
|
+
'es-card--wide': variant === 'wide',
|
|
76
112
|
},
|
|
77
113
|
]"
|
|
78
114
|
v-bind="$attrs">
|
|
79
115
|
<es-row>
|
|
80
116
|
<es-col
|
|
81
|
-
class="text-lg-left"
|
|
117
|
+
class="d-flex text-lg-left position-static"
|
|
82
118
|
:class="{
|
|
83
119
|
[`text-${alignMobile}`]: true,
|
|
84
|
-
'mb-100': variant === 'stacked',
|
|
85
|
-
'mb-200 my-lg-auto': variant !== 'stacked',
|
|
86
120
|
}"
|
|
87
121
|
:lg="lgFirst"
|
|
122
|
+
:xl="xlFirst"
|
|
88
123
|
:xxl="xxlFirst">
|
|
89
|
-
<!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
|
|
90
|
-
but preserving heading semantics for screen readers -->
|
|
91
124
|
<div
|
|
92
|
-
|
|
93
|
-
aria-level="2"
|
|
94
|
-
class="font-weight-semibold"
|
|
125
|
+
class="flex-grow-1"
|
|
95
126
|
:class="{
|
|
96
|
-
'
|
|
97
|
-
'
|
|
98
|
-
'mb-0': !$slots.subtitle,
|
|
99
|
-
'text-white': dark || background === 'dark-blue',
|
|
100
|
-
h2: variant === 'wide',
|
|
127
|
+
'pb-100': variant === 'stacked',
|
|
128
|
+
'pb-200 pb-lg-0 my-lg-auto': variant !== 'stacked',
|
|
101
129
|
}">
|
|
102
|
-
|
|
130
|
+
<!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
|
|
131
|
+
but preserving heading semantics for screen readers -->
|
|
132
|
+
<div
|
|
133
|
+
role="heading"
|
|
134
|
+
aria-level="2"
|
|
135
|
+
class="font-weight-semibold"
|
|
136
|
+
:class="{
|
|
137
|
+
'font-size-300': ['default', 'semi-wide', 'stacked'].includes(variant),
|
|
138
|
+
'mb-50': $slots.subtitle,
|
|
139
|
+
'mb-0': !$slots.subtitle,
|
|
140
|
+
'text-white': dark || background === 'dark-blue',
|
|
141
|
+
h2: variant === 'wide',
|
|
142
|
+
}">
|
|
143
|
+
<slot name="heading"> Easily find what solar costs in your area </slot>
|
|
144
|
+
</div>
|
|
145
|
+
<p
|
|
146
|
+
v-if="$slots.subtitle"
|
|
147
|
+
class="mb-0">
|
|
148
|
+
<slot name="subtitle" />
|
|
149
|
+
</p>
|
|
150
|
+
</div>
|
|
151
|
+
<div
|
|
152
|
+
v-if="$slots.sideImage"
|
|
153
|
+
:class="sideImageContainerClass">
|
|
154
|
+
<slot name="sideImage" />
|
|
103
155
|
</div>
|
|
104
|
-
<p
|
|
105
|
-
v-if="$slots.subtitle"
|
|
106
|
-
class="mb-0">
|
|
107
|
-
<slot name="subtitle" />
|
|
108
|
-
</p>
|
|
109
156
|
</es-col>
|
|
110
157
|
<es-col
|
|
111
158
|
class="d-flex justify-content-center my-auto"
|
|
@@ -113,6 +160,7 @@ const xxlSecond = computed(() => {
|
|
|
113
160
|
'justify-content-lg-end': variant !== 'stacked',
|
|
114
161
|
}"
|
|
115
162
|
:lg="lgSecond"
|
|
163
|
+
:xl="xlSecond"
|
|
116
164
|
:xxl="xxlSecond">
|
|
117
165
|
<slot name="cta" />
|
|
118
166
|
</es-col>
|
|
@@ -124,6 +172,27 @@ const xxlSecond = computed(() => {
|
|
|
124
172
|
@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
|
|
125
173
|
@use '@energysage/es-ds-styles/scss/variables' as variables;
|
|
126
174
|
|
|
175
|
+
.es-card {
|
|
176
|
+
/* allow utility classes passed in to override these */
|
|
177
|
+
padding-left: 1rem;
|
|
178
|
+
padding-right: 1rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@include breakpoints.media-breakpoint-up(lg) {
|
|
182
|
+
.es-card--default,
|
|
183
|
+
.es-card-semi-wide {
|
|
184
|
+
/* allow utility classes passed in to override these */
|
|
185
|
+
padding-left: 2rem;
|
|
186
|
+
padding-right: 2rem;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.es-card--wide {
|
|
190
|
+
/* allow utility classes passed in to override these */
|
|
191
|
+
padding-left: 3rem;
|
|
192
|
+
padding-right: 3rem;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
127
196
|
.bg-blue-300-radial-gradient {
|
|
128
197
|
background:
|
|
129
198
|
radial-gradient(44.92% 45.42% at 5.14% 6.4%, rgba(133, 178, 255, 0) 0%, variables.$blue-300 100%), #fff;
|