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

package/components/es-file-input.vue

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import findMimeType, { mimeTypes } from '../lib-utils/mime-type-finder';
+
+type UploadInfo = {
+    name: string;
+    uploadUrl: string;
+    additionalFields?: object;
+};
+
+const props = defineProps({
+    /**
+     * An array of Objects with the following shape:
+     * {
+     *    name: String,
+     *    uploadUrl: String,
+     *    additionalFields: Object,
+     * }
+     */
+    uploadUrls: {
+        type: Array<UploadInfo>,
+        default: () => [],
+    },
+    /**
+     * The file types that are allowed to be uploaded. This is a list of MIME types as strings. If the array is
+     * empty, all file types are allowed. A list of acceptable MIME types can be found here in the template column:
+     * https://www.iana.org/assignments/media-types/media-types.xhtml
+     */
+    fileTypes: {
+        type: Array,
+        default: () => [],
+        required: true,
+        validator(fileTypes) {
+            return fileTypes.every((fileType) => mimeTypes.includes(fileType));
+        },
+    },
+    /**
+     * The maximum file size in MB. This is per file, not the total size of all files.
+     */
+    maxFileSizeMb: {
+        type: Number,
+        default: 25,
+        required: false,
+    },
+    /**
+     * When true, the component will be shorter vertically. This is achieved by giving the parent div
+     * flex-direction: row instead of the default flex-direction: column.
+     */
+    collapsed: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+let currentFiles: Array<File> = [];
+let active = false;
+const fileInput = ref(null);
+const emit = defineEmits([
+    'fileSizeError',
+    'fileTypeError',
+    'fileIsAFolderError',
+    'fileDataRead',
+    'duplicateFileMessage',
+    'readyToUpload',
+    'uploadFailure',
+    'uploadSuccess',
+]);
+
+const filterLargeFiles = (files: Array<File>) => {
+    // Takes an array of files, and filters out any files that exceed the maxFileSizeMb prop. Emits a
+    // fileSizeError event for each file that exceeds the maxFileSizeMb prop. The File API uses bytes, so
+    // we have to convert the maxFileSizeMb prop to bytes.
+    const maxFileSizeBytes = props.maxFileSizeMb * 1000000;
+    return [...files].filter((file) => {
+        if (file.size > maxFileSizeBytes) {
+            emit('fileSizeError', file.name);
+            return false;
+        }
+        return true;
+    });
+};
+
+const removeSpaceFromFileNames = (files: Array<File>) => {
+    const newFiles = files.map(
+        (file) =>
+            new File(
+                // Return new File object with the modified name (without any space)
+                [file],
+                file.name.replace(/\s/g, ''),
+                { type: file.type, lastModified: file.lastModified },
+            ),
+    );
+    return newFiles;
+};
+
+async function verifyMimeType(file: File) {
+    // If an empty folder then trigger fileIsAFolderError
+    if (file.type === '') {
+        emit('fileIsAFolderError');
+    }
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = (evt) => {
+            const uint = new Uint8Array(evt.target.result);
+            const bytes: string[] = [];
+            uint.forEach((byte) => {
+                bytes.push(byte.toString(16));
+            });
+            const hex = bytes.join('').toUpperCase();
+            const mimeType = findMimeType(hex);
+            if (!mimeType || (props.fileTypes.length > 0 && !props.fileTypes.includes(mimeType))) {
+                emit('fileTypeError', file.name);
+                return reject();
+            }
+            return resolve(file);
+        };
+        fileReader.onerror = (error) => {
+            reject(error);
+        };
+        const blob = file.slice(0, 4);
+        fileReader.readAsArrayBuffer(blob);
+    });
+}
+
+async function uploadSingleFile(file: File) {
+    const uploadInfo = props.uploadUrls.find((uploadUrl) => uploadUrl.name === file.name);
+    if (!uploadInfo) {
+        emit('uploadFailure', {
+            name: file.name,
+            message: 'No upload URL found for this file.',
+        });
+        return;
+    }
+    const form = new FormData();
+    if (uploadInfo.additionalFields) {
+        Object.entries(uploadInfo.additionalFields).forEach(([key, value]) => {
+            form.append(key, value);
+        });
+    }
+    form.append('file', file);
+    fetch(uploadInfo.uploadUrl, {
+        method: 'POST',
+        body: form,
+    })
+        .then((response) => {
+            if (response.status >= 200 && response.status < 300) {
+                emit('uploadSuccess', file.name);
+            } else {
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: `Received ${response.status} code from server.`,
+                });
+            }
+        })
+        .catch((error) => {
+            if (error.response) {
+                // The request was made and the server responded with a status code
+                // that falls out of the range of 2xx
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: `Received ${error.response.status} code from server.`,
+                });
+            } else if (error.request) {
+                // The request was made but no response was received
+                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+                // http.ClientRequest in node.js
+                emit('uploadFailure', { name: file.name, message: 'The server did not respond.' });
+            } else {
+                // Something happened in setting up the request that triggered an Error
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: 'There was an error sending your file to the server.',
+                });
+            }
+        });
+}
+
+const readFilesIntoUrl = (files: Array<File>) => {
+    files.forEach((file) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+            emit('fileDataRead', {
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                // For non-image files (pdf, docx, etc.)
+                data: file.type.includes('application')
+                    ? URL.createObjectURL(new Blob([file], { type: file.type }))
+                    : fileReader.result,
+            });
+        };
+        fileReader.readAsDataURL(file);
+    });
+};
+
+async function verifyFiles(files: Array<File>) {
+    const correctlySizedFiles = filterLargeFiles(files);
+    const correctlyNamedFiles = removeSpaceFromFileNames(correctlySizedFiles);
+
+    // Make sure the file is the correct mime type
+    let newValidFiles = await Promise.allSettled(correctlyNamedFiles.map(async (file) => verifyMimeType(file)));
+    // Filter out undefined values and "rejected"
+    newValidFiles = newValidFiles.filter((file) => file && file.status === 'fulfilled').map((file) => file.value);
+
+    // If the new file with name already exists in the current files
+    // Don't upload the new file and display an error
+    const duplicateFiles = newValidFiles.filter(({ name }) => currentFiles.some((file) => file.name === name));
+    duplicateFiles.forEach((file) => emit('duplicateFileMessage', file.name));
+
+    // For new files with unused names, add them to files
+    newValidFiles = newValidFiles.filter(({ name }) => !currentFiles.some((file) => file.name === name));
+    currentFiles = [...currentFiles, ...newValidFiles];
+
+    if (newValidFiles.length > 0) {
+        emit('readyToUpload', newValidFiles);
+        readFilesIntoUrl(newValidFiles);
+    }
+}
+
+watch(
+    () => props.uploadUrls,
+    (newUrls, oldUrls) => {
+        // For every file that has an associated upload URL, we start the upload
+        newUrls.forEach((newUrlPair) => {
+            const oldUrl = oldUrls.find(({ name }) => name === newUrlPair.name);
+            const fileToUpload = currentFiles.find((file) => file.name === newUrlPair.name);
+            if ((!oldUrl || oldUrl.uploadUrl !== newUrlPair.uploadUrl) && fileToUpload) {
+                uploadSingleFile(fileToUpload);
+            }
+        });
+    },
+);
+
+async function onFileChanged($event: Event) {
+    const target = $event.target as HTMLInputElement;
+    // The user has selected files from the file picker. We have to filter out any files that exceed the
+    // maxFileSizeMb prop.
+    if (target && target.files) {
+        await verifyFiles([...target.files]);
+    }
+}
+
+const onDrop = (event) => {
+    // The user has dropped files onto the component. We have to apply the same logic as if they had
+    // selected the files from the file picker which limits the file types to the ones specified in the
+    // fileTypes prop.
+    active = false;
+
+    // Use DataTransferItemList interface to access the file(s)
+    const dataTransfersAsFiles = [...event.dataTransfer.items]
+        .filter((item) => {
+            if (item.kind !== 'file') {
+                emit('fileTypeError', item.name);
+                return false;
+            }
+            return true;
+        })
+        .map((item) => item.getAsFile());
+
+    verifyFiles(dataTransfersAsFiles);
+};
+
+const openFilePicker = () => {
+    if (fileInput.value) {
+        fileInput.value.click();
+    }
+};
+</script>
+
+<template>
+    <div
+        role="presentation"
+        class="es-file-upload align-items-center rounded-sm d-flex flex-column justify-content-center p-150"
+        :class="{ active: active }"
+        @dragenter.stop.prevent="active = true"
+        @dragover.stop.prevent="active = true"
+        @dragleave.stop.prevent="active = false"
+        @dragend.stop.prevent="onDrop"
+        @drop.stop.prevent="onDrop"
+        @click.self="openFilePicker"
+        @keydown.enter.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker">
+        <div
+            class="d-flex justify-content-center flex-column"
+            :class="{ 'flex-md-row': collapsed }">
+            <div class="align-self-center">
+                <icon-upload
+                    class="d-none d-md-inline-block"
+                    :class="{ 'mb-200': collapsed }"
+                    height="32px"
+                    width="32px" />
+                <icon-upload
+                    class="d-md-none"
+                    height="24px"
+                    width="24px" />
+            </div>
+            <div
+                class="align-self-center text-center"
+                :class="{ 'px-100': collapsed }">
+                <slot name="cta" />
+            </div>
+            <div class="align-self-center">
+                <es-button
+                    class="d-none d-md-inline w-100 w-md-auto"
+                    :class="{ 'mb-200': collapsed }"
+                    @click="openFilePicker">
+                    <slot name="buttonText">
+                        <p class="m-0">Browse files</p>
+                    </slot>
+                </es-button>
+                <es-button
+                    class="d-md-none w-100"
+                    @click="openFilePicker">
+                    <slot name="buttonText">
+                        <p class="m-0">Choose files</p>
+                    </slot>
+                </es-button>
+            </div>
+        </div>
+        <div>
+            <slot name="helpText" />
+        </div>
+        <input
+            ref="fileInput"
+            type="file"
+            :accept="fileTypes.join(', ')"
+            style="display: none"
+            multiple
+            @change="onFileChanged($event)" />
+    </div>
+</template>

