component spinner

src/Demo.vue

@@ -5,21 +5,18 @@
     list-item Red
     list-item Blue
 
-  icon(source="CirclePlusMinor")
+  icon(:source="icon")
+  spinner
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { List, ListItem, Icon } from './polaris-vue';
+import CirclePlusMinor from '@icons/CirclePlusMinor.svg';
 
-@Component({
-  components: {
-    List,
-    ListItem,
-    Icon,
-  },
-})
-export default class Demo extends Vue {}
+@Component
+export default class Demo extends Vue {
+  public icon = CirclePlusMinor;
+}
 </script>
 
 <style lang="scss">

src/classes/Spinner.json

@@ -0,0 +1 @@
+{"Spinner":"Polaris-Spinner","loading":"Polaris-Spinner--loading","sizeSmall":"Polaris-Spinner--sizeSmall","sizeLarge":"Polaris-Spinner--sizeLarge"}

src/components/Spinner/README.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Spinner } from '@/polaris-vue';
+
+<Meta
+  title="Components / Feedback indicators / Spinner"
+  component={ Spinner }
+  argTypes={{
+    accessibilityLabel: {
+      table: {
+        type: { summary: null },
+      },
+    },
+    hasFocusableParent: {
+      table: {
+        type: { summary: null },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'Size of Spinner',
+      options: [
+        'large',
+        'small',
+      ],
+      control: { type: 'select' },
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: null,
+        },
+      },
+    },
+    default: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Spinner},
+  template: `<Spinner v-bind="$props"/>`,
+});
+
+# Spinner
+
+Spinners are used to notify merchants that their action is being processed. For loading states, spinners should only be used for content that can’t be represented with skeleton loading components, like for data charts.
+
+<Canvas>
+  <Story name="Spinner">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Spinner" />

src/components/Spinner/Spinner.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+div
+  span(:class="className")
+    SpinnerIconLarge(v-if="size === 'large'")
+    SpinnerIconSmall(v-else)
+  span(v-bind="spanAttributes")
+    VisuallyHidden
+      span {{ accessibilityLabel }}
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+import { classNames, variationName } from 'polaris-react/src/utilities/css';
+import { VisuallyHidden } from '../VisuallyHidden';
+import styles from '@/classes/Spinner.json';
+import SpinnerIconLarge from '@/assets/spinner-large.svg';
+import SpinnerIconSmall from '@/assets/spinner-small.svg';
+
+type Size = 'small' | 'large';
+
+@Component({
+  components: {
+    VisuallyHidden,
+    SpinnerIconLarge,
+    SpinnerIconSmall,
+  },
+})
+export default class Spinner extends Vue {
+  /**
+   * Size of Spinner
+   * @values small | large
+   */
+  @Prop({ type: String, default: 'large' })
+  public size!: Size;
+
+  /**
+   * Accessible label for the spinner
+   */
+  @Prop({ type: String })
+  public accessibilityLabel!: string;
+
+  /**
+   * Allows the component to apply the correct accessibility roles based on focus
+   */
+  @Prop({ type: Boolean })
+  public hasFocusableParent!: boolean;
+
+  get className() {
+    const variation = variationName('size', this.size) as keyof typeof styles;
+
+    return classNames(
+      styles.Spinner,
+      this.size && styles[variation],
+    );
+  }
+
+  public spanAttributes = {
+    ...(!this.hasFocusableParent && { role: 'status' }),
+  };
+}
+</script>
+
+<style lang="scss">
+@import 'polaris-react/src/components/Spinner/Spinner.scss';
+</style>

src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue';

src/components/index.ts

@@ -5,3 +5,4 @@ export * from './Icon';
 export * from './VisuallyHidden';
 export * from './InlineError';
 export * from './Choice';
+export * from './Spinner';