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

package/components/es-footer.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+import IconFacebook from './icon/facebook.vue';
+import IconInstagram from './icon/instagram.vue';
+import IconLinkedin from './icon/linkedin.vue';
+import IconTwitter from './icon/twitter.vue';
+import IconYoutube from './icon/youtube.vue';
+
+export default {
+    name: 'EsFooter',
+    components: {
+        IconFacebook,
+        IconInstagram,
+        IconLinkedin,
+        IconTwitter,
+        IconYoutube,
+    },
+    props: {
+        content: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        copyrightText() {
+            return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="es-footer clearfix">
+        <!-- Make an impact -->
+        <div class="bg-blue-900 text-white py-200 py-lg-300 px-200">
+            <div class="container px-0">
+                <div class="row">
+                    <div
+                        class="col col-12 col-md-5 col-lg-4 font-size-200 font-size-md-400 font-weight-bold mb-150 mb-md-0">
+                        {{ content.banner.headline }}
+                        <br />
+                        {{ content.banner.subHeadline }}
+                    </div>
+                    <div class="col col-12 col-md-7 col-lg-8">
+                        {{ content.banner.body }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Make an impact -->
+        <div class="bg-blue-800 py-200 pt-lg-200 pb-lg-150 px-200">
+            <div class="container px-0">
+                <div class="row">
+                    <!-- Link columns -->
+                    <div class="col col-12 col-lg-8 order-lg-1 text-white">
+                        <div class="row">
+                            <div
+                                v-for="column in content.columns"
+                                :key="column.title"
+                                class="col col-6 col-md-3 mb-100 mb-lg-0">
+                                <ul class="list-unstyled mb-lg-0">
+                                    <li class="font-weight-bold font-size-75 font-size-md-100 mb-100 mb-lg-50">
+                                        {{ column.title }}
+                                    </li>
+                                    <li
+                                        v-for="link in column.links"
+                                        :key="link.text"
+                                        class="mt-0 mt-lg-25 mb-100 mb-lg-50 font-size-75">
+                                        <es-nav-bar-link
+                                            :href="link.url"
+                                            :target="link.newTab ? '_blank' : null"
+                                            class="text-reset">
+                                            {{ link.text }}
+                                        </es-nav-bar-link>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Link columns -->
+                    <!-- Logo and Social-->
+                    <div class="col col-12 col-lg-4 order-lg-0">
+                        <es-nav-bar-link
+                            class="d-block mb-150 d-flex justify-content-center justify-content-lg-start"
+                            :href="content.home.link">
+                            <span class="sr-only">
+                                {{ content.home.name }}
+                            </span>
+                            <div class="es-footer-logo">
+                                <slot name="logo" />
+                            </div>
+                        </es-nav-bar-link>
+                        <!-- Social icons -->
+                        <div class="d-flex text-white justify-content-center justify-content-lg-start">
+                            <es-nav-bar-link
+                                v-for="(iconLink, index) in content.socialLinks"
+                                :key="iconLink.text"
+                                class="text-reset"
+                                :class="{ 'mr-150': index < content.socialLinks.length - 1 }"
+                                :href="iconLink.url"
+                                target="_blank">
+                                <span class="sr-only">{{ iconLink.text }}</span>
+                                <component :is="iconLink.icon" />
+                            </es-nav-bar-link>
+                        </div>
+                        <!-- Social icons -->
+                    </div>
+                    <!-- Logo and Social -->
+                </div>
+            </div>
+        </div>
+        <div class="bg-blue-700 text-blue-50 px-200 py-100">
+            <div class="container px-0">
+                <!-- Trademark Info -->
+                <p class="font-size-75">
+                    {{ content.trademarkText }}
+                </p>
+                <p class="mb-200 font-size-75">
+                    {{ copyrightText }}
+                </p>
+                <!-- Trademark Info -->
+                <!-- Legal -->
+                <hr class="border-top border-blue-500 m-0" />
+                <div class="row justify-content-center pt-100">
+                    <div
+                        v-for="link in content.legalLinks"
+                        :key="link.text"
+                        class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
+                        <es-nav-bar-link
+                            :href="link.url"
+                            class="text-reset font-weight-normal">
+                            {{ link.text }}
+                        </es-nav-bar-link>
+                    </div>
+                </div>
+                <!-- Legal -->
+            </div>
+        </div>
+        <div class="bg-blue-50 px-200 py-100">
+            <div class="container px-0">
+                <!-- DOE -->
+                <div class="d-lg-flex align-items-end">
+                    <!-- eslint-disable-next-line -->
+                    <img
+                        :src="content.departmentOfEnergy.logoUrl"
+                        alt="department of energy logo"
+                        aria-hidden="true"
+                        class="mr-100 mb-100 mb-lg-0"
+                        width="99"
+                        height="24" />
+                    <p class="mb-0 font-size-75 font-weight-normal font-weight-lg-semibold">
+                        <es-nav-bar-link
+                            :href="content.departmentOfEnergy.learnMore.link"
+                            target="_blank"
+                            class="text-blue-900">
+                            {{ content.departmentOfEnergy.learnMore.text }}
+                        </es-nav-bar-link>
+                    </p>
+                </div>
+                <!-- DOE -->
+            </div>
+        </div>
+    </div>
+</template>

package/components/es-form-checkbox.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const model = defineModel<boolean>({
+    default: false,
+});
+defineOptions({
+    inheritAttrs: false,
+});
+defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    indeterminate: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<template>
+    <div class="custom-control custom-checkbox">
+        <input
+            v-bind="$attrs"
+            :id="id"
+            v-model="model"
+            type="checkbox"
+            class="custom-control-input"
+            :indeterminate="indeterminate"
+            :disabled="disabled" />
+        <label
+            :for="id"
+            class="custom-control-label">
+            <slot />
+        </label>
+    </div>
+</template>

package/components/es-form-input.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import InputMask from 'primevue/inputmask';
+// Prevents attributes from being applied to first <div>
+// v-bind="$attr" is on the input instead
+defineOptions({
+    inheritAttrs: false,
+});
+
+defineProps({
+    /**
+     * Required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Type
+     */
+    type: {
+        type: String,
+        default: 'text',
+        validator: (val: string) => ['text', 'email', 'number', 'password', 'tel', 'maskedTel'].includes(val),
+    },
+    /**
+     * ID
+     * required
+     */
+    id: {
+        type: String,
+        required: true,
+    },
+    /**
+     * state
+     */
+    state: {
+        type: [Boolean, null],
+        default: null,
+    },
+    labelSrOnly: {
+        type: Boolean,
+        default: false,
+    },
+    phoneMaskValue: {
+        type: String,
+        default: '(999) 999-9999',
+        required: false,
+    },
+});
+
+const slots = useSlots();
+
+const hasSuccess = () => !!slots.successMessage;
+const hasMessage = () => !!slots.message;
+const hasError = () => !!slots.errorMessage;
+const hasExtraContext = () => !!slots.extraContext;
+</script>
+
+<template>
+    <div
+        class="input-wrapper justify-content-end"
+        :class="$attrs.class"
+        :required="required">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="id"
+            class="label justify-content-start"
+            :class="{ 'sr-only': labelSrOnly }">
+            <slot name="label" />
+            <span
+                v-if="required"
+                class="text-danger">
+                *
+            </span>
+        </label>
+        <p
+            v-if="hasExtraContext()"
+            class="mb-25 font-size-75">
+            <slot name="extraContext" />
+        </p>
+        <div class="input-holder position-relative">
+            <!-- prefix icons are decorative only so are aria-hidden -->
+            <span
+                v-if="$slots.prefixIcon"
+                aria-hidden="true"
+                class="prefix-icon position-absolute">
+                <slot name="prefixIcon" />
+            </span>
+            <component
+                :is="type === 'maskedTel' ? InputMask : InputText"
+                :id="id"
+                v-bind="{ ...$attrs, class: undefined }"
+                :type="type"
+                class="es-form-input form-control w-100"
+                :class="{
+                    'has-prefix-icon': $slots.prefixIcon,
+                    'is-invalid': state === false,
+                }"
+                :mask="phoneMaskValue"
+                :disabled="disabled"
+                :invalid="state === false" />
+            <small
+                v-if="hasMessage() && ((!hasSuccess() && state) || state == null)"
+                class="text-muted">
+                <slot name="message" />
+            </small>
+            <small
+                v-if="state === false && (hasError() || required)"
+                class="text-danger">
+                <slot
+                    v-if="hasError()"
+                    name="errorMessage" />
+                <template v-else-if="required"> This field is required. </template>
+            </small>
+            <small
+                v-if="state && hasSuccess()"
+                class="text-success">
+                <slot name="successMessage" />
+            </small>
+        </div>
+    </div>
+</template>

package/components/es-form-msg.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    timeout: {
+        type: Number,
+        default: 20,
+        required: false,
+    },
+    variant: {
+        type: String,
+        default: 'danger',
+        required: false,
+        validator: (val: string) => ['danger', 'success', 'primary'].includes(val),
+    },
+});
+
+const emit = defineEmits(['hidden']);
+
+const hide = () => {
+    emit('hidden');
+};
+
+watch(
+    () => props.show,
+    (newValue, oldValue) => {
+        if (newValue && !oldValue) {
+            setTimeout(() => {
+                hide();
+            }, props.timeout * 1000);
+        }
+    },
+);
+</script>
+
+<template>
+    <transition>
+        <div
+            v-if="show"
+            role="alert"
+            aria-live="polite"
+            aria-atomic="true"
+            class="alert es-form-msg my-100 alert-dismissible"
+            :class="`alert-${variant}`">
+            <div class="d-flex pr-100">
+                <div class="icon-wrapper flex-shrink-0 mr-100">
+                    <icon-circle-alert v-if="variant === 'danger'" />
+                    <icon-circle-check v-if="variant === 'success'" />
+                    <icon-info v-if="variant === 'primary'" />
+                </div>
+                <slot />
+            </div>
+            <button
+                type="button"
+                aria-label="Close"
+                class="close"
+                @click="hide">
+                <icon-x />
+            </button>
+        </div>
+    </transition>
+</template>
+
+<style lang="scss" scoped>
+.form-msg {
+    flex: 0 0 100%;
+    padding-right: 2.5rem;
+}
+
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.15s;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>

package/components/es-form-radio-card.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useFocus } from '@vueuse/core';
+
+const inputElem = useTemplateRef('input-elem');
+const { focused: inputFocused } = useFocus(inputElem);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface IProps {
+    id: string;
+    name: string;
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+    displayName?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    inline: false,
+    displayName: '',
+});
+
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits(['update:modelValue']);
+
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
+</script>
+
+<template>
+    <label
+        class="es-form-radio-card es-card interactive w-100 btn btn-outline-primary"
+        :class="{ active: isChecked, disabled: props.disabled, focus: isChecked || inputFocused }"
+        @click="handleRadioButtonClick">
+        <input
+            :id="id"
+            ref="input-elem"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            name="props.name"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick" />
+        <slot>
+            {{ displayName }}
+        </slot>
+    </label>
+</template>