package/components/es-file-preview-modal.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    fileName: {
+        type: String,
+        default: 'test.png',
+        required: false,
+    },
+    fileSource: {
+        type: String,
+        default: '',
+        required: false,
+    },
+});
+
+defineEmits(['hidden']);
+</script>
+
+<template>
+    <es-modal
+        :id="`preview-modal-${fileName}`"
+        hide-footer
+        :visible="visible"
+        size="xl"
+        body-class="border-top p-0"
+        @hidden="$emit('hidden')">
+        <template #modal-title>
+            {{ fileName }}
+        </template>
+        <div class="d-md-none d-block file-preview text-center">
+            <nuxt-img
+                loading="lazy"
+                class="img-fluid file-preview"
+                :src="fileSource"
+                :alt="fileName" />
+        </div>
+        <div class="d-none d-md-block">
+            <div class="px-500 py-200 bg-gray-200">
+                <div class="card bg-white file-preview">
+                    <nuxt-img
+                        loading="lazy"
+                        class="img-fluid file-preview rounded-img"
+                        :src="fileSource"
+                        :alt="fileName" />
+                </div>
+            </div>
+        </div>
+    </es-modal>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.rounded-img {
+    border-radius: variables.$card-inner-border-radius !important;
+}
+</style>

package/components/es-footer.vue

@@ -0,0 +1,163 @@
+<script lang="js">
+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>