✨ Adds new tag list modifier (#1219)

src/components/HdTagTypes.ts

@@ -0,0 +1,4 @@
+export default {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+};

src/components/HdTagsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="tags-list">
+  <section class="tags-list" :class="customClasses">
     <div v-for="item in items" :key="item" class="tags-list__tag">
       {{ item }}
     </div>
@@ -15,6 +15,15 @@ export default {
       type: Array,
       default: () => [],
     },
+    modifier: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  computed: {
+    customClasses() {
+      return [`tags-list--${this.modifier}`];
+    },
   },
 };
 </script>
@@ -23,18 +32,36 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .tags-list {
+  $root: &;
   display: flex;
   flex-wrap: wrap;
   min-height: #{$sp-l + $sp-s};
   margin-bottom: $sp-m;
+
   &__tag {
     display: flex;
     align-items: center;
-    height: $sp-l;
-    background-color: getShade($quaternary-color, 50);
-    border-radius: 3px;
     padding: 0 $sp-s;
     margin: $sp-s $sp-s 0 0;
   }
+
+  &--primary {
+    #{$root}__tag {
+      height: $sp-l;
+      background-color: getShade($quaternary-color, 50);
+      border-radius: 3px;
+    }
+  }
+  &--secondary {
+    #{$root}__tag {
+      height: $sp-m;
+      background-color: $primary-color;
+      border-radius: 12px;
+      color: $white;
+      font-weight: 600;
+      font-size: 10px;
+      line-height: 18px;
+    }
+  }
 }
 </style>

src/index.js

@@ -5,6 +5,7 @@ export { default as HdLinkTypes } from './components/HdLinkTypes';
 export { default as HdAlertTypes } from './components/HdAlertTypes';
 export { default as HdBadgeTypes } from './components/HdBadgeTypes';
 export { default as HdButtonTypes } from './components/buttons/HdButtonTypes';
+export { default as HdTagTypes } from './components/HdTagTypes';
 export { default as HdNotificationsTypes } from './components/notifications/HdNotificationsTypes';
 
 // Components

src/stories/HdTagsList.stories.js

@@ -1,23 +1,23 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-import { array } from '@storybook/addon-knobs';
 import HdTagsList from 'homeday-blocks/src/components/HdTagsList.vue';
+import TYPES from 'homeday-blocks/src/components/HdTagTypes';
 import ITEMS from './mocks/FORM_ITEMS';
 
-storiesOf('Components/Content/HdTagsList', module).add('default 🎛', () => ({
-  components: { HdTagsList },
-  template: `
-      <hd-tags-list
-        :items="items"
-      />
-    `,
-  props: {
-    items: {
-      type: Array,
-      default: array(
-        'items',
-        ITEMS.map(({ label }) => label)
-      ),
+export default {
+  title: 'Components/Content/HdTagsList',
+  component: HdTagsList,
+  argTypes: {
+    modifier: {
+      control: { type: 'select', options: Object.values(TYPES) },
     },
   },
-}));
+  args: {
+    modifier: TYPES.PRIMARY,
+    items: ITEMS.map(({ label }) => label),
+  },
+};
+
+export const DEFAULT = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { HdTagsList },
+  template: '<hd-tags-list v-bind="$props" />',
+});

tests/unit/components/HdTagsList.spec.js

@@ -1,5 +1,6 @@
 import { wrapperFactoryBuilder } from 'tests/unit/helpers';
 import HdTagsList from '@/components/HdTagsList.vue';
+import TYPES from '@/components/HdTagTypes';
 
 const ITEMS = ['foo', 'bar'];
 
@@ -10,9 +11,19 @@ const wrapperBuilder = wrapperFactoryBuilder(HdTagsList, {
 });
 
 describe('HdTagsList', () => {
-  it('renders component', () => {
+  it('renders default component', () => {
     const wrapper = wrapperBuilder();
 
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  it('renders secondary component', () => {
+    const wrapper = wrapperBuilder({
+      props: {
+        items: ITEMS,
+        modifier: TYPES.SECONDARY,
+      },
+    });
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

tests/unit/components/__snapshots__/HdTagsList.spec.js.snap

@@ -1,7 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HdTagsList renders component 1`] = `
-<section class="tags-list">
+exports[`HdTagsList renders default component 1`] = `
+<section class="tags-list tags-list--primary">
+  <div class="tags-list__tag">
+    foo
+  </div>
+  <div class="tags-list__tag">
+    bar
+  </div>
+</section>
+`;
+
+exports[`HdTagsList renders secondary component 1`] = `
+<section class="tags-list tags-list--secondary">
   <div class="tags-list__tag">
     foo
   </div>