Replace vue-slick-slider with flickity and update review documentatio…

…n/component
EnergySage · Jul 27, 2022 · 45c1ce5 · 45c1ce5
1 parent 1b0826e
commit 45c1ce5
Show file tree

Hide file tree

Showing 13 changed files with 371 additions and 81 deletions.
diff --git a/es-design-system/package-lock.json b/es-design-system/package-lock.json
diff --git a/es-design-system/package.json b/es-design-system/package.json
@@ -36,6 +36,7 @@
         "html-truncate": "^1.2.2",
         "nuxt": "^2.15.8",
         "vue": "^2.7.8",
+        "vue-flickity": "^1.2.1",
         "vue-slider-component": "^3.2.18"
     },
     "devDependencies": {

diff --git a/es-design-system/pages/molecules/es-horizontal-list.vue b/es-design-system/pages/molecules/es-horizontal-list.vue
@@ -1,26 +1,29 @@
 <template>
     <div class="position-relative">
-        <es-horizontal-list>
+        <h2>
+            Left Aligned No Dots
+        </h2>
+        <es-horizontal-list id="docs-1">
             <div
                 v-for="index in 10"
                 :key="index"
-                class="block-holder">
-                <div class="bg-primary mr-3 text-center text-white py-5">
-                    {{ index }}
-                </div>
+                class="large-block-holder bg-primary mr-4 text-center text-white py-5">
+                {{ index }}
             </div>
         </es-horizontal-list>
+        <h2 class="mt-5">
+            Center Aligned With Dots
+        </h2>
         <es-horizontal-list
-            class="mt-5"
-            centered
+            id="docs-2"
+            class="center-holder"
+            align="center"
             dots>
             <div
                 v-for="index in 3"
                 :key="index"
-                class="block-holder">
-                <div class="bg-primary mr-3 text-center text-white py-5">
-                    {{ index }}
-                </div>
+                class="center-block-holder bg-primary mr-2 text-center text-white py-5">
+                {{ index }}
             </div>
         </es-horizontal-list>
     </div>
@@ -32,13 +35,23 @@ import { EsHorizontalList } from '@energysage/es-vue-base';
 export default {
     name: 'EsHorizontalListDocs',
     components: {
-
         EsHorizontalList,
     },
 };
 </script>
 <style lang="scss" scoped>
-.block-holder {
-    width: 200px !important;
+.large-block-holder {
+  height: 185px;
+  width: 300px;
+}
+
+.center-holder {
+    margin: 0 auto;
+    width: 350px;
+}
+
+.center-block-holder {
+    height: 185px;
+    width: 170px;
 }
 </style>
diff --git a/es-design-system/pages/molecules/es-review.vue b/es-design-system/pages/molecules/es-review.vue
@@ -1,35 +1,81 @@
 <template>
-    <b-row>
-        <b-col
-            cols="12 "
-            lg="6">
-            <es-review
-                id="123"
-                :rating="5"
-                reviewer-name="My Name"
-                title="My Title"
-                certified
-                :comment="`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in aliquam ex.
-                Nullam vestibulum ex mi, ut suscipit libero condimentum id. Pellentesque eu diam vel nisi
-                molestie porta eget sed odio. Quisque congue risus id metus facilisis, non imperdiet libero rutrum.
-                Mauris vitae ante porttitor, consectetur purus faucibus, euismod ex. Orci varius natoque penatibus
-                et magnis dis parturient montes, nascetur ridiculus mus. Nulla ullamcorper elit sed viverra finibus.
-                Mauris vitae tortor mauris. Cras suscipit nibh nec nisi cursus ornare. Maecenas quis turpis sit amet
-                sapien dapibus sollicitudin viverra eu justo. Vivamus posuere metus sit amet purus tempus volutpat.
-                Donec eleifend elit quam. `" />
-        </b-col>
-    </b-row>
+    <es-horizontal-list
+        id="reviews"
+        class="mb-5">
+        <es-review
+            v-for="review in reviews"
+            :id="review.id"
+            :key="review.id"
+            :reviewer-name="review.reviewer_name"
+            :certified="review.certified"
+            :created="new Date(review.created)"
+            :rating="review.rating"
+            :title="review.title"
+            :comment="review.comment" />
+    </es-horizontal-list>
 </template>
 <script>
-import { EsReview } from '@energysage/es-vue-base';
-import { BRow, BCol } from 'bootstrap-vue';
+import { EsReview, EsHorizontalList } from '@energysage/es-vue-base';
 
 export default {
     name: 'EsReviewDocs',
     components: {
         EsReview,
-        BRow,
-        BCol,
+        EsHorizontalList,
+    },
+    data() {
+        return {
+            reviews: [
+                {
+                    id: 16,
+                    reviewer_name: 'Ryan Dev',
+                    certified: false,
+                    created: '2022-06-10T14:48:56.604194Z',
+                    rating: 5,
+                    title: 'Really Really Long Title Really Really Long Title',
+                    comment: 'shrt',
+                }, {
+                    id: 11,
+                    reviewer_name: 'Ryan Residential Really Long Name',
+                    certified: true,
+                    created: '2022-06-03T18:27:41.718753Z',
+                    rating: 3,
+                    title: 'testers',
+                    comment: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in aliquam ex.
+                Nullam vestibulum ex mi, ut suscipit libero condimentum id. Pellentesque eu diam vel nisi
+                molestie porta eget sed odio. Quisque congue risus id metus facilisis, non imperdiet libero rutrum.
+                Mauris vitae ante porttitor, consectetur purus faucibus, euismod ex. Orci varius natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nulla ullamcorper elit sed viverra finibus.
+                Mauris vitae tortor mauris. Cras suscipit nibh nec nisi cursus ornare. Maecenas quis turpis sit amet
+                sapien dapibus sollicitudin viverra eu justo. Vivamus posuere metus sit amet purus tempus volutpat.
+                Donec eleifend elit quam.`,
+                }, {
+                    id: 10,
+                    reviewer_name: 'shrt',
+                    certified: true,
+                    created: '2022-06-03T18:26:46.588897Z',
+                    rating: 4,
+                    title: 'Test',
+                    comment: '123',
+                }, {
+                    id: 15,
+                    reviewer_name: 'test',
+                    certified: false,
+                    created: '2022-06-09T14:10:30.290508Z',
+                    rating: 5,
+                    title: 'test',
+                    comment: '',
+                }, {
+                    id: 13,
+                    reviewer_name: 'testers',
+                    certified: false,
+                    created: '2022-06-09T14:05:08.901091Z',
+                    rating: 5,
+                    title: '',
+                    comment: '',
+                },
+            ],
+        };
     },
 
 };

diff --git a/es-vue-base/jest.config.js b/es-vue-base/jest.config.js
@@ -12,6 +12,7 @@ module.exports = {
         '^.+\\.js$': 'babel-jest',
         '.*\\.(vue)$': 'vue-jest',
     },
+    transformIgnorePatterns: ['node_modules/(?!(vue-flickity)/)'],
     collectCoverage: true,
     collectCoverageFrom: ['<rootDir>/src/**/*.vue'],
     testEnvironment: 'jsdom',