Add Tag atom

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 .cache
 dist
+package-lock.json

README.md

@@ -54,6 +54,12 @@ Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adju
 
 Jest tests are set up to run with `npm test` or `yarn test`.
 
+To debug tests
+```
+import { screen } from '@testing-library/react';
+screen.logTestingPlaygroundURL();
+```
+
 ### Bundle analysis
 
 Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.

src/atoms/checkbox.tsx

@@ -14,7 +14,7 @@ const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   position: relative;
   height: 24px;
   padding-left: 0;
-  cursor: ${props => (props.disabled ? 'auto' : 'pointer')};
+  cursor: ${(props) => (props.disabled ? 'auto' : 'pointer')};
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -25,13 +25,13 @@ const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
   }
 
   span {
-    color: ${props =>
+    color: ${(props) =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : props.disabled
         ? 'var(--grey, hsl(0, 0%, 85%))'
         : null};
-    border-color: ${props =>
+    border-color: ${(props) =>
       props.error ? 'var(--red, hsl(354, 83%, 64%))' : null};
   }
 `;
@@ -81,7 +81,7 @@ const Checkmark = styled.span<CheckboxErrorProps>`
   top: 0;
   left: 0;
   border: 2px solid
-    ${props =>
+    ${(props) =>
       props.error
         ? 'var(--red, hsl(354, 83%, 64%))'
         : 'var(--grey, hsl(0, 0%, 85%))'};

src/atoms/tag.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const TagWrapper = styled.span`
+  display: inline-block;
+  border: 2px solid var(--green, hsl(186, 62%, 59%));
+  border-radius: 999px;
+  background-color: var(--green, hsl(186, 62%, 59%));
+  max-width: 150px;
+  padding: 2px 10px;
+  font-size: 0.85rem;
+  color: var(--white, hsl(0, 0%, 100%));
+  text-transform: lowercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:not(:first-child) {
+    margin-left: 5px;
+  }
+
+  ${(props) =>
+    props.color === 'orange' &&
+    css`
+      border-color: var(--orange, hsl(36, 100%, 57%));
+      background-color: var(--orange, hsl(36, 100%, 57%));
+    `}
+
+  ${(props) =>
+    props.color === 'danger' &&
+    css`
+      border-color: var(--red, hsl(354, 83%, 64%));
+      background-color: var(--red, hsl(354, 83%, 64%));
+    `}
+
+    ${(props) =>
+      props.color === 'info' &&
+      css`
+        border-color: var(--grey, hsl(0, 0%, 85%));
+        background-color: var(--lightGrey, hsl(0, 0%, 98%));
+        color: var(--default, hsl(0, 0%, 16%));
+      `}
+
+  ${(props) =>
+    props.color === 'outline' &&
+    css`
+      border-color: var(--default, hsl(0, 0%, 16%));
+      background-color: transparent;
+      color: var(--default, hsl(0, 0%, 16%));
+    `}
+`;
+
+type Color = 'primary' | 'orange' | 'danger' | 'info' | 'outline';
+
+interface TagProps {
+  color?: Color;
+  value: string;
+}
+
+const Tag = (props: TagProps) => {
+  const { color = 'primary', value } = props;
+  return <TagWrapper color={color}>{value}</TagWrapper>;
+};
+
+export default Tag;

src/index.ts

@@ -7,3 +7,4 @@ export { default as TaikaiLogo } from './ions/taikai-logo';
 // Atoms
 export { default as Avatar } from './atoms/avatar';
 export { default as Checkbox } from './atoms/checkbox';
+export { default as Tag } from './atoms/tag';

stories/tag.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tag } from '../src';
+
+export default {
+  title: 'Design System|Atoms/Tags',
+  component: Tag,
+};
+
+export const TagPrimaryComponent = (args) => <Tag {...args} />;
+
+TagPrimaryComponent.args = {
+  color: 'primary',
+  value: 'Burgdoggen',
+};
+
+export const TagOrangeComponent = (args) => <Tag color="orange" {...args} />;
+
+TagOrangeComponent.args = {
+  color: 'orange',
+  value: 'Burgdoggen',
+};
+
+export const TagDangerComponent = (args) => <Tag {...args} />;
+
+TagDangerComponent.args = {
+  color: 'danger',
+  value: 'Burgdoggen',
+};
+
+export const TagInfoComponent = (args) => <Tag {...args} />;
+
+TagInfoComponent.args = {
+  color: 'info',
+  value: 'Burgdoggen',
+};
+
+export const TagOutlineComponent = (args) => <Tag {...args} />;
+
+TagOutlineComponent.args = {
+  color: 'outline',
+  value: 'Burgdoggen',
+};

test/__snapshots__/checkbox.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Checkbox renders 1`] = `
     <span
       class="sc-dlfnbm jMDpkz"
     >
-      ola
+      hello
     </span>
     <input
       checked=""

test/__snapshots__/tag.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag renders 1`] = `
+<DocumentFragment>
+  <span
+    class="sc-jSgupP iIWTSr"
+    color="danger"
+  >
+    hello
+  </span>
+</DocumentFragment>
+`;

test/checkbox.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Checkbox } from '../src';
 
 describe('Checkbox', () => {
   it('renders', () => {
     const { asFragment } = render(
-      <Checkbox value={'check'} label={'ola'} checked={true} />
+      <Checkbox value={'check'} label={'hello'} checked={true} />
     );
-    screen.logTestingPlaygroundURL();
     expect(asFragment()).toMatchSnapshot();
   });
 });

test/tag.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Tag } from '../src';
+
+describe('Tag', () => {
+  it('renders', () => {
+    const { asFragment } = render(<Tag color={'danger'} value={'hello'} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('Tag has correct value', async () => {
+    const tagValue = 'This is my tag';
+    render(<Tag color={'danger'} value={tagValue} />);
+
+    const foundText = await screen.getByText(tagValue);
+    expect(foundText).toBeTruthy();
+  });
+});