@energysage/es-ds-components 3.0.9 → 3.0.11

package/components/es-collapse.vue

@@ -20,6 +20,7 @@ const props = defineProps({
 });
 
 const userDeterminedState: Ref<boolean | null> = ref(null);
+const uniqueId = useId();
 
 // directly determines the expanded/collapsed state of the panel
 const expanded = computed(() => {
@@ -52,7 +53,7 @@ const onClick = ({ value }: { value: boolean }) => {
 <template>
     <panel
         :collapsed="!expanded"
-        :header="expanded ? 'click to collapse content' : 'click to expand content'"
+        :toggle-button-props="{ 'aria-labelledby': uniqueId }"
         :pt="{
             header: 'd-flex flex-column justify-content-center position-relative py-100',
             icons: 'h-100 position-absolute w-100',
@@ -74,7 +75,9 @@ const onClick = ({ value }: { value: boolean }) => {
         toggleable
         @toggle="onClick">
         <template #header>
-            <slot name="title" />
+            <div :id="uniqueId">
+                <slot name="title" />
+            </div>
         </template>
         <template #togglericon>
             <icon-chevron-down />

package/components/es-cta-banner.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
-const props = defineProps({
-    dark: {
-        type: Boolean,
-        default: false,
-    },
-    hasButton: {
-        type: Boolean,
-        default: false,
-    },
-    // default or wide
-    variant: {
-        type: String,
-        default: 'default',
-    },
+interface Props {
+    alignMobile?: 'left' | 'center' | 'right';
+    background?: 'none' | 'blue-300-radial' | 'dark-blue';
+    hasButton?: boolean;
+    variant?: 'default' | 'stacked' | 'wide';
+    // deprecated
+    dark?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    alignMobile: 'center',
+    background: 'none',
+    hasButton: false,
+    variant: 'default',
+    // deprecated
+    dark: false,
 });
 
 const lgFirst = computed(() => {
+    if (props.variant === 'stacked') {
+        return '12';
+    }
+
     if (props.variant === 'wide') {
         return props.hasButton ? '8' : '6';
     }
@@ -24,6 +29,10 @@ const lgFirst = computed(() => {
 });
 
 const lgSecond = computed(() => {
+    if (props.variant === 'stacked') {
+        return '12';
+    }
+
     if (props.variant === 'wide') {
         return props.hasButton ? '4' : '6';
     }
@@ -32,6 +41,10 @@ const lgSecond = computed(() => {
 });
 
 const xxlFirst = computed(() => {
+    if (props.variant === 'stacked') {
+        return '12';
+    }
+
     if (props.variant === 'wide') {
         return props.hasButton ? '8' : '6';
     }
@@ -40,6 +53,10 @@ const xxlFirst = computed(() => {
 });
 
 const xxlSecond = computed(() => {
+    if (props.variant === 'stacked') {
+        return '12';
+    }
+
     if (props.variant === 'wide') {
         return props.hasButton ? '4' : '6';
     }
@@ -52,7 +69,8 @@ const xxlSecond = computed(() => {
     <es-card
         :class="[
             {
-                'bg-dark-blue border-dark-blue text-white': dark,
+                'bg-dark-blue border-dark-blue text-white': dark || background === 'dark-blue',
+                'bg-blue-300-radial-gradient': background === 'blue-300-radial',
                 'px-100 px-lg-200': variant === 'default',
                 'px-100 px-lg-300': variant === 'wide',
             },
@@ -60,7 +78,12 @@ const xxlSecond = computed(() => {
         v-bind="$attrs">
         <es-row>
             <es-col
-                class="mb-200 my-lg-auto text-center text-lg-left"
+                class="text-lg-left"
+                :class="{
+                    [`text-${alignMobile}`]: true,
+                    'mb-100': variant === 'stacked',
+                    'mb-200 my-lg-auto': variant !== 'stacked',
+                }"
                 :lg="lgFirst"
                 :xxl="xxlFirst">
                 <!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
@@ -70,10 +93,10 @@ const xxlSecond = computed(() => {
                     aria-level="2"
                     class="font-weight-semibold"
                     :class="{
-                        'font-size-300': variant === 'default',
+                        'font-size-300': variant === 'default' || variant === 'stacked',
                         'mb-50': $slots.subtitle,
                         'mb-0': !$slots.subtitle,
-                        'text-white': dark,
+                        'text-white': dark || background === 'dark-blue',
                         h2: variant === 'wide',
                     }">
                     <slot name="heading"> Easily find what solar costs in your area </slot>
@@ -85,7 +108,10 @@ const xxlSecond = computed(() => {
                 </p>
             </es-col>
             <es-col
-                class="d-flex justify-content-center justify-content-lg-end my-auto"
+                class="d-flex justify-content-center my-auto"
+                :class="{
+                    'justify-content-lg-end': variant !== 'stacked',
+                }"
                 :lg="lgSecond"
                 :xxl="xxlSecond">
                 <slot name="cta" />
@@ -93,3 +119,19 @@ const xxlSecond = computed(() => {
         </es-row>
     </es-card>
 </template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.bg-blue-300-radial-gradient {
+    background:
+        radial-gradient(44.92% 45.42% at 5.14% 6.4%, rgba(133, 178, 255, 0) 0%, variables.$blue-300 100%), #fff;
+
+    @include breakpoints.media-breakpoint-up(md) {
+        background:
+            radial-gradient(95.61% 111.81% at -0.65% 0%, rgba(133, 178, 255, 0) 0%, variables.$blue-300 100%),
+            variables.$white;
+    }
+}
+</style>

package/components/es-tabs.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import TabPanel from 'primevue/tabpanel';
 import TabView from 'primevue/tabview';
+import { Comment } from 'vue';
 
 // allow use of v-model on this component
 const model = defineModel<number>();
 
-// get the list of elements provided as children to the default slot
-const initialChildren = useSlots().default?.() || [];
+// get the list of elements provided as children to the default slot - filtering out comments
+const rawChildren = useSlots().default?.() || [];
+const initialChildren = rawChildren.filter((child) => child.type !== Comment);
+
 const panels: any[] = [];
 initialChildren.forEach((child) => {
     // unless this has a v-for element and we instead need to access its children

package/components/es-video.vue

@@ -12,7 +12,7 @@ const showVideo = ref(false);
 
 // Methods
 function getVideoIdFromUrl(url: string) {
-    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[A-Za-z0-9-]+)/;
+    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[_A-Za-z0-9-]+)/;
     const parsedUrl = embedPattern.exec(url);
     if (parsedUrl) {
         return parsedUrl?.groups?.videoId;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.0.9",
+    "version": "3.0.11",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",