@hulkapps/app-manager-vue 2.0.9 → 2.1.2

package/src/components/Plans/AppManagerSliderPlan.vue

@@ -1,8 +1,56 @@
 <template>
+    <PSkeletonPage title="Plans"
+                   :fullWidth="false"
+                   primaryAction
+                   :secondaryActions="2"
+                   :breadcrumbs="false"
+                   v-if="planLoading">
+        <PLayout>
+            <PLayoutSection oneThird="">
+                <PCard sectioned="">
+                    <PTextContainer>
+                        <PSkeletonDisplayText size="small" />
+                        <PSkeletonBodyText />
+                    </PTextContainer>
+                </PCard>
+            </PLayoutSection>
+            <PLayoutSection oneThird="">
+                <PCard sectioned="">
+                    <PTextContainer>
+                        <PSkeletonDisplayText size="small" />
+                        <PSkeletonBodyText />
+                    </PTextContainer>
+                </PCard>
+            </PLayoutSection>
+            <PLayoutSection oneThird="">
+                <PCard sectioned="">
+                    <PTextContainer>
+                        <PSkeletonDisplayText size="small" />
+                        <PSkeletonBodyText />
+                    </PTextContainer>
+                </PCard>
+            </PLayoutSection>
+        </PLayout>
+        <PLayout style="margin-top: 20px">
+            <PLayoutSection>
+                <PCard sectioned=""><PSkeletonBodyText /></PCard>
+                <PCard sectioned=""><PSkeletonBodyText /></PCard>
+                <PCard sectioned=""><PSkeletonBodyText /></PCard>
+                <PCard sectioned=""><PSkeletonBodyText /></PCard>
+            </PLayoutSection>
+        </PLayout>
+    </PSkeletonPage>
+    <PEmptyState
+            heading="No Plans"
+            image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
+            v-else-if="!this.planLoading && this.plans.length === 0"
+    >
+    </PEmptyState>
     <PPage
-            class="app-manager-plan-page custom-title"
+            class="app-manager-plan-page-slider custom-title"
             title="Choose plan"
             :subtitle = "subtitleContent"
+            v-else
     >
 
         <PStack slot="primaryAction">
@@ -28,7 +76,7 @@
                         <div class="Polaris-ResourceList__ResourceListWrapper features" style="width: 30%">
                             <div class="plan__price"></div>
                             <ul class="Polaris-ResourceList">
-                                <li class="Polaris-ResourceList__ItemWrapper pro_title" v-for="(feature, key) in features" :key="key">
+                                <li class="Polaris-ResourceList__ItemWrapper pro_title" :class="`${feature.value_type}__type__${feature.slug} feature__type__${feature.value_type} feature__class`" v-for="(feature, key) in features" :key="key">
                                     <div class="Polaris-ResourceList-Item__Container">
                                         <div class="Polaris-ResourceList-Item__Content">
                                             <h1 class="for-price-per-month"><span>{{ feature.name }}</span></h1>
@@ -42,8 +90,14 @@
                         <template>
                             <slide :id="key" :class="`slide-${key}`" v-for="(plan, key) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`slide-${key}`" >
                                 <div class="plan__price" :style="activePlanStyle(plan)">
-                                    <b style="font-size: 16px">{{(plan.name)}}</b>
-                                    <div v-if="plan.discount && plan.discount > 0" >
+                                    <div v-if="plan.price === 0">
+                                        <b v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
+                                        <p style="display: flex;margin-top: 10px">
+                                            <PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
+                                        </p>
+                                    </div>
+                                    <div v-else-if="plan.discount && plan.discount > 0" >
+                                        <b style="font-size: 16px">{{(plan.name)}}</b>
                                         <p style="display: flex;margin-top: 10px">
                                             <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
                                             <b style="margin-top: 5px;font-size: 17px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
@@ -54,15 +108,16 @@
                                         </p>
                                     </div>
                                     <div v-else>
+                                        <b style="font-size: 16px">{{(plan.name)}}</b>
                                         <p style="display: flex;margin-top: 10px">
                                             <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
