fix: add default hint color (#197)

WTTJ · Jul 15, 2019 · 766ebee · 766ebee
1 parent e5d3802
commit 766ebee
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 8 deletions.
diff --git a/src/components/Hint/index.js b/src/components/Hint/index.js
@@ -12,8 +12,6 @@ export const Hint = forwardRef(({ children, variant }, ref) => (
 Hint.displayName = 'Hint'
 
 Hint.propTypes = {
-  /** Node component from parent */
   children: node,
-  /** Variant of component */
   variant: oneOf(['warning', 'error'])
 }
diff --git a/src/components/Hint/index.test.js b/src/components/Hint/index.test.js
@@ -12,7 +12,7 @@ describe('<Hint>', () => {
     const button = getByTestId('hint')
 
     expect(button).toHaveTextContent(content)
-    expect(button).toHaveStyleRule('color', undefined)
+    expect(button).toHaveStyleRule('color', '#8e8e8e')
   })
 
   it('should render correctly with a state', () => {

diff --git a/src/components/Hint/styles.js b/src/components/Hint/styles.js
@@ -5,9 +5,8 @@ import { getVariantStateColor, system } from '../../utils/'
 
 export const Hint = styled.div(
   props => css`
-    font-family: texts;
-    color: ${getVariantStateColor(props.variant)};
     ${th('fields.hint')};
+    color: ${getVariantStateColor(props.variant)};
     margin-top: sm;
     ${system};
   `

diff --git a/src/theme/fields.js b/src/theme/fields.js
@@ -53,6 +53,7 @@ export const getFields = theme => {
       color: colors.nude[600]
     },
     hint: {
+      color: colors.nude[600],
       'font-size': fontSizes.body3,
       'font-weight': fontWeights.regular
     },

diff --git a/src/utils/variants.js b/src/utils/variants.js
@@ -21,15 +21,15 @@ export const getHintText = ({ connected, error, hint, touched, warning }) => {
   }
 }
 
-const variantStateColors = {
+const VARIANTS = {
   focused: 'colors.primary.500',
   error: 'colors.danger.500',
   warning: 'colors.warning.500',
   info: 'colors.info.500'
 }
 
 export const getVariantStateColor = variant => {
-  const variantColor = variantStateColors[variant]
+  const variantColor = VARIANTS[variant]
   return variantColor ? th(variantColor) : null
 }
 
@@ -45,7 +45,7 @@ const variantColors = {
   secondary: 'colors.secondary.500',
   turquoize: 'colors.sub.turquoize',
   yellow: 'colors.sub.yellow',
-  ...variantStateColors
+  ...VARIANTS
 }
 
 export const getVariantColor = variant => {