Merge 3f93622 into 5e70247

package.json

@@ -140,7 +140,7 @@
     "fs-extra": "^3.0.1",
     "glob": "^7.1.3",
     "hoek": "5.0.3",
-    "husky": "1.0.0-rc.13",
+    "husky": "^1.0.0-rc.13",
     "istanbul-api": "1.2.2",
     "istanbul-reports": "1.1.4",
     "jest": "^23.6.0",
@@ -156,7 +156,7 @@
     "postcss-loader": "2.0.6",
     "postcss-scss": "1.0.2",
     "prettier": "1.12.1",
-    "pretty-quick": "^1.4.1",
+    "pretty-quick": "^1.8.0",
     "react": "15.6.1",
     "react-addons-test-utils": "15.6.2",
     "react-dev-utils": "^3.0.2",
@@ -178,6 +178,9 @@
     "typescript": "^3.1.1",
     "webpack": "^3.12.0"
   },
+  "optionalDependencies": {
+    "fsevents": "^2.0.1"
+  },
   "nyc": {
     "exclude": [
       "config/**/*.js",
@@ -186,5 +189,10 @@
       "stories/**/*.js"
     ],
     "cache": false
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
-}
+}

src/components/Accordion/styles/Accordion.css.js

@@ -3,7 +3,7 @@ import baseStyles from '../../../styles/resets/baseStyles.css.js'
 import { breakpoint } from '../../../styles/mixins/breakpoints.css.js'
 import styled from '../../styled'
 
