Added hocus helper state variant to apply hover and focus (#20)

* Standardised focus behaviour

* Added `hocus` helper state variant to apply `hover` and `focus`

* Updated snapshot

Author: emortlock

src/button/Button.jsx

@@ -39,7 +39,7 @@ const Button = ({
     case 'fill':
       props.bg = brand ? theme.brandColors[brand] : bg
       props.text = brand ? theme.textColors.on[brand] : text
-      props['bg-hover'] = getColorShade(
+      props['bg-hocus'] = getColorShade(
         brand ? theme.brandColors[brand] : bg,
         theme.highlightOffset,
       )
@@ -48,22 +48,23 @@ const Button = ({
       // eslint-disable-next-line react/prop-types
       props.border.push(brand ? theme.brandColors[brand] : border)
       props.text = brand ? theme.brandColors[brand] : border
-      props['bg-hover'] = brand ? theme.brandColors[brand] : border
-      props['text-hover'] = brand ? theme.textColors.on[brand] : text
+      props['bg-hocus'] = brand ? theme.brandColors[brand] : border
+      props['text-hocus'] = brand ? theme.textColors.on[brand] : text
       break
     case 'text':
       props.text = brand ? theme.brandColors[brand] : text
-      props['bg-hover'] = `${getColorShade(
+      props['bg-hocus'] = `${getColorShade(
         brand ? theme.brandColors[brand] : text,
         'lightest',
       )}`
       break
     case 'link':
-      props.leading = undefined
+      props.rounded = undefined
+      props.leading = 'normal'
       props.p = 0
       props.underline = true
       props.text = brand ? theme.brandColors[brand] : text
-      props['text-hover'] = getColorShade(
+      props['text-hocus'] = getColorShade(
         brand ? theme.brandColors[brand] : text,
         theme.highlightOffset,
       )

src/button/__tests__/__snapshots__/Button.jsx.snap

@@ -3,7 +3,7 @@
 exports[`Button renders matching snapshot 1`] = `
 <BaseComponent
   bg="blue"
-  bg-hover="blue-dark"
+  bg-hocus="blue-dark"
   border={
     Array [
       true,

src/form/TextInput.jsx

@@ -34,8 +34,6 @@ const TextInput = ({
       border={!isInvalid ? true : [true, theme.brandColors.danger]}
       w="full"
       leading="tight"
-      outline-focus="none"
-      shadow-focus="outline"
       opacity={disabled ? 50 : undefined}
       id={field.inputId || id || name}
       name={name}

src/form/__tests__/__snapshots__/TextInput.jsx.snap

@@ -15,7 +15,6 @@ exports[`TextInput renders matching snapshot 1`] = `
     }
   }
   name="username"
-  outline-focus="none"
   p={
     Object {
       "x": 4,
@@ -24,7 +23,6 @@ exports[`TextInput renders matching snapshot 1`] = `
   }
   readOnly={false}
   rounded="rounded"
-  shadow-focus="outline"
   text="grey-darkest"
   type="text"
   w="full"

src/header/NavItem.jsx

@@ -16,8 +16,8 @@ const NavItem = ({
   <BaseComponent
     is={is}
     text={style.text}
-    bg-hover={style.text}
-    text-hover={style.bg}
+    bg-hocus={style.text}
+    text-hocus={style.bg}
     p={{ x: theme.spacing.md, y: theme.spacing.sm }}
     m={{ t: theme.spacing.sm }}
     m-lg={{ t: 0, r: theme.spacing.sm }}

src/header/__tests__/__snapshots__/NavItem.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`NavItem renders matching snapshot 1`] = `
 <BaseComponent
-  bg-hover="white"
+  bg-hocus="white"
   className="block no-underline"
   is={[Function]}
   m={
@@ -24,7 +24,7 @@ exports[`NavItem renders matching snapshot 1`] = `
   }
   rounded="rounded"
   text="white"
-  text-hover="blue"
+  text-hocus="blue"
 >
   Link
 </BaseComponent>

src/header/readme.md

@@ -19,7 +19,7 @@ Example:
     <NavItem is={props => <a {...props} href="#header" />}>Docs</NavItem>
     <NavItem is={props => <a {...props} href="#header" />}>Examples</NavItem>
     <NavItem is={props => <a {...props} href="#header" />}>Blog</NavItem>
-    <OutlineButton border="white" text="white" text-hover="blue">
+    <OutlineButton border="white" text="white" text-hocus="blue">
       Download
     </OutlineButton>
   </NavMenu>
@@ -47,7 +47,7 @@ Custom branding example:
     <NavItem is={props => <a {...props} href="#header" />}>Docs</NavItem>
     <NavItem is={props => <a {...props} href="#header" />}>Examples</NavItem>
     <NavItem is={props => <a {...props} href="#header" />}>Blog</NavItem>
-    <OutlineButton border="white" text="white" text-hover="purple">
+    <OutlineButton border="white" text="white" text-hocus="purple">
       Download
     </OutlineButton>
   </NavMenu>

src/tailwind/BaseComponent.jsx

@@ -13,7 +13,14 @@ const BaseComponent = ({ is, children, className, ...rest }) => {
   return (
     <Component
       {...filterProps(rest, tailwindProps)}
-      className={classnames(getTailwindClassNames(rest), className)}
+      className={classnames(
+        getTailwindClassNames({
+          'outline-focus': 'none',
+          'shadow-focus': 'outline',
+          ...rest,
+        }),
+        className,
+      )}
     >
       {children}
     </Component>

src/tailwind/getTailwindClassNames.js

@@ -14,6 +14,14 @@ export default (props, { ignore = [] } = {}) =>
     if (!tailwindProps.includes(type)) return twClasses
 
     if (tailwindVariants.includes(variant)) {
+      if (variant === 'hocus') {
+        return [
+          ...twClasses,
+          tailwindPropToClassName(`hover:${type}`, props[key]),
+          tailwindPropToClassName(`focus:${type}`, props[key]),
+        ]
+      }
+
       return [
         ...twClasses,
         tailwindPropToClassName(`${variant}:${type}`, props[key]),

src/tailwind/tailwindProps.js

@@ -71,7 +71,7 @@ export const propTypes = {
   whitespace: PropTypes.string,
 }
 
-export const variants = ['hover', 'focus', 'sm', 'md', 'lg', 'xl']
+export const variants = ['hover', 'focus', 'hocus', 'sm', 'md', 'lg', 'xl']
 
 export default [
   ...Object.keys(propTypes),