doc: add phosphor icon

stories/murmur/components/PhosphorIcon.stories.js

@@ -0,0 +1,93 @@
+import { PhosphorIcon } from '@/components'
+
+export default {
+  title: 'Murmur/Components/PhosphorIcon',
+  tags: ['autodocs'],
+  component: PhosphorIcon,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'tertiary', 'body-color']
+    },
+    weight: {
+      control: { type: 'select' },
+      options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone']
+    },
+    spin: {
+      control: { type: 'boolean' }
+    }
+  },
+  args: {
+    weight: 'regular',
+    spin: false,
+    spinDuration: '1s'
+  },
+  render: (args) => ({
+    components: {
+      PhosphorIcon
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <phosphor-icon v-bind="args"/>
+    `
+  })
+}
+
+export const Default = {
+  args: {
+    name: 'User',
+    size: '32px'
+  }
+}
+
+export const WeightBold = {
+  args: {
+    name: 'User',
+    weight: 'bold',
+    size: '32px'
+  }
+}
+
+export const WeightFill = {
+  args: {
+    name: 'User',
+    weight: 'fill',
+    size: '32px'
+  }
+}
+
+export const WeightDuotone = {
+  args: {
+    name: 'User',
+    weight: 'duotone',
+    size: '32px'
+  }
+}
+
+export const Spinning = {
+  args: {
+    name: 'circle-notch',
+    size: '32px',
+    spin: true
+  }
+}
+
+export const VariantPrimary = {
+  args: {
+    name: 'rocket',
+    variant: 'primary',
+    size: '32px'
+  }
+}
+
+export const VariantSecondary = {
+  args: {
+    name: 'rocket',
+    variant: 'secondary',
+    size: '32px'
+  }
+}

stories/murmur/components/PhosphorIconLayers.stories.js

@@ -0,0 +1,37 @@
+import { PhosphorIcon, PhosphorIconLayers } from '@/components'
+
+export default {
+  title: 'Murmur/Components/PhosphorIconLayers',
+  tags: ['autodocs'],
+  components: PhosphorIconLayers,
+  argTypes: {
+    weight: {
+      control: { type: 'select' },
+      options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone']
+    }
+  },
+  args: {
+    weight: 'thin',
+    spin: false,
+    size: '32px'
+  },
+  render: (args) => ({
+    components: {
+      PhosphorIcon,
+      PhosphorIconLayers
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <phosphor-icon-layers v-bind="args">
+        <phosphor-icon name="circle" v-bind="args" beat fade />
+        <phosphor-icon name="star" size="1.2em" variant="warning" spin-reverse spin-duration="2s" fill />
+      </phosphor-icon-layers>
+    `
+  })
+}
+
+export const Default = {}