@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-support-card.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+const props = defineProps({
+    constrained: {
+        type: Boolean,
+        default: false,
+    },
+    imageAltText: {
+        type: String,
+        default: '',
+    },
+    imageSrc: {
+        type: String,
+        default: '',
+    },
+    primaryCtaTarget: {
+        type: String,
+        default: '_blank',
+    },
+    primaryCtaText: {
+        type: String,
+        required: true,
+    },
+    primaryCtaUrl: {
+        type: String,
+        required: true,
+    },
+    secondaryCtaTarget: {
+        type: String,
+        default: '_blank',
+    },
+    secondaryCtaText: {
+        type: String,
+        default: '',
+    },
+    secondaryCtaUrl: {
+        type: String,
+        default: '',
+    },
+});
+
+const showSecondaryCta = computed(() => {
+    return !!props.secondaryCtaText && !!props.secondaryCtaUrl;
+});
+</script>
+
+<template>
+    <es-card
+        class="p-100 px-sm-200 text-center text-lg-left"
+        :class="{
+            'px-md-100 py-md-200': constrained,
+            'px-md-300': !constrained,
+        }">
+        <es-row class="align-items-lg-center justify-content-xl-between">
+            <es-col
+                class="EsSupportCard-contentColumn d-flex flex-column justify-content-lg-center position-relative"
+                :class="{ 'pr-lg-0': constrained }"
+                cols="12"
+                lg="8">
+                <!-- h2 is first in DOM order for semantics; using order utility classes to rearrange -->
+                <h2
+                    class="align-items-center d-flex font-size-300 justify-content-center justify-content-lg-start mb-150 mb-lg-100 order-1"
+                    :class="{
+                        'pl-lg-100': constrained,
+                        'pl-lg-200': !constrained,
+                    }">
+                    <slot name="headline" />
+                </h2>
+                <div class="EsSupportCard-imageContainer mb-150 mb-lg-0 order-0">
+                    <slot name="image">
+                        <nuxt-img
+                            v-if="imageAltText && imageSrc"
+                            :alt="imageAltText"
+                            class="bg-teal-200 rounded-circle"
+                            height="100px"
+                            :src="imageSrc"
+                            width="100px" />
+                    </slot>
+                </div>
+                <!--
+                    we are giving 'EsSupportCard-description' a unique class (that we don't use directly in this
+                    component) for consuming applications to use in targeting ::v-deep styles on <p> tags to remove
+                    the natural <p> bottom margin, for example.
+
+                    e.g. a CMS rich text component may generate a <p> tag within this that automatically
+                    gets a bottom margin, which throws off the vertical centering. we are intentionally leaving
+                    the removal of that bottom margin up to consuming applications rather than removing it on all
+                    <p> tags within this element, in case they may want two <p> tags or any other markup in here.
+                -->
+                <div
+                    class="EsSupportCard-description font-size-75 font-size-lg-100 mb-150 mb-lg-0 order-2"
+                    :class="{
+                        'pl-lg-100': constrained,
+                        'pl-lg-200': !constrained,
+                    }">
+                    <slot name="description" />
+                </div>
+            </es-col>
+            <es-col
+                cols="12"
+                lg="4"
+                xxl="3">
+                <es-button
+                    class="w-100"
+                    :class="{ 'mb-100': showSecondaryCta }"
+                    :href="primaryCtaUrl"
+                    :target="primaryCtaTarget"
+                    variant="primary">
+                    {{ primaryCtaText }}
+                </es-button>
+                <es-button
+                    v-if="showSecondaryCta"
+                    class="w-100"
+                    :href="secondaryCtaUrl"
+                    outline
+                    :target="secondaryCtaTarget"
+                    variant="primary">
+                    {{ secondaryCtaText }}
+                </es-button>
+            </es-col>
+        </es-row>
+    </es-card>
+</template>
+
+<style lang="scss">
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+@include breakpoints.media-breakpoint-up(lg) {
+    .EsSupportCard {
+        &-contentColumn {
+            /* account for the size of the image */
+            min-height: 100px;
+            /* 15px standard column padding + 100px image width */
+            padding-left: 115px;
+        }
+
+        &-description {
+            /* limit line length on larger breakpoints */
+            max-width: 450px;
+        }
+
+        &-imageContainer {
+            /* account for 15px standard column padding */
+            left: 15px;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}
+</style>

package/components/es-support.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineProps({
+    link: {
+        type: String,
+        required: true,
+    },
+    src: {
+        type: String,
+        required: true,
+    },
+});
+
+const slots = useSlots();
+const hasTitle = computed(() => !!slots.title);
+const hasLinkCopy = computed(() => !!slots.linkCopy);
+</script>
+
+<template>
+    <div class="d-flex support-holder align-items-center">
+        <div class="mr-50">
+            <a
+                target="_blank"
+                aria-label="Support"
+                :href="link">
+                <img
+                    class="image"
+                    :src="src"
+                    alt="EnergySage support" />
+            </a>
+        </div>
+        <div class="d-flex flex-column">
+            <div>
+                <div class="h5 mb-25 font-size-base font-weight-bold">
+                    <slot
+                        v-if="hasTitle"
+                        name="title" />
+                    <template v-else> Need help signing up? </template>
+                </div>
+            </div>
+            <div>
+                <a
+                    target="_blank"
+                    class="font-size-75"
+                    :href="link">
+                    <slot
+                        v-if="hasLinkCopy"
+                        name="linkCopy" />
+                    <template v-else> Schedule a free call with your EnergySage Advisor. </template>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.support-holder {
+    max-width: 325px;
+
+    .image {
+        height: 64px;
+        width: 64px;
+        border-radius: 2rem;
+        object-fit: contain;
+    }
+}
+</style>

package/components/es-tab.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+    <!--
+    While this file needs to exist to keep Nuxt happy, it doesn't actually do anything.
+    Instances of es-tab are placed inside es-tabs, and es-tabs handles their display.
+    -->
+</template>

package/components/es-tabs.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel';
+import TabView from 'primevue/tabview';
+
+// 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 panels = useSlots().default?.() || [];
+
+// keep track of the active tab index
+//  - from above, if v-model is used
+//  - from below, if the tab component receives a click
+const activeIndex: Ref<number> = ref(model.value || 0);
+
+// watch the v-model for changes and update the active index if it does change
+watch(model, (newVal) => {
+    // @ts-expect-error I don't know why
+    activeIndex.value = newVal;
+});
+
+// called from the TabView when the user clicks a tab to make it active
+const updateActiveIndex = (index: number) => {
+    model.value = index;
+};
+</script>
+
+<template>
+    <tab-view
+        :active-index="activeIndex"
+        :pt="{
+            root: 'tabs es-tabs',
+            nav: 'list-unstyled nav position-relative',
+            tab: 'nav-link',
+            inkbar: 'inkbar position-absolute',
+            panelContainer: 'tab-content',
+        }"
+        @update:active-index="updateActiveIndex">
+        <!-- @vue-expect-error -->
+        <tab-panel
+            v-for="(panel, index) in panels"
+            :key="index"
+            :header="panel.props.title"
+            :pt="{
+                header: 'nav-item',
+                headerAction: ({ context }) => ({
+                    class: [
+                        'nav-link',
+                        {
+                            'active active-tab font-weight-bolder': context.active,
+                        },
+                    ],
+                }),
+                content: ({ context }) => ({
+                    class: [
+                        'tab-pane mt-100',
+                        {
+                            active: context.active,
+                        },
+                    ],
+                }),
+            }">
+            <!-- @vue-expect-error -->
+            <component
+                :is="item"
+                v-for="(item, idx) in panel.children.default()"
+                :key="idx" />
+        </tab-panel>
+    </tab-view>
+</template>

