Merge remote-tracking branch 'origin/dev'

Author: juzser

.storybook/stories/Faqs.stories.mdx

@@ -23,6 +23,13 @@ At this moment, you should add the property `skipLibCheck: true` to **tsconfig.j
 This will skip the check for missing declaration types.
 We will try to fix this issue in the future.
 
+<br/>
+
+#### **CSS Variables & Polaris Tokens**
+
+All tokens & variables are following the [Polaris Design Tokens](https://polaris.shopify.com/tokens/all-tokens).
+Feel free to change the variables, based on your project scheme.
+
 
 
 

.storybook/stories/GetStarted.stories.mdx

@@ -26,7 +26,7 @@ Polaris Vue by Qikify is a component library for [Vue 3](https://vuejs.org/) bas
 
 Polaris Vue by qikify only supports **Vue 3.0+**.
 
-**Follow Polaris React version:** [9.4.0](https://github.com/Shopify/polaris/releases/tag/v9.4.0) - Migrated date: *Apr 9th, 2022*.
+**Follow Polaris React version:** [9.5.0](https://github.com/Shopify/polaris/releases/tag/v9.5.0) - Migrated date: *Apr 23rd, 2022*.
 
 <br/>
 <br/>

README.md

@@ -5,7 +5,7 @@ Polaris Vue by qikify only supports **Vue 3.0+**.
 Polaris Vue by Qikify based on [Shopify Polaris style guide](https://polaris.shopify.com/), built especially for Vue 3.
 We're trying to make it mostly close with Shopify style guide and get a better performance.
 
-**Follow Polaris React version:** [9.4.0](https://github.com/Shopify/polaris/releases/tag/v9.4.0) - Migrated date: *Apr 9th, 2022*.
+**Follow Polaris React version:** [9.5.0](https://github.com/Shopify/polaris/releases/tag/v9.5.0) - Migrated date: *Apr 23rd, 2022*.
 
 <br/>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qikify/polaris-vue",
-  "version": "0.5.10",
-  "polaris_version": "9.4.0",
+  "version": "0.6.0",
+  "polaris_version": "9.5.0",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": {
     "name": "Qikify"
@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.18.4",
-    "lodash": "^4.17.21",
     "vite-svg-loader": "^3.1.2",
     "vue": "^3.2.31"
   },
@@ -51,7 +50,6 @@
     "@storybook/builder-vite": "^0.1.23",
     "@storybook/theming": "^6.4.20",
     "@storybook/vue3": "^6.4.20",
-    "@types/lodash": "^4.14.178",
     "@types/node": "^16.11.25",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vue/eslint-config-prettier": "^7.0.0",

src/classes/AccountConnection.json

@@ -0,0 +1 @@
+{"TermsOfService":"Polaris-AccountConnection__TermsOfService","Content":"Polaris-AccountConnection__Content"}

src/classes/Badge-Pip.json

@@ -0,0 +1 @@
+{"Pip":"Polaris-Badge-Pip","statusSuccess":"Polaris-Badge-Pip--statusSuccess","statusInfo":"Polaris-Badge-Pip--statusInfo","statusAttention":"Polaris-Badge-Pip--statusAttention","statusWarning":"Polaris-Badge-Pip--statusWarning","statusCritical":"Polaris-Badge-Pip--statusCritical","progressIncomplete":"Polaris-Badge-Pip--progressIncomplete","progressPartiallyComplete":"Polaris-Badge-Pip--progressPartiallyComplete","progressComplete":"Polaris-Badge-Pip--progressComplete"}

src/classes/Badge.json

@@ -1 +1 @@
-{"Badge":"Polaris-Badge","sizeSmall":"Polaris-Badge--sizeSmall","statusSuccess":"Polaris-Badge--statusSuccess","statusInfo":"Polaris-Badge--statusInfo","statusAttention":"Polaris-Badge--statusAttention","statusWarning":"Polaris-Badge--statusWarning","statusCritical":"Polaris-Badge--statusCritical","statusNew":"Polaris-Badge--statusNew","Pip":"Polaris-Badge__Pip","progressIncomplete":"Polaris-Badge--progressIncomplete","progressPartiallyComplete":"Polaris-Badge--progressPartiallyComplete","progressComplete":"Polaris-Badge--progressComplete","withinFilter":"Polaris-Badge--withinFilter","Icon":"Polaris-Badge__Icon"}
+{"Badge":"Polaris-Badge","sizeSmall":"Polaris-Badge--sizeSmall","statusSuccess":"Polaris-Badge--statusSuccess","statusInfo":"Polaris-Badge--statusInfo","statusAttention":"Polaris-Badge--statusAttention","statusWarning":"Polaris-Badge--statusWarning","statusCritical":"Polaris-Badge--statusCritical","statusNew":"Polaris-Badge--statusNew","withinFilter":"Polaris-Badge--withinFilter","Icon":"Polaris-Badge__Icon","PipContainer":"Polaris-Badge__PipContainer"}

src/classes/Banner.json

@@ -0,0 +1 @@
+{"Banner":"Polaris-Banner","statusCritical":"Polaris-Banner--statusCritical","PrimaryAction":"Polaris-Banner__PrimaryAction","Button":"Polaris-Banner__Button","statusWarning":"Polaris-Banner--statusWarning","statusInfo":"Polaris-Banner--statusInfo","statusSuccess":"Polaris-Banner--statusSuccess","ContentWrapper":"Polaris-Banner__ContentWrapper","withinContentContainer":"Polaris-Banner--withinContentContainer","Dismiss":"Polaris-Banner__Dismiss","Ribbon":"Polaris-Banner__Ribbon","keyFocused":"Polaris-Banner--keyFocused","Actions":"Polaris-Banner__Actions","withinPage":"Polaris-Banner--withinPage","hasDismiss":"Polaris-Banner--hasDismiss","Heading":"Polaris-Banner__Heading","Content":"Polaris-Banner__Content","SecondaryAction":"Polaris-Banner__SecondaryAction","Text":"Polaris-Banner__Text","pressed":"Polaris-Banner--pressed","loading":"Polaris-Banner--loading","Spinner":"Polaris-Banner__Spinner"}

src/classes/MediaCard.json

@@ -0,0 +1 @@
+{"MediaCard":"Polaris-MediaCard","portrait":"Polaris-MediaCard--portrait","MediaContainer":"Polaris-MediaCard__MediaContainer","sizeSmall":"Polaris-MediaCard--sizeSmall","InfoContainer":"Polaris-MediaCard__InfoContainer","Popover":"Polaris-MediaCard__Popover","Heading":"Polaris-MediaCard__Heading","PrimaryAction":"Polaris-MediaCard__PrimaryAction","SecondaryAction":"Polaris-MediaCard__SecondaryAction","ActionContainer":"Polaris-MediaCard__ActionContainer"}

src/components/AccountConnection/AccountConnection.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+Card(sectioned)
+  SettingAction
+    template(#action)
+      ButtonFrom(
+        v-if="action",
+        :action="action",
+        :overrides="{ primary: !connected }",
+      )
+    template(#setting)
+      Stack
+        Avatar(
+          v-if="connected",
+          accessibilityLabel="",
+          :name="accountName",
+          :initials="initials",
+          :source="avatarUrl",
+        )
+        StackItem(fill)
+          div(:class="styles.Content")
+            div(v-if="title || hasSlot(slots.title)")
+              template(v-if="hasSlot(slots.title)")
+                slot(name="title")
+              template(v-else)
+                | {{ title }}
+            div(v-else-if="accountName") {{ accountName }}
+            div(v-if="details || hasSlot(slots.details)")
+              TextStyle(variation="subdued")
+                template(v-if="hasSlot(slots.details)")
+                  slot(name="details")
+                template(v-else)
+                  | {{ details }}
+  div(v-if="termsOfService || hasSlot(slots.termsOfService)", :class="styles.TermsOfService")
+    template(v-if="hasSlot(slots.termsOfService)")
+      slot(name="termsOfService")
+    template(v-else)
+      | {{ termsOfService }}
+</template>
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import type { Action } from '@/utilities/type';
+import { hasSlot } from '@/utilities/has-slot';
+import { Avatar, ButtonFrom, Card, Stack, StackItem, TextStyle, SettingAction } from '@/components';
+import styles from '@/classes/AccountConnection.json';
+
+interface AccountConnectionProps {
+  /** Content to display as title */
+  title?: string;
+  /** Content to display as additional details */
+  details?: string;
+  /** Content to display as terms of service */
+  termsOfService?: string;
+  /** The name of the service */
+  accountName?: string;
+  /** URL for the user’s avatar image */
+  avatarUrl?: string;
+  /** Set if the account is connected */
+  connected?: boolean;
+  /** Action for account connection */
+  action?: Action;
+}
+
+const props = withDefaults(defineProps<AccountConnectionProps>(), {
+  connected: false,
+  accountName: '',
+});
+
+const slots = useSlots();
+
+const initials = computed(() => {
+  return props.accountName
+    ? props.accountName
+      .split(/\s+/)
+      .map((name) => name[0])
+      .join('')
+    : undefined
+});
+</script>
+<style lang="scss">
+@import 'polaris/polaris-react/src/components/AccountConnection/AccountConnection.scss';
+</style>