package/components/es-form-radio-cards.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Option {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+}
+
+interface Props {
+    id: string;
+    label: string;
+    name?: string;
+    options?: Option[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+    hasIcon?: boolean;
+    labelClass?: string;
+    labelSrOnly?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    options: undefined,
+    inline: false,
+    modelValue: undefined,
+    hasIcon: false,
+    labelClass: 'font-size-h3',
+    labelSrOnly: false,
+});
+
+const emit = defineEmits(['update:model-value']);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleUpdate(value: any) {
+    emit('update:model-value', value);
+}
+</script>
+
+<template>
+    <fieldset
+        :id="`${props.id}-fieldset`"
+        class="form-group">
+        <legend
+            :id="`${props.id}-legend`"
+            class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
+            :class="{ 'sr-only': props.labelSrOnly }"
+            tabindex="-1">
+            {{ props.label }}
+        </legend>
+        <div>
+            <div
+                :id="`${props.id}-radiogroup`"
+                role="radiogroup"
+                tabindex="-1"
+                class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
+                :class="{ 'has-icon': props.hasIcon }">
+                <slot :options="options">
+                    <es-form-radio-card
+                        v-for="option in options"
+                        :id="option.id"
+                        :key="option.value"
+                        :disabled="option?.disabled || false"
+                        :name="props.name"
+                        :value="option.value"
+                        :model-value="props.modelValue"
+                        :inline="props.inline || false"
+                        @update:model-value="handleUpdate">
+                        <span :class="props.labelClass">
+                            {{ option.text }}
+                        </span>
+                    </es-form-radio-card>
+                </slot>
+            </div>
+        </div>
+    </fieldset>
+</template>