-                                            <b style="margin-top: 5px;font-size: 17px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
+                                               <b style="margin-top: 5px;font-size: 17px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
                                         </p>
                                     </div>
                                 </div>
                                 <div>
                                     <ul>
-                                        <li v-for="(feature, key) in features" :key="key" :class="activePlanClass(plan)" :style="activePlanStyle(plan)">
+                                        <li v-for="(feature, key) in features" :class="`${feature.value_type}__type__${feature.slug} feature__list feature__type__${feature.value_type}`" :key="key" :style="activePlanStyle(plan)">
                                             <div>
                                                 <template v-if="plan.features && plan.features[feature.uuid]" style="display: flex">
                                                     <template v-if="plan.features[feature.uuid].value_type === 'boolean'">
@@ -104,7 +159,6 @@
                     </carousel>
                 </template>
             </PLayoutSection>
-            <PlanBanners />
         </PLayout>
         <!--====================================================================-->
         <PStack v-if="onboard && !shop.has_plan" class="choose-plan-btn" alignment="center" distribution="center" vertical>
@@ -112,6 +166,7 @@
                 <PButton plain @click="activePlan">{{ ('I will choose the plan later') }}</PButton>
             </PStackItem>
         </PStack>
+        <PlanBanners />
     </PPage>
 </template>
 
@@ -134,16 +189,24 @@
     import {PDataTableRow} from "../polaris-vue/src/components/PDataTable/components/PDataTableRow";
     import {PIcon} from "../polaris-vue/src/components/PIcon";
     import {PTextStyle} from "../polaris-vue/src/components/PTextStyle";
