Merge dfc25e7 into 6497dcf

helpscout · Apr 18, 2019 · 02fcef0 · 02fcef0
2 parents 6497dcf + dfc25e7
commit 02fcef0
Show file tree

Hide file tree

Showing 11 changed files with 527 additions and 311 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Tag/README.md b/src/components/Tag/README.md
@@ -20,6 +20,7 @@ A Tag component is a UI element that provide contextual labels for categories/ta
 | isRemovable                   | `boolean`         | Renders an `x` [Icon](../Icon), which can remove this component from the DOM. |
 | isRemoving                    | `boolean`         | Renders the [Spinner](../Spinner) and replaces the `x` [Icon](../Icon)        |
 | filled                        | `boolean`         | Applies a filled in color style to the component.                             |
+| size                          | `string`          | Apply a different size to the component                                       |
 | pulsing                       | `boolean`         | Applies a pulsing animation.                                                  |
 | `onBeforeRemove({id, value})` | `Promise`         | Function that returns a promise to resolve before removing.                   |
 | `onRemove({id, value})`       | `Function`        | Callback function when component is removed and unmounted.                    |
@@ -28,12 +29,20 @@ A Tag component is a UI element that provide contextual labels for categories/ta
 
 ### Colors
 
-| Value    | Description            |
-| -------- | ---------------------- |
-| `blue`   | Colors the tag blue.   |
-| `green`  | Colors the tag green.  |
-| `grey`   | Colors the tag grey.   |
-| `orange` | Colors the tag orange. |
-| `purple` | Colors the tag purple. |
-| `red`    | Colors the tag red.    |
-| `yellow` | Colors the tag yellow. |
+| Value       | Description                       |
+| ----------- | --------------------------------- |
+| `blue`      | Colors the tag blue.              |
+| `green`     | Colors the tag green.             |
+| `grey`      | Colors the tag grey.              |
+| `lightBlue` | Colors the tag with a light blue. |
+| `orange`    | Colors the tag orange.            |
+| `purple`    | Colors the tag purple.            |
+| `red`       | Colors the tag red.               |
+| `yellow`    | Colors the tag yellow.            |
+
+### Size
+
+| Value | Description                      |
+| ----- | -------------------------------- |
+| `sm`  | Default size value (17px height) |
+| `md`  | Bigger tag (22px height)         |
diff --git a/src/components/Tag/Tag.css.ts b/src/components/Tag/Tag.css.ts
@@ -1,38 +1,96 @@
-import baseStyles from '../../styles/resets/baseStyles.css.js'
 import { getColor } from '../../styles/utilities/color'
+import baseStyles from '../../styles/resets/baseStyles.css.js'
+
 import forEach from '../../styles/utilities/forEach'
 import Animate from '../Animate'
-import Flexy from '../Flexy'
 import Spinner from '../Spinner'
+import Icon from '../Icon'
+import Text from '../Text'
 import styled from '../styled'
 
 export const config = {
   borderRadius: 3,
   colors: {
-    default: getColor('charcoal.200'),
-    blue: getColor('blue.500'),
-    green: getColor('green.500'),
-    grey: getColor('charcoal.200'),
-    orange: getColor('orange.500'),
-    purple: getColor('purple.500'),
-    red: getColor('red.500'),
-    yellow: getColor('yellow.500'),
+    default: {
+      main: getColor('charcoal.200'),
+      secondary: 'white',
+    },
+    blue: {
+      main: getColor('blue.500'),
+      secondary: 'white',
+    },
+    green: {
+      main: getColor('green.500'),
+      secondary: 'white',
+    },
+    grey: {
+      main: getColor('charcoal.200'),
+      secondary: 'white',
+    },
+    orange: {
+      main: getColor('orange.500'),
+      secondary: 'white',
+    },
+    purple: {
+      main: getColor('purple.500'),
+      secondary: 'white',
+    },
+    red: {
+      main: getColor('red.500'),
+      secondary: 'white',
+    },
+    yellow: {
+      main: getColor('yellow.500'),
+      secondary: 'white',
+    },
+    lightBlue: {
+      main: getColor('blue.200'),
+      secondary: getColor('blue.700'),
+    },
+  },
+  height: {
+    sm: 17,
+    md: 22,
+  },
+  iconWidth: {
+    sm: 18,
+    md: 24,
+  },
+  padding: {
+    sm: '0 4px',
+    md: '0 8px',
   },
-  height: 18,
-  padding: '1px 4px',
 }
 
-export const BodyUI = styled(Flexy)`
+export const BodyUI = styled('div')`
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  height: ${config.height.sm}px;
+`
+
+export const IconWrapperUI = styled('div')`
+  width: ${config.iconWidth.sm}px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  &.is-md {
+    width: ${config.iconWidth.md}px;
+  }
+`
+
+export const TextUI = styled(Text)`
+  flex: 1 1 auto;
 `
 
 export const AnimateUI = styled(Animate)`
   max-width: 100%;
 `
 
 export const TagWrapperUI = styled('div')`
-  ${baseStyles};
-  display: inline-block;
   max-width: 100%;
 
   &.is-display-block {
@@ -48,14 +106,28 @@ export const TagUI = styled('div')`
   background-color: white;
   border-radius: ${config.borderRadius}px;
   border: 1px solid currentColor;
-  color: ${config.colors.default};
-  display: block;
-  padding: ${config.padding};
-  height: ${config.height}px;
+  color: ${config.colors.default.main};
+  display: flex;
+  align-items: center;
+  padding: ${config.padding.sm};
+  height: ${config.height.sm}px;
   max-width: 100%;
 
   ${makeColorStyles()};
 
+  &.is-md {
+    padding: ${config.padding.md};
+    height: ${config.height.md}px;
+
+    .c-Tag__body {
+      height: ${config.height.md}px;
+    }
+  }
+
+  &.is-removable {
+    padding-right: 0;
+  }
+
   &.is-pulsing {
     animation: _Blue_Tag_Blink 4s infinite both;
     backface-visibility: hidden;
@@ -88,24 +160,52 @@ export const TagUI = styled('div')`
 
 export const SpinnerUI = styled(Spinner)`
   color: currentColor;
-  padding: 0 1px;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+
+  &.is-md {
+    position: relative;
+    right: -1px;
+  }
+`
+
+export const IconUI = styled(Icon)`
+  color: currentColor;
+  transition: 0.2s ease-in-out opacity;
+  height: 100%;
+  width: 100%;
+  transform: scale(1.2);
+
+  &.is-md {
+    transform: scale(1);
+    position: relative;
+    right: -1px;
+  }
 
   &.is-filled {
-    color: white;
+    opacity: 0.75;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 `
 
 function makeColorStyles(): string {
   return forEach(
     config.colors,
-    (color, value) => `
-    &.is-${color} {
-      color: ${value};
+    (colorName, { main, secondary }) => `
+    &.is-${colorName} {
+      color: ${main};
 
       &.is-filled {
-        background-color: ${value};
-        border-color: ${value};
-        color: white;
+        background-color: ${main};
+        border-color: ${main};
+        color: ${secondary};
       }
     }
   `