@energysage/es-ds-components 3.0.0-alpha.6 → 3.0.0-alpha.7

package/components/es-collapse.vue

@@ -1,40 +1,9 @@
-<template>
-    <panel
-        :collapsed="!expanded"
-        :pt="{
-            header: 'align-items-center d-flex justify-content-between position-relative py-100',
-            icons: 'h-100 position-absolute w-100',
-            root: border ? 'border-bottom border-top' : '',
-            toggler: {
-                class: 'es-collapse-toggler align-items-center btn btn-link d-flex h-100 inline justify-content-end rounded-0 p-0 position-absolute text-body w-100',
-            },
-            // https://vuejs.org/guide/built-ins/transition
-            transition: {
-                enterActiveClass: 'es-collapse-enter-active',
-                enterFromClass: 'es-collapse-enter-from',
-                enterToClass: 'es-collapse-enter-to',
-                leaveActiveClass: 'es-collapse-leave-active',
-                leaveFromClass: 'es-collapse-leave-from',
-                leaveToClass: 'es-collapse-leave-to'
-            },
-        }"
-        toggleable
-        @toggle="onClick">
-        <template #header>
-            <slot name="title" />
-        </template>
-        <template #togglericon>
-            <icon-chevron-down />
-        </template>
-        <slot />
-    </panel>
-</template>
-
 <script setup lang="ts">
 import Panel from 'primevue/panel';
 
 const emit = defineEmits(['toggled', 'userClick']);
-const model = defineModel();
+
+const model = defineModel<boolean>();
 const props = defineProps({
     border: {
         type: Boolean,
@@ -42,12 +11,12 @@ const props = defineProps({
     },
     isProgrammaticUntilUserInput: {
         type: Boolean,
-        default: true
+        default: true,
     },
     visible: {
         type: Boolean,
-        default: false
-    }
+        default: false,
+    },
 });
 
 const userDeterminedState = ref(null);
@@ -79,3 +48,36 @@ const onClick = ({ value }) => {
     emit('userClick', !value);
 };
 </script>
+
+<template>
+    <panel
+        :collapsed="!expanded"
+        :pt="{
+            header: 'align-items-center d-flex justify-content-between position-relative py-100',
+            icons: 'h-100 position-absolute w-100',
+            root: border ? 'border-bottom border-top' : '',
+            toggler: {
+                // eslint-disable-next-line max-len
+                class: 'es-collapse-toggler align-items-center btn btn-link d-flex h-100 inline justify-content-end rounded-0 p-0 position-absolute text-body w-100',
+            },
+            // https://vuejs.org/guide/built-ins/transition
+            transition: {
+                enterActiveClass: 'es-collapse-enter-active',
+                enterFromClass: 'es-collapse-enter-from',
+                enterToClass: 'es-collapse-enter-to',
+                leaveActiveClass: 'es-collapse-leave-active',
+                leaveFromClass: 'es-collapse-leave-from',
+                leaveToClass: 'es-collapse-leave-to',
+            },
+        }"
+        toggleable
+        @toggle="onClick">
+        <template #header>
+            <slot name="title" />
+        </template>
+        <template #togglericon>
+            <icon-chevron-down />
+        </template>
+        <slot />
+    </panel>
+</template>

package/components/es-cta-banner.vue

@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+    dark: {
+        type: Boolean,
+        default: false,
+    },
+    hasButton: {
+        type: Boolean,
+        default: false,
+    },
+    // default or wide
+    variant: {
+        type: String,
+        default: 'default',
+    },
+});
+
+const lgFirst = computed(() => {
+    if (props.variant === 'wide') {
+        return props.hasButton ? '8' : '6';
+    }
+
+    return props.hasButton ? '7' : '4';
+});
+
+const lgSecond = computed(() => {
+    if (props.variant === 'wide') {
+        return props.hasButton ? '4' : '6';
+    }
+
+    return props.hasButton ? '5' : '8';
+});
+
+const xxlFirst = computed(() => {
+    if (props.variant === 'wide') {
+        return props.hasButton ? '8' : '6';
+    }
+
+    return props.hasButton ? '8' : '5';
+});
+
+const xxlSecond = computed(() => {
+    if (props.variant === 'wide') {
+        return props.hasButton ? '4' : '6';
+    }
+
+    return props.hasButton ? '4' : '7';
+});
+</script>
+
+<template>
+    <es-card
+        :class="[
+            {
+                'bg-dark-blue border-dark-blue text-white': dark,
+                'px-100 px-lg-200': variant === 'default',
+                'px-100 px-lg-300': variant === 'wide',
+            },
+        ]"
+        v-bind="$attrs">
+        <es-row>
+            <es-col
+                class="mb-200 my-lg-auto text-center text-lg-left"
+                :lg="lgFirst"
+                :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="{
+                        'font-size-300': variant === 'default',
+                        'mb-50': $slots.subtitle,
+                        'mb-0': !$slots.subtitle,
+                        'text-white': dark,
+                        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>
+            </es-col>
+            <es-col
+                class="d-flex justify-content-center justify-content-lg-end my-auto"
+                :lg="lgSecond"
+                :xxl="xxlSecond">
+                <slot name="cta" />
+            </es-col>
+        </es-row>
+    </es-card>
+</template>

