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

package/.eslintignore

@@ -0,0 +1,9 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+.nuxt
+.output
+# don't lint coverage output
+coverage
+*.json

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["../es-ds-docs/.eslintrc.json"]
+}

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+    "printWidth": 119,
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "bracketSameLine": true,
+    "singleAttributePerLine": true,
+    "tabWidth": 4
+}

package/components/es-accordion-list.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+
+interface Props {
+    allowMultipleExpand?: boolean;
+    initialExpandedId?: string;
+    variant?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    allowMultipleExpand: false,
+    initialExpandedId: '',
+    variant: 'default',
+});
+
+// eslint-disable-next-line vue/require-prop-types
+const model = defineModel();
+
+const children = useSlots().default?.() || [];
+
+const activeIndex = ref();
+
+watch(model, (newVal) => {
+    if (newVal) {
+        activeIndex.value = children.findIndex((child) => child.props.id === newVal);
+    }
+});
+
+const accordionTabs = children.map((child, index) => {
+    if (child.props.id === props.initialExpandedId || child.props.id === model.value) {
+        activeIndex.value = index;
+    }
+    return child.children;
+});
+
+const updateActiveIndex = (index) => {
+    if (model.value) {
+        model.value = children[index]?.props.id || '';
+    }
+};
+</script>
+
+<template>
+    <accordion
+        :multiple="allowMultipleExpand"
+        :active-index="activeIndex"
+        :pt="{
+            root: {
+                class: `es-accordion-list es-accordion-list--${variant}`,
+            },
+        }"
+        @update:active-index="updateActiveIndex">
+        <template #collapseicon> </template>
+        <template #expandicon> </template>
+        <accordion-tab
+            v-for="(tab, index) in accordionTabs"
+            :key="index"
+            :pt="{
+                root: ({ context }) => ({
+                    class: [
+                        `es-accordion es-accordion--${variant}`,
+                        {
+                            expanded: context.active,
+                        },
+                    ],
+                }),
+                header: {
+                    class: 'position-relative d-block',
+                },
+                headerAction: ({ context }) => ({
+                    class: [
+                        // eslint-disable-next-line max-len
+                        'es-accordion-heading mb-0 align-items-center d-flex font-weight-bold justify-content-between py-100',
+                        {
+                            'es-accordion-heading--visible': context.active,
+                            'font-size-100 px-100 px-sm-200': variant !== 'minimal',
+                            'h3 px-0': variant === 'minimal',
+                        },
+                    ],
+                }),
+                transition: {
+                    name: 'v-transition',
+                },
+                content: {
+                    class: [
+                        'es-accordion-content pb-25',
+                        {
+                            'bg-white pt-100 px-100 px-sm-200': variant !== 'minimal',
+                        },
+                    ],
+                },
+            }">
+            <template #header>
+                <span
+                    role="heading"
+                    aria-level="3"
+                    :class="{ 'h3 mb-0': variant === 'minimal' }">
+                    <component
+                        :is="item"
+                        v-for="item in tab.title()"
+                        :key="item" />
+                </span>
+                <icon-chevron-down class="es-accordion-icon flex-shrink-0 ml-200" />
+            </template>
+            <component
+                :is="item"
+                v-for="item in tab.default()"
+                :key="item" />
+        </accordion-tab>
+    </accordion>
+</template>

package/components/es-accordion.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-accordion are placed inside es-accordion-list, and es-accordion-list handles their display.
+    -->
+</template>

package/components/es-badge.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps({
+    variant: {
+        type: String,
+        default: 'primary',
+        required: false,
+    },
+});
+</script>
+
+<template>
+    <span
+        class="badge"
+        :class="`badge-${variant}`">
+        <!--
+            @slot Badge Content
+            -->
+        <slot />
+    </span>
+</template>

package/components/es-breadcrumbs.vue

@@ -1,17 +1,45 @@
+<script setup lang="ts">
+import Breadcrumb from 'primevue/breadcrumb';
+
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true,
+    },
+});
+const route = useRoute();
+const model = computed(() => {
+    if (!props.items) {
+        return [];
+    }
+
+    return props.items.map((item) => ({
+        ...item,
+        // mark breadcrumb as active if manually set or if it matches this route
+        active: item.active || route.path === item.to || route.path === item.href,
+        label: item.text,
+        url: item.href,
+    }));
+});
+</script>
+
 <template>
     <breadcrumb
         :model="model"
         :pt="{
             menu: 'breadcrumb',
-            menuitem: 'breadcrumb-item'
+            menuitem: 'breadcrumb-item',
         }">
-        <template #item="{ item, props }">
+        <template #item="{ item }">
             <!--
                 primevue breadcrumb doesn't support an active non-link state out of the box,
                 so we have to implement it via this slot
                 https://v3.primevue.org/breadcrumb/#api.options.MenuItem
             -->
