Skip to content

Commit f4ecbb6

Browse files
EranNLEranNL
committed
Added more tag colors
1 parent 0a94e6f commit f4ecbb6

File tree

4 files changed

+71
-14
lines changed

4 files changed

+71
-14
lines changed

‎__tests__/Tag.test.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { shallow } from 'enzyme';
2+
import React from 'react';
3+
import { Tag, Variant } from '@/components';
4+
5+
describe('Tag test', () => {
6+
7+
it('should render tag', () => {
8+
const container = shallow(
9+
<Tag variant={Variant.ORANGE}>
10+
Hello world
11+
</Tag>
12+
);
13+
14+
expect(container.find('.tag.tag-orange').length).toBe(1);
15+
});
16+
});

‎src/style/base/_variables.scss

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,23 @@ $colors: (
88
'default': hsl(0, 65%, 51%),
99
'hover': hsl(0, 66%, 47%),
1010
'active': hsl(0, 73%, 41%),
11+
'dark': hsl(0, 73%, 41%),
1112
'default-font-color': #fff, //AA
1213
),
1314
'pink': (
1415
'background': hsl(340, 80%, 94%),
1516
'default': hsl(338, 78%, 48%),
1617
'hover': hsl(336, 78%, 43%),
1718
'active': hsl(334, 79%, 38%),
19+
'dark': hsl(328, 81%, 29%),
1820
'default-font-color': #fff, //AA
1921
),
2022
'purple': (
2123
'background': hsl(292, 44%, 93%),
2224
'default': hsl(287, 65%, 40%),
2325
'hover': hsl(282, 68%, 38%),
2426
'active': hsl(277, 70%, 35%),
27+
'dark': hsl(267, 75%, 31%),
2528
'default-font-color': #fff, //AAAA
2629
),
2730
'deep-purple': (
@@ -30,97 +33,111 @@ $colors: (
3033
'default': hsl(260, 54%, 45%),
3134
'hover': hsl(258, 58%, 42%),
3235
'active': hsl(251, 69%, 34%),
36+
'dark': hsl(251, 69%, 34%),
3337
'default-font-color': #fff,
3438
),
3539
'indigo': (
3640
'background': hsl(231, 44%, 94%),
3741
'default': hsl(232, 50%, 45%),
3842
'hover': hsl(232, 54%, 41%),
3943
'active': hsl(233, 57%, 37%),
44+
'dark': hsl(235, 66%, 30%),
4045
'default-font-color': #fff, //AAA
4146
),
4247
'blue': (
4348
'background': hsl(205, 87%, 94%),
4449
'default': hsl(210, 79%, 46%),
4550
'hover': hsl(212, 80%, 42%),
4651
'active': hsl(216, 85%, 34%),
52+
'dark': hsl(216, 85%, 34%),
4753
'default-font-color': #fff, //AA
4854
),
4955
'light-blue': (
5056
'background': hsl(199, 94%, 94%),
5157
'default': hsl(199, 91%, 64%),
5258
'hover': hsl(199, 92%, 56%),
5359
'active': hsl(199, 98%, 48%),
60+
'dark': hsl(206, 99%, 31%),
5461
'default-font-color': #000, //AAA
5562
),
5663
'teal': (
5764
'background': hsl(177, 72%, 93%),
5865
'default': hsl(187, 100%, 38%),
5966
'hover': hsl(186, 100%, 33%),
6067
'active': hsl(185, 100%, 28%),
68+
'dark': hsl(182, 100%, 20%),
6169
'default-font-color': #000, //AAA
6270
),
6371
'green': (
6472
'background': hsl(125, 39%, 94%),
6573
'default': hsl(123, 41%, 45%),
6674
'hover': hsl(123, 43%, 39%),
6775
'active': hsl(123, 46%, 34%),
76+
'dark': hsl(124, 55%, 24%),
6877
'default-font-color': #000, //AA
6978
),
7079
'light-green': (
7180
'background': hsl(88, 52%, 94%),
7281
'default': hsl(89, 46%, 48%),
7382
'hover': hsl(92, 48%, 42%),
7483
'active': hsl(95, 49%, 36%),
84+
'dark': hsl(103, 56%, 26%),
7585
'default-font-color': #000, //AAA
7686
),
7787
'lime': (
7888
'background': hsl(66, 71%, 95%),
7989
'default': hsl(64, 60%, 50%),
8090
'hover': hsl(62, 61%, 44%),
8191
'active': hsl(60, 63%, 38%),
92+
'dark': hsl(54, 70%, 30%),
8293
'default-font-color': #000, //AAA
8394
),
8495
'yellow': (
8596
'background': hsl(55, 100%, 95%),
8697
'default': hsl(49, 98%, 60%),
8798
'hover': hsl(43, 96%, 58%),
8899
'active': hsl(37, 95%, 56%),
100+
'dark': hsl(28, 92%, 53%),
89101
'default-font-color': #000, //AAA
90102
),
91103
'amber': (
92104
'background': hsl(46, 100%, 94%),
93105
'default': hsl(42, 100%, 50%),
94106
'hover': hsl(38, 100%, 50%),
95107
'active': hsl(34, 100%, 50%),
108+
'dark': hsl(26, 100%, 50%),
96109
'default-font-color': #000, //AAA
97110
),
98111
'orange': (
99112
'background': hsl(37, 100%, 94%),
100113
'default': hsl(33, 100%, 49%),
101114
'hover': hsl(30, 100%, 48%),
102115
'active': hsl(27, 100%, 47%),
116+
'dark': hsl(21, 100%, 45%),
103117
'default-font-color': #000, //AAA
104118
),
105119
'brown': (
106120
'background': hsl(20, 16%, 93%),
107121
'default': hsl(15, 25%, 34%),
108122
'hover': hsl(14, 26%, 29%),
109123
'active': hsl(11, 26%, 24%),
124+
'dark': hsl(9, 28%, 19%),
110125
'default-font-color': #fff, //AAA
111126
),
112127
'gray': (
113128
'background': hsl(0, 0%, 98%),
114129
'default': hsl(0, 0%, 46%),
115130
'hover': hsl(0, 0%, 38%),
116131
'active': hsl(0, 0%, 26%),
132+
'dark': hsl(0, 0%, 13%),
117133
'default-font-color': #fff, //AA
118134
),
119135
'blue-gray': (
120136
'background': hsl(204, 15%, 94%),
121137
'default': hsl(199, 18%, 33%),
122138
'hover': hsl(200, 18%, 26%),
123139
'active': hsl(200, 19%, 18%),
140+
'dark': hsl(200, 19%, 18%),
124141
'default-font-color': #fff, //AAA
125142
)
126143
);
@@ -168,7 +185,7 @@ $primary-color-light-background: color('deep-purple', 'background');
168185
$danger-color: color('red', 'default');
169186
$danger-color-hover: color('red', 'hover');
170187
$danger-color-active: color('red', 'active');
171-
$danger-color-light-background: color('red', 'default');
188+
$danger-color-light-background: color('red', 'background');
172189