-import PageConfig from '../../Page/styles/Page.config.css.js'
+import PageConfig from '../../Page/styles/Page.config.css'
 
 export const AccordionUI = styled('div')`
   ${baseStyles};

src/components/Button/styles/Button.css.js

@@ -145,7 +145,7 @@ export const config = {
       padding: 20,
     },
     md: {
-      fontSize: 14,
+      fontSize: 13,
       height: 35,
       minWidth: 'initial',
       padding: 15,

src/components/Page/Actions.js → src/components/Page/Actions.tsx

@@ -1,26 +1,24 @@
-// @flow
-import React, { PureComponent as Component } from 'react'
+import { ActionsDirection } from './types'
+import * as React from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
 import {
   ActionsUI,
   ActionsBlockUI,
   ActionsItemUI,
-} from './styles/Actions.css.js'
+} from './styles/Actions.css'
 import { COMPONENT_KEY } from './utils'
 
-type ActionsDirection = 'left' | 'right'
-
-type Props = {
-  className?: string,
-  direction?: ActionsDirection,
-  primary?: any,
-  secondary?: any,
-  serious?: any,
+export interface Props {
+  className?: string
+  direction?: ActionsDirection
+  primary?: any
+  secondary?: any
+  serious?: any
 }
 
-class Actions extends Component<Props> {
+class Actions extends React.PureComponent<Props> {
   static defaultProps = {
     direction: 'right',
   }
@@ -45,7 +43,7 @@ class Actions extends Component<Props> {
     )
 
     return (
-      <ActionsUI {...getValidProps(rest)} className={componentClassName}>
+      <ActionsUI {...getValidProps(rest)} className={componentClassName} role="toolbar">
         <ActionsItemUI className="c-PageActions__primary">
           {primary}
         </ActionsItemUI>

src/components/Page/Card.js → src/components/Page/Card.tsx

@@ -1,18 +1,17 @@
-// @flow
-import React, { PureComponent as Component } from 'react'
+import * as React from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import { CardUI } from './styles/Card.css.js'
+import { CardUI } from './styles/Card.css'
 import { COMPONENT_KEY } from './utils'
 
-type Props = {
-  children?: any,
-  className?: string,
-  isResponsive: boolean,
+export interface Props {
+  children?: any
+  className?: string
+  isResponsive: boolean
 }
 
-class Card extends Component<Props> {
+class Card extends React.PureComponent<Props> {
   static defaultProps = {
     isResponsive: false,
   }

src/components/Page/Content.js → src/components/Page/Content.tsx

@@ -1,18 +1,17 @@
-// @flow
-import React, { PureComponent as Component } from 'react'
+import * as React from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import { ContentUI } from './styles/Content.css.js'
+import { ContentUI } from './styles/Content.css'
 import { COMPONENT_KEY } from './utils'
 
-type Props = {
-  children?: any,
-  className?: string,
-  isResponsive: boolean,
+export interface Props {
+  children?: any
+  className?: string
+  isResponsive: boolean
 }
 
-class Content extends Component<Props> {
+class Content extends React.PureComponent<Props> {
   static defaultProps = {
     isResponsive: false,
   }

src/components/Page/Header.js → src/components/Page/Header.tsx

@@ -1,24 +1,23 @@
-// @flow
-import React, { PureComponent as Component } from 'react'
+import * as React from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
-import Heading from '../Heading'
 import Text from '../Text'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import { HeaderUI, TitleUI, SubTitleUI } from './styles/Header.css.js'
+import { HeaderUI, TitleUI, SubTitleUI } from './styles/Header.css'
+import Heading from './Heading'
 import { COMPONENT_KEY } from './utils'
 
-type Props = {
-  children?: any,
-  className?: string,
-  isResponsive: boolean,
-  title: string,
-  subtitle?: string,
-  withBorder: boolean,
-  withBottomMargin: boolean,
+export interface Props {
+  children?: any
+  className?: string
+  isResponsive: boolean
+  title: string
+  subtitle?: string
+  withBorder: boolean
+  withBottomMargin: boolean
 }
 
-class Header extends Component<Props> {
+class Header extends React.PureComponent<Props> {
   static defaultProps = {
     isResponsive: false,
     title: 'Title',
@@ -48,7 +47,7 @@ class Header extends Component<Props> {
 
     const titleMarkup = title && (
       <TitleUI className="c-PageHeader__title">
-        <Heading className="c-PageHeader__titleHeading" size="md">
+        <Heading className="c-PageHeader__titleHeading">
           {title}
         </Heading>
       </TitleUI>

src/components/Page/Heading.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { COMPONENT_KEY } from './utils'
+import { classNames } from '../../utilities/classNames'
+import { namespaceComponent } from '../../utilities/component'
+import { HeadingUI, SecondaryHeadingUI } from './styles/Heading.css'
+
+export interface Props {
+  children?: any
+  className?: string
+  secondary?: boolean
+}
+
+class Heading extends React.PureComponent<Props> {
+  static defaultProps = {
+    secondary: false
+  }
+
+  render() {
+    const { children, secondary, className, ...rest } = this.props
+
+    const componentClassName = classNames(
+      'c-PageHeader__titleHeading',
+      secondary && 'c-PageHeader__titleHeading--secondary',
+      className
+    )
+
+    return !secondary ? (
+      <HeadingUI {...getValidProps(rest)}
+        selector="h1"
+        size="md"
+        className={componentClassName}>
+        {children}
+      </HeadingUI>
+    ) : (
+        <SecondaryHeadingUI {...getValidProps(rest)}
+          selector="h2"
+          size="h4"
+          className={componentClassName}>
+          {children}
+        </SecondaryHeadingUI>
+      );
+  }
+}
+namespaceComponent(COMPONENT_KEY.Heading)(Heading)
+
+export default Heading

src/components/Page/Page.js → src/components/Page/Page.tsx

@@ -1,30 +1,31 @@
-// @flow
-import React, { PureComponent as Component } from 'react'
+import * as React from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import Actions from './Actions'
 import Card from './Card'
 import Content from './Content'
 import Header from './Header'
+import Heading from './Heading'
 import PropProvider from '../PropProvider'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import { PageUI } from './styles/Page.css.js'
+import { PageUI } from './styles/Page.css'
 import { COMPONENT_KEY } from './utils'
 
-type Props = {
-  children?: any,
-  className?: string,
-  isResponsive: boolean,
+export interface Props {
+  children?: any
+  className?: string
+  isResponsive: boolean
 }
 
-class Page extends Component<Props> {
+class Page extends React.PureComponent<Props> {
   static defaultProps = {
     isResponsive: false,
   }
   static Actions = Actions
   static Card = Card
   static Content = Content
   static Header = Header
+  static Heading = Heading
 
   getPropProviderProps = () => {
     const { isResponsive } = this.props

src/components/Page/__tests__/Header.test.js

@@ -38,6 +38,12 @@ describe('Title', () => {
     expect(wrapper.text()).toContain('Channel 4')
     expect(wrapper.text()).toContain('News team')
   })
+
+  test('Title is primary heading (h1)', () => {
+    const wrapper = mount(<Header title="Channel 4" subtitle="News team" />)
+
+    expect(wrapper.find('h1').length).toBe(1)
+  })
 })
 
 describe('Border', () => {

src/components/Page/__tests__/Heading.test.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Heading from '../Heading'
+
+describe('ClassName', () => {
+  test('Has default className', () => {
+    const wrapper = mount(<Heading>Heisenberg shop</Heading>)
+
+    expect(wrapper.hasClass('c-PageHeader__titleHeading')).toBe(true)
+  })
+
+  test('Has Secondary className', () => {
+    const wrapper = mount(<Heading secondary>Beakers</Heading>)
+
+    expect(wrapper.hasClass('c-PageHeader__titleHeading--secondary')).toBe(true)
+  })
+
+  test('Applies custom className if specified', () => {
+    const className = 'baby-blue'
+    const wrapper = mount(
+      <Heading className={className}>Heisenberg shop</Heading>
+    )
+
+    expect(wrapper.hasClass(className)).toBe(true)
+  })
+})
+
+describe('Primary: h1', () => {
+  test('Default is primary heading (h1)', () => {
+    const wrapper = mount(<Heading>Heisenberg Shop</Heading>)
+
+    expect(wrapper.find('h1').length).toBe(1)
+  })
+})
+
+describe('Secondary: h2', () => {
+  test('Secondary renders an h2', () => {
+    const wrapper = mount(<Heading secondary>Beakers</Heading>)
+
+    expect(wrapper.find('h2').length).toBe(1)
+  })
+})

src/components/Page/docs/Header.md

@@ -1,4 +1,4 @@
-# Actions
+# Header
 
 This component is a presentational wrapper used to a title/subtitle within a [`Page`](./Page.md).
 

src/components/Page/docs/Heading.md

@@ -0,0 +1,33 @@
+# Heading
+
+This component leverages `<Heading>` for use inside [`Page`](./Page.md) components.
+
+Pages usually have one [`Header`](./Header.md), whose contents are always a title and sometimes a subtitle, for the title `<Page.Header>` uses this component in _primary_ mode, which means the heading will be an `<h1>` element.
+
+_Secondary_ mode is for additional headings within a page and will be rendered as `<h2>` elements.
+
+Styles (spacing and font sizes) are handled specifically for use within Pages.
+
+## Example
+
+```jsx
+<Page>
+  <Page.Card>
+    <Page.Header
+      title="Contact Form"
+      subtitle="Fill out everything please. K thx."
+    />
+    <Page.Heading secondary>Contact Details</Page.Heading>
+    ...
+    <Page.Heading secondary>Address Details</Page.Heading>
+    ...
+  </Page.Card>
+</Page>
+```
+
+## Props
+
+| Prop             | Type      | Description                                         |
+| ---------------- | --------- | --------------------------------------------------- |
+| className        | `string`  | Custom class names to be added to the component.    |
+| secondary     | `boolean` | Signals a secondary (h2) heading. Default `false`.         |

src/components/Page/index.js → src/components/Page/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import { propConnect } from '../PropProvider'
 import Page from './Page'
 import { COMPONENT_KEY } from './utils'
@@ -7,5 +6,6 @@ Page.Actions = propConnect(COMPONENT_KEY.Actions)(Page.Actions)
 Page.Card = propConnect(COMPONENT_KEY.Card)(Page.Card)
 Page.Content = propConnect(COMPONENT_KEY.Content)(Page.Content)
 Page.Header = propConnect(COMPONENT_KEY.Header)(Page.Header)
+Page.Heading = propConnect(COMPONENT_KEY.Heading)(Page.Heading)
 
 export default propConnect(COMPONENT_KEY.Page)(Page)