-            <span v-if="item.active" aria-current="location" class="font-weight-bold">
+            <span
+                v-if="item.active"
+                aria-current="location"
+                class="font-weight-bold">
                 {{ item.label }}
             </span>
             <!--
@@ -19,10 +47,15 @@
                 so we have to implement it via this slot
                 https://v3.primevue.org/breadcrumb/#router
             -->
-            <nuxt-link v-else-if="item.to" :to="item.to">
+            <nuxt-link
+                v-else-if="item.to"
+                :to="item.to">
                 {{ item.label }}
             </nuxt-link>
-            <a v-else-if="item.url" :href="item.url" :target="item.target">
+            <a
+                v-else-if="item.url"
+                :href="item.url"
+                :target="item.target">
                 {{ item.label }}
             </a>
             <span v-else>
@@ -30,33 +63,11 @@
             </span>
         </template>
         <template #separator>
-            <span aria-hidden class="mx-50">/</span>
+            <span
+                aria-hidden="true"
+                class="mx-50"
+                >/</span
+            >
         </template>
     </breadcrumb>
 </template>
-
-<script setup lang="ts">
-import Breadcrumb from 'primevue/breadcrumb';
-
-const props = defineProps({
-    items: {
-        type: Array,
-        required: true
-    }
-});
-
-const route = useRoute();
-const model = computed(() => {
-    if (!props.items) {
-        return [];
-    }
-
-    return props.items.map(item => ({
-        ...item,
-        // mark breadcrumb as active if manually set or if it matches this route
-        active: item.active || route.path === item.to || route.path === item.href,
-        label: item.text,
-        url: item.href
-    }));
-});
-</script>