173190
$success-color: color('green', 'default');
174191
$success-color-hover: color('green', 'hover');

‎src/style/components/_tags.scss

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
1+
@use "../base/variables";
2+
13
.tag {
2-
display: inline-block;
34
align-items: center;
5+
border-radius: var(--base-border-radius);
6+
display: inline-block;
7+
font: {
8+
weight: 500;
9+
}
10+
padding: calc(var(--base-gutter) / 2);
411

512
&.tag-primary, &.tag-purple {
613
background: var(--primary-color-light-background);
714
color: var(--primary-color);
8-
padding: calc(var(--base-gutter) / 2);
9-
border-radius: var(--base-border-radius);
10-
font: {
11-
weight: 500;
12-
}
1315
}
1416

15-
&.tag-danger, &.tag-red {
17+
&.tag-danger {
1618
background: var(--danger-color-light-background);
1719
color: var(--danger-color);
18-
padding: calc(var(--base-gutter) / 2);
19-
border-radius: var(--base-border-radius);
20-
font: {
21-
weight: 500;
22-
}
2320
}
2421

2522
+ .tag {
2623
margin-left: var(--base-gutter);
2724
}
25+
26+
@each $color, $_ in variables.$colors {
27+
&.tag-#{$color} {
28+
background: variables.color($color, 'background');
29+
color: variables.color($color, 'dark');
30+
font: {
31+
weight: 500;
32+
}
33+
}
34+
}
2835
}

‎www/src/index.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,24 @@ ReactDom.render(
232232
<Card.Content>
233233
test text
234234
<Tag variant={Variant.PRIMARY}>Primary</Tag>
235-
<Tag variant={Variant.DANGER}>Primary</Tag>
235+
<Tag variant={Variant.DANGER}>Danger</Tag>
236+
<Tag variant={Variant.RED}>Rood</Tag>
237+
<Tag variant={Variant.PINK}>Roze</Tag>
238+
<Tag variant={Variant.PURPLE}>Paars</Tag>
239+
<Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
240+
<Tag variant={Variant.INDIGO}>Indigo</Tag>
241+
<Tag variant={Variant.BLUE}>Blauw</Tag>
242+
<Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
243+
<Tag variant={Variant.TEAL}>Teal</Tag>
244+
<Tag variant={Variant.GREEN}>Groen</Tag>
245+
<Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
246+
<Tag variant={Variant.LIME}>Limoen</Tag>
247+
<Tag variant={Variant.YELLOW}>Geel</Tag>
248+
<Tag variant={Variant.AMBER}>Amber</Tag>
249+
<Tag variant={Variant.ORANGE}>Oranje</Tag>
250+
<Tag variant={Variant.BROWN}>Bruin</Tag>
251+
<Tag variant={Variant.GRAY}>Grijs</Tag>
252+
<Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
236253
</Card.Content>
237254
</Card>
238255
</Row>

0 commit comments

Comments
 (0)