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

package/components/es-tabs.vue

@@ -0,0 +1,67 @@
+<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(0);
+
+// watch the v-model for changes and update the active index if it does change
+watch(model, (newVal) => {
+    activeIndex.value = newVal;
+});
+
+// called from the TabView when the user clicks a tab to make it active
+const updateActiveIndex = (index) => {
+    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">
+        <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,
+                        },
+                    ],
+                }),
+            }">
+            <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-view-more.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+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>

package/components/es-zip-code-form.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+const props = defineProps({
+    constrained: {
+        type: Boolean,
+        default: false,
+    },
+    dark: {
+        type: Boolean,
+        default: false,
+    },
+    fieldName: {
+        type: String,
+        default: 'zip_code',
+    },
+    inputId: {
+        type: String,
+        required: true,
+    },
+    newTab: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: 'ZIP code',
+    },
+    showPrivacySection: {
+        type: Boolean,
+        default: true,
+    },
+    privacyPolicyLink: {
+        type: String,
+        default: '',
+    },
+    privacyPolicyNewTab: {
+        type: Boolean,
+        default: false,
+    },
+    stackUntil: {
+        type: String,
+        default: '',
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    zipCodeValue: {
+        type: String,
+        default: '',
+    },
+    selectedProduct: {
+        type: String,
+        default: '',
+    },
+});
+
+const state = reactive({
+    zipCode: props.zipCodeValue,
+});
+
+watch(
+    () => props.zipCodeValue,
+    (newVal) => {
+        state.zipCode = newVal;
+    },
+);
+
+const stackBreak = computed(() => {
+    let { stackUntil } = props;
+    if (stackUntil === 'xs') {
+        stackUntil = '';
+    }
+    return stackUntil ? `${stackUntil}-` : '';
+});
+
+/* Set up validation using Vuelidate */
+const rules = {
+    zipCode: {
+        [vuelidateKeys.MAX_LENGTH]: vuelidateMaxLength(5),
+        [vuelidateKeys.MIN_LENGTH]: vuelidateMinLength(5),
+        [vuelidateKeys.INTEGER]: vuelidateInteger,
+        [vuelidateKeys.REQUIRED]: vuelidateRequired,
+    },
+};
+
+const { v$, validateState } = useEsForms(rules, state);
+
+const ctaForm = ref<HTMLFormElement>('ctaForm');
+
+const handleSubmit = () => {
+    if (v$.value.$invalid) {
+        v$.value.$touch();
+    } else {
+        ctaForm.value.submit();
+    }
+};
+</script>
+
+<template>
+    <div
+        class="EsZipCodeForm d-flex"
+        :class="{
+            'EsZipCodeForm--constrained': constrained,
+            'text-white': dark,
+        }"
+        v-bind="$attrs">
+        <div class="d-flex flex-column">
+            <form
+                ref="ctaForm"
+                class="justify-content-center w-100"
+                :class="{
+                    [`d-${stackBreak}flex`]: stackUntil,
+                    'mb-100': showPrivacySection,
+                }"
+                :action="url"
+                method="get"
+                novalidate
+                :target="newTab ? '_blank' : '_self'"
+                @submit.prevent.stop="handleSubmit">
+                <es-form-input
+                    :id="inputId"
+                    v-model="state.zipCode"
+                    :state="validateState('zipCode')"
+                    autocomplete="postal-code"
+                    class="mb-100"
+                    :class="{
+                        [`mb-${stackBreak}0 mr-${stackBreak}50`]: stackUntil,
+                    }"
+                    inputmode="numeric"
+                    label-sr-only
+                    maxlength="5"
+                    :name="fieldName"
+                    pattern="\d*"
+                    :placeholder="placeholder"
+                    required>
+                    <template #prefixIcon>
+                        <icon-location class="text-gray-800" />
+                    </template>
+                    <template #label>
+                        {{ placeholder }}
+                    </template>
+                    <template #errorMessage>
+                        <span :class="{ 'text-white': dark }">
+                            <slot name="errorMessage"> Please enter a 5-digit zip code. </slot>
+                        </span>
+                    </template>
+                </es-form-input>
+                <input
+                    v-if="selectedProduct"
+                    type="hidden"
+                    name="product"
+                    :value="selectedProduct" />
+                <es-button
+                    class="text-nowrap w-100"
+                    :class="{
+                        [`ml-${stackBreak}50 w-${stackBreak}auto`]: stackUntil,
+                        'px-100': constrained,
+                    }"
+                    type="submit"
+                    :variant="dark ? 'dark-bg' : 'primary'">
+                    <slot name="buttonText"> Submit </slot>
+                </es-button>
+            </form>
+            <div
+                v-if="showPrivacySection"
+                class="d-flex text-left"
+                :class="{ 'font-size-75': constrained }">
+                <icon-lock-on
+                    aria-hidden="true"
+                    class="privacy-lock-icon flex-shrink-0 mr-50 position-relative"
+                    :class="{ 'mt-25': !constrained }"
+                    height="1.125rem"
+                    width="1.125rem" />
+                <div>
+                    <span>
+                        <slot name="privacyExplanation"> Your information is safe with us. </slot>
+                    </span>
+                    <nuxt-link
+                        v-if="privacyPolicyLink"
+                        :href="privacyPolicyLink"
+                        class="text-nowrap"
+                        :class="dark ? 'text-white' : ''"
+                        :target="privacyPolicyNewTab ? '_blank' : '_self'">
+                        <slot name="privacyPolicyLinkText"> Privacy Policy </slot>
+                    </nuxt-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.EsZipCodeForm {
+    .privacy-lock-icon {
+        top: -0.02em;
+    }
+
+    &--constrained {
+        .privacy-lock-icon {
+            top: 0.02em;
+        }
+    }
+}
+</style>

