chore(#111): social links organism (#112)

* chore(#111): social links organism * chore(#111): update social links --------- Co-authored-by: Brian Gilbert <[email protected]> Co-authored-by: Stuart Clark <[email protected]>
Realityloop · Sep 26, 2023 · f900c8c · f900c8c
1 parent 6d4fe30
commit f900c8c
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 2 deletions.
diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -62,10 +62,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
@@ -84,11 +92,15 @@ export default {
       submit: 'input'
     }[kind]),
 
-    props: ({ component, kind, url }) => ({
+    props: ({ component, kind, target, title, url }) => ({
       button: {},
       link: component === 'nuxt-link'
         ? { to: url || '#' }
-        : { href: url || '#' },
+        : {
+          href: url || '#',
+          target,
+          title
+        },
       reset: {},
       submit: {}
     }[kind]),

diff --git a/src/components/SocialLinks.stories.js b/src/components/SocialLinks.stories.js
@@ -0,0 +1,53 @@
+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: [
+    {
+      id: 'facebook',
+      icon: 'facebook',
+      link: 'https://facebook.com',
+      title: 'Facebook'
+    },
+    {
+      id: 'twitter',
+      icon: 'twitter',
+      link: 'https://twitter.com',
+      title: 'Twitter'
+    },
+    {
+      id: 'linkedin',
+      icon: 'linkedin',
+      link: 'https://linkedin.com',
+      title: 'LinkedIn'
+    }
+  ]
+}
diff --git a/src/components/SocialLinks.vue b/src/components/SocialLinks.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="ct-social-links"
+    :class="{
+      [themeClass]: true,
+      'ct-social-links--with-border': border
+    }"
+  >
+    <CTItemList class="ct-social-links__list" :items="items" type="horizontal">
+      <template #default="{ item }">
+        <CTButton
+          class="ct-social-links__button"
+          :icon="item.icon"
+          kind="link"
+          target="_blank"
+          :title="item.title"
+          type="tertiary"
+          :theme="theme"
+          :url="item.link"
+        >
+          <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
+        </CTButton>
+      </template>
+    </CTItemList>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    border: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => ([]),
+    },
+  },
+
+  data: () => ({
+    page: 1
+  }),
+
+  watch: {
+    page() {
+      this.$emit('page', this.page)
+    }
+  }
+}
+</script>