Merge pull request #19 from coderan-io/feautre/tags

EranNL · web-flow · commit a8317f8e1185 · 2020-11-25T12:39:39.000+01:00
Feature/tags
diff --git a/__tests__/Tag.test.tsx b/__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);
+    });
+});
diff --git a/src/components/Tag/Tag.tsx b/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;
diff --git a/src/components/Tag/index.ts b/src/components/Tag/index.ts
@@ -0,0 +1 @@
+export { default as Tag } from './Tag';
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -8,3 +8,4 @@ export * from './Icon';
 export * from './utils';
 export * from './TextField';
 export * from './SelectField';
+export * from './Tag';
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
@@ -8,20 +8,23 @@ $colors: (
         'default': hsl(0, 65%, 51%),
         'hover': hsl(0, 66%, 47%),
         'active': hsl(0, 73%, 41%),
+        'dark': hsl(0, 73%, 41%),
         'default-font-color': #fff, //AA
     ),
     'pink': (
         'background': hsl(340, 80%, 94%),
         'default': hsl(338, 78%, 48%),
         'hover': hsl(336, 78%, 43%),
         'active': hsl(334, 79%, 38%),
+        'dark': hsl(328, 81%, 29%),
         'default-font-color': #fff, //AA
     ),
     'purple': (
         'background': hsl(292, 44%, 93%),
         'default': hsl(287, 65%, 40%),
         'hover': hsl(282, 68%, 38%),
         'active': hsl(277, 70%, 35%),
+        'dark': hsl(267, 75%, 31%),
         'default-font-color': #fff, //AAAA
     ),
     'deep-purple': (
@@ -30,97 +33,111 @@ $colors: (
         'default': hsl(260, 54%, 45%),
         'hover': hsl(258, 58%, 42%),
         'active': hsl(251, 69%, 34%),
+        'dark': hsl(251, 69%, 34%),
         'default-font-color': #fff,
     ),
     'indigo': (
         'background': hsl(231, 44%, 94%),
         'default': hsl(232, 50%, 45%),
         'hover': hsl(232, 54%, 41%),
         'active': hsl(233, 57%, 37%),
+        'dark': hsl(235, 66%, 30%),
         'default-font-color': #fff, //AAA
     ),
     'blue': (
         'background': hsl(205, 87%, 94%),
         'default': hsl(210, 79%, 46%),
         'hover': hsl(212, 80%, 42%),
         'active': hsl(216, 85%, 34%),
+        'dark': hsl(216, 85%, 34%),
         'default-font-color': #fff, //AA
     ),
     'light-blue': (
         'background': hsl(199, 94%, 94%),
         'default': hsl(199, 91%, 64%),
         'hover': hsl(199, 92%, 56%),
         'active': hsl(199, 98%, 48%),
+        'dark': hsl(206, 99%, 31%),
         'default-font-color': #000, //AAA
     ),
     'teal': (
         'background': hsl(177, 72%, 93%),
         'default': hsl(187, 100%, 38%),
         'hover': hsl(186, 100%, 33%),
         'active': hsl(185, 100%, 28%),
+        'dark': hsl(182, 100%, 20%),
         'default-font-color': #000, //AAA
     ),
     'green': (
         'background': hsl(125, 39%, 94%),
         'default': hsl(123, 41%, 45%),
         'hover': hsl(123, 43%, 39%),
         'active': hsl(123, 46%, 34%),
+        'dark': hsl(124, 55%, 24%),
         'default-font-color': #000, //AA
     ),
     'light-green': (
         'background': hsl(88, 52%, 94%),
         'default': hsl(89, 46%, 48%),
         'hover': hsl(92, 48%, 42%),
         'active': hsl(95, 49%, 36%),
+        'dark': hsl(103, 56%, 26%),
         'default-font-color': #000, //AAA
     ),
     'lime': (
         'background': hsl(66, 71%, 95%),
         'default': hsl(64, 60%, 50%),
         'hover': hsl(62, 61%, 44%),
         'active': hsl(60, 63%, 38%),
+        'dark': hsl(54, 70%, 30%),
         'default-font-color': #000, //AAA
     ),
     'yellow': (
         'background': hsl(55, 100%, 95%),
         'default': hsl(49, 98%, 60%),
         'hover': hsl(43, 96%, 58%),
         'active': hsl(37, 95%, 56%),
+        'dark': hsl(28, 92%, 53%),
         'default-font-color': #000, //AAA
     ),
     'amber': (
         'background': hsl(46, 100%, 94%),
         'default': hsl(42, 100%, 50%),
         'hover': hsl(38, 100%, 50%),
         'active': hsl(34, 100%, 50%),
+        'dark': hsl(26, 100%, 50%),
         'default-font-color': #000, //AAA
     ),
     'orange': (
         'background': hsl(37, 100%, 94%),
         'default': hsl(33, 100%, 49%),
         'hover': hsl(30, 100%, 48%),
         'active': hsl(27, 100%, 47%),
+        'dark': hsl(21, 100%, 45%),
         'default-font-color': #000, //AAA
     ),
     'brown': (
         'background': hsl(20, 16%, 93%),
         'default': hsl(15, 25%, 34%),
         'hover': hsl(14, 26%, 29%),
         'active': hsl(11, 26%, 24%),
+        'dark': hsl(9, 28%, 19%),
         'default-font-color': #fff, //AAA
     ),
     'gray': (
         'background': hsl(0, 0%, 98%),
         'default': hsl(0, 0%, 46%),
         'hover': hsl(0, 0%, 38%),
         'active': hsl(0, 0%, 26%),
+        'dark': hsl(0, 0%, 13%),
         'default-font-color': #fff, //AA
     ),
     'blue-gray': (
         'background': hsl(204, 15%, 94%),
         'default': hsl(199, 18%, 33%),
         'hover': hsl(200, 18%, 26%),
         'active': hsl(200, 19%, 18%),
+        'dark': hsl(200, 19%, 18%),
         'default-font-color': #fff, //AAA
     )
 );