package/components/es-verification-code.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import InputOtp from 'primevue/inputotp';
+
+const model = defineModel<Array<string>>();
+const verificationCode = ref<string>();
+
+const props = defineProps({
+    charCount: {
+        type: Number,
+        default: 5,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const count = ref(props.charCount);
+watch(model, (newVal) => {
+    verificationCode.value = newVal ? newVal.join('') : '';
+});
+
+// Note: @update:model-value is erroneously requiring a boolean function argument,
+// workaround for error is to specify any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const updateCode = (newValue: any) => {
+    model.value = newValue.split('');
+};
+</script>
+
+<template>
+    <div>
+        <input-otp
+            v-model="verificationCode"
+            class="custom-otp"
+            v-bind="$attrs"
+            :length="count"
+            integer-only
+            @update:model-value="updateCode">
+            <template #default="{ attrs, events, index }">
+                <input
+                    :id="index.toString()"
+                    type="text"
+                    class="custom-otp-input form-control"
+                    :disabled="props.disabled"
+                    v-bind="attrs"
+                    v-on="events" />
+            </template>
+        </input-otp>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+.custom-otp {
+    display: flex;
+    gap: 10px;
+}
+.custom-otp-input {
+    font-weight: 600 !important;
+    font-size: 1.875rem !important;
+    line-height: 2.25rem !important;
+    text-align: center;
+    height: 5rem;
+    width: 5rem;
+    appearance: textfield;
+    border: variables.$verification-code-border;
+    border-radius: variables.$verification-code-border-radius !important;
+    box-shadow: variables.$verification-code-shadow;
+    height: variables.$verification-code-dimension-lg;
+    width: variables.$verification-code-dimension-lg;
+    flex: 0 0 auto;
+
+    &:focus {
+        border-color: variables.$verification-code-focus-border-color;
+    }
+
+    @include breakpoints.media-breakpoint-down(md) {
+        height: variables.$verification-code-dimension-xs;
+        width: variables.$verification-code-dimension-xs;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        appearance: none;
+    }
+
+    &:last-child {
+        margin-right: 0 !important;
+    }
+}
+</style>

package/components/es-video.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// Props
+interface IProps {
+    altText: string;
+    coverImageUrl?: string;
+    embedUrl: string;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    coverImageUrl: '',
+});
+const showVideo = ref(false);
+
+// Methods
+function getVideoIdFromUrl(url: string) {
+    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[A-Za-z0-9-]+)/;
+    const parsedUrl = embedPattern.exec(url);
+    if (parsedUrl) {
+        return parsedUrl?.groups?.videoId;
+    }
+    return '';
+}
+
+// Computed
+const videoId = computed(() => getVideoIdFromUrl(props.embedUrl));
+const embedUrlWithParams = computed(
+    () => `https://www.youtube.com/embed/${videoId.value}?rel=0&autoplay=1&cc_load_policy=1&cc_lang_pref=en`,
+);
+</script>
+
+<template>
+    <div>
+        <div
+            v-if="showVideo"
+            class="embed-responsive embed-responsive-16by9">
+            <iframe
+                :id="`youtube-video-${videoId}`"
+                :src="embedUrlWithParams"
+                class="embed-responsive-item"
+                frameborder="0"></iframe>
+        </div>
+        <es-card
+            v-else
+            :id="`youtube-placeholder-${videoId}`"
+            class="EsVideo-button bg-transparent overflow-hidden p-0 position-relative w-100"
+            variant="interactive"
+            @click="showVideo = true">
+            <slot v-if="$slots.default" />
+            <nuxt-img
+                v-else
+                class="EsVideo-image d-block w-100"
+                sizes="md:530px sm:275px"
+                :src="props.coverImageUrl"
+                :alt="props.altText" />
+            <icon-video-play
+                class="EsVideo-icon position-absolute abs-center"
+                width="74px"
+                height="54px" />
+        </es-card>
+    </div>
+</template>

