@energysage/es-ds-components 3.1.3 → 3.1.5

package/components/es-cta-banner.vue

@@ -3,7 +3,8 @@ interface Props {
     alignMobile?: 'left' | 'center' | 'right';
     background?: 'none' | 'blue-300-radial' | 'dark-blue';
     hasButton?: boolean;
-    variant?: 'default' | 'stacked' | 'wide';
+    sideImageContainerClass?: string;
+    variant?: 'default' | 'stacked' | 'semi-wide' | 'wide';
     // deprecated
     dark?: boolean;
 }
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<Props>(), {
     alignMobile: 'center',
     background: 'none',
     hasButton: false,
+    sideImageContainerClass: 'flex-shrink-0 ml-100',
     variant: 'default',
     // deprecated
     dark: false,
@@ -25,6 +27,10 @@ const lgFirst = computed(() => {
         return props.hasButton ? '8' : '6';
     }
 
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '7' : '5';
+    }
+
     return props.hasButton ? '7' : '4';
 });
 
@@ -37,9 +43,29 @@ const lgSecond = computed(() => {
         return props.hasButton ? '4' : '6';
     }
 
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '5' : '7';
+    }
+
     return props.hasButton ? '5' : '8';
 });
 
+const xlFirst = computed(() => {
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '7' : '5';
+    }
+
+    return lgFirst.value;
+});
+
+const xlSecond = computed(() => {
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '5' : '7';
+    }
+
+    return lgSecond.value;
+});
+
 const xxlFirst = computed(() => {
     if (props.variant === 'stacked') {
         return '12';
@@ -49,6 +75,10 @@ const xxlFirst = computed(() => {
         return props.hasButton ? '8' : '6';
     }
 
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '8' : '6';
+    }
+
     return props.hasButton ? '8' : '5';
 });
 
@@ -61,51 +91,68 @@ const xxlSecond = computed(() => {
         return props.hasButton ? '4' : '6';
     }
 
+    if (props.variant === 'semi-wide') {
+        return props.hasButton ? '4' : '6';
+    }
+
     return props.hasButton ? '4' : '7';
 });
 </script>
 
 <template>
     <es-card
+        class="es-card position-relative"
         :class="[
             {
                 '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',
+                'es-card--default': variant === 'default',
+                'es-card--semi-wide': variant === 'semi-wide',
+                'es-card--wide': variant === 'wide',
             },
         ]"
         v-bind="$attrs">
         <es-row>
             <es-col
-                class="text-lg-left"
+                class="d-flex text-lg-left position-static"
                 :class="{
                     [`text-${alignMobile}`]: true,
-                    'mb-100': variant === 'stacked',
-                    'mb-200 my-lg-auto': variant !== 'stacked',
                 }"
                 :lg="lgFirst"
+                :xl="xlFirst"
                 :xxl="xxlFirst">
-                <!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
-                    but preserving heading semantics for screen readers -->
                 <div
-                    role="heading"
-                    aria-level="2"
-                    class="font-weight-semibold"
+                    class="flex-grow-1"
                     :class="{
-                        'font-size-300': variant === 'default' || variant === 'stacked',
-                        'mb-50': $slots.subtitle,
-                        'mb-0': !$slots.subtitle,
-                        'text-white': dark || background === 'dark-blue',
-                        h2: variant === 'wide',
+                        'pb-100': variant === 'stacked',
+                        'pb-200 pb-lg-0 my-lg-auto': variant !== 'stacked',
                     }">
-                    <slot name="heading"> Easily find what solar costs in your area </slot>
+                    <!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
+                    but preserving heading semantics for screen readers -->
+                    <div
+                        role="heading"
+                        aria-level="2"
+                        class="font-weight-semibold"
+                        :class="{
+                            'font-size-300': ['default', 'semi-wide', 'stacked'].includes(variant),
+                            'mb-50': $slots.subtitle,
+                            'mb-0': !$slots.subtitle,
+                            'text-white': dark || background === 'dark-blue',
+                            h2: variant === 'wide',
+                        }">
+                        <slot name="heading"> Easily find what solar costs in your area </slot>
+                    </div>
+                    <p
+                        v-if="$slots.subtitle"
+                        class="mb-0">
+                        <slot name="subtitle" />
+                    </p>
+                </div>
+                <div
+                    v-if="$slots.sideImage"
+                    :class="sideImageContainerClass">
+                    <slot name="sideImage" />
                 </div>
-                <p
-                    v-if="$slots.subtitle"
-                    class="mb-0">
-                    <slot name="subtitle" />
-                </p>
             </es-col>
             <es-col
                 class="d-flex justify-content-center my-auto"
@@ -113,6 +160,7 @@ const xxlSecond = computed(() => {
                     'justify-content-lg-end': variant !== 'stacked',
                 }"
                 :lg="lgSecond"
+                :xl="xlSecond"
                 :xxl="xxlSecond">
                 <slot name="cta" />
             </es-col>
@@ -124,6 +172,27 @@ const xxlSecond = computed(() => {
 @use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
 @use '@energysage/es-ds-styles/scss/variables' as variables;
 
+.es-card {
+    /* allow utility classes passed in to override these */
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+@include breakpoints.media-breakpoint-up(lg) {
+    .es-card--default,
+    .es-card-semi-wide {
+        /* allow utility classes passed in to override these */
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .es-card--wide {
+        /* allow utility classes passed in to override these */
+        padding-left: 3rem;
+        padding-right: 3rem;
+    }
+}
+
 .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;

package/components/icon/facebook.vue

@@ -16,6 +16,7 @@ withDefaults(defineProps<IProps>(), {
             height: height,
             width: width,
         }"
+        viewBox="0 0 32 32"
         xmlns="http://www.w3.org/2000/svg">
         <path
             fill-rule="evenodd"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.1.3",
+    "version": "3.1.5",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.1.0",
+        "@energysage/es-ds-styles": "^3.1.3",
         "@nuxt/eslint": "^1.0.1",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",