Added support for additional tailwind props (#31)

emortlock · web-flow · commit 7b48fda97c6d · 2018-08-30T09:51:42.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "lodash.includes": "^4.3.0",
     "lodash.merge": "^4.6.1",
     "lodash.uniqueid": "^4.0.1",
+    "param-case": "^2.1.1",
     "prop-types": "^15.6.2",
     "react-transition-group": "^2.4.0"
   },
diff --git a/src/components/button/Button.jsx b/src/components/button/Button.jsx
@@ -27,6 +27,7 @@ const Button = ({
     p: { x: theme.spacing.md, y: theme.spacing.sm },
     rounded: theme.radius,
     select: 'none',
+    noUnderline: true,
   }
 
   if (large) {
@@ -60,6 +61,7 @@ const Button = ({
       break
     case 'link':
       props.rounded = undefined
+      props.noUnderline = undefined
       props.leading = 'normal'
       props.p = 0
       props.underline = true
diff --git a/src/components/button/__tests__/__snapshots__/Button.jsx.snap b/src/components/button/__tests__/__snapshots__/Button.jsx.snap
@@ -14,6 +14,7 @@ exports[`Button renders matching snapshot 1`] = `
   focusable={true}
   is="button"
   leading="tight"
+  noUnderline={true}
   p={
     Object {
       "x": 4,
diff --git a/src/components/content/ContentBlock.jsx b/src/components/content/ContentBlock.jsx
@@ -43,13 +43,11 @@ ContentBlock.propTypes = {
   theme: PropTypes.shape({}).isRequired,
   is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   children: PropTypes.node,
-  className: PropTypes.string,
 }
 
 ContentBlock.defaultProps = {
   is: 'section',
   children: undefined,
-  className: undefined,
 }
 
 export { ContentBlock as component }
diff --git a/src/components/content/ContentTitle.jsx b/src/components/content/ContentTitle.jsx
@@ -2,16 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { Title } from '../typography'
-import { VisuallyHidden } from '../visuallyHidden'
 
-const ContentTitle = ({ content: { id }, visuallyHidden, ...rest }) =>
-  !visuallyHidden ? (
-    <Title id={id} {...rest} />
-  ) : (
-    <VisuallyHidden>
-      <Title id={id} {...rest} />
-    </VisuallyHidden>
-  )
+const ContentTitle = ({ content: { id }, visuallyHidden, ...rest }) => (
+  <Title id={id} visuallyHidden={visuallyHidden} {...rest} />
+)
 
 ContentTitle.propTypes = {
   content: PropTypes.shape({
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -11,7 +11,7 @@ const Footer = ({ theme, is, children, ...rest }) => (
     role="contentinfo"
     p={{ t: theme.spacing.lg, b: theme.spacing.xl }}
     bg={theme.brandColors.secondary}
-    text={[theme.textColors.on.secondary, theme.text.size.body[0]]}
+    text={theme.textColors.on.secondary}
     {...rest}
   >
     <Container padding>{children}</Container>
diff --git a/src/components/footer/__tests__/__snapshots__/Footer.jsx.snap b/src/components/footer/__tests__/__snapshots__/Footer.jsx.snap
@@ -11,12 +11,7 @@ exports[`Footer renders matching snapshot 1`] = `
     }
   }
   role="contentinfo"
-  text={
-    Array [
-      "white",
-      "sm",
-    ]
-  }
+  text="white"
 >
   <WithTheme(Container)
     padding={true}
diff --git a/src/components/footer/readme.md b/src/components/footer/readme.md
@@ -2,14 +2,14 @@ Simple wrapper around the `<footer />` element
 
 ```jsx
 <Footer>
-  <p className="mb-4">&copy; E Corp {new Date().getFullYear()}</p>
-  <p>
+  <Text is="p">&copy; E Corp {new Date().getFullYear()}</Text>
+  <Text size={1}>
     Cookies are used by our fictional third party partners to track your
     browsing habits, DNA and thoughts. View our{' '}
     <a href="#footer" className="text-white hover:text-black">
       privacy policy
     </a>{' '}
     to attempt to manage your preferences.
-  </p>
+  </Text>
 </Footer>
 ```
diff --git a/src/components/form/Field.jsx b/src/components/form/Field.jsx
@@ -37,7 +37,7 @@ class Field extends PureComponent {
         is={is}
         id={this.id}
         m={{ b: theme.spacing.md }}
-        className="max-w-sm"
+        maxW="sm"
         {...rest}
       >
         {React.Children.map(children, child =>
diff --git a/src/components/form/Label.jsx b/src/components/form/Label.jsx
@@ -9,13 +9,12 @@ const Label = ({
   is,
   field: { inputId, disabled },
   children,
-  className,
   htmlFor,
   ...rest
 }) => (
   <BaseComponent
     is={is}
-    className="inline-block"
+    inlineBlock
     htmlFor={inputId || htmlFor}
     m={{ b: theme.spacing.sm }}
     opacity={disabled ? 50 : undefined}
@@ -33,7 +32,6 @@ Label.propTypes = {
     disabled: PropTypes.bool,
   }),
   children: PropTypes.node,
-  className: PropTypes.string,
   htmlFor: PropTypes.string,
 }
 
@@ -43,7 +41,6 @@ Label.defaultProps = {
     disabled: false,
   },
   children: undefined,
-  className: undefined,
   htmlFor: undefined,
 }
 
diff --git a/src/components/form/__tests__/__snapshots__/Field.jsx.snap b/src/components/form/__tests__/__snapshots__/Field.jsx.snap
@@ -2,14 +2,14 @@
 
 exports[`Field renders matching snapshot 1`] = `
 <BaseComponent
-  className="max-w-sm"
   id="field-1"
   is="div"
   m={
     Object {
       "b": 4,
     }
   }
+  maxW="sm"
 >
   <WithTheme(Label)
     field={
diff --git a/src/components/form/__tests__/__snapshots__/Label.jsx.snap b/src/components/form/__tests__/__snapshots__/Label.jsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Label renders matching snapshot 1`] = `
 <BaseComponent
-  className="inline-block"
   htmlFor="input"
+  inlineBlock={true}
   is="label"
   m={
     Object {
diff --git a/src/components/header/NavBrand.jsx b/src/components/header/NavBrand.jsx
@@ -21,13 +21,7 @@ const NavBrand = ({ theme, header: { style }, is, children, ...rest }) => {
     : {}
 
   return (
-    <BaseComponent
-      is={is}
-      className="no-underline"
-      {...styleProps}
-      {...ariaProps}
-      {...rest}
-    >
+    <BaseComponent is={is} noUnderline {...styleProps} {...ariaProps} {...rest}>
       {children}
     </BaseComponent>
   )
diff --git a/src/components/header/NavItem.jsx b/src/components/header/NavItem.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 
 import { withTheme } from '../theme'
 import { BaseComponent } from '../tailwind'
@@ -9,7 +8,6 @@ const NavItem = ({
   theme,
   is,
   children,
-  className,
   header: { style },
   active,
   ...rest
@@ -25,7 +23,8 @@ const NavItem = ({
     m={{ t: theme.spacing.sm }}
     m-lg={{ t: 0, r: theme.spacing.sm }}
     rounded={theme.radius}
-    className={classnames('block no-underline', className)}
+    noUnderline
+    block
     aria-current={active ? 'page' : undefined}
     {...rest}
   >
@@ -37,7 +36,6 @@ NavItem.propTypes = {
   theme: PropTypes.shape({}).isRequired,
   is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   children: PropTypes.node,
-  className: PropTypes.string,
   header: PropTypes.shape({
     style: PropTypes.object.isRequired,
   }),
@@ -47,7 +45,6 @@ NavItem.propTypes = {
 NavItem.defaultProps = {
   is: 'a',
   children: undefined,
-  className: undefined,
   header: {},
   active: false,
 }
diff --git a/src/components/header/NavMenu.jsx b/src/components/header/NavMenu.jsx
@@ -4,8 +4,8 @@ import classnames from 'classnames'
 
 import { withTheme } from '../theme'
 import { BaseComponent } from '../tailwind'
+import { Title } from '../typography'
 import { withTransition } from '../utils'
-import { VisuallyHidden } from '../visuallyHidden'
 
 import NavItem from './NavItem'
 
@@ -41,9 +41,9 @@ const NavMenu = ({ theme, transition, is, children, header, ...rest }) => {
       role="navigation"
       {...rest}
     >
-      <VisuallyHidden is="h2" id={headingId}>
+      <Title level={2} id={headingId} visuallyHidden>
         Site menu
-      </VisuallyHidden>
+      </Title>
       <ul
         className={classnames(
           'list-reset flex-grow lg:flex',
diff --git a/src/components/header/NavToggle.jsx b/src/components/header/NavToggle.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 
 import { Button } from '../button'
 import { withTheme } from '../theme'
@@ -15,7 +14,6 @@ const Bar = () => (
 const NavToggle = ({
   theme,
   children,
-  className,
   onClick,
   header: { onToggle, style, id },
   ...rest
@@ -30,7 +28,8 @@ const NavToggle = ({
       w={12}
       h={12}
       p={0}
-      className={classnames('block lg:hidden', className)}
+      block
+      hidden-lg
       onClick={handleClick}
       aria-label="Open menu"
       aria-haspopup="true"
@@ -54,7 +53,6 @@ const NavToggle = ({
 NavToggle.propTypes = {
   theme: PropTypes.shape({}).isRequired,
   children: PropTypes.node,
-  className: PropTypes.string,
   header: PropTypes.shape({
     onToggle: PropTypes.func.isRequired,
   }).isRequired,
@@ -63,7 +61,6 @@ NavToggle.propTypes = {
 
 NavToggle.defaultProps = {
   children: undefined,
-  className: undefined,
   onClick: undefined,
 }
 
diff --git a/src/components/header/__tests__/__snapshots__/NavBrand.jsx.snap b/src/components/header/__tests__/__snapshots__/NavBrand.jsx.snap
@@ -3,7 +3,6 @@
 exports[`NavBrand renders matching snapshot 1`] = `
 <BaseComponent
   aria-level={1}
-  className="no-underline"
   flex={
     Array [
       true,
@@ -18,6 +17,7 @@ exports[`NavBrand renders matching snapshot 1`] = `
       "r": 8,
     }
   }
+  noUnderline={true}
   role="heading"
   text="white"
 >
diff --git a/src/components/header/__tests__/__snapshots__/NavItem.jsx.snap b/src/components/header/__tests__/__snapshots__/NavItem.jsx.snap
@@ -3,7 +3,7 @@
 exports[`NavItem renders matching snapshot 1`] = `
 <BaseComponent
   bg-hocus="white"
-  className="block no-underline"
+  block={true}
   focusable={true}
   is={[Function]}
   m={
@@ -17,6 +17,7 @@ exports[`NavItem renders matching snapshot 1`] = `
       "t": 0,
     }
   }
+  noUnderline={true}
   p={
     Object {
       "x": 4,
diff --git a/src/components/header/__tests__/__snapshots__/NavMenu.jsx.snap b/src/components/header/__tests__/__snapshots__/NavMenu.jsx.snap
@@ -20,13 +20,13 @@ exports[`NavMenu renders matching snapshot 1`] = `
   w="full"
   w-lg="auto"
 >
-  <VisuallyHidden
-    focusable={false}
+  <WithTheme(Title)
     id="undefined-menu"
-    is="h2"
+    level={2}
+    visuallyHidden={true}
   >
     Site menu
-  </VisuallyHidden>
+  </WithTheme(Title)>
   <ul
     className="list-reset flex-grow lg:flex mb-2 lg:mb-0"
     role="menu"
diff --git a/src/components/header/__tests__/__snapshots__/NavToggle.jsx.snap b/src/components/header/__tests__/__snapshots__/NavToggle.jsx.snap
@@ -6,8 +6,9 @@ exports[`NavToggle renders matching snapshot 1`] = `
   aria-haspopup="true"
   aria-label="Open menu"
   bg-hocus="white"
-  className="block lg:hidden"
+  block={true}
   h={12}
+  hidden-lg={true}
   onClick={[Function]}
   p={0}
   text="white"
diff --git a/src/components/main/SkipLink.jsx b/src/components/main/SkipLink.jsx
diff --git a/src/components/main/__tests__/__snapshots__/SkipLink.jsx.snap b/src/components/main/__tests__/__snapshots__/SkipLink.jsx.snap
diff --git a/src/components/tailwind/getTailwindClassNames.js b/src/components/tailwind/getTailwindClassNames.js
diff --git a/src/components/tailwind/tailwindProps.js b/src/components/tailwind/tailwindProps.js
diff --git a/src/components/typography/Text.jsx b/src/components/typography/Text.jsx
diff --git a/src/components/typography/__tests__/__snapshots__/Text.jsx.snap b/src/components/typography/__tests__/__snapshots__/Text.jsx.snap
diff --git a/src/components/visuallyHidden/VisuallyHidden.jsx b/src/components/visuallyHidden/VisuallyHidden.jsx
diff --git a/src/components/visuallyHidden/index.js b/src/components/visuallyHidden/index.js
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -43,13 +43,11 @@ ContentBlock.propTypes = {`
`43`	`43`	`theme: PropTypes.shape({}).isRequired,`
`44`	`44`	`is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),`
`45`	`45`	`children: PropTypes.node,`
`46`		`- className: PropTypes.string,`
`47`	`46`	`}`
`48`	`47`
`49`	`48`	`ContentBlock.defaultProps = {`
`50`	`49`	`is: 'section',`
`51`	`50`	`children: undefined,`
`52`		`- className: undefined,`
`53`	`51`	`}`
`54`	`52`
`55`	`53`	`export { ContentBlock as component }`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const Footer = ({ theme, is, children, ...rest }) => (`
`11`	`11`	`role="contentinfo"`
`12`	`12`	`p={{ t: theme.spacing.lg, b: theme.spacing.xl }}`
`13`	`13`	`bg={theme.brandColors.secondary}`
`14`		`- text={[theme.textColors.on.secondary, theme.text.size.body[0]]}`
	`14`	`+ text={theme.textColors.on.secondary}`
`15`	`15`	`{...rest}`
`16`	`16`	`>`
`17`	`17`	`<Container padding>{children}</Container>`
Original file line number	Diff line number	Diff line change
@@ -11,12 +11,7 @@ exports[`Footer renders matching snapshot 1`] = `
`11`	`11`	`}`
`12`	`12`	`}`
`13`	`13`	`role="contentinfo"`
`14`		`- text={`
`15`		`- Array [`
`16`		`- "white",`
`17`		`- "sm",`
`18`		`- ]`
`19`		`- }`
	`14`	`+ text="white"`
`20`	`15`	`>`
`21`	`16`	`<WithTheme(Container)`
`22`	`17`	`padding={true}`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ class Field extends PureComponent {`
`37`	`37`	`is={is}`
`38`	`38`	`id={this.id}`
`39`	`39`	`m={{ b: theme.spacing.md }}`
`40`		`- className="max-w-sm"`
	`40`	`+ maxW="sm"`
`41`	`41`	`{...rest}`
`42`	`42`	`>`
`43`	`43`	`{React.Children.map(children, child =>`