package/components/es-view-more.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// @ts-expect-error module has no types
+import truncate from 'html-truncate';
+
+const props = defineProps({
+    /**
+     * Full text content
+     */
+    content: {
+        type: String,
+        required: true,
+    },
+    /**
+     * Maximum character length of text before it is truncated
+     */
+    length: {
+        type: Number,
+        required: true,
+    },
+    /**
+     * Text for button to show more text
+     */
+    clamp: {
+        type: String,
+        required: false,
+        default: 'Show more',
+    },
+    /**
+     * Text for button to hide text
+     */
+    less: {
+        type: String,
+        required: false,
+        default: 'Show less',
+    },
+});
+
+const isClamped = ref(true);
+
+const truncatedContent = computed(() => truncate(props.content, props.length));
+const isTruncated = computed(() => truncatedContent.value !== props.content);
+const buttonText = computed(() => (isClamped.value ? props.clamp : props.less));
+const bodyContent = computed(() => {
+    if (isClamped.value) {
+        return truncatedContent.value;
+    }
+    return props.content;
+});
+</script>
+
+<template>
+    <div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="bodyContent" />
+        <es-button
+            v-if="isTruncated"
+            inline
+            variant="link"
+            class="ml-50 p-0"
+            @click="isClamped = !isClamped">
+            {{ buttonText }}
+        </es-button>
+    </div>
+</template>