package/components/es-button.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+// Cannot import as Button due to issue with native element Button
+import PrimeButton from 'primevue/button';
+
+/*
+severity:
+
+Prime severity (variant="dark-bg" in particular) doesn't map to
+"success" | "help" | "secondary" | "info" | "warning" | "danger" | "contrast"
+
+size:
+Prime size "small" | "large" doesn't map to our 3-sizes in the design-system
+
+icon usage:
+Prime provides icon & loadingIcon slots which can hook into the loading property,
+currently we're not using this (but we may want to re-visit)
+*/
+
+const props = defineProps({
+    /**
+     * Button Variant
+     *
+     */
+    variant: {
+        type: String,
+        default: 'primary',
+        required: false,
+    },
+    /**
+     * Outline only button
+     */
+    outline: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Size of button
+     */
+    size: {
+        type: String,
+        validator: (val) => ['lg', 'md', 'sm'].includes(String(val)),
+        default: 'md',
+    },
+    /**
+     * Only works for 'link' variant buttons.
+     * Removes the fixed height and padding so the button can fit nicely within a block of text.
+     */
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+
+    // PrimeVue Arguments with es-ds defaults
+    rounded: {
+        type: Boolean,
+        default: true,
+    },
+    // Url when using button as a link
+    href: {
+        type: String,
+        default: null,
+    },
+    // Url when using button as a link to an internal page
+    to: {
+        type: String,
+        default: null,
+    },
+});
+
+const getRootClasses = computed(() => {
+    const withOutline = props.outline ? '-outline' : '';
+    // eslint-disable-next-line no-nested-ternary
+    const btnVariant =
+        props.variant === 'link'
+            ? 'btn-link'
+            : props.variant === 'dark-bg'
+              ? `btn${withOutline}-dark-bg`
+              : `btn${withOutline}-primary`;
+    const btnInline = props.inline ? 'inline' : '';
+    const btnSize = props.size ? `btn-${props.size}` : 'btn-md';
+    return `btn ${btnVariant} ${btnInline} ${btnSize}`;
+});
+</script>
+
+<template>
+    <nuxt-link
+        v-if="props.href || props.to"
+        :href="props.href || undefined"
+        :to="props.to || undefined"
+        :class="getRootClasses">
+        <slot />
+    </nuxt-link>
+    <prime-button
+        v-else
+        :pt="{
+            root: { class: getRootClasses },
+        }">
+        <slot />
+    </prime-button>
+</template>
+
+<style lang="scss" scoped>
+.btn-link.inline {
+    /* use normal CSS here so users can override with utility classes as necessary */
+    border: 0;
+    height: auto;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+</style>

package/components/es-card.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// specific workaround for getting a reference to an auto-imported but not globally registered
+// component like NuxtLink, so that it can be used in a <component :is=""> context.
+// this resolves to an import statement, according to:
+// https://github.com/nuxt/nuxt/issues/13659#issuecomment-1573568006
+const NuxtLink = resolveComponent('NuxtLink');
+
+const props = defineProps({
+    href: {
+        type: String,
+        default: undefined,
+    },
+    tag: {
+        type: String,
+        default: 'div',
+    },
+    to: {
+        type: String,
+        default: undefined,
+    },
+    variant: {
+        type: String,
+        default: 'display',
+        required: false,
+    },
+});
+
+const actualVariant = computed(() => {
+    // if href is specified, force variant to be interactive
+    if (props.href) {
+        return 'interactive';
+    }
+    // if no href provided, honor the specified variant
+    return props.variant;
+});
+const defaultTag = computed(() => {
+    // if an href is provided and no alternate link tag was provided (e.g. nuxt-link),
+    // force the tag to be a nuxt-link, no matter the variant
+    if (props.href && props.tag === 'div') {
+        return 'nuxt-link';
+    }
+
+    // otherwise, honor the tag passed in if it's display variant
+    // or something other than the default tag was provided
+    if (props.variant !== 'interactive' || props.tag !== 'div') {
+        return props.tag;
+    }
+
+    // if we reach this point, variant is interactive, tag is div, and no href was provided
+    // and any non-link clickable element should be a button
+    return 'button';
+});
+</script>
+
+<template>
+    <component
+        :is="defaultTag == 'nuxt-link' ? NuxtLink : defaultTag"
+        class="es-card"
+        :class="actualVariant"
+        :to="to ? to : href"
+        v-bind="$attrs">
+        <slot />
+    </component>
+</template>

package/components/es-carousel.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import Carousel from 'primevue/carousel';
+
+const responsiveOptions = ref([
+    {
+        // xl: 1200px
+        breakpoint: '1199px',
+        numVisible: 4,
+        numScroll: 1,
+    },
+    {
+        // lg: 992px
+        breakpoint: '991px',
+        numVisible: 3,
+        numScroll: 1,
+    },
+    {
+        // md: 768px
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1,
+    },
+    {
+        // sm: 576px
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1,
+    },
+]);
+
+const props = defineProps({
+    autoscroll: {
+        type: Boolean,
+        default: false,
+    },
+    dots: {
+        type: Boolean,
+        default: true,
+    },
+    items: {
+        type: Array,
+        default: () => [],
+        required: true,
+    },
+});
+
+const autoplayInterval = ref(props.autoscroll ? 3000 : 0);
+const key = ref('');
+
+const stopAutoplay = () => {
+    if (autoplayInterval.value > 0) {
+        autoplayInterval.value = 0;
+        key.value = 'stopAutoplay';
+    }
+};
+
+onMounted(() => {
+    document.addEventListener('keyup', (e) => {
+        if (e.key === 'Escape') {
+            // Stop carousel when user presses Escape key, in lieu of pause button
+            // https://www.w3.org/WAI/WCAG22/Techniques/general/G187.html
+            stopAutoplay();
+        }
+    });
+});
+</script>
+
+<template>
+    <carousel
+        :key="key"
+        :autoplay-interval="autoplayInterval"
+        circular
+        :num-visible="4"
+        :responsive-options="responsiveOptions"
+        :show-indicators="dots"
+        :value="items"
+        :pt="{
+            container: {
+                class: 'd-flex',
+            },
+            indicator: {
+                class: 'dot',
+            },
+            indicators: {
+                class: 'd-flex justify-content-center',
+                style: 'gap: 12px;',
+            },
+            itemsContent: {
+                class: 'w-100 overflow-hidden',
+            },
+            itemsContainer: {
+                class: 'd-flex',
+            },
+            item: {
+                class: 'p-carousel-item p-1',
+            },
+            itemCloned: {
+                class: 'p-carousel-item p-1',
+            },
+            previousButton: {
+                style: 'border: unset; background: unset; color: #64748b;',
+            },
+            nextButton: {
+                style: 'border: unset; background: unset; color: #64748b;',
+            },
+        }">
+        <template #item="item">
+            <slot
+                name="item"
+                :item="item.data" />
+        </template>
+    </carousel>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+:deep(.p-carousel-item) {
+    flex: 1 0 100%;
+}
+
+@include breakpoints.media-breakpoint-up(sm) {
+    :deep(.p-carousel-item) {
+        flex: 1 0 calc(100% / 2);
+    }
+}
+
+@include breakpoints.media-breakpoint-up(md) {
+    :deep(.p-carousel-item) {
+        flex: 1 0 calc(100% / 3);
+    }
+}
+
+@include breakpoints.media-breakpoint-up(lg) {
+    :deep(.p-carousel-item) {
+        flex: 1 0 calc(100% / 4);
+    }
+}
+
+:deep(.dot) {
+    list-style-type: none;
+
+    &[data-p-highlight='true'] button {
+        background-color: variables.$orange-800;
+    }
+
+    button {
+        background-color: variables.$gray-100;
+        border: none;
+        border-radius: 50%;
+        height: 0.875rem;
+        width: 0.875rem;
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+}
+</style>

package/components/{b-col.vue → es-col.vue}

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+    cols?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+}>();
+</script>
+
 <template>
     <div
         class="col"
@@ -12,14 +23,3 @@
         <slot />
     </div>
 </template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  cols?: string,
-  sm?: string,
-  md?: string,
-  lg?: string,
-  xl?: string,
-  xxl?: string
-}>();
-</script>