@energysage/es-ds-components 3.1.4 → 3.1.6

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.
Files changed (5) hide show
  1. package/components/es-cta-banner.vue +91 -22
  2. package/components/es-popover.vue +43 -38
  3. package/components/es-tooltip.vue +50 -45
  4. package/nuxt.config.ts +10 -0
  5. package/package.json +2 -2
package/components/es-cta-banner.vue CHANGED
@@ -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
- variant?: 'default' | 'stacked' | 'wide';
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
- 'px-100 px-lg-200': variant === 'default',
75
- 'px-100 px-lg-300': variant === 'wide',
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
- role="heading"
93
- aria-level="2"
94
- class="font-weight-semibold"
125
+ class="flex-grow-1"
95
126
  :class="{
96
- 'font-size-300': variant === 'default' || variant === 'stacked',
97
- 'mb-50': $slots.subtitle,
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
- <slot name="heading"> Easily find what solar costs in your area </slot>
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;
package/components/es-popover.vue CHANGED
@@ -20,47 +20,52 @@ withDefaults(defineProps<IProps>(), {
20
20
  });
21
21
 
22
22
  const emit = defineEmits(['update:show']);
23
+
24
+ // Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
25
+ const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
23
26
  </script>
24
27
 
25
28
  <template>
26
- <popover-root
27
- :open="show"
28
- @update:open="(val) => emit('update:show', val)">
29
- <popover-trigger
30
- class="es-popover-trigger p-0"
31
- :class="{ [triggerClass]: true }">
32
- <span class="sr-only">{{ triggerDescription }}</span>
33
- <slot name="trigger" />
34
- </popover-trigger>
35
- <popover-portal>
36
- <popover-content
37
- class="es-popover-content position-relative"
38
- :class="{
39
- 'text-white': variant === 'dark',
40
- 'es-popover-content--light': variant === 'light',
41
- }"
42
- :collision-padding="collisionPadding"
43
- :side="side">
44
- <popover-close
45
- class="es-popover-close align-items-center d-flex justify-content-center float-right mb-50 ml-50 position-relative"
46
- :class="{ 'es-popover-close--light': variant === 'light' }">
47
- <span class="sr-only">Close</span>
48
- <icon-x
49
- height="20px"
50
- width="20px" />
51
- </popover-close>
52
- <popover-arrow
53
- class="es-popover-arrow"
54
- :class="{ 'es-popover-arrow--light': variant === 'light' }"
55
- :height="12"
56
- rounded
57
- :width="22" />
58
- <slot />
59
- <!-- the cta slot is kept for backwards compatibility but is deprecated -->
60
- <slot name="cta" />
61
- </popover-content>
62
- </popover-portal>
63
- </popover-root>
29
+ <component :is="wrappingComponent">
30
+ <popover-root
31
+ :open="show"
32
+ @update:open="(val) => emit('update:show', val)">
33
+ <popover-trigger
34
+ class="es-popover-trigger p-0"
35
+ :class="{ [triggerClass]: true }">
36
+ <span class="sr-only">{{ triggerDescription }}</span>
37
+ <slot name="trigger" />
38
+ </popover-trigger>
39
+ <popover-portal>
40
+ <popover-content
41
+ class="es-popover-content position-relative"
42
+ :class="{
43
+ 'text-white': variant === 'dark',
44
+ 'es-popover-content--light': variant === 'light',
45
+ }"
46
+ :collision-padding="collisionPadding"
47
+ :side="side">
48
+ <popover-close
49
+ class="es-popover-close align-items-center d-flex justify-content-center float-right mb-50 ml-50 position-relative"
50
+ :class="{ 'es-popover-close--light': variant === 'light' }">
51
+ <span class="sr-only">Close</span>
52
+ <icon-x
53
+ height="20px"
54
+ width="20px" />
55
+ </popover-close>
56
+ <popover-arrow
57
+ class="es-popover-arrow"
58
+ :class="{ 'es-popover-arrow--light': variant === 'light' }"
59
+ :height="12"
60
+ rounded
61
+ :width="22" />
62
+ <slot />
63
+ <!-- the cta slot is kept for backwards compatibility but is deprecated -->
64
+ <slot name="cta" />
65
+ </popover-content>
66
+ </popover-portal>
67
+ </popover-root>
68
+ </component>
64
69
  </template>
65
70
 
66
71
  <style lang="scss" scoped>
package/components/es-tooltip.vue CHANGED
@@ -43,55 +43,60 @@ onMounted(() => {
43
43
  const mediaQueryResult = window.matchMedia('(hover: none)') as MediaQueryList;
44
44
  deviceSupportsTouch.value = mediaQueryResult?.matches || false;
45
45
  });
