feat: add Tag component (#1022)

src/components/index.ts

@@ -11,6 +11,7 @@ export * from './logo';
 export * from './panel';
 export * from './panel-heading';
 export * from './status-panel';
+export * from './tag';
 export * from './text';
 export * from './theme-provider';
 export * from './theme-provider/defaultTheme';

src/components/tag/README.md

@@ -0,0 +1,13 @@
+The Tag component displays small, inline snippets of information.
+
+```jsx harmony
+import { ThemeProvider, Tag } from '@lapidist/components';
+
+<ThemeProvider>
+    <Tag kind="primary">v1.0.0</Link>
+    <Tag kind="secondary">v1.0.0</Link>
+    <Tag kind="tertiary">v1.0.0</Link>
+    <Tag kind="danger">v1.0.0</Link>
+    <Tag kind="grey">v1.0.0</Link>
+</ThemeProvider>
+```

src/components/tag/Tag.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../theme-provider';
+import { Tag } from './index';
+
+const setup = (Tag: React.ReactElement) =>
+    render(<ThemeProvider>{Tag}</ThemeProvider>);
+
+test('it works', () => {
+    const { container } = setup(<Tag kind="primary">Hello world</Tag>);
+    expect(container.firstChild).toMatchSnapshot();
+});

src/components/tag/__snapshots__/Tag.spec.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+.c0 {
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #1a8385;
+}
+
+<span
+  class="c0"
+>
+  Hello world
+</span>
+`;

src/components/tag/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import { mergeStyles, Theme } from '@lapidist/styles';
+import { Text } from '../text';
+import { BoxProps } from '../box';
+import { TagStyles } from './styles';
+
+export * from './styles';
+
+export type TagPropType = BoxProps &
+    React.HTMLAttributes<HTMLSpanElement> &
+    React.HTMLProps<HTMLSpanElement>;
+
+export interface TagProps {
+    readonly kind: string;
+    readonly theme: Theme;
+}
+
+const BaseTag: React.FC<TagPropType & TagProps> = ({
+    as = 'span',
+    styles,
+    kind,
+    theme,
+    ...restProps
+}) => (
+    <Text
+        as={as}
+        styles={mergeStyles(TagStyles({ kind, theme }), styles)}
+        {...restProps}
+    />
+);
+
+export const Tag = withTheme(BaseTag);
+
+Tag.displayName = 'Tag';

src/components/tag/styles.ts

@@ -0,0 +1,55 @@
+import { ColorGroup, getProperty, Styles } from '@lapidist/styles';
+import { TagProps } from './index';
+
+interface TagVariantStyles {
+    borderColor: ColorGroup | string;
+    backgroundColor: ColorGroup | string;
+    paddingY: string;
+    fontSize: string;
+    textColor: ColorGroup | string;
+}
+
+const TagColors = (dark: string, base: string) => ({
+    borderColor: dark,
+    backgroundColor: base,
+    textColor: { group: 'base', shade: 'light' }
+});
+
+const TagVariants = ({ kind, theme }: TagProps): TagVariantStyles => {
+    const { dark, base } = getProperty<{
+        [K: string]: string;
+    }>(theme, 'colors', kind);
+
+    return {
+        fontSize: '1',
+        paddingY: '2',
+        ...TagColors(dark, base)
+    };
+};
+
+const TagBaseStyles: Styles = {
+    borderWidth: 'px',
+    boxShadow: '1',
+    textAlign: 'center',
+    paddingX: '2',
+    borderRadius: '2',
+    borderStyle: 'solid'
+};
+
+const TagVariantStyles = ({
+    borderColor,
+    backgroundColor,
+    textColor,
+    paddingY,
+    fontSize
+}: TagVariantStyles): Styles => ({
+    ...TagBaseStyles,
+    borderColor,
+    backgroundColor,
+    textColor,
+    paddingY,
+    fontSize
+});
+
+export const TagStyles = (props: TagProps): Styles =>
+    TagVariantStyles(TagVariants(props));