From 8834d29e91b00eaddab839341eaca16e5ce5ab88 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Thu, 3 Oct 2024 14:10:24 -0400
Subject: [PATCH 1/8] feat: add mvp esSkeleton

---
 es-ds-components/components/es-skeleton.vue | 84 +++++++++++++++++++++
 es-ds-docs/components/ds-molecules-list.vue |  3 +
 es-ds-docs/pages/molecules/skeleton.vue     | 42 +++++++++++
 3 files changed, 129 insertions(+)
 create mode 100644 es-ds-components/components/es-skeleton.vue
 create mode 100644 es-ds-docs/pages/molecules/skeleton.vue

diff --git a/es-ds-components/components/es-skeleton.vue b/es-ds-components/components/es-skeleton.vue
new file mode 100644
index 000000000..2abbbbc71
--- /dev/null
+++ b/es-ds-components/components/es-skeleton.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
+
+defineProps({
+    animation: {
+        type: String,
+        default: 'wave',
+        validator: (val: string) => ['wave', 'fade', 'none'].includes(val as string),
+    },
+    height: {
+        type: String,
+        default: '1rem',
+    },
+    width: {
+        type: String,
+        default: 'auto',
+    },
+    size: {
+        type: String,
+        default: null,
+    },
+});
+
+</script>
+
+<template>
+    <skeleton
+        :height="size ? size : height"
+        :width="size ? size : width"
+        class="es-skeleton rounded-xs mb-25 bg-gray-200"
+        :class="{
+            'es-skeleton-wave': animation=='wave',
+            'es-skeleton-fade': animation=='fade'}" />
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+@keyframes skeleton-animate-wave {
+    0% {transform: translateX(-100%);}
+    100% {transform: translateX(100%);}
+}
+
+@keyframes skeleton-animate-fade {
+    0% {opacity: 1;}
+    100% {opacity: .4;}
+}
+
+.es-skeleton {
+    overflow: hidden;
+
+    &-wave:after {
+        content: "";
+        height: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        // wave animation from PrimeVue Skeleton
+        background-image: linear-gradient(90deg, rgba(variables.$white, 0), rgba(variables.$white, 0.4), rgba(variables.$white, 0));
+        animation-name: skeleton-animate-wave;
+        animation-duration: 1.2s;
+        animation-timing-function: ease;
+        animation-delay: 0s;
+        animation-iteration-count: infinite;
+        animation-direction: normal;
+        animation-fill-mode: none;
+        animation-play-state: running;
+    }
+
+    &-fade {
+        // fade animation from Bootstrap Skeleton
+        animation-name: skeleton-animate-fade;
+        animation-duration: 0.875s;
+        animation-timing-function: ease-in-out;
+        animation-delay: 0s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+        animation-fill-mode: none;
+        animation-play-state: running;
+    }
+}
+</style>
diff --git a/es-ds-docs/components/ds-molecules-list.vue b/es-ds-docs/components/ds-molecules-list.vue
index 3cbaad1d2..9393b07f6 100644
--- a/es-ds-docs/components/ds-molecules-list.vue
+++ b/es-ds-docs/components/ds-molecules-list.vue
@@ -57,6 +57,9 @@
         <li>
             <ds-link to="/molecules/rating"> Rating </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/skeleton"> Skeleton </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/support"> Support </ds-link>
         </li>
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
new file mode 100644
index 000000000..4c91fe1bd
--- /dev/null
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+onMounted(async () => {
+    if ($prism) {
+        const compSource = await import('@energysage/es-ds-components/components/es-skeleton.vue?raw');
+        // eslint-disable-next-line import/no-self-import
+        const docSource = await import('./skeleton.vue?raw');
+        compCode.value = $prism.normalizeCode(compSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+});
+</script>
+
+<template>
+    <div>
+        <h1>Skeleton</h1>
+        <p>
+            Extended from
+            <nuxt-link
+                href="https://v3.primevue.org/skeleton/"
+                target="_blank">
+                PrimeVue Skeleton
+            </nuxt-link>
+        </p>
+        <b-row class="my-500">
+            <b-col lg="6">
+                <es-skeleton
+                    height="5rem"
+                    animation="wave" />
+            </b-col>
+        </b-row>
+
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/components/es-skeleton.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/skeleton.vue" />
+    </div>
+</template>

From 4efe5210be37db725639812c1a9ad5a20cf62db4 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Thu, 3 Oct 2024 15:17:29 -0400
Subject: [PATCH 2/8] feat: add esSkeletonWrapper basic

---
 .../components/es-skeleton-wrapper.vue        | 17 +++++++
 es-ds-docs/pages/molecules/skeleton.vue       | 46 +++++++++++++++++--
 2 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 es-ds-components/components/es-skeleton-wrapper.vue

diff --git a/es-ds-components/components/es-skeleton-wrapper.vue b/es-ds-components/components/es-skeleton-wrapper.vue
new file mode 100644
index 000000000..d99889124
--- /dev/null
+++ b/es-ds-components/components/es-skeleton-wrapper.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<template>
+    <div>
+        <slot
+            v-if="loading"
+            name="loading"  />
+        <slot v-else />
+    </div>
+</template>
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 4c91fe1bd..9dfa9cc3e 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -1,4 +1,19 @@
 <script setup lang="ts">
+const loading = ref(true);
+
+const asyncTimeout = async (seconds = 3) => {
+    const millisecondTimeout = seconds * 1000;
+    return new Promise((resolve) => {
+        setTimeout(resolve, millisecondTimeout);
+    });
+};
+
+const startLoading = async () => {
+    loading.value=true;
+    await asyncTimeout();
+    loading.value=false;
+};
+
 const { $prism } = useNuxtApp();
 const compCode = ref('');
 const docCode = ref('');
@@ -11,6 +26,8 @@ onMounted(async () => {
         docCode.value = $prism.normalizeCode(docSource.default);
         $prism.highlight();
     }
+
+    startLoading();
 });
 </script>
 
@@ -25,11 +42,34 @@ onMounted(async () => {
                 PrimeVue Skeleton
             </nuxt-link>
         </p>
-        <b-row class="my-500">
+
+        <h2>Basic examples</h2>
+        <b-row class="mb-500">
             <b-col lg="6">
                 <es-skeleton
-                    height="5rem"
-                    animation="wave" />
+                    height="5rem" />
+            </b-col>
+        </b-row>
+
+        <h2>EsSkeletonWrapper</h2>
+        <b-row class="mb-500 d-flex">
+            <b-col lg="2">
+                <es-button @click="startLoading()">Reload content</es-button>
+            </b-col>
+            <b-col
+                lg="8"
+                class="ml-100">
+                <es-skeleton-wrapper :loading="loading">
+                    <template #loading>
+                        <es-skeleton width="85%"></es-skeleton>
+                        <es-skeleton width="55%"></es-skeleton>
+                    </template>
+
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maecenas viverra nunc sapien, non rhoncus elit tincidunt vitae.
+                    </p>
+                </es-skeleton-wrapper>
             </b-col>
         </b-row>
 

From 73a773f2e23f85f57ac58684ebc274af9b80a35a Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Thu, 3 Oct 2024 17:26:58 -0400
Subject: [PATCH 3/8] format: fix bRow and bCol instances

---
 es-ds-docs/pages/molecules/skeleton.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 9dfa9cc3e..38cc89eb6 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -44,19 +44,19 @@ onMounted(async () => {
         </p>
 
         <h2>Basic examples</h2>
-        <b-row class="mb-500">
-            <b-col lg="6">
+        <es-row class="mb-500">
+            <es-col lg="6">
                 <es-skeleton
                     height="5rem" />
-            </b-col>
-        </b-row>
+            </es-col>
+        </es-row>
 
         <h2>EsSkeletonWrapper</h2>
-        <b-row class="mb-500 d-flex">
-            <b-col lg="2">
+        <es-row class="mb-500 d-flex">
+            <es-col lg="2">
                 <es-button @click="startLoading()">Reload content</es-button>
-            </b-col>
-            <b-col
+            </es-col>
+            <es-col
                 lg="8"
                 class="ml-100">
                 <es-skeleton-wrapper :loading="loading">
@@ -70,8 +70,8 @@ onMounted(async () => {
                         Maecenas viverra nunc sapien, non rhoncus elit tincidunt vitae.
                     </p>
                 </es-skeleton-wrapper>
-            </b-col>
-        </b-row>
+            </es-col>
+        </es-row>
 
         <ds-doc-source
             :comp-code="compCode"

From 2803589b6ad37a6f50173c2f7ba41953a1ba0654 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Fri, 4 Oct 2024 16:35:11 -0400
Subject: [PATCH 4/8] feat: add mvp esSkeletonImg

---
 .../components/es-skeleton-img.vue            | 36 +++++++++++++++++++
 .../components/es-skeleton-wrapper.vue        |  2 +-
 es-ds-docs/pages/molecules/skeleton.vue       | 28 +++++++++++++--
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 es-ds-components/components/es-skeleton-img.vue

diff --git a/es-ds-components/components/es-skeleton-img.vue b/es-ds-components/components/es-skeleton-img.vue
new file mode 100644
index 000000000..d21cd1b2a
--- /dev/null
+++ b/es-ds-components/components/es-skeleton-img.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps({
+    aspect: {
+        type: String,
+        default: '16:9',
+    },
+    noAspect: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const aspects = props.aspect.split(':');
+const aspectRatio = computed(() => `${(parseFloat(aspects[1])/parseFloat(aspects[0]))*100}%`);
+</script>
+
+<template>
+    <es-skeleton
+        v-if="noAspect"
+        v-bind="$attrs"
+        class="es-skeleton-img" />
+    <div
+        v-else
+        class="d-flex">
+        <div
+            class="aspect-sizer flex-grow-1"
+            :style="{ 'padding-bottom': aspectRatio, height: '0px' }" />
+        <div
+            class="aspect-content flex-grow-1 w-100 mw-100"
+            style="margin-left: -100%;">
+            <es-skeleton
+                v-bind="$attrs"
+                class="es-skeleton-img h-100 w-100" />
+        </div>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-skeleton-wrapper.vue b/es-ds-components/components/es-skeleton-wrapper.vue
index d99889124..f9a4339e8 100644
--- a/es-ds-components/components/es-skeleton-wrapper.vue
+++ b/es-ds-components/components/es-skeleton-wrapper.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <div>
+    <div class="es-skeleton-wrapper">
         <slot
             v-if="loading"
             name="loading"  />
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 38cc89eb6..617bef440 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -40,7 +40,12 @@ onMounted(async () => {
                 href="https://v3.primevue.org/skeleton/"
                 target="_blank">
                 PrimeVue Skeleton
-            </nuxt-link>
+            </nuxt-link> and
+            <nuxt-link
+                href="https://bootstrap-vue.org/docs/components/skeleton/"
+                target="_blank">
+                Bootstrap Skeleton
+            </nuxt-link> styles
         </p>
 
         <h2>Basic examples</h2>
@@ -51,7 +56,9 @@ onMounted(async () => {
             </es-col>
         </es-row>
 
-        <h2>EsSkeletonWrapper</h2>
+        <h2>With helper components:</h2>
+
+        <h3>Skeleton Wrapper</h3>
         <es-row class="mb-500 d-flex">
             <es-col lg="2">
                 <es-button @click="startLoading()">Reload content</es-button>
@@ -73,6 +80,23 @@ onMounted(async () => {
             </es-col>
         </es-row>
 
+        <h3>Skeleton Image</h3>
+        <es-row class="mb-500 d-flex">
+            <es-col lg="6">
+                <es-skeleton-img />
+            </es-col>
+            <es-col lg="6">
+                <es-skeleton-img aspect="3:1" />
+            </es-col>
+            <es-col
+                cols="12"
+                class="mt-100">
+                <es-skeleton-img
+                    no-aspect
+                    height="5rem" />
+            </es-col>
+        </es-row>
+
         <ds-doc-source
             :comp-code="compCode"
             comp-source="es-ds-components/components/es-skeleton.vue"

From 97c69f4e7a59025493e589a2f668ac6c51449f68 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Mon, 7 Oct 2024 09:46:03 -0400
Subject: [PATCH 5/8] docs: flesh out docs page for skeleton

---
 es-ds-docs/pages/molecules/skeleton.vue | 63 ++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 617bef440..57b6968b3 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -14,6 +14,23 @@ const startLoading = async () => {
     loading.value=false;
 };
 
+const esSkeletonProps = [
+    ['animation', 'String', 'wave', `Options are 'wave', 'fade', or 'none'`],
+    ['height', 'String', '1rem', `Manually set height`],
+    ['width', 'String', 'auto', `Manually set width`],
+    ['size', 'String', 'null', `Manually set width and height, overriding 'height' and 'width' props`]
+];
+
+const esSkeletonWrapperProps = [
+    ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`]
+];
+
+const esSkeletonImgProps = [
+    ['aspect', 'String', '16:9', `Adds a container around the skeleton image with given aspect ratio`],
+    ['noAspect', 'Boolean', 'false', `Override the default aspect ratio and height, width, or size`],
+    ['...EsSkeleton props', '...', '...', `Takes all 'esSkeleton' props shown above`],
+];
+
 const { $prism } = useNuxtApp();
 const compCode = ref('');
 const docCode = ref('');
@@ -49,14 +66,40 @@ onMounted(async () => {
         </p>
 
         <h2>Basic examples</h2>
+        <p>Wave Animation:</p>
+        <es-row class="mb-200">
+            <es-col lg="6">
+                <es-skeleton />
+                <es-skeleton width="75%" />
+                <es-skeleton
+                    height="3rem" />
+            </es-col>
+            <es-col
+                lg="6"
+                class="d-flex">
+                <es-skeleton
+                    size="5rem" />
+                <es-skeleton
+                    size="4rem"
+                    class="rounded-circle ml-100" />
+            </es-col>
+        </es-row>
+
+        <p>Fade Animation:</p>
         <es-row class="mb-500">
             <es-col lg="6">
                 <es-skeleton
-                    height="5rem" />
+                        animation="fade"
+                        height="33px"
+                        width="100%" />
+                <es-skeleton
+                    animation="fade"
+                    height="25px"
+                    width="100%" />
             </es-col>
         </es-row>
 
-        <h2>With helper components:</h2>
+        <h2>Helper components</h2>
 
         <h3>Skeleton Wrapper</h3>
         <es-row class="mb-500 d-flex">
@@ -97,6 +140,22 @@ onMounted(async () => {
             </es-col>
         </es-row>
 
+        <div class="my-500">
+            <h2>EsSkeleton props</h2>
+            <ds-prop-table :rows="esSkeletonProps" />
+        </div>
+
+        <div class="my-500">
+            <h2>EsSkeletonWrapper props</h2>
+            <ds-prop-table :rows="esSkeletonWrapperProps" />
+        </div>
+
+        <div class="my-500">
+            <h2>EsSkeletonImg props</h2>
+            <ds-prop-table :rows="esSkeletonImgProps" />
+        </div>
+
+
         <ds-doc-source
             :comp-code="compCode"
             comp-source="es-ds-components/components/es-skeleton.vue"

From daf34247ed2b010f408502175617cb4116dd8a61 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Mon, 7 Oct 2024 09:47:45 -0400
Subject: [PATCH 6/8] format: reformat skeleton files

---
 .../components/es-skeleton-img.vue            |  4 +--
 .../components/es-skeleton-wrapper.vue        |  2 +-
 es-ds-components/components/es-skeleton.vue   | 31 +++++++++++++------
 es-ds-docs/pages/molecules/skeleton.vue       | 31 +++++++++----------
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/es-ds-components/components/es-skeleton-img.vue b/es-ds-components/components/es-skeleton-img.vue
index d21cd1b2a..2e7a8bda6 100644
--- a/es-ds-components/components/es-skeleton-img.vue
+++ b/es-ds-components/components/es-skeleton-img.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 });
 
 const aspects = props.aspect.split(':');
-const aspectRatio = computed(() => `${(parseFloat(aspects[1])/parseFloat(aspects[0]))*100}%`);
+const aspectRatio = computed(() => `${(parseFloat(aspects[1]) / parseFloat(aspects[0])) * 100}%`);
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const aspectRatio = computed(() => `${(parseFloat(aspects[1])/parseFloat(aspects
             :style="{ 'padding-bottom': aspectRatio, height: '0px' }" />
         <div
             class="aspect-content flex-grow-1 w-100 mw-100"
-            style="margin-left: -100%;">
+            style="margin-left: -100%">
             <es-skeleton
                 v-bind="$attrs"
                 class="es-skeleton-img h-100 w-100" />
diff --git a/es-ds-components/components/es-skeleton-wrapper.vue b/es-ds-components/components/es-skeleton-wrapper.vue
index f9a4339e8..984a172ab 100644
--- a/es-ds-components/components/es-skeleton-wrapper.vue
+++ b/es-ds-components/components/es-skeleton-wrapper.vue
@@ -11,7 +11,7 @@ defineProps({
     <div class="es-skeleton-wrapper">
         <slot
             v-if="loading"
-            name="loading"  />
+            name="loading" />
         <slot v-else />
     </div>
 </template>
diff --git a/es-ds-components/components/es-skeleton.vue b/es-ds-components/components/es-skeleton.vue
index 2abbbbc71..caf6c91dd 100644
--- a/es-ds-components/components/es-skeleton.vue
+++ b/es-ds-components/components/es-skeleton.vue
@@ -20,7 +20,6 @@ defineProps({
         default: null,
     },
 });
-
 </script>
 
 <template>
@@ -29,28 +28,37 @@ defineProps({
         :width="size ? size : width"
         class="es-skeleton rounded-xs mb-25 bg-gray-200"
         :class="{
-            'es-skeleton-wave': animation=='wave',
-            'es-skeleton-fade': animation=='fade'}" />
+            'es-skeleton-wave': animation == 'wave',
+            'es-skeleton-fade': animation == 'fade',
+        }" />
 </template>
 
 <style lang="scss" scoped>
 @use '@energysage/es-ds-styles/scss/variables' as variables;
 
 @keyframes skeleton-animate-wave {
-    0% {transform: translateX(-100%);}
-    100% {transform: translateX(100%);}
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
 }
 
 @keyframes skeleton-animate-fade {
-    0% {opacity: 1;}
-    100% {opacity: .4;}
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.4;
+    }
 }
 
 .es-skeleton {
     overflow: hidden;
 
     &-wave:after {
-        content: "";
+        content: '';
         height: 100%;
         position: absolute;
         left: 0;
@@ -58,7 +66,12 @@ defineProps({
         top: 0;
         z-index: 1;
         // wave animation from PrimeVue Skeleton
-        background-image: linear-gradient(90deg, rgba(variables.$white, 0), rgba(variables.$white, 0.4), rgba(variables.$white, 0));
+        background-image: linear-gradient(
+            90deg,
+            rgba(variables.$white, 0),
+            rgba(variables.$white, 0.4),
+            rgba(variables.$white, 0)
+        );
         animation-name: skeleton-animate-wave;
         animation-duration: 1.2s;
         animation-timing-function: ease;
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 57b6968b3..84d0c093e 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -9,20 +9,20 @@ const asyncTimeout = async (seconds = 3) => {
 };
 
 const startLoading = async () => {
-    loading.value=true;
+    loading.value = true;
     await asyncTimeout();
-    loading.value=false;
+    loading.value = false;
 };
 
 const esSkeletonProps = [
     ['animation', 'String', 'wave', `Options are 'wave', 'fade', or 'none'`],
     ['height', 'String', '1rem', `Manually set height`],
     ['width', 'String', 'auto', `Manually set width`],
-    ['size', 'String', 'null', `Manually set width and height, overriding 'height' and 'width' props`]
+    ['size', 'String', 'null', `Manually set width and height, overriding 'height' and 'width' props`],
 ];
 
 const esSkeletonWrapperProps = [
-    ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`]
+    ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`],
 ];
 
 const esSkeletonImgProps = [
@@ -57,12 +57,14 @@ onMounted(async () => {
                 href="https://v3.primevue.org/skeleton/"
                 target="_blank">
                 PrimeVue Skeleton
-            </nuxt-link> and
+            </nuxt-link>
+            and
             <nuxt-link
                 href="https://bootstrap-vue.org/docs/components/skeleton/"
                 target="_blank">
                 Bootstrap Skeleton
-            </nuxt-link> styles
+            </nuxt-link>
+            styles
         </p>
 
         <h2>Basic examples</h2>
@@ -71,14 +73,12 @@ onMounted(async () => {
             <es-col lg="6">
                 <es-skeleton />
                 <es-skeleton width="75%" />
-                <es-skeleton
-                    height="3rem" />
+                <es-skeleton height="3rem" />
             </es-col>
             <es-col
                 lg="6"
                 class="d-flex">
-                <es-skeleton
-                    size="5rem" />
+                <es-skeleton size="5rem" />
                 <es-skeleton
                     size="4rem"
                     class="rounded-circle ml-100" />
@@ -89,9 +89,9 @@ onMounted(async () => {
         <es-row class="mb-500">
             <es-col lg="6">
                 <es-skeleton
-                        animation="fade"
-                        height="33px"
-                        width="100%" />
+                    animation="fade"
+                    height="33px"
+                    width="100%" />
                 <es-skeleton
                     animation="fade"
                     height="25px"
@@ -116,8 +116,8 @@ onMounted(async () => {
                     </template>
 
                     <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Maecenas viverra nunc sapien, non rhoncus elit tincidunt vitae.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien, non
+                        rhoncus elit tincidunt vitae.
                     </p>
                 </es-skeleton-wrapper>
             </es-col>
@@ -155,7 +155,6 @@ onMounted(async () => {
             <ds-prop-table :rows="esSkeletonImgProps" />
         </div>
 
-
         <ds-doc-source
             :comp-code="compCode"
             comp-source="es-ds-components/components/es-skeleton.vue"

From 2d6cfa88f4e8abe3e08ec22c4af663147197cc09 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Mon, 7 Oct 2024 15:14:09 -0400
Subject: [PATCH 7/8] fix: format and docs page updates from comments

---
 .../components/es-skeleton-img.vue            |  9 ++-
 .../components/es-skeleton-wrapper.vue        |  2 +-
 es-ds-components/nuxt.config.ts               |  1 +
 es-ds-docs/pages/molecules/skeleton.vue       | 67 ++++++++++---------
 4 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/es-ds-components/components/es-skeleton-img.vue b/es-ds-components/components/es-skeleton-img.vue
index 2e7a8bda6..135ea3303 100644
--- a/es-ds-components/components/es-skeleton-img.vue
+++ b/es-ds-components/components/es-skeleton-img.vue
@@ -17,20 +17,19 @@ const aspectRatio = computed(() => `${(parseFloat(aspects[1]) / parseFloat(aspec
 <template>
     <es-skeleton
         v-if="noAspect"
-        v-bind="$attrs"
-        class="es-skeleton-img" />
+        v-bind="$attrs" />
     <div
         v-else
         class="d-flex">
         <div
-            class="aspect-sizer flex-grow-1"
+            class="flex-grow-1"
             :style="{ 'padding-bottom': aspectRatio, height: '0px' }" />
         <div
-            class="aspect-content flex-grow-1 w-100 mw-100"
+            class="flex-grow-1 w-100 mw-100"
             style="margin-left: -100%">
             <es-skeleton
                 v-bind="$attrs"
-                class="es-skeleton-img h-100 w-100" />
+                class="h-100 w-100" />
         </div>
     </div>
 </template>
diff --git a/es-ds-components/components/es-skeleton-wrapper.vue b/es-ds-components/components/es-skeleton-wrapper.vue
index 984a172ab..1569a4825 100644
--- a/es-ds-components/components/es-skeleton-wrapper.vue
+++ b/es-ds-components/components/es-skeleton-wrapper.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <div class="es-skeleton-wrapper">
+    <div>
         <slot
             v-if="loading"
             name="loading" />
diff --git a/es-ds-components/nuxt.config.ts b/es-ds-components/nuxt.config.ts
index dd04df6cd..819d09e57 100644
--- a/es-ds-components/nuxt.config.ts
+++ b/es-ds-components/nuxt.config.ts
@@ -66,6 +66,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/skeleton',
                 'primevue/tabpanel',
                 'primevue/tabview',
             ],
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 84d0c093e..331430c30 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -21,14 +21,14 @@ const esSkeletonProps = [
     ['size', 'String', 'null', `Manually set width and height, overriding 'height' and 'width' props`],
 ];
 
-const esSkeletonWrapperProps = [
-    ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`],
-];
-
 const esSkeletonImgProps = [
     ['aspect', 'String', '16:9', `Adds a container around the skeleton image with given aspect ratio`],
     ['noAspect', 'Boolean', 'false', `Override the default aspect ratio and height, width, or size`],
-    ['...EsSkeleton props', '...', '...', `Takes all 'esSkeleton' props shown above`],
+    ...esSkeletonProps,
+];
+
+const esSkeletonWrapperProps = [
+    ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`],
 ];
 
 const { $prism } = useNuxtApp();
@@ -68,7 +68,7 @@ onMounted(async () => {
         </p>
 
         <h2>Basic examples</h2>
-        <p>Wave Animation:</p>
+        <p>Wave animation:</p>
         <es-row class="mb-200">
             <es-col lg="6">
                 <es-skeleton />
@@ -85,7 +85,7 @@ onMounted(async () => {
             </es-col>
         </es-row>
 
-        <p>Fade Animation:</p>
+        <p>Fade animation:</p>
         <es-row class="mb-500">
             <es-col lg="6">
                 <es-skeleton
@@ -101,14 +101,34 @@ onMounted(async () => {
 
         <h2>Helper components</h2>
 
-        <h3>Skeleton Wrapper</h3>
+        <h3>Skeleton image</h3>
         <es-row class="mb-500 d-flex">
-            <es-col lg="2">
+            <es-col lg="6">
+                <es-skeleton-img />
+            </es-col>
+            <es-col lg="6">
+                <es-skeleton-img aspect="3:1" />
+            </es-col>
+            <es-col
+                cols="12"
+                class="mt-100">
+                <es-skeleton-img
+                    no-aspect
+                    height="5rem" />
+            </es-col>
+        </es-row>
+
+        <h3>Skeleton wrapper</h3>
+        <es-row class="mb-500 d-flex">
+            <es-col
+                cols="12"
+                lg="3"
+                class="mb-100 mb-lg-0">
                 <es-button @click="startLoading()">Reload content</es-button>
             </es-col>
             <es-col
-                lg="8"
-                class="ml-100">
+                lg="7"
+                class="ml-lg-100">
                 <es-skeleton-wrapper :loading="loading">
                     <template #loading>
                         <es-skeleton width="85%"></es-skeleton>
@@ -123,36 +143,19 @@ onMounted(async () => {
             </es-col>
         </es-row>
 
-        <h3>Skeleton Image</h3>
-        <es-row class="mb-500 d-flex">
-            <es-col lg="6">
-                <es-skeleton-img />
-            </es-col>
-            <es-col lg="6">
-                <es-skeleton-img aspect="3:1" />
-            </es-col>
-            <es-col
-                cols="12"
-                class="mt-100">
-                <es-skeleton-img
-                    no-aspect
-                    height="5rem" />
-            </es-col>
-        </es-row>
-
         <div class="my-500">
             <h2>EsSkeleton props</h2>
             <ds-prop-table :rows="esSkeletonProps" />
         </div>
 
         <div class="my-500">
-            <h2>EsSkeletonWrapper props</h2>
-            <ds-prop-table :rows="esSkeletonWrapperProps" />
+            <h2>EsSkeletonImg props</h2>
+            <ds-prop-table :rows="esSkeletonImgProps" />
         </div>
 
         <div class="my-500">
-            <h2>EsSkeletonImg props</h2>
-            <ds-prop-table :rows="esSkeletonImgProps" />
+            <h2>EsSkeletonWrapper props</h2>
+            <ds-prop-table :rows="esSkeletonWrapperProps" />
         </div>
 
         <ds-doc-source

From 007faee1e1bdfe5ce2e1608d1fe09fb0bdc65018 Mon Sep 17 00:00:00 2001
From: Lia Eggleston <lia.eggleston@energysage.com>
Date: Tue, 8 Oct 2024 10:37:12 -0400
Subject: [PATCH 8/8] docs: add comments and alphabetize props

---
 es-ds-components/components/es-skeleton-img.vue | 3 +++
 es-ds-docs/pages/molecules/skeleton.vue         | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/es-ds-components/components/es-skeleton-img.vue b/es-ds-components/components/es-skeleton-img.vue
index 135ea3303..932240262 100644
--- a/es-ds-components/components/es-skeleton-img.vue
+++ b/es-ds-components/components/es-skeleton-img.vue
@@ -15,9 +15,12 @@ const aspectRatio = computed(() => `${(parseFloat(aspects[1]) / parseFloat(aspec
 </script>
 
 <template>
+    <!-- if noAspect is set, pass along to esSkeleton with all other props -->
     <es-skeleton
         v-if="noAspect"
         v-bind="$attrs" />
+    <!-- if setting the aspect ratio, wrap skeleton in containers to determine responsive size  -->
+    <!-- based on Bootstrap Aspect -->
     <div
         v-else
         class="d-flex">
diff --git a/es-ds-docs/pages/molecules/skeleton.vue b/es-ds-docs/pages/molecules/skeleton.vue
index 331430c30..037adee4a 100644
--- a/es-ds-docs/pages/molecules/skeleton.vue
+++ b/es-ds-docs/pages/molecules/skeleton.vue
@@ -25,7 +25,7 @@ const esSkeletonImgProps = [
     ['aspect', 'String', '16:9', `Adds a container around the skeleton image with given aspect ratio`],
     ['noAspect', 'Boolean', 'false', `Override the default aspect ratio and height, width, or size`],
     ...esSkeletonProps,
-];
+].sort((a, b) => a[0].localeCompare(b[0]));
 
 const esSkeletonWrapperProps = [
     ['loading', 'Boolean', 'false', `Determines whether to show loading template or default content`],