feat(tag): updates style to be color pill

Updates the styles to be a color pill

closes #183

src/components/atoms/Tag/Tag.jsx

@@ -1,31 +1,61 @@
 import PropTypes from 'prop-types';
 import Link from 'next/link';
-import { rem } from 'polished';
-import { css } from '@emotion/react';
+import { rem, darken, lighten, readableColor } from 'polished';
+import { css, useTheme } from '@emotion/react';
 
-export function Tag({ tag }) {
-  const linkSlug = tag.toLowerCase().replace(/ /g, '-');
+const linkCss = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${rem(20)};
+  padding: ${rem(4)} ${rem(8)};
+  border-radius: ${rem(12)};
+  font-size: ${rem(12)};
+  line-height: 1;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+export function Tag({ label, color }) {
+  const theme = useTheme();
+  const linkSlug = label.toLowerCase().replace(/ /g, '-');
 
   return (
     <Link href={`/tags/${linkSlug}`} passHref>
       <a
         css={css`
-          font-size: ${rem(12)};
-          line-height: 1.2;
-          font-style: italic;
+          ${linkCss};
+          color: ${color ? readableColor(color) : theme.text.color.dark};
+          background-color: ${color || theme.colors.gray};
+
+          &:hover {
+            color: ${color ? readableColor(color) : theme.text.color.dark};
+            background-color: ${lighten(0.1, color || theme.colors.gray)};
+          }
+
+          &:active {
+            background-color: ${darken(0.1, color || theme.colors.gray)};
+          }
         `}
         href={`/tags/${linkSlug}`}
       >
-        {tag}
+        {label}
       </a>
     </Link>
   );
 }
 
 Tag.propTypes = {
-  tag: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string,
 };
 
-Tag.defaultProps = {};
+Tag.defaultProps = {
+  color: null,
+};
 
 export default Tag;

src/components/atoms/Tag/Tag.stories.jsx

@@ -10,4 +10,5 @@ const Template = (args) => <Tag {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   tag: 'Test Tag',
+  color: '#fff000',
 };

src/components/atoms/Tag/Tag.test.jsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { readableColor } from 'polished';
 import { theme } from '@styles/theme';
 import { Tag } from './Tag';
 
@@ -9,11 +10,30 @@ jest.mock('@emotion/react', () => ({
 
 describe('<Tag />', () => {
   it('should render a tag', () => {
-    expect.assertions(2);
+    expect.assertions(3);
 
-    render(<Tag tag="Test Tag" />);
+    const color = '#fff000';
+
+    render(<Tag label="Test Tag" color={color} />);
+
+    expect(screen.getByText('Test Tag')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/tags/test-tag');
+    expect(screen.getByRole('link')).toHaveStyle({
+      color: readableColor(color),
+      backgroundColor: color,
+    });
+  });
+
+  it('should render a tag with a default color', () => {
+    expect.assertions(3);
+
+    render(<Tag label="Test Tag" />);
 
     expect(screen.getByText('Test Tag')).toBeInTheDocument();
     expect(screen.getByRole('link')).toHaveAttribute('href', '/tags/test-tag');
+    expect(screen.getByRole('link')).toHaveStyle({
+      color: 'rgb(238, 238, 238)',
+      backgroundColor: 'rgb(102, 102, 102)',
+    });
   });
 });

src/components/molecules/PageHeader/PageHeader.test.jsx

@@ -17,7 +17,7 @@ describe('<PageHeader />', () => {
         location={location}
         publishDate="2010-12-02"
         readingTime={10}
-        tags={['Test Tag']}
+        tags={[{ label: 'Test Tag', color: 'red' }]}
         excerpt={excerpt}
         featuredImage="https://via.placeholder.com/300"
       />,
@@ -53,7 +53,7 @@ describe('<PageHeader />', () => {
         location={location}
         publishDate="2010-12-02"
         readingTime={10}
-        tags={['Test Tag']}
+        tags={[{ label: 'Test Tag', color: 'blue' }]}
         excerpt={excerpt}
         featuredImage="https://via.placeholder.com/300"
         variant="imageTop"

src/components/molecules/TagCard/TagCard.jsx

@@ -40,11 +40,11 @@ const postCountCss = css`
   }
 `;
 
-export function TagCard({ title, description, className, postCount }) {
+export function TagCard({ title, description, className, postCount, color }) {
   return (
     <div data-testid="tag-card" css={cardCss} className={className}>
       <header css={headerCss}>
-        <Tag tag={title} />
+        <Tag label={title} color={color} />
         {!!postCount && (
           <span css={postCountCss}>
             {postCount} {postCount === 1 ? 'post' : 'posts'}
@@ -61,12 +61,14 @@ TagCard.propTypes = {
   description: PropTypes.string,
   postCount: PropTypes.number,
   className: PropTypes.string,
+  color: PropTypes.string,
 };
 
 TagCard.defaultProps = {
   description: '',
   className: '',
   postCount: null,
+  color: null,
 };
 
 export default TagCard;

src/components/molecules/TagCard/TagCard.test.jsx

@@ -12,6 +12,7 @@ describe('<TagCard />', () => {
         description="Test description"
         postCount={1}
         className="test-class"
+        color="#fff000"
       />,
     );
 

src/components/molecules/TagList/TagList.jsx

@@ -15,10 +15,6 @@ const listCss = css`
   & > li {
     margin: 0;
 
-    &::after {
-      content: ',';
-    }
-
     &:first-of-type {
       span {
         font-size: ${rem(12)};
@@ -42,9 +38,9 @@ export function TagList({ className, tags }) {
       <li>
         <span>Tags: </span>
       </li>
-      {tags.map((tag) => (
-        <li key={tag}>
-          <Tag tag={tag} />
+      {tags.map(({ label, color }) => (
+        <li key={label}>
+          <Tag label={label} color={color} />
         </li>
       ))}
     </ul>

src/components/molecules/TagList/TagList.test.jsx

@@ -5,26 +5,43 @@ describe('<TagList />', () => {
   it('should render the tag list', () => {
     expect.assertions(6);
 
-    const tags = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4'];
+    const tags = [
+      {
+        label: 'Tag 1',
+        color: 'red',
+      },
+      {
+        label: 'Tag 2',
+        color: 'blue',
+      },
+      {
+        label: 'Tag 3',
+        color: 'green',
+      },
+      {
+        label: 'Tag 4',
+        color: 'yellow',
+      },
+    ];
 
     render(<TagList tags={tags} className="test-class" />);
 
     expect(screen.getByText('Tags:')).toBeInTheDocument();
-    expect(screen.getByText(tags[0])).toHaveAttribute(
+    expect(screen.getByText(tags[0].label)).toHaveAttribute(
       'href',
-      `/tags/${tags[0].toLowerCase().replace(' ', '-')}`,
+      `/tags/${tags[0].label.toLowerCase().replace(' ', '-')}`,
     );
-    expect(screen.getByText(tags[1])).toHaveAttribute(
+    expect(screen.getByText(tags[1].label)).toHaveAttribute(
       'href',
-      `/tags/${tags[1].toLowerCase().replace(' ', '-')}`,
+      `/tags/${tags[1].label.toLowerCase().replace(' ', '-')}`,
     );
-    expect(screen.getByText(tags[2])).toHaveAttribute(
+    expect(screen.getByText(tags[2].label)).toHaveAttribute(
       'href',
-      `/tags/${tags[2].toLowerCase().replace(' ', '-')}`,
+      `/tags/${tags[2].label.toLowerCase().replace(' ', '-')}`,
     );
-    expect(screen.getByText(tags[3])).toHaveAttribute(
+    expect(screen.getByText(tags[3].label)).toHaveAttribute(
       'href',
-      `/tags/${tags[3].toLowerCase().replace(' ', '-')}`,
+      `/tags/${tags[3].label.toLowerCase().replace(' ', '-')}`,
     );
     expect(screen.getByRole('list')).toHaveClass('test-class');
   });

src/components/organisms/SEO/SEO.jsx

@@ -29,7 +29,7 @@ export function SEO({ description, image, title }) {
 
       {/* Twitter */}
       <meta name="twitter:card" content="summary" key="twitter:card" />
-      <meta name="twitter:site" content="@angusp" key="twitter:creator" />
+      <meta name="twitter:site" content="@angusp" key="twitter:site" />
       <meta name="twitter:creator" content="@angusp" key="twitter:creator" />
     </Head>
   );

src/pages/posts/[slug].jsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import ErrorPage from 'next/error';
 import { css } from '@emotion/react';
 import { CMS_HOST } from '@constants/hosts';
-import { getPostBySlug, getAllPosts } from '@lib/api';
+import { getPostBySlug, getAllPosts, getTagBySlug } from '@lib/api';
 import { markdownToHtml } from '@lib/markdownToHtml';
 import { SEO } from '@components/organisms/SEO';
 import { PageHeader } from '@components/molecules/PageHeader';
@@ -84,10 +84,21 @@ export async function getStaticProps({ params }) {
   ]);
   const content = await markdownToHtml(post.content || '');
 
+  const tags = post.tags.map((tag) => {
+    const slug = tag.toLowerCase().replace(/ /g, '-');
+
+    const { color } = getTagBySlug(slug, ['color']);
+    return {
+      label: tag,
+      color,
+    };
+  });
+
   return {
     props: {
       post: {
         ...post,
+        tags,
         content,
       },
     },

src/pages/tags/index.jsx

@@ -22,7 +22,7 @@ function Tags({ tags }) {
       >
         <BreadCrumbs location={location} />
       </Container>
-      {tags.map(({ title, slug, content, postCount }, index) => (
+      {tags.map(({ title, slug, content, postCount, color }, index) => (
         <>
           {tags.length > 1 && index !== 0 && (
             <Divider
@@ -38,6 +38,7 @@ function Tags({ tags }) {
             description={content}
             slug={slug}
             postCount={postCount}
+            color={color}
           />
         </>
       ))}
@@ -62,7 +63,7 @@ Tags.defaultProps = {
 };
 
 export const getStaticProps = async () => {
-  const tags = await getAllTags(['title', 'description', 'slug', 'content', 'postCount']);
+  const tags = await getAllTags(['title', 'description', 'slug', 'content', 'postCount', 'color']);
   return {
     props: {
       tags,