Add color yellow to tag colors (#471)

helpscout · Feb 7, 2019 · 1e60005 · 1e60005
1 parent cefe590
commit 1e60005
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/components/Tag/README.md b/src/components/Tag/README.md
@@ -36,3 +36,4 @@ A Tag component is a UI element that provide contextual labels for categories/ta
 | `orange` | Colors the tag orange. |
 | `purple` | Colors the tag purple. |
 | `red`    | Colors the tag red.    |
+| `yellow` | Colors the tag yellow. |
diff --git a/src/components/Tag/Tag.css.ts b/src/components/Tag/Tag.css.ts
@@ -16,6 +16,7 @@ export const config = {
     orange: getColor('orange.500'),
     purple: getColor('purple.500'),
     red: getColor('red.500'),
+    yellow: getColor('yellow.500'),
   },
   height: 18,
   padding: '1px 4px',

diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -11,7 +11,15 @@ import { noop, promiseNoop } from '../../utilities/other'
 import { AnimateUI, TagWrapperUI, TagUI, BodyUI, SpinnerUI } from './Tag.css'
 import { COMPONENT_KEY } from './Tag.utils'
 
-type TagColor = 'blue' | 'green' | 'grey' | 'gray' | 'orange' | 'purple' | 'red'
+type TagColor =
+  | 'blue'
+  | 'green'
+  | 'grey'
+  | 'gray'
+  | 'orange'
+  | 'purple'
+  | 'red'
+  | 'yellow'
 
 export interface Props {
   animationDuration?: number

diff --git a/stories/Tag/Tag.stories.js b/stories/Tag/Tag.stories.js
@@ -25,6 +25,7 @@ stories.add('Default', () => {
         blue: 'blue',
         orange: 'orange',
         purple: 'purple',
+        yellow: 'yellow',
       },
       'grey'
     ),
@@ -57,6 +58,9 @@ stories.add('filled', () => (
     <Tag color="purple" filled>
       Ron
     </Tag>
+    <Tag color="yellow" filled>
+      Ron
+    </Tag>
   </div>
 ))
 
@@ -80,5 +84,8 @@ stories.add('pulsing', () => (
     <Tag color="purple" pulsing>
       Ron
     </Tag>
+    <Tag color="yellow" pulsing>
+      Ron
+    </Tag>
   </div>
 ))