46
+
47
+ // Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
48
+ const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
46
49
  </script>
47
50
 
48
51
  <template>
49
- <tooltip-provider
50
- v-if="!deviceSupportsTouch"
51
- :delay-duration="delayDuration"
52
- :disable-closing-trigger="true">
53
- <tooltip-root
54
- :open="show || internalShow"
55
- @update:open="handleUpdateOpen">
56
- <tooltip-trigger
57
- class="es-tooltip-trigger p-0"
58
- :class="{ [triggerClass]: true }"
59
- @click="handleClick">
52
+ <component :is="wrappingComponent">
53
+ <tooltip-provider
54
+ v-if="!deviceSupportsTouch"
55
+ :delay-duration="delayDuration"
56
+ :disable-closing-trigger="true">
57
+ <tooltip-root
58
+ :open="show || internalShow"
59
+ @update:open="handleUpdateOpen">
60
+ <tooltip-trigger
61
+ class="es-tooltip-trigger p-0"
62
+ :class="{ [triggerClass]: true }"
63
+ @click="handleClick">
64
+ <slot name="trigger" />
65
+ </tooltip-trigger>
66
+ <tooltip-portal>
67
+ <tooltip-content
68
+ class="es-tooltip-content"
69
+ :class="{
70
+ 'text-white': variant === 'dark',
71
+ 'es-tooltip-content--light': variant === 'light',
72
+ }"
73
+ :collision-padding="collisionPadding"
74
+ :side="side">
75
+ <tooltip-arrow
76
+ class="es-tooltip-arrow"
77
+ :class="{ 'es-tooltip-arrow--light': variant === 'light' }"
78
+ :height="12"
79
+ rounded
80
+ :width="22" />
81
+ <slot />
82
+ </tooltip-content>
83
+ </tooltip-portal>
84
+ </tooltip-root>
85
+ </tooltip-provider>
86
+ <es-popover
87
+ v-else
88
+ :collision-padding="collisionPadding"
89
+ :show="show"
90
+ :side="side"
91
+ :trigger-class="triggerClass"
92
+ :variant="variant"
93
+ @update:show="(val) => emit('update:show', val)">
94
+ <template #trigger>
60
95
  <slot name="trigger" />
61
- </tooltip-trigger>
62
- <tooltip-portal>
63
- <tooltip-content
64
- class="es-tooltip-content"
65
- :class="{
66
- 'text-white': variant === 'dark',
67
- 'es-tooltip-content--light': variant === 'light',
68
- }"
69
- :collision-padding="collisionPadding"
70
- :side="side">
71
- <tooltip-arrow
72
- class="es-tooltip-arrow"
73
- :class="{ 'es-tooltip-arrow--light': variant === 'light' }"
74
- :height="12"
75
- rounded
76
- :width="22" />
77
- <slot />
78
- </tooltip-content>
79
- </tooltip-portal>
80
- </tooltip-root>
81
- </tooltip-provider>
82
- <es-popover
83
- v-else
84
- :collision-padding="collisionPadding"
85
- :show="show"
86
- :side="side"
87
- :trigger-class="triggerClass"
88
- :variant="variant"
89
- @update:show="(val) => emit('update:show', val)">
90
- <template #trigger>
91
- <slot name="trigger" />
92
- </template>
93
- <slot />
94
- </es-popover>
96
+ </template>
97
+ <slot />
98
+ </es-popover>
99
+ </component>
95
100
  </template>
96
101
 
97
102
  <style lang="scss" scoped>
package/nuxt.config.ts CHANGED
@@ -77,8 +77,18 @@ export default defineNuxtConfig({
77
77
  'primevue/tabpanel',
78
78
  'primevue/tabview',
79
79
  'reka-ui',
80
+ 'motion-v',
80
81
  ],
81
82
  },
83
+ css: {
84
+ preprocessorOptions: {
85
+ scss: {
86
+ api: 'modern',
87
+ // color functions will be deprecated in SASS 2.0: https://sass-lang.com/documentation/breaking-changes/color-functions/
88
+ silenceDeprecations: ['color-functions'],
89
+ },
90
+ },
91
+ },
82
92
  },
83
93
  typescript: {
84
94
  typeCheck: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@energysage/es-ds-components",
3
- "version": "3.1.4",
3
+ "version": "3.1.6",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
17
17
  "author": "EnergySage",
18
18
  "license": "MIT",
19
19
  "dependencies": {
20
- "@energysage/es-ds-styles": "^3.1.3",
20
+ "@energysage/es-ds-styles": "^3.1.6",
21
21
  "@nuxt/eslint": "^1.0.1",
22
22
  "@nuxtjs/google-fonts": "^3.2.0",
23
23
  "@vuelidate/core": "^2.0.3",