@@ -168,7 +185,7 @@ $primary-color-light-background: color('deep-purple', 'background');
 $danger-color: color('red', 'default');
 $danger-color-hover: color('red', 'hover');
 $danger-color-active: color('red', 'active');
-$danger-color-light-background: color('red', 'default');
+$danger-color-light-background: color('red', 'background');
 
 $success-color: color('green', 'default');
 $success-color-hover: color('green', 'hover');
diff --git a/src/style/components/_tags.scss b/src/style/components/_tags.scss
@@ -0,0 +1,35 @@
+@use "../base/variables";
+
+.tag {
+    align-items: center;
+    border-radius: var(--base-border-radius);
+    display: inline-block;
+    font: {
+        weight: 500;
+    }
+    padding: calc(var(--base-gutter) / 2);
+
+    &.tag-primary, &.tag-purple {
+        background: var(--primary-color-light-background);
+        color: var(--primary-color);
+    }
+
+    &.tag-danger {
+        background: var(--danger-color-light-background);
+        color: var(--danger-color);
+    }
+
+    + .tag {
+        margin-left: var(--base-gutter);
+    }
+
+    @each $color, $_ in variables.$colors {
+        &.tag-#{$color} {
+            background: variables.color($color, 'background');
+            color: variables.color($color, 'dark');
+            font: {
+                weight: 500;
+            }
+        }
+    }
+}
diff --git a/src/style/index.scss b/src/style/index.scss
@@ -14,6 +14,7 @@
 @use "components/card";
 @use "components/icons";
 @use "components/forms";
+@use "components/tags";
 
 /**
  * 3. Layout
diff --git a/www/src/index.tsx b/www/src/index.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { useState } from 'react';
 import * as ReactDom from 'react-dom';
 
 import '../../src/style/index.scss';
-import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, TextField, Variant } from '../../src';
+import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
 import FormMessage from '../../src/components/Form/Message';
-import { useState } from 'react';
 
 const TestControllable = () => {
     const [value, setValue] = useState('');
@@ -227,6 +227,31 @@ ReactDom.render(
                             <TestControllable />
                         </Card.Content>
                     </Card>
+                    <Card>
+                        <Card.Header title="Tags" />
+                        <Card.Content>
+                            test text
+                            <Tag variant={Variant.PRIMARY}>Primary</Tag>
+                            <Tag variant={Variant.DANGER}>Danger</Tag>
+                            <Tag variant={Variant.RED}>Rood</Tag>
+                            <Tag variant={Variant.PINK}>Roze</Tag>
+                            <Tag variant={Variant.PURPLE}>Paars</Tag>
+                            <Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
+                            <Tag variant={Variant.INDIGO}>Indigo</Tag>
+                            <Tag variant={Variant.BLUE}>Blauw</Tag>
+                            <Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
+                            <Tag variant={Variant.TEAL}>Teal</Tag>
+                            <Tag variant={Variant.GREEN}>Groen</Tag>
+                            <Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
+                            <Tag variant={Variant.LIME}>Limoen</Tag>
+                            <Tag variant={Variant.YELLOW}>Geel</Tag>
+                            <Tag variant={Variant.AMBER}>Amber</Tag>
+                            <Tag variant={Variant.ORANGE}>Oranje</Tag>
+                            <Tag variant={Variant.BROWN}>Bruin</Tag>
+                            <Tag variant={Variant.GRAY}>Grijs</Tag>
+                            <Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
+                        </Card.Content>
+                    </Card>
                 </Row>
                 <Row>
                     <Grid columns={10} gap={4}>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as Tag } from './Tag';`