package/components/es-cta-card.vue

@@ -0,0 +1,60 @@
+<script setup>
+const props = defineProps({
+    imageFirst: {
+        type: Boolean,
+        default: false,
+    },
+    horizontalPadding: {
+        type: String,
+        default: 'px-100',
+    },
+    verticalSpacing: {
+        type: String,
+        default: 'mb-150',
+    },
+});
+</script>
+
+<template>
+    <es-card
+        class="align-items-center d-flex flex-column py-200 text-center"
+        :class="props.horizontalPadding"
+        v-bind="$attrs">
+        <!-- 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 font-size-300"
+            :class="[{ 'order-1': props.imageFirst }, props.verticalSpacing]">
+            <slot name="heading"> Easily find what solar costs in your area </slot>
+        </div>
+        <div
+            v-if="$slots.image"
+            class="mx-auto w-100"
+            :class="props.verticalSpacing">
+            <slot name="image" />
+        </div>
+        <div
+            class="w-100"
+            :class="{ 'order-2': props.imageFirst }">
+            <div
+                v-if="$slots.subtitle"
+                class="es-cta-card-subtitle"
+                :class="props.verticalSpacing">
+                <slot name="subtitle" />
+            </div>
+            <slot name="cta" />
+        </div>
+    </es-card>
+</template>
+
+<style lang="scss" scoped>
+.es-cta-card {
+    &-subtitle {
+        :deep(p:last-child) {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>

package/components/es-data-table-simple.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const props = defineProps({
+    fields: {
+        type: Array,
+        default: null,
+    },
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    tableClass: {
+        type: [Array, String],
+        default: null,
+    },
+    striped: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const isSingleCol = computed(() => !props.fields);
+const computedItems = computed(() => {
+    if (!props.items.length && !useSlots().default) {
+        throw new Error('Neither items prop nor slot content is defined.');
+    }
+    // If there are no fields, just return the items as a single-column array
+    if (!props.fields) {
+        return props.items;
+    }
+    if (props.fields.length !== props.items.length) {
+        throw new Error('The number of fields and items must be the same.');
+    }
+    // If fields and items are both present, map them together
+    return props.fields.map((field, index) => [field, props.items[index]]);
+});
+</script>
+<template>
+    <div
+        :class="tableClass"
+        class="table-responsive">
+        <table
+            v-if="$slots.default || items.length"
+            class="table table-borderless"
+            :class="{ 'table-striped': striped }">
+            <template v-if="$slots.default">
+                <slot />
+            </template>
+            <tbody v-else>
+                <template v-if="isSingleCol">
+                    <tr
+                        v-for="(item, index) in computedItems"
+                        :key="`${index}${item}`">
+                        <td>
+                            {{ item }}
+                        </td>
+                    </tr>
+                </template>
+                <template v-else>
+                    <tr
+                        v-for="(item, index) in computedItems"
+                        :key="`${index}${item[0]}`">
+                        <td class="col-sm-7">
+                            {{ item[0] }}
+                        </td>
+                        <td class="col-sm-4">
+                            <b>{{ item[1] }}</b>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</template>

package/components/es-data-table.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const props = defineProps({
+    fields: {
+        type: Array,
+        default: null,
+    },
+    items: {
+        type: Array,
+        required: true,
+    },
+    stickyFirstCol: {
+        type: Boolean,
+        default: false,
+    },
+    stickyHeader: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+
+const checkFrozenRow = (index) => {
+    if (index === 0 && props.stickyFirstCol) {
+        return true;
+    }
+    return false;
+};
+
+// Code is taken from BootStrap Vue to implemnt <b-table> feature that automatically
+// samples the first row to extract field name and "humanize" by converting kebab-case,
+// snake_case, and camelCase to individual words and capitalizes each word.
+// Doc: https://bootstrap-vue.org/docs/components/table
+// Source Code: https://github.com/bootstrap-vue/bootstrap-vue/blob/5173dd19f6f46dc9d125cd7233fb59ccd2ef9296/src/utils/string.js#L30
+const startCase = (str: string) =>
+    str
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
+        .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
+
+const label = (col) => {
+    if (typeof col === 'string') {
+        return startCase(col);
+    }
+    return col?.label ? col.label : startCase(col?.key);
+};
+
+const columns = computed(() => {
+    if (props.fields) {
+        return props.fields;
+    }
+    return Object.keys(props.items[0]);
+});
+
+const scrollHeight = computed(() => {
+    if (props.stickyHeader) {
+        if (typeof props.stickyHeader === 'string') {
+            return props.stickyHeader;
+        }
+        return '300px';
+    }
+    return '';
+});
+</script>
+<template>
+    <data-table
+        scrollable
+        :pt="{
+            table: {
+                class: 'font-size-75 font-size-md-100',
+                style: 'border-collapse: separate; border-spacing: 0;',
+            },
+            wrapper: {
+                style: 'border-radius: inherit',
+            },
+            thead: {
+                style: 'top: 0px; z-index: 2',
+            },
+        }"
+        :value="props.items"
+        class="border table__data-table table-spacing table"
+        :scroll-height="scrollHeight">
+        <column
+            v-for="(col, index) of columns"
+            :key="col?.key ? col.key : col"
+            :field="col?.key ? col.key : col"
+            :header="label(col)"
+            :sortable="col?.sortable"
+            :frozen="checkFrozenRow(index)"
+            align-frozen="left"
+            :pt="{
+                sortIcon: {
+                    style: 'display: none',
+                },
+                headerCell: (options) => ({
+                    class: [
+                        {
+                            sortable: options.props.sortable,
+                            stickyFirstColHeader: options.props.frozen,
+                        },
+                    ],
+                }),
+                bodyCell: (options) => ({
+                    class: [
+                        {
+                            stickyFirstCol: options.props.frozen,
+                        },
+                    ],
+                }),
+            }">
+        </column>
+    </data-table>
+</template>
+<style scoped lang="scss">
+:deep(.stickyFirstColHeader) {
+    position: sticky !important;
+}
+:deep(.stickyFirstCol) {
+    position: sticky !important;
+    background: inherit;
+}
+:deep(.sortable) {
+    cursor: pointer !important;
+}
+</style>

package/components/es-error-page.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import IconContactUs from './icon/contact-us.vue';
+import IconCommunitySolar from './icon/community-solar.vue';
+import IconInfoBlogPost from './icon/info-blog-post.vue';
+import IconMarketplace from './icon/marketplace.vue';
+
+const ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com';
+const linkItems = [
+    {
+        icon: IconContactUs,
+        link: 'mailto:hello@energysage.com',
+        label: 'Contact us',
+    },
+    {
+        icon: IconCommunitySolar,
+        link: `${ES_DOMAIN}/solar/`,
+        label: 'Learn about solar',
+    },
+    {
+        icon: IconInfoBlogPost,
+        link: `${ES_DOMAIN}/blog/`,
+        label: 'EnergySage blog',
+    },
+    {
+        icon: IconMarketplace,
+        link: `${ES_DOMAIN}/shop/home-solar/`,
+        label: 'EnergySage marketplace',
+    },
+];
+
+const props = defineProps({
+    errorType: {
+        type: String,
+        required: true,
+    },
+});
+
+interface ErrorCode {
+    shortMessage?: string;
+    longMessage: string;
+}
+
+interface ErrorCodeMap {
+    [key: string]: ErrorCode;
+}
+
+const errorCodeToMessages: ErrorCodeMap = {
+    403: {
+        shortMessage: 'Access denied',
+        longMessage:
+            "Oops! If you're seeing this message, there's a good chance you have cookies or " +
+            'referrers turned off in your browser.',
+    },
+    404: {
+        shortMessage: 'Page not found',
+        longMessage: 'Oops! We are terribly sorry, but there is nothing bright to see here.',
+    },
+    500: {
+        shortMessage: 'Internal server error',
+        longMessage: 'Oops! We are terribly sorry, but our server is not so bright today. Please try again.',
+    },
+    503: {
+        shortMessage: 'Service unavailable',
+        longMessage: 'The page you are requesting is temporarily unavailable.',
+    },
+    default: {
+        longMessage: 'Oops! Something went wrong!',
+    },
+};
+
+const messages: ErrorCode = errorCodeToMessages[props.errorType];
+
+const errorShortMessage = messages?.shortMessage || props.errorType;
+
+const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.longMessage;
+</script>
+
+<template>
+    <div class="bg-gray-50">
+        <es-container class="py-500 py-lg-800">
+            <es-row>
+                <es-col
+                    md="7"
+                    class="my-500 mx-auto text-center">
+                    <h1 class="post1 text-gray-600">
+                        {{ errorShortMessage }}
+                    </h1>
+                    <p
+                        id="msgError"
+                        class="font-size-lg text-gray-600">
+                        {{ errorLongMessage }}
+                    </p>
+                </es-col>
+            </es-row>
+            <es-row>
+                <es-col
+                    v-for="(item, index) in linkItems"
+                    :key="index"
+                    cols="6"
+                    md="3">
+                    <a
+                        class="align-items-center d-flex flex-column justify-content-center text-center"
+                        :href="item.link">
+                        <div
+                            class="bg-white d-flex justify-content-center mb-50 rounded-circle"
+                            align-v="center">
+                            <div class="m-100 text-orange">
+                                <component
+                                    :is="item.icon"
+                                    height="53px"
+                                    width="53px" />
+                            </div>
+                        </div>
+                        <p class="mb-200 mb-md-0">{{ item.label }}</p>
+                    </a>
+                </es-col>
+            </es-row>
+        </es-container>
+    </div>
+</template>