+    import {PCard} from "../polaris-vue/src/components/PCard"
+    import {PCardSection} from "../polaris-vue/src/components/PCard/components/PCardSection"
+    import {PSkeletonPage} from "../polaris-vue/src/components/PSkeletonPage"
+    import {PSkeletonDisplayText} from "../polaris-vue/src/components/PSkeletonDisplayText"
+    import {PSkeletonBodyText} from "../polaris-vue/src/components/PSkeletonBodyText"
+    import {PEmptyState} from "../polaris-vue/src/components/PEmptyState"
     import {Carousel, Slide} from 'vue-carousel';
 
     export default {
         name: "AppManagerSliderPlan",
-        components: { Carousel, Slide, YearlyPlanPromotion, PlanBanners, PPage, PStack, PStackItem, PButton, PButtonGroup, PHeading, PLayout, PLayoutSection, PTextContainer, PDataTable, PDataTableCol, PDataTableRow, PIcon, PTextStyle },
+        components: { Carousel, Slide, YearlyPlanPromotion, PlanBanners, PPage, PStack, PStackItem, PButton, PButtonGroup, PHeading, PLayout, PLayoutSection, PTextContainer, PDataTable, PDataTableCol, PDataTableRow, PIcon, PTextStyle, PCardSection, PCard, PSkeletonDisplayText, PSkeletonBodyText, PSkeletonPage, PEmptyState },
         props: ['shop_domain'],
         data() {
             return {
-                perPage: 4,
+                slideLength : 0,
+                perPage: 0,
                 currentSlide: 0,
+                planLoading: false,
                 plan: {},
                 plans: [],
                 features: [],
@@ -253,7 +316,9 @@
                 element = document.querySelector(lastSlideClassName);
                 element.classList.add('last-slide')
 
-                document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
+                if (document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev')) {
+                    document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
+                }
             },
             activePlanStyle(plan) {
                 return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#f0f8f5', color: '#257f60'} : {}];
@@ -276,10 +341,10 @@
                     } else return feature.value
                 }
                 else if(feature?.value_type === 'array') {
-                    return JSON.parse(feature.value).join(',')
+                    return JSON.parse(feature.value).join(' ')
                 }
                 else if(feature?.value_type === 'string') {
-                    return feature.value
+                    return feature.value.replace('"', '').replace('"', '')
                 }
             },
             calculateDiscountedPrice(plan) {
@@ -317,14 +382,90 @@
                 });
             },
             async selectPlan(value){
-                this.selectedPlan= value;
-                setTimeout(function() {
-                    let element = document.querySelector('.slide-0');
-                    element.classList.add('first-slide')
-                    element = document.querySelector('.slide-3');
-                    element.classList.add('last-slide')
-                    document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
-                },400)
+                this.selectedPlan = value;
+                this.$nextTick(() => {
+
+                    this.slideLength = this.selectedPlan === 'monthly' ? this.monthlyPlan.length : this.yearlyPlan.length;
+                    this.perPage = this.slideLength >= 4 ? 4 : this.slideLength;
+
+                    // calculate and reset height of rows
+                    this.features.forEach((feature) => {
+                        let className = feature.value_type + '__type__' + feature.slug;
+                        let elements = document.querySelectorAll('.' + className);
+                        let maxHeight = 0;
+                        elements.forEach((item) => {
+                            item.style.minHeight = 'unset';
+                            if (maxHeight < item.offsetHeight) {
+                                maxHeight = item.offsetHeight
+                            }
+                        });
+                        elements.forEach((item) => {
+                            item.style.minHeight = maxHeight + 'px';
+                        });
+                    })
+
+                    // remove first-slide and last-slide classes
+                    let allSlides = document.getElementsByClassName('VueCarousel-slide');
+                    for (let i=0, max=allSlides.length; i < max; i++) {
+                        let slide = document.getElementById(allSlides[i].id);
+                        slide.classList.remove('first-slide')
+                        slide.classList.remove('last-slide')
+                    }
+
+                    // add first-slide and last-slide classes
+                    let pagesCount = this.slideLength;
+                    setTimeout(() => {
+                        let element = document.querySelector('.slide-0');
+                        if (element) {
+                            element.classList.add('first-slide')
+                            if (pagesCount < 4) {
+                                let lastSlideClass = '.slide-' + (pagesCount-1)
+                                element = document.querySelector(lastSlideClass);
+                                element.classList.add('last-slide')
+                            }
+                            else {
+                                element = document.querySelector('.slide-3');
+                                element.classList.add('last-slide')
+                            }
+                            if (document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev')) {
+                                document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
+                            }
+                        }
+                    }, 100)
+
+                });
+            },
+            async fetchFeatures() {
+                let {data} = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plan-features`).catch(error => {
+                    console.error(error)
+                });
+                if (data.features.length) {
+                    this.features = data.features;
+                    this.features = this.features?.filter((item) => item.hidden_feature !== true)
+                    this.features = this.features?.sort((featureA, featureB) => parseInt(featureA.display_order) - parseInt(featureB.display_order))
+                }
+            },
+            async fetchPlans() {
+                let {data} = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plans`, { params: { 'shop_domain': this.shop_domain } }).catch(error => {
+                    console.error(error)
+                });
+                if (data.plans.length) {
+                    this.plans = data.plans;
+                    this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
+
+                    if (this.plans[0].store_base_plan) {
+                        this.subtitleContent = 'App plans are based on your existing shopify plan';
+                    }
+
+                    this.plan = data.plan;
+                    if (this.plan?.interval === 'ANNUAL') {
+                        this.selectedPlan = 'annually'
+
+                    }
+                    this.shopify_plan = data.shopify_plan;
+                    this.default_plan_id = data.default_plan_id;
+                    this.onboard = !this.plan
+                }
             },
             headerClasses(firstColumn) {
                 return {
@@ -337,42 +478,77 @@
         },
         async mounted() {
 
-            const featuresData = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plan-features`).catch(error => {
-                console.error(error)
-            });
-            this.features = featuresData.data.features;
-            this.features = this.features.sort((featureA, featureB) => parseInt(featureA.display_order) - parseInt(featureB.display_order))
+            this.planLoading = true;
+            await this.fetchFeatures();
+            await this.fetchPlans();
+            this.planLoading = false;
 
-            const plansData = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plans`, { params: { 'shop_domain': this.shop_domain } }).catch(error => {
-                console.error(error)
-            });
-            this.plans = plansData.data.plans;
-            this.plans = this.plans.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
-            if (this.plans && this.plans[0].store_base_plan) {
-                this.subtitleContent = 'App plans are based on your existing shopify plan';
-            }
-            this.shopify_plan = plansData.data.shopify_plan;
-            this.plan = plansData.data.plan;
-            if (this.plan?.interval === 'ANNUAL') {
-                this.selectedPlan = 'annually'
-            }
-            this.default_plan_id = plansData.data.default_plan_id;
-            this.onboard = !this.plan
-        },
+            this.$nextTick(() => {
 
-        created() {
-            let initializeSliderComponent = setInterval(() => {
-                let element = document.querySelector('.slide-0');
-                if (element) {
-                    element.classList.add('first-slide')
-                    element = document.querySelector('.slide-3');
-                    element.classList.add('last-slide')
-                    document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
-                    clearInterval(initializeSliderComponent);
+                // calculate height of cell
+                setTimeout(() => {
+
+                    let elements = document.querySelectorAll('.plan__price');
+                    let maxHeight = 0;
+                    elements.forEach((item) => {
+                        item.style.minHeight = 'unset';
+                        if (maxHeight < item.offsetHeight) {
+                            maxHeight = item.offsetHeight
+                        }
+                    });
+                    elements.forEach((item) => {
+                        item.style.minHeight = maxHeight + 'px';
+                    });
+
+                    this.features.forEach((feature) => {
+                        let className = feature.value_type + '__type__' + feature.slug;
+                        elements = document.querySelectorAll('.' + className);
+                        maxHeight = 0;
+                        elements.forEach((item) => {
+                            if (maxHeight < item.offsetHeight) {
+                                maxHeight = item.offsetHeight
+                            }
+                        });
+                        elements.forEach((item) => {
+                            item.style.minHeight = maxHeight + 'px';
+                        });
+                    })
+                }, 100);
+
+                // remove fist-slide and last-slide classes from all slides
+                let allSlides = document.getElementsByClassName('VueCarousel-slide');
+                for (let i=0, max=allSlides.length; i < max; i++) {
+                    let slide = document.getElementById(allSlides[i].id);
+                    slide.classList.remove('first-slide')
+                    slide.classList.remove('last-slide')
                 }
-            }, 100);
-        },
 
+                // add first-slide and last-slide
+                this.slideLength = this.selectedPlan === 'monthly' ? this.monthlyPlan.length : this.yearlyPlan.length;
+                this.perPage = this.slideLength >= 4 ? 4 : this.slideLength;
+
+                let pagesCount = this.slideLength;
+                setTimeout(() => {
+                    let element = document.querySelector('.slide-0');
+                    if (element) {
+                        element.classList.add('first-slide')
+                        if (pagesCount < 4) {
+                            let lastSlideClass = '.slide-' + (pagesCount-1)
+                            element = document.querySelector(lastSlideClass);
+                            element.classList.add('last-slide')
+                        }
+                        else {
+                            element = document.querySelector('.slide-3');
+                            element.classList.add('last-slide')
+                        }
+                        if (document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev')) {
+                            document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
+                        }
+                    }
+                }, 100)
+
+            });
+        },
     }
 </script>
 
