@energysage/es-ds-components 3.0.9 → 3.0.10

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/package.json

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