Add: FollowList storybook

webapp/components/features/FollowList.story.js

@@ -0,0 +1,115 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+
+import helpers from '~/storybook/helpers'
+import FollowList from './FollowList.vue'
+
+helpers.init()
+
+const sevenConnectionsUser = {
+  name: 'Jenny Rostock',
+  id: 'u3',
+  followedByCount: 12,
+  followedBy: [
+    {
+      id: '2877b626-bac0-43df-b2bf-4ee025ba38b2',
+      name: 'Kristina Beahan',
+      slug: 'kristina-beahan',
+    },
+    {
+      id: '16b8838d-cc9f-4d30-8601-e4dea77d2f02',
+      name: 'Rhonda Stokes',
+      slug: 'rhonda-stokes',
+    },
+    {
+      id: '47a9846a-87d4-43fa-bf81-51d21dc38ed3',
+      name: 'Benny Lang',
+      slug: 'benny-lang',
+    },
+    {
+      id: 'd3d43b17-e7bb-4778-a373-798df58a9a5f',
+      name: 'Ms. Rita Thompson',
+      slug: 'ms-rita-thompson',
+    },
+    {
+      id: '18a4827c-8b5f-4510-b6fe-09fe8688eed1',
+      name: 'Arthur Johns',
+      slug: 'arthur-johns',
+    },
+    {
+      id: '45313bea-9152-4c8d-9c6e-1eca029979f8',
+      name: 'Jeremiah Breitenberg',
+      slug: 'jeremiah-breitenberg',
+    },
+    {
+      id: 'cfaf1c25-f0ad-4bdf-82a3-e4d8d5e5093e',
+      name: 'Dominic Weimann Jr.',
+      slug: 'dominic-weimann-jr',
+    },
+  ],
+}
+
+const allConnectionsUser = {
+  ...sevenConnectionsUser,
+  followedBy: [
+    ...sevenConnectionsUser.followedBy,
+    {
+      id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
+      name: 'Hugh Harris Sr.',
+      slug: 'hugh-harris-sr',
+    },
+    {
+      id: '69dbad2b-5749-4697-9976-221992439086',
+      name: 'Ashley Fisher',
+      slug: 'ashley-fisher',
+    },
+    {
+      id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
+      name: 'Devin Reynolds',
+      slug: 'devin-reynolds',
+    },
+    {
+      id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
+      name: 'Sophia Jaskolski',
+      slug: 'sophia-jaskolski',
+    },
+    {
+      id: '61040fdf-da6a-489e-b79c-45f58d33386f',
+      name: 'Rodolfo Lind',
+      slug: 'rodolfo-lind',
+    },
+  ],
+}
+
+storiesOf('FollowList', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('with up to 7 connections', () => {
+    const user = sevenConnectionsUser
+    return {
+      components: { FollowList },
+      store: helpers.store,
+      data() {
+        return {
+          user,
+        }
+      },
+
+      template: `<follow-list :user="user" type="followedBy" />`,
+    }
+  })
+
+  .add('with more than 7 connections', () => {
+    const user = allConnectionsUser
+    return {
+      components: { FollowList },
+      store: helpers.store,
+      data() {
+        return {
+          user,
+        }
+      },
+
+      template: `<follow-list :user="user" type="followedBy" />`,
+    }
+  })