@@ -380,83 +556,100 @@
 
     @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
 
-    .app-manager .app-manager-plan-page ul
+    .app-manager .app-manager-plan-page-slider ul
     {
         list-style: none;
         margin: 0;
         padding: 0;
     }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li,
-    .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li,
-    .app-manager .app-manager-plan-page .plan__price
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,
+    .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li,
+    .app-manager .app-manager-plan-page-slider .plan__price
     {
         padding: 16px 16px 16px 20px;
     }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li,
-    .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li:not(:last-child),
-    .app-manager .app-manager-plan-page .Polaris-Layout.custom-plan .VueCarousel .plan__price
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,
+    .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:not(:last-child),
+    .app-manager .app-manager-plan-page-slider .Polaris-Layout.custom-plan .VueCarousel .plan__price
     {
         border-top: 1px solid #dddddd;
         border-right: 1px solid #dddddd;
         background: #fff;
     }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li{
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li{
         border-right: none;
         border-left: 1px solid #dddddd;
     }
-    .app-manager .app-manager-plan-page .plan__price{
+    /*.app-manager .app-manager-plan-page-slider .plan__price{
         min-height:121px;
-    }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:last-child,
-    .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li:nth-last-child(2)
+    }*/
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child,
+    .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:nth-last-child(2)
     {
         border-bottom: 1px solid #dddddd;
     }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:first-child
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:first-child
     {
         border-top-left-radius: 12px;
     }
-    .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:last-child
+    .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child
     {
         border-bottom-left-radius: 12px;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide ul li:not(:last-child)
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide ul li:not(:last-child)
     {
         border-left: 1px solid #dddddd;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide .plan__price
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide .plan__price
     {
         border-left: 1px solid #dddddd;
         box-shadow: none;
         border-top-left-radius: 12px;
         overflow: hidden;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide ul li:nth-last-child(2)
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide ul li:nth-last-child(2)
     {
         border-bottom-right-radius: 12px;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price
     {
         border-right: 1px solid #dddddd;
         box-shadow: none;
         border-top-right-radius: 12px;
         overflow: hidden;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide
     {
         border-top-right-radius: 12px;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide
     {
         border-top-left-radius: 12px;
     }
-    .app-manager .app-manager-plan-page .VueCarousel .VueCarousel-inner li
+    .app-manager .app-manager-plan-page-slider .VueCarousel .VueCarousel-inner li
     {
         text-align: center;
     }
-    .app-manager .app-manager-plan-page .VueCarousel-navigation-button
+    .app-manager .app-manager-plan-page-slider .VueCarousel-navigation-button
     {
         color: #257f60;
     }
+    .app-manager .app-manager-plan-page-slider .btn-group .Polaris-ButtonGroup__Item
+    {
+        margin-left: 0px !important;
+        z-index: unset !important;
+    }
+    .app-manager .app-manager-plan-page-slider .feature__list,
+    .app-manager .app-manager-plan-page-slider .feature__type__array
+    {
+        display: flex;
+        align-items: center;
+        word-spacing: 999px;
+        justify-content: center;
+    }
+    .app-manager .app-manager-plan-page-slider .feature__type__array.feature__class
+    {
+        justify-content: left;
+    }
 
 </style>

package/src/components/polaris-vue/src/components/PSkeletonBodyText/PSkeletonBodyText.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
+    <div v-for="(line, i) in lines" :key="i" class="Polaris-SkeletonBodyText"/>
+  </div>
+</template>
+
+<script>
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Skeleton body text is used to provide a low fidelity representation of content before it appears on the
+ *  page, and improves load times perceived by merchants. Can be used for content in or outside of a card.</h4>
+ */
+export default {
+  name: 'PSkeletonBodyText',
+  props: {
+    /**
+     * Number of line of skeleton
+     */
+    lines: {
+      type: Number,
+      default: 3
+    }
+  }
+}
+</script>

package/src/components/polaris-vue/src/components/PSkeletonDisplayText/PSkeletonDisplayText.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="className"></div>
+</template>
+
+<script>
+import { classNames, variationName } from '../../utilities/css';
+import StringValidator from '../../utilities/validators/StringValidator';
+
+const Size = ['small', 'medium', 'large', 'extraLarge'];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Skeleton display text is used to provide a low fidelity representation of content before it appears on
+ *  the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.</h4>
+ */
+export default {
+  name: 'PSkeletonDisplayText',
+  props: {
+    /**
+     * Size of Skeleton.
+     */
+    size: {
+      type: String,
+      default: 'medium',
+      ...StringValidator('size', Size)
+    }
+  },
+  computed: {
+    className() {
+      return classNames(
+          'Polaris-SkeletonDisplayText__DisplayText',
+          this.size && `Polaris-SkeletonDisplayText--${variationName('size', this.size)}`,
+      );
+    }
+  },
+}
+</script>