Merge branch 'develop' of github.com:coderan-io/ui into feature/navigation

Author: EranNL

__tests__/Tag.test.tsx

@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Tag, Variant } from '@/components';
+
+describe('Tag test', () => {
+
+    it('should render tag', () => {
+        const container = shallow(
+            <Tag variant={Variant.ORANGE}>
+                Hello world
+            </Tag>
+        );
+
+        expect(container.find('.tag.tag-orange').length).toBe(1);
+    });
+});

src/components/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import clsx from 'clsx';
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: Variant | string;
+}
+
+const Tag = React.forwardRef<HTMLDivElement, TagProps>((
+    {
+        children,
+        className,
+        variant
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'tag',
+            `tag-${variant}`,
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Tag.displayName = 'Tag';
+Tag.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    variant: PropTypes.string.isRequired
+}
+
+export default Tag;

src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { default as Tag } from './Tag';

src/components/index.ts

@@ -8,3 +8,4 @@ export * from './Icon';
 export * from './utils';
 export * from './TextField';
 export * from './SelectField';
+export * from './Tag';

src/components/utils/Variant.ts

@@ -3,13 +3,22 @@ export enum Variant {
     PRIMARY_GHOST = 'primary-ghost',
     SECONDARY = 'secondary',
     DANGER = 'danger',
-    DANGER_GHOST = 'danger-ghost'
+    DANGER_GHOST = 'danger-ghost',
+    RED = 'red',
+    PINK = 'pink',
+    PURPLE = 'purple',
+    DEEP_PURPLE = 'deep-purple',
+    INDIGO = 'indigo',
+    BLUE = 'blue',
+    LIGHT_BLUE = 'light-blue',
+    TEAL = 'teal',
+    GREEN = 'green',
+    LIGHT_GREEN = 'light-green',
+    LIME = 'lime',
+    YELLOW = 'yellow',
+    AMBER = 'amber',
+    ORANGE = 'orange',
+    BROWN = 'brown',
+    GRAY = 'gray',
+    BLUE_GRAY = 'blue-gray'
 }
-
-export const variantList: string[] = [
-    'primary',
-    'primary-ghost',
-    'secondary',
-    'danger',
-    'danger-ghost'
-];

src/style/base/_mixins.scss

@@ -1,5 +1,5 @@
-@use "colors";
+@use "variables";
 
-@function color($color, $variant: 500) {
-    @return map-get(map-get(colors.$colors, $color), $variant);
+@function color($color, $variant: 'default') {
+    @return map-get(map-get(variables.$colors, $color), $variant);
 }

src/style/base/_typography.scss

@@ -1,4 +1,5 @@
 @use "mixins";
+@use "variables";
 
 /* inter-100 - latin */
 @font-face {
@@ -97,46 +98,47 @@
 
 h1 {
     font-size: 2rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
     font-weight: normal;
     margin: 0;
 }
 
 h2 {
     font-size: 1.8rem;
     margin: 0 0 1rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
 }
 
 h3 {
     font-size: 1.6rem;
     margin: 0 0 1rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
 }
 
 h4 {
     font-size: 1.4rem;
     margin: 0 0 1rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
+    font-weight: normal;
 }
 
 h5 {
     font-size: 1.2rem;
     margin: 0 0 1rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
     font-weight: 600;
 }
 
 h6 {
     font-size: 1.1rem;
     margin: 0 0 1rem;
-    color: mixins.color('gray', 900);
+    color: variables.$base-font-color;
 }
 
 .text-danger {
-    color: mixins.color('red', 700);
+    color: variables.color('red', 'default');
 }
 
 .text-secondary {
-    color: mixins.color('gray', 600);
+    color: variables.color('gray', 'default');
 }