@hulkapps/app-manager-vue 1.0.0 → 2.0.0

package/src/components/polaris-vue/src/components/PActionMenu/components/PActionMenuMenuGroup/PActionMenuMenuGroup.vue

@@ -0,0 +1,54 @@
+<template>
+    <PPopover :id="`Popover${this['_uid']}`" :active="Boolean(active)" preferredAlignment="left" hideOnPrint @close="handleClose">
+        <PActionMenuMenuAction slot="activator" disclosure :content="title" :getOffsetWidth="getOffsetWidth" :icon="icon" :onAction="handleOpen" />
+        <PActionList slot="content" :items="actions" @item-action="handleClose" />
+        <div v-if="$slots.details" class="">
+            <slot name="details" />
+        </div>
+    </PPopover>
+</template>
+
+<script>
+import {MenuGroupDescriptor, ActionListItemDescriptor} from '../../../../types';
+import {PActionList} from '../../../../components/PActionList';
+import {PPopover} from '../../../../components/PPopover';
+import { PActionMenuMenuAction } from '../../../../components/PActionMenu/components/PActionMenuMenuAction';
+import ArrayValidator from '../../../../utilities/validators/ArrayValidator';
+
+export default {
+  name: 'PActionMenuMenuGroup',
+  components: {
+    PPopover, PActionList, PActionMenuMenuAction,
+  },
+  props: {
+    active: {
+      type: Boolean
+    },
+    title: {
+      type: String
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    onAction: {
+      type: Function,
+    },
+    getOffsetWidth: {
+      type: Function,
+    },
+    actions: {
+      type: Array,
+      ...ArrayValidator('actions', ActionListItemDescriptor)
+    }
+  },
+  methods: {
+    handleClose() {
+      this.onAction(this.title);
+    },
+    handleOpen() {
+      this.$emit('open', this.title);
+    }
+  },
+}
+</script>

package/src/components/polaris-vue/src/components/PActionMenu/components/PActionMenuRollupActions/PActionMenuRollupActions.vue

@@ -0,0 +1,43 @@
+<template>
+   <PPopover :id="`Popover${this['_uid']}`" :active="rollupOpen" preferredAlignment="right" @close="toggleRollupOpen" hideOnPrint>
+       <div slot="activator" class="Polaris-ActionMenu-RollupActions__RollupActivator">
+           <PButton :plain="true" :outline="false" icon="HorizontalDotsMinor" type="button" @click="toggleRollupOpen" />
+       </div>
+       <PActionList slot="content" :items="items" :sections="sections" @item-action="toggleRollupOpen" />
+   </PPopover>
+</template>
+
+<script>
+import {ActionListSection, ActionListItemDescriptor } from '../../../../types';
+import {PPopover} from '../../../../components/PPopover';
+import {PButton} from '../../../../components/PButton';
+import {PActionList} from '../../../../components/PActionList';
+import ArrayValidator from '../../../../utilities/validators/ArrayValidator';
+
+export default {
+  name: 'PActionMenuRollupActions',
+  components: {
+    PPopover, PButton, PActionList,
+  },
+  props: {
+    items: {
+      type: Array,
+      ...ArrayValidator('items', ActionListItemDescriptor)
+    },
+    sections: {
+      type: Array,
+      ...ArrayValidator('sections', ActionListSection)
+    }
+  },
+  data() {
+    return {
+      rollupOpen: false,
+    }
+  },
+  methods: {
+    toggleRollupOpen() {
+      this.rollupOpen = !this.rollupOpen;
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+    <span role="img" :class="className">
+        <span v-if="!hasImage" class="Polaris-Avatar__Initials">
+            <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
+                <path v-if="customer || !initials" fill="currentColor"
+                      d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"/>
+                <text v-else x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20"
+                      text-anchor="middle">{{ initials }}</text>
+            </svg>
+        </span>
+        <PImage v-if="source && status !== 'ERRORED'" class="Polaris-Avatar__Image" :source="source" alt=""
+                role="presentation"/>
+    </span>
+</template>
+
+<script>
+    import { classNames, variationName } from '../../utilities/css';
+    import { PImage } from '../../components/PImage';
+
+    const Status = {
+        Pending: 'PENDING',
+        Loaded: 'LOADED',
+        Errored: 'ERRORED',
+    };
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Avatars are used to show a thumbnail representation of an individual or business in the interface.
+     *  </h4>
+     */
+    export default {
+        name: 'PAvatar',
+        components: {
+            PImage,
+        },
+        props: {
+            /**
+             * Size of avatar
+             */
+            size: {
+                type: String,
+                default: 'medium',
+                validator: function (value) {
+                    return ['small', 'medium', 'large'].indexOf(value) !== -1;
+                },
+            },
+            /**
+             * Whether the avatar is for a customer
+             */
+            customer: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Name for the person
+             */
+            name: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Initials of person to display
+             */
+            initials: {
+                type: String,
+                default: null,
+            },
+            /**
+             * URL of the avatar image which falls back to initials if the image fails to load
+             */
+            source: {
+                type: String,
+                default: null,
+            },
+        },
+        data() {
+            return {
+                status: Status.Pending,
+                nameString: this.name || this.initials,
+            };
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Avatar',
+                    this.size && `Polaris-Avatar--${variationName('size', this.size)}`,
+                    !this.customer && `Polaris-Avatar--${variationName('style', this.styleClass(this.nameString))}`,
+                    (this.hasImage || (this.initials && this.initials.length === 0)) && status !== Status.Loaded && 'Polaris-Avatar--hidden',
+                    this.hasImage && 'Polaris-Avatar--hasImage',
+                );
+            },
+            hasImage() {
+                return this.source && this.status !== Status.Errored;
+            },
+        },
+        methods: {
+            styleClass(name) {
+                const finalStyleClasses = ['one', 'two', 'three', 'four', 'five'];
+                return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
+            },
+        },
+    }
+</script>

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

@@ -0,0 +1,86 @@
+<template>
+  <span :class="className" :style="{'background-color': background, 'color': color}">
+    <span v-if="progress" class="Polaris-Badge__Pip">
+      <span class="Polaris-VisuallyHidden">{{ progress }}</span>
+    </span>
+    <span class="Polaris-Badge__Content">
+      <!-- @slot The content to display inside the badge -->
+      <slot/>
+    </span>
+  </span>
+</template>
+
+<script>
+    import { classNames, variationName } from '../../utilities/css';
+    import StringValidator from '../../utilities/validators/StringValidator';
+
+    const Status = ['success', 'info', 'attention', 'warning', 'new', 'critical', null, ''];
+    const Progress = ['incomplete', 'partiallyComplete', 'complete', null, ''];
+    const Size = ['small', 'medium'];
+
+    const DEFAULT_SIZE = 'medium';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Badges are used to inform merchants of the status of an object or of an action that’s been taken.
+     *  </h4>
+     */
+    export default {
+        name: 'PBadge',
+        props: {
+          /**
+           * Set the color of the badge for the given status.
+           */
+          status: {
+            type: String,
+            default: null,
+            ...StringValidator('status', Status)
+          },
+
+          /**
+           * Render a pip showing the progress of a given task.
+           */
+          progress: {
+            type: String,
+            default: null,
+            ...StringValidator('progress', Progress)
+          },
+
+          /**
+           * Set Background color.
+           */
+          background: {
+            type: String,
+            default: null,
+          },
+
+          /**
+           * Set font color.
+           */
+          color: {
+            type: String,
+            default: null,
+          },
+
+          /**
+           * Set size of badge.
+           */
+          size: {
+            type: String,
+            default: 'medium',
+            ...StringValidator('size', Size)
+          }
+        },
+        computed: {
+          className() {
+              return classNames(
+                  'Polaris-Badge',
+                  !this.color && !this.background && this.status && `Polaris-Badge--${variationName('status', this.status)}`,
+                  this.progress && `Polaris-Badge--${variationName('progress', this.progress)}`,
+                  this.size && this.size !== DEFAULT_SIZE && `Polaris-Badge--${variationName('size', this.size)}`,
+              );
+          }
+        }
+    }
+</script>

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

@@ -0,0 +1,132 @@
+<template>
+  <div :class="className">
+    <div v-if="isDismissable" class="Polaris-Banner__Dismiss">
+      <!--
+        Triggered to dismiss the banner
+        @event dismiss
+      -->
+      <PButton
+        plain
+        icon="CancelSmallMinor"
+        @click="$emit('dismiss', $event)">
+      </PButton>
+    </div>
+    <div class="Polaris-Banner__Ribbon">
+      <PIcon
+        :source="colorAndIcon.icon"
+        :color="colorAndIcon.color" />
+    </div>
+    <div class="Polaris-Banner__ContentWrapper">
+      <div v-if="title" class="Polaris-Banner__Heading">
+        <PHeading element="p">{{ title }}</PHeading>
+      </div>
+      <div class="Polaris-Banner__Content">
+        <!-- @slot The content to display inside the badge -->
+        <slot/>
+        <div v-if="Object.keys(action).length > 0" class="Polaris-Banner__Actions">
+          <PButtonGroup>
+            <div class="Polaris-Banner__PrimaryAction">
+              <PButtonsFrom :actions="action" :overrides="{ outline: true }"/>
+            </div>
+          </PButtonGroup>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { classNames, variationName } from '../../utilities/css';
+
+import { PIcon } from '../../components/PIcon';
+import { PButton } from '../../components/PButton';
+import { PHeading } from '../../components/PHeading';
+import { PButtonGroup } from '../../components/PButtonGroup';
+import { PButtonsFrom } from '../../components/PButton/components/PButtonsFrom';
+
+import StringValidator from '../../utilities/validators/StringValidator';
+
+const BannerStatus = ['success', 'info', 'warning', 'critical', null];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Informs merchants about important changes or persistent conditions. Use this component if you need to
+ *  communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and
+ *  below the page or section header.</h4>
+ */
+
+export default {
+  name: 'PBanner',
+  components: {
+    PIcon, PButton, PHeading, PButtonGroup, PButtonsFrom,
+  },
+  props: {
+    /**
+     * Title content for the banner.
+     */
+    title: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Set the status of the banner
+     */
+    status: {
+      type: String,
+      default: null,
+      ...StringValidator('status', BannerStatus)
+    },
+
+    /**
+     * Action of the banner
+     */
+    action: {
+      type: Object,
+      default: () => ({}),
+    }
+  },
+  computed: {
+    className() {
+      return classNames(
+          'Polaris-Banner',
+          'Polaris-Banner--withinPage',
+          this.isDismissable && 'Polaris-Banner--hasDismiss',
+          this.status && `Polaris-Banner--${variationName('status', this.status)}`,
+      );
+    },
+    isDismissable() {
+      return this.$listeners && this.$listeners.dismiss;
+    },
+    colorAndIcon() {
+      let color;
+      let icon;
+
+      switch (this.status) {
+        case 'success':
+          color = 'success';
+          icon = 'CircleTickMajor';
+          break;
+        case 'info':
+          color = 'highlight';
+          icon = 'CircleInformationMajor';
+          break;
+        case 'warning':
+          color = 'warning';
+          icon = 'CircleAlertMajor';
+          break;
+        case 'critical':
+          color = 'critical';
+          icon = 'DiamondAlertMajor';
+          break;
+        default:
+          color = 'base';
+          icon = 'CircleInformationMajor';
+      }
+
+      return { color, icon };
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,99 @@
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PUnstyledLink } from '../../components/PUnstyledLink';
+    import { PIcon } from '../../components/PIcon';
+    import ArrayValidator from '../../utilities/validators/ArrayValidator';
+
+    const PBreadcrumbsProps = {
+        content: [String, Object],
+        url: String,
+        to: [String, Object],
+        accessibilityLabel: String,
+        onAction: Function,
+    }
+
+    export default {
+        name: 'PBreadcrumbs',
+        components: {
+            PUnstyledLink, PIcon,
+        },
+        props: {
+            /**
+             * Collection of breadcrumbs
+             */
+            breadcrumbs: {
+                type: Array,
+                default: () => ([]),
+                ...ArrayValidator('breadcrumbs', PBreadcrumbsProps),
+            },
+        },
+        render(h) {
+            const breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+            if (breadcrumb == null) {
+                return null;
+            }
+
+            const {content} = breadcrumb;
+            const {onAction} = breadcrumb;
+
+            const contentMarkup = this.$createElement('span', {
+                class: 'Polaris-Breadcrumbs__ContentWrapper',
+            }, [
+                this.$createElement('span', {
+                    class: 'Polaris-Breadcrumbs__Icon',
+                }, [
+                    this.$createElement(PIcon, {
+                        attrs: {
+                            source: 'ChevronLeftMinor',
+                        },
+                    }),
+                ]),
+                this.$createElement('span', {
+                    class: 'Polaris-Breadcrumbs__Content',
+                }, content),
+            ]);
+
+            const breadcrumbClassNames = classNames(
+                'Polaris-Breadcrumbs__Breadcrumb',
+            );
+
+            const breadcrumbMarkup =
+                'url' in breadcrumb || 'to' in breadcrumb ? (
+                    this.$createElement(PUnstyledLink, {
+                        class: breadcrumbClassNames,
+                        attrs: {
+                            key: content,
+                            url: breadcrumb.url,
+                            to: breadcrumb.to,
+                            ariaLabel: breadcrumb.accessibilityLabel,
+                        },
+                        nativeOn: {
+                            // tslint:disable-next-line:no-empty
+                            click: onAction ? onAction : () => {
+                            },
+                        },
+                    }, [contentMarkup])
+                ) : (
+                    this.$createElement('button', {
+                        class: breadcrumbClassNames,
+                        attrs: {
+                            key: content,
+                            type: 'button',
+                            ariaLabel: breadcrumb.accessibilityLabel,
+                        },
+                        on: {
+                            // tslint:disable-next-line:no-empty
+                            click: onAction ? onAction : () => {
+                            },
+                        },
+                    }, [contentMarkup])
+                );
+
+            return this.$createElement('nav', {
+                attrs: {
+                    role: 'navigation',
+                },
+            }, [breadcrumbMarkup]);
+        },
+    }
+</script>