@energysage/es-ds-components 3.0.0-alpha.0 → 3.0.0-alpha.11

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/README.md

@@ -8,9 +8,6 @@ An EnergySage Nuxt layer library with design system components
 npm install @energysage/es-ds-components
 ```
 
-_*Note: this library is in pre-release development, so the above command won't yet work, as this package
-is not yet published to NPM.*_
-
 Once the package is installed, you'll need to add a reference to it in your nuxt.config.ts like so:
 
 ```

package/components/es-accordion-list.vue

@@ -0,0 +1,117 @@
+<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) {
+        // @ts-expect-error not sure
+        activeIndex.value = children.findIndex((child) => child.props.id === newVal);
+    }
+});
+
+const accordionTabs = children.map((child, index) => {
+    // @ts-expect-error not sure
+    if (child.props.id === props.initialExpandedId || child.props.id === model.value) {
+        activeIndex.value = index;
+    }
+    return child.children;
+});
+
+const updateActiveIndex = (index: any) => {
+    if (model.value) {
+        // @ts-expect-error not sure
+        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' }">
+                    <!-- @vue-expect-error -->
+                    <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>
+            <!-- @vue-expect-error -->
+            <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: any) => ({
+        ...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,31 +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">
-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,122 @@
+<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>
+    <!--
+        <a> is needed for href because a root-relative link like /market/start/
+        that is passed to <nuxt-link :to="" /> will attempt to internally navigate
+        within a micro frontend, which will result in a 404
+    -->
+    <a
+        v-if="props.href"
+        :class="getRootClasses"
+        :href="props.href">
+        <slot />
+    </a>
+    <nuxt-link
+        v-else-if="props.to"
+        :to="props.to"
+        :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>