package/components/es-form-textarea.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Prevents attributes from being applied to first <div>
+// v-bind="$attr" is on the input instead
+defineOptions({
+    inheritAttrs: false,
+});
+
+defineProps({
+    /**
+     * Required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * ID
+     * required
+     */
+    id: {
+        type: String,
+        required: true,
+    },
+    /**
+     * state
+     */
+    state: {
+        type: [Boolean, null],
+        default: null,
+    },
+});
+const model = defineModel<string>();
+
+const slots = useSlots();
+
+const hasSuccess = () => !!slots.successMessage;
+const hasMessage = () => !!slots.message;
+const hasError = () => !!slots.errorMessage;
+</script>
+
+<template>
+    <div
+        class="input-wrapper justify-content-end"
+        :required="required">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="id"
+            class="label justify-content-start">
+            <slot name="label" />
+
+            <span
+                v-if="required"
+                class="text-danger">
+                *
+            </span>
+        </label>
+
+        <div class="input-holder">
+            <textarea
+                :id="id"
+                v-model="model"
+                v-bind="$attrs"
+                class="es-form-textarea w-100 form-control"
+                :class="{ 'is-invalid': state === false }"
+                :disabled="disabled"
+                :invalid="state === false" />
+            <small
+                v-if="hasMessage() && ((!hasSuccess() && state) || state == null)"
+                class="text-muted">
+                <slot name="message" />
+            </small>
+            <small
+                v-if="state === false && (hasError() || required)"
+                class="text-danger">
+                <slot
+                    v-if="hasError()"
+                    name="errorMessage" />
+                <template v-else-if="required"> This field is required. </template>
+            </small>
+            <small
+                v-if="state && hasSuccess()"
+                class="text-success">
+                <slot name="successMessage" />
+            </small>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-form-textarea {
+    min-height: 8.125rem;
+}
+
+.es-form-textarea:disabled,
+.es-form-textarea[readonly] {
+    border: 0;
+}
+
+.is-invalid {
+    color: variables.$danger;
+}
+
+.form-inline .input-wrapper {
+    display: flex;
+    flex: 0 0 100%;
+
+    label {
+        flex: 0 0 30%;
+    }
+
+    .input-holder {
+        flex: 0 0 70%;
+    }
+}
+</style>

package/components/es-form.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps({
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<template>
+    <form
+        :class="{ 'form-inline': props.inline }"
+        v-bind="$attrs">
+        <slot />
+    </form>
+</template>