Merge bade096 into d4496bc

src/components/Heading/styles/Heading.css.ts → src/components/Heading/Heading.css.ts

@@ -1,11 +1,11 @@
-import baseStyles from '../../../styles/resets/baseStyles.css.js'
-import linkStyles from '../../../styles/mixins/linkStyles.css.js'
-import { getColor } from '../../../styles/utilities/color'
-import forEach from '../../../styles/utilities/forEach'
+import baseStyles from '../../styles/resets/baseStyles.css.js'
+import linkStyles from '../../styles/mixins/linkStyles.css.js'
+import { getColor } from '../../styles/utilities/color'
+import forEach from '../../styles/utilities/forEach'
 import variableFontSize, {
   BASE_FONT_SIZE,
-} from '../../../styles/utilities/variableFontSize'
-import { makeWeightStyles } from '../../Text/styles/Text.css'
+} from '../../styles/utilities/variableFontSize'
+import { makeWeightStyles } from '../Text/styles/Text.css'
 
 export const VAR_NAMESPACE_SIZE = 'BlueConfigHeadingFontSize'
 export const SHADES = {
@@ -58,10 +58,29 @@ const css = `
     ${linkStyles()}
   }
 
-  &.is-line-height-reset {
+  &.is-truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.is-lineHeightInherit {
+    line-height: inherit;
+  }
+
+  &.is-lineHeightReset {
     line-height: 1;
   }
 
+  &.is-wordWrap {
+    word-break: break-word;
+  }
+
+  &.is-noWrap {
+    white-space: nowrap;
+  }
+
   ${makeWeightStyles()}
 `
 

src/components/Heading/Heading.tsx

@@ -4,7 +4,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import styled from '../styled'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import css from './styles/Heading.css'
+import css from './Heading.css'
 import { COMPONENT_KEY } from './utils'
 
 export interface Props {
@@ -13,18 +13,27 @@ export interface Props {
   children?: any
   disableSelect: boolean
   light?: boolean
-  lineHeightReset?: boolean
+  lineHeightInherit: boolean
+  lineHeightReset: boolean
   linkStyle?: boolean
+  noWrap: boolean
   selector?: string
   size: HeadingSize
+  truncate: boolean
   weight?: number | string
+  wordWrap: boolean
 }
 
 class Heading extends React.PureComponent<Props> {
   static defaultProps = {
     center: false,
     disableSelect: false,
+    lineHeightInherit: false,
+    lineHeightReset: false,
     linkStyle: false,
+    truncate: false,
+    noWrap: false,
+    wordWrap: false,
   }
 
   render() {
@@ -34,11 +43,15 @@ class Heading extends React.PureComponent<Props> {
       className,
       disableSelect,
       light,
+      lineHeightInherit,
       lineHeightReset,
       linkStyle,
+      noWrap,
       selector,
       size,
+      truncate,
       weight,
+      wordWrap,
       ...rest
     } = this.props
 
@@ -47,10 +60,14 @@ class Heading extends React.PureComponent<Props> {
       center && 'is-center',
       disableSelect && 'is-disableSelect',
       light && 'is-light',
-      lineHeightReset && 'is-line-height-reset',
+      lineHeightInherit && 'is-lineHeightInherit',
+      lineHeightReset && 'is-lineHeightReset',
       linkStyle && 'is-linkStyle',
       size && `is-${size}`,
+      truncate && 'is-truncate',
       weight && `is-${weight}`,
+      noWrap && 'is-noWrap',
+      wordWrap && 'is-wordWrap',
       className
     )
 

src/components/Heading/README.md

@@ -10,17 +10,21 @@ A Heading component is a light-weight text heading wrapper enhanced with a colle
 
 ## Props
 
-| Prop            | Type              | Description                                      |
-| --------------- | ----------------- | ------------------------------------------------ |
-| className       | `string`          | Custom class names to be added to the component. |
-| center          | `bool`            | Center aligns text.                              |
-| disableSelect   | `bool`            | Disables text selection.                         |
-| light           | `bool`            | Lightens the heading color.                      |
-| linkStyle       | `bool`            | Applies [Link](../Link) styles.                  |
-| lineHeightReset | `bool`            | Sets the line-height to `1`.                     |
-| selector        | `string`          | Determines HTML selector. Default is `div`.      |
-| size            | `string`          | Adjust heading size.                             |
-| weight          | `number`/`string` | Adjust text weight.                              |
+| Prop              | Type              | Description                                      |
+| ----------------- | ----------------- | ------------------------------------------------ |
+| className         | `string`          | Custom class names to be added to the component. |
+| center            | `boolean`         | Center aligns text.                              |
+| disableSelect     | `boolean`         | Disables text selection.                         |
+| light             | `boolean`         | Lightens the heading color.                      |
+| linkStyle         | `boolean`         | Applies [Link](../Link) styles.                  |
+| lineHeightInherit | `boolean`         | Inherit the line-height from a parent selector.  |
+| lineHeightReset   | `boolean`         | Resets the line-height to `1`.                   |
+| noWrap            | `boolean`         | Prevents text from wrapping.                     |
+| selector          | `string`          | Determines HTML selector. Default is `div`.      |
+| size              | `string`          | Adjust heading size.                             |
+| truncate          | `boolean`         | Enables CSS truncation for text.                 |
+| weight            | `number`/`string` | Adjust text weight.                              |
+| wordWrap          | `boolean`         | Enables CSS `word-break` for text.               |
 
 ### Sizes
 

src/components/Heading/__tests__/Heading.test.tsx

@@ -79,11 +79,37 @@ describe('Styles', () => {
   test('Applies line-height reset styles if specified', () => {
     const wrapper = mount(<Heading lineHeightReset />)
 
+    expect(wrapper.getDOMNode().classList.contains('is-lineHeightReset')).toBe(
+      true
+    )
+  })
+
+  test('Applies line-height inherit styles if specified', () => {
+    const wrapper = mount(<Heading lineHeightInherit />)
+
     expect(
-      wrapper.getDOMNode().classList.contains('is-line-height-reset')
+      wrapper.getDOMNode().classList.contains('is-lineHeightInherit')
     ).toBe(true)
   })
 
+  test('Applies truncate styles if specified', () => {
+    const wrapper = mount(<Heading truncate />)
+
+    expect(wrapper.getDOMNode().classList.contains('is-truncate')).toBe(true)
+  })
+
+  test('Applies word-wrap styles if specified', () => {
+    const wrapper = mount(<Heading wordWrap />)
+
+    expect(wrapper.getDOMNode().classList.contains('is-wordWrap')).toBe(true)
+  })
+
+  test('Applies no word-wrap styles if specified', () => {
+    const wrapper = mount(<Heading noWrap />)
+
+    expect(wrapper.getDOMNode().classList.contains('is-noWrap')).toBe(true)
+  })
+
   test('Applies weight styles if specified', () => {
     const wrapper = mount(<Heading weight={200} />)
 

src/components/Text/README.md

@@ -13,20 +13,21 @@ A Text component is a light-weight text wrapper enhanced with a collection of ae
 | Prop              | Type              | Description                                      |
 | ----------------- | ----------------- | ------------------------------------------------ |
 | className         | `string`          | Custom class names to be added to the component. |
-| center            | `bool`            | Center aligns text.                              |
-| disableSelect     | `bool`            | Disables text selection.                         |
-| faint             | `bool`            | Changes text color to a very light grey.         |
-| muted             | `bool`            | Changes text color to a light grey.              |
-| linkStyle         | `bool`            | Applies [Link](../Link) styles.                  |
-| lineHeightInherit | `bool`            | Inherit the line-height from a parent selector.  |
-| lineHeightReset   | `bool`            | Resets the line-height to `1`.                   |
+| center            | `boolean`         | Center aligns text.                              |
+| disableSelect     | `boolean`         | Disables text selection.                         |
+| faint             | `boolean`         | Changes text color to a very light grey.         |
+| linkStyle         | `boolean`         | Applies [Link](../Link) styles.                  |
+| lineHeightInherit | `boolean`         | Inherit the line-height from a parent selector.  |
+| lineHeightReset   | `boolean`         | Resets the line-height to `1`.                   |
+| muted             | `boolean`         | Changes text color to a light grey.              |
+| noWrap            | `boolean`         | Prevents text from wrapping.                     |
 | shade             | `string`          | Changes text color shade.                        |
 | size              | `string`          | Adjust text size.                                |
 | state             | `string`          | Changes the text color based on state.           |
-| subtle            | `bool`            | Changes text color to a lighter grey.            |
-| truncate          | `bool`            | Enables CSS truncation for text.                 |
+| subtle            | `boolean`         | Changes text color to a lighter grey.            |
+| truncate          | `boolean`         | Enables CSS truncation for text.                 |
 | weight            | `number`/`string` | Adjust text weight.                              |
-| wordWrap          | `bool`            | Enables CSS `word-break` for text.               |
+| wordWrap          | `boolean`         | Enables CSS `word-break` for text.               |
 
 ### Shades
 

stories/Heading.stories.js

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import { boolean, select, text } from '@storybook/addon-knobs'
+import { withArtboard } from '@helpscout/artboard'
+import Heading from '../src/components/Heading'
+
+const stories = storiesOf('Heading', module)
+stories.addDecorator(
+  withArtboard({ width: 400, height: 200, withCenterGuides: false })
+)
+
+stories.add('Default', () => {
+  const props = {
+    children: text('children', 'Heading'),
+    center: boolean('center', false),
+    disableSelect: boolean('disableSelect', false),
+    light: boolean('light', false),
+    linkStyle: boolean('linkStyle', false),
+    lineHeightInherit: boolean('lineHeightInherit', false),
+    lineHeightReset: boolean('lineHeightReset', false),
+    noWrap: boolean('noWrap', false),
+    size: select(
+      'size',
+      {
+        h1: 'h1',
+        h2: 'h2',
+        h3: 'h3',
+        h4: 'h4',
+        h5: 'h5',
+        h6: 'h6',
+      },
+      'h1'
+    ),
+    truncate: boolean('truncate', false),
+    wordWrap: boolean('wordWrap', false),
+  }
+  return <Heading {...props} />
+})
+
+stories.add('sizes', () => (
+  <div>
+    <Heading size="h1">Font size: h1</Heading>
+    <br />
+    <Heading size="h2">Font size: h2</Heading>
+    <br />
+    <Heading size="h3">Font size: h3</Heading>
+    <br />
+    <Heading size="h4">Font size: h4</Heading>
+    <br />
+    <Heading size="h5">Font size: h5</Heading>
+    <br />
+    <Heading size="h6">Font size: h6</Heading>
+    <br />
+    <Heading size="big">Font size: Big</Heading>
+    <br />
+    <Heading size="small">Font size: Small</Heading>
+    <br />
+  </div>
+))
+
+stories.add('shades', () => (
+  <div>
+    <Heading size="small">Small Heading Dark</Heading>
+    <br />
+    <Heading size="small" light>
+      Small Heading Light
+    </Heading>
+    <br />
+  </div>
+))