feat(tag): add tag row feature (#44)

- add tag row molecule component
- add tag row styleguide
- write test for tag row component

[Finishes #167482351]

src/components/UI/atoms/StyledLink/StyledLink.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { fontSizes } from '<variables>/fonts';
 import { backgroundColors } from '<variables>/colorPalette';
 import spacing from '<variables>/spacing';
@@ -96,15 +96,21 @@ const linkStyle = ({
     box-shadow: ${(tag && theme.boxShadows.articleCard) || 'none'};
     width: ${(tag && theme.spacing.smd) || 'auto'};
     margin-left: ${theme.spacing[marginleft]};
+    &.active {
+      color: ${(tag && theme.textColors.brightPink)};
+      background-color: ${(tag && theme.backgroundColors.activePink)};
+    };
     &:visited {
       color: ${theme.textColors.primary};
     }
     &:hover {
-      border: ${tag && `solid 1px ${theme.textColors.primary}`};
+      color: ${(tag && theme.textColors.hoverPink)};
+      background-color: ${(tag && theme.backgroundColors.dullRose)};
+      border: ${tag && `solid 1px ${theme.backgroundColors.primary}`};
     };
 `;
 
-StyledLink.Internal = styled(Link)`${linkStyle}`;
+StyledLink.Internal = styled(NavLink)`${linkStyle}`;
 
 StyledLink.External = styled.a`${linkStyle}`;
 

src/components/UI/molecules/TagRow/TagRow.jsx

@@ -0,0 +1,50 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import StyledLink from '<atoms>/StyledLink/StyledLink';
+
+/**
+ * @description - TagRow Component
+ *
+ * @prop {string} tags - tags
+ * @prop {object} handleClick - handle click function
+ *
+ * @return {component} TagRow
+ */
+const TagRow = ({
+  tags,
+}) => {
+  return (
+    <FlexContainer
+      alignItems="center"
+      justifyContent="center"
+      flexDirection='row'
+    >
+      {renderTags()}
+    </FlexContainer>
+  );
+
+  function renderTags() {
+    return tags.map((tag, index) => {
+      return (
+        <StyledLink
+          key={index}
+          id={tag.id}
+          tag='true'
+          margin='xs'
+          to={`/${tag.name}`}
+        >
+          {tag.name}
+        </StyledLink>
+      );
+    });
+  }
+};
+
+TagRow.propTypes = {
+  tags: PropTypes.array.isRequired,
+};
+
+export default TagRow;

src/components/UI/molecules/TagRow/TagRow.md

@@ -0,0 +1,31 @@
+TagRow Default: 
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+const tags = [
+  {
+    name: 'Adventure',
+    id: '1',
+  },
+  {
+    name: 'Love',
+    id: '2',
+  },
+  {
+    name: 'Finance',
+    url: '3',
+  },
+  {
+    name: 'Design',
+    id: '4',
+  },
+  {
+    name: 'Diary',
+    url: '5',
+  },
+];
+const handleClick = (e) => console.log(e.target.text);
+<Router>
+  <TagRow tags={tags} handleClick={handleClick}/>
+</Router>
+```

src/components/UI/molecules/TagRow/TagRow.spec.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import TagRow from './TagRow';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+const setup = () => {
+  const tags = [
+    {
+      name: 'Adventure',
+      id: '1',
+    },
+    {
+      name: 'Love',
+      id: '2',
+    },
+    {
+      name: 'Finance',
+      url: '3',
+    },
+  ];
+
+  const handleClick = e => console.log(e.target.text);
+
+  const utils = render(
+    <MemoryRouter>
+      <TagRow tags={tags} handleClick={handleClick} >Authors Haven</TagRow>
+    </MemoryRouter>,
+  );
+
+  return { ...utils };
+};
+
+describe('TagRow', () => {
+  it('should render the TagRow component', () => {
+    const { getByText } = setup();
+
+    expect(getByText('Adventure')).toBeTruthy();
+  });
+
+  it('should apply default style', () => {
+    const { getByText } = setup({});
+
+    expect(getByText('Adventure')).toHaveStyle(`
+      font-size: '1.6'
+      display: inline-block;
+      text-decoration: none;
+    `);
+  });
+
+  it('should be clickable', () => {
+    const { container, getByText } = setup();
+
+    fireEvent.click(getByText('Adventure'));
+    expect(container.firstChild).toBeTruthy();
+  });
+});

src/styles/variables/colorPalette.js

@@ -23,9 +23,11 @@ export const textColors = {
   grey: '#7A757E',
   red: '#FF0000',
   pink: '#D97BC4',
+  brightPink: '#E71EBA',
   darkPurple: '#790860',
   lightBrown: '#C2A3A3',
   white001: '#FFFFFF',
+  hoverPink: '#DC2BB5',
 };
 
 export const backgroundColors = {
@@ -34,6 +36,8 @@ export const backgroundColors = {
   white001: '#FFFFFF',
   transparent: 'transparent',
   darkPink: '#B02091',
+  activePink: '#FFDCDC',
+  dullRose: '#F9E0E0',
 };
 
 export const borderColors = {