package/components/icon/arrow-clockwise.vue

@@ -0,0 +1,51 @@
+<script>
+export default {
+    name: 'IconArrowClockwise',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        orientation: {
+            type: String,
+            default: 'clockwise',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :class="{
+            'counter-clockwise': orientation === 'counter-clockwise',
+        }"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <!-- eslint-disable-next-line max-len -->
+        <path
+            d="M3.246 7.123c.997-1.81 2.591-3.418 4.485-4.222 1.894-.905 4.087-1.106 6.08-.704 2.193.403 3.788 1.408 5.183 3.016.2.201.4.503.598.704l.4-2.513c.099-.603.597-.905 1.195-.905.499.1.897.704.798 1.206l-.897 5.127c0 .301-.2.502-.4.603-.198.1-.398.201-.597.201h-.2l-4.983-.905a1.042 1.042 0 0 1-.798-1.206c.1-.503.598-.905 1.197-.804l2.79.603c-.1-.302-.299-.503-.598-.804-1.096-1.307-2.492-2.111-4.086-2.413-1.595-.402-3.39-.2-4.884.503A7.896 7.896 0 0 0 4.94 8.028c-.797 1.507-1.096 3.216-.897 4.925.2 1.709.897 3.317 2.093 4.524 1.097 1.206 2.692 2.11 4.286 2.311 1.595.302 3.39 0 4.785-.703a8.444 8.444 0 0 0 3.488-3.518c.2-.503.798-.704 1.296-.503.498.201.698.804.498 1.307-.797 2.11-2.292 3.619-4.186 4.624-1.395.703-2.89 1.005-4.485 1.005-.598 0-1.096 0-1.695-.1-2.093-.403-3.987-1.408-5.382-2.916a10.256 10.256 0 0 1-2.691-5.629c-.2-2.211.2-4.322 1.196-6.232Z" />
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+.counter-clockwise {
+    transform: scale(-1, 1);
+}
+</style>

package/components/icon/arrow-counter-clockwise.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+    name: 'ArrowCounterClockwiseIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <!-- eslint-disable-next-line max-len -->
+        <path
+            d="M20.754 7.123c-.997-1.81-2.591-3.418-4.485-4.222-1.894-.905-4.087-1.106-6.08-.704C7.996 2.6 6.4 3.605 5.006 5.213c-.2.201-.4.503-.598.704l-.4-2.513c-.099-.603-.597-.905-1.195-.905-.499.1-.897.704-.798 1.206l.897 5.127c0 .301.2.502.4.603.198.1.398.201.597.201h.2l4.983-.905c.499-.1.897-.603.798-1.206a1.034 1.034 0 0 0-1.196-.804l-2.791.603c.1-.302.299-.503.598-.804 1.096-1.307 2.492-2.111 4.086-2.413 1.595-.402 3.39-.2 4.884.503a7.896 7.896 0 0 1 3.589 3.418c.797 1.507 1.096 3.216.897 4.925-.2 1.709-.897 3.317-2.094 4.524-1.096 1.206-2.69 2.11-4.285 2.311-1.595.302-3.39 0-4.785-.703a8.444 8.444 0 0 1-3.488-3.518c-.2-.503-.798-.704-1.296-.503-.499.201-.698.804-.499 1.307.798 2.11 2.293 3.619 4.187 4.624 1.395.703 2.89 1.005 4.485 1.005.598 0 1.096 0 1.695-.1 2.093-.403 3.986-1.408 5.382-2.916a10.257 10.257 0 0 0 2.691-5.629c.2-2.211-.2-4.322-1.196-6.232Z" />
+    </svg>
+</template>

package/components/icon/arrow-cycle.vue

@@ -0,0 +1,43 @@
+<!-- eslint-disable max-len -->
+<script>
+export default {
+    name: 'IconArrowCycle',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.806 3C6.929 3 3 6.565 3 12a1 1 0 1 1-2 0C1 5.435 5.85 1 11.806 1c4.759 0 8.742 2.543 10.141 6.68a1 1 0 0 1-1.894.64C18.973 5.127 15.853 3 11.806 3ZM22 11a1 1 0 0 1 1 1c0 6.565-4.85 11-10.806 11-4.758 0-8.742-2.543-10.141-6.68a1 1 0 0 1 1.894-.64c1.08 3.193 4.2 5.32 8.247 5.32C17.071 21 21 17.435 21 12a1 1 0 0 1 1-1Z" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M22.242 3.03a1 1 0 0 1 .728 1.213l-1 4a1 1 0 0 1-1.212.727l-4-1a1 1 0 1 1 .485-1.94l3.03.757.757-3.03a1 1 0 0 1 1.212-.727ZM2.03 15.758a1 1 0 0 1 1.213-.728l4 1a1 1 0 1 1-.486 1.94l-3.03-.757-.757 3.03a1 1 0 1 1-1.94-.485l1-4Z" />
+    </svg>
+</template>

package/components/icon/arrow-left.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script>
+export default {
+    name: 'ArrowLeftIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.707 4.293a1 1 0 0 1 0 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" />
+    </svg>
+</template>

package/components/icon/arrow-right.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script>
+export default {
+    name: 'ArrowRightIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-5.293-5.293a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>

package/components/icon/arrow-up.vue

@@ -0,0 +1,39 @@
+<!-- eslint-disable max-len -->
+<script>
+export default {
+    name: 'ArrowUpIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.293 3.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L13 6.414V20a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l7-7Z" />
+    </svg>
+</template>