chore(#111): social links organism

src/components/Button.vue

@@ -11,6 +11,8 @@
     }"
     data-component-name="button"
     data-button="true"
+    :target="target"
+    :title="title"
     v-bind="props"
   >
     <CTIcon
@@ -62,10 +64,18 @@ export default {
       type: String,
       default: 'regular'
     },
+    target: {
+      type: String,
+      default: undefined
+    },
     text: {
       type: String,
       default: undefined
     },
+    title: {
+      type: String,
+      default: undefined
+    },
     type: {
       type: String,
       default: undefined

src/components/SocialLinks.stories.js

@@ -0,0 +1,34 @@
+import CTSocialLinks from './SocialLinks.vue'
+
+export default {
+  title: 'CivicTheme/Organisms/SocialLinks',
+  component: CTSocialLinks,
+  argTypes: {
+    theme: {
+      options: ['dark', 'light'],
+      control: 'select'
+    }
+  },
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTSocialLinks v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTSocialLinks>`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Social Links'
+Default.args = {
+  border: true,
+  theme: 'light',
+  items: {'Facebook': 'https://facebook.com', 'Twitter': 'https://twitter.com', 'LinkedIn': 'https://linkedin.com'}
+}

src/components/SocialLinks.vue

@@ -0,0 +1,57 @@
+<template>
+  <div :class="`ct-social-links ${themeClass} ${border ? 'ct-social-links--with-border': ''}`">
+    <ul class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-social-links__list">
+
+      <li
+        v-for="(link, title) in items"
+        :key="link"
+        class="ct-item-list__item"
+      >
+        <CTButton
+          class="ct-icon ct-button__icon"
+          :icon="title.toLowerCase()"
+          kind="link"
+          target="_blank"
+          :title="title"
+          type="tertiary"
+          :url="link"
+        >
+          <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
+        </CTButton>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    border: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => ([]),
+    },
+    themeClass: {
+      type: String,
+      default: "ct-theme-light"
+    }
+  },
+
+  data: () => ({
+    page: 1
+  }),
+
+  watch: {
+    page() {
+      this.$emit('page', this.page)
+    }
+  }
+}
+</script>