feat: create article data tag component (#5280)

Author: Olaleye-Blessing

components/Article/DataTag/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data Tag component renders with blue background color when tag is 'M' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="M"
+  >
+    M
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with red background color when tag is 'E' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="E"
+  >
+    E
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with yellow background color when tag is 'C' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="C"
+  >
+    C
+  </span>
+</div>
+`;

components/Article/DataTag/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import DataTag from '..';
+
+describe('Data Tag component', () => {
+  it(`renders with red background color when tag is 'E'`, () => {
+    const { container } = render(<DataTag tag="E" />);
+
+    expect(container).toHaveStyle('background-color: var(--danger6)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with yellow background color when tag is 'C'`, () => {
+    const { container } = render(<DataTag tag="C" />);
+
+    expect(container).toHaveStyle('background-color: var(--warning4)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with blue background color when tag is 'M'`, () => {
+    const { container } = render(<DataTag tag="M" />);
+
+    expect(container).toHaveStyle('background-color: var(--info6)');
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/DataTag/index.module.scss

@@ -0,0 +1,26 @@
+.dataTag {
+  border-radius: 50%;
+  color: #fff;
+  display: inline-block;
+  font-family: var(--sans);
+  font-size: 1.4rem;
+  font-weight: var(--font-weight-light);
+  height: 2.4rem;
+  line-height: 2.4rem;
+  margin-right: 0.8rem;
+  min-width: 2.4rem;
+  text-align: center;
+  width: 2.4rem;
+
+  &[data-tag='C'] {
+    background-color: var(--warning4);
+  }
+
+  &[data-tag='E'] {
+    background-color: var(--danger6);
+  }
+
+  &[data-tag='M'] {
+    background-color: var(--info6);
+  }
+}

components/Article/DataTag/index.stories.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+import DataTag from '.';
+
+export default { component: DataTag };
+
+type Story = StoryObj<typeof DataTag>;
+
+export const Red: Story = {
+  args: {
+    tag: 'E',
+  },
+};
+
+export const Yellow: Story = {
+  args: {
+    tag: 'C',
+  },
+};
+
+export const Blue: Story = {
+  args: {
+    tag: 'M',
+  },
+};

components/Article/DataTag/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+interface Props {
+  tag: 'E' | 'C' | 'M';
+}
+
+const DataTag = ({ tag }: Props) => (
+  <span className={styles.dataTag} data-tag={tag}>
+    {tag}
+  </span>
+);
+
+export default DataTag;