Merge pull request #52 from HulkApps/changelog

New Components & Improvements

Author: uttam-praella

.storybook/preview.js

@@ -2,18 +2,21 @@ import '!style-loader!css-loader!sass-loader!../src/scss/main.scss';
 import '!style-loader!css-loader!sass-loader!./styles/docs.scss';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import PToast from '../src/components/PToast/index';
 
 Vue.use(VueRouter);
 Vue.component('router-link', Vue.component('RouterLink'));
 
+Vue.use(PToast);
+
 export const decorators = [(story) => ({
   components: {story},
   template: '<story />',
   router: new VueRouter()
 })];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { disable: true },
   controls: {
     matchers: {
       color: /(background|color|backgroundColor)$/i,
@@ -26,6 +29,7 @@ export const parameters = {
       method: "alphabetical",
       order: [
         "Introduction",
+        "Changelog",
         "Actions",
         "Structure",
         "Forms",

package-lock.json

@@ -38,6 +38,7 @@
     "change-case": "^4.1.1",
     "core-js": "^3.3.2",
     "dayjs": "^1.10.4",
+    "mitt": "^3.0.0",
     "v-click-outside": "^3.0.1",
     "vue": "^2.6.10",
     "vue-apexcharts": "^1.6.1",
@@ -46,6 +47,7 @@
     "vue-multiselect": "^2.1.6",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.5.1",
+    "vue-toast-notification": "^0.6.2",
     "vue2-daterange-picker": "^0.6.5"
   },
   "files": [

package.json

@@ -23,12 +23,12 @@ class ComponentHelpers {
 
 
     makeComponentClass(componentName, properties, state) {
-        var classes = {};
+        let classes = {};
         classes[componentName] = true;
 
-        for (var prop of properties) {
-            var value = state[prop];
-            var valueTag = '';
+        for (let prop of properties) {
+            let value = state[prop];
+            let valueTag = '';
             if (value && typeof value === 'string') {
                 valueTag = value.charAt(0).toUpperCase() + value.slice(1);
             }
@@ -43,10 +43,10 @@ class ComponentHelpers {
             return false;
         }
 
-        var nodeComponentTagName = node.componentOptions.tag;
-        var componentTagName = this.getComponentName(component.polarisName);
+        let nodeComponentTagName = node.componentOptions.tag;
+        let componentTagName = this.getComponentName(component.name);
 
-        return nodeComponentTagName == componentTagName;
+        return nodeComponentTagName === componentTagName;
     }
 
     getComponentName(polarisName) {
@@ -66,7 +66,7 @@ class ComponentHelpers {
     }
 
     wrapNodesWithComponent(createElement, nodes, component, ignoredComponents = []) {
-        var children = [];
+        let children = [];
         for (let node of nodes) {
             if (!node.tag && !node.text.trim()) {
                 continue;

src/ComponentHelpers.js

@@ -1,31 +1,35 @@
 <script lang="tsx">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import {PFormLayoutItem} from '@/components/PFormLayout/index';
+import {Component, Vue, Prop} from 'vue-property-decorator';
+import {PFormLayoutItem, PFormLayoutGroup} from '@/components/PFormLayout/index';
 import ComponentHelpers from '../../ComponentHelpers';
 
 @Component({
 
-    components: {
-        PFormLayoutItem,
-    },
+  components: {
+    PFormLayoutItem,
+    PFormLayoutGroup,
+  },
 })
 export default class PFormLayout extends Vue {
 
-    /**
-     * Id for the element
-     */
-    @Prop({type: String, default: 'PFormLayout'}) public id!: string;
+  /**
+   * Id for the element
+   */
+  @Prop({type: String, default: 'PFormLayout'}) public id!: string;
 
-    public render(createElement: any) {
-        return createElement('div', {
+  public render(createElement: any) {
+    return createElement('div', {
           class: 'Polaris-FormLayout',
           attrs: {
             id: this.id,
           },
         },
-        ComponentHelpers.wrapNodesWithComponent(createElement,
-            this.$slots.default, PFormLayoutItem),
-        );
-    }
+        ComponentHelpers.wrapNodesWithComponent(
+            createElement,
+            this.$slots.default,
+            PFormLayoutItem,
+            [PFormLayoutGroup]),
+    );
+  }
 }
 </script>

src/components/PFormLayout/PFormLayout.vue

@@ -1,8 +1,9 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+<!--- PIcon.stories.mdx -->
+
+import { Meta, Story, Preview, Props, ArgsTable } from '@storybook/addon-docs';
 import PIcon from './PIcon.vue';
-import { ArgsTable } from '@storybook/addon-docs';
 
-<Meta title="MDX|Icon" component={PIcon} />
+<Meta title="MDX/Icon" component={PIcon} />
 
 # Icon
 
@@ -11,4 +12,4 @@ import { ArgsTable } from '@storybook/addon-docs';
 
 ```
 
-<Props of={PIcon} />
+<ArgsTable />

src/components/PIcon/PIcon.mdx

@@ -1,6 +1,6 @@
 import PIcon from './PIcon';
 import ShopifyIcons from './ShopifyIcons';
-import IconMDX from './PIcon.mdx';
+import PIconMDX from './PIcon.mdx';
 
 export default {
     title: 'Images & Icons / Icon',
@@ -10,13 +10,13 @@ export default {
             showPanel: false,
         },
         controls: {
-            disabled: true,
+            disable: true,
         },
         actions: {
-            disabled: true,
+            disable: true,
         },
         docs: {
-            page: IconMDX,
+            page: PIconMDX,
         },
     },
 }

src/components/PIcon/PIcon.stories.js

@@ -78,13 +78,14 @@ export default class PIcon extends Vue {
 
   /**
    * Icon color
+   * @values true | false
    */
   @Prop({type: String, default: null}) public color!: Color;
 
   /**
    * Show a backdrop behind the icon
    *
-   * @description true | false
+   * @values true | false
    */
   @Prop({type: Boolean, default: false}) public backdrop!: boolean;