chore(#111): update social links

Realityloop · Sep 26, 2023 · 85d1678 · 85d1678
1 parent 1dd5e74
commit 85d1678
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -11,8 +11,6 @@
     }"
     data-component-name="button"
     data-button="true"
-    :target="target"
-    :title="title"
     v-bind="props"
   >
     <CTIcon
@@ -94,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
@@ -30,5 +30,24 @@ Default.storyName = 'Social Links'
 Default.args = {
   border: true,
   theme: 'light',
-  items: {'Facebook': 'https://facebook.com', 'Twitter': 'https://twitter.com', 'LinkedIn': 'https://linkedin.com'}
+  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
@@ -1,25 +1,27 @@
 <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"
-      >
+  <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-icon ct-button__icon"
-          :icon="title.toLowerCase()"
+          class="ct-social-links__button"
+          :icon="item.icon"
           kind="link"
           target="_blank"
-          :title="title"
+          :title="item.title"
           type="tertiary"
-          :url="link"
+          :theme="theme"
+          :url="item.link"
         >
           <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
         </CTButton>
-      </li>
-    </ul>
+      </template>
+    </CTItemList>
   </div>
 </template>
 
@@ -38,10 +40,6 @@ export default {
       type: Array,
       default: () => ([]),
     },
-    themeClass: {
-      type: String,
-      default: "ct-theme-light"
-    }
   },
 
   data: () => ({