feat(notification): Introduce components to color text and links for …

…error notifications.

Add a Paragraph and ColoredText component to provide inherited color through React context.

src/components/Link/Link.jsx

@@ -8,14 +8,18 @@ import { warn } from '../../warn'
 
 import styles from './Link.modules.scss'
 
-const getClassName = (variant) => {
+const getClassName = (variant, context) => {
+  if (context.inheritColor) {
+    return styles.inheritColor
+  }
+
   return styles[variant]
 }
 
 /**
  * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.21.0</span>
  */
-const Link = ({ reactRouterLinkComponent, variant, children, ...rest }) => {
+const Link = ({ reactRouterLinkComponent, variant, children, ...rest }, context) => {
   if (!(reactRouterLinkComponent && rest.to) && (reactRouterLinkComponent || rest.to)) {
     warn('Link', 'The props `reactRouterLinkComponent` and `to` must be used together.')
   }
@@ -24,7 +28,7 @@ const Link = ({ reactRouterLinkComponent, variant, children, ...rest }) => {
     reactRouterLinkComponent || 'a',
     {
       ...safeRest(rest),
-      className: getClassName(variant)
+      className: getClassName(variant, context)
     },
     children
   )
@@ -61,6 +65,10 @@ Link.defaultProps = {
   variant: 'base'
 }
 
+Link.contextTypes = {
+  inheritColor: PropTypes.bool
+}
+
 Link.Chevron = ChevronLink
 Link.Button = ButtonLink
 

src/components/Link/Link.modules.scss

@@ -53,3 +53,12 @@
     color: $color-white;
   }
 }
+
+.inheritColor {
+  composes: underlineOnHover;
+
+  &:link,
+  &:visited {
+    color: inherit;
+  }
+}

src/components/NotificationNew/Notification.jsx

@@ -5,6 +5,8 @@ import safeRest from '../../safeRest'
 
 import Container from '../Grid/Container/Container'
 import Icon from '../Icon/Icon'
+import ColoredText from '../Typography/ColoredText/ColoredText'
+import Paragraph from '../Typography/Paragraph/Paragraph'
 
 import styles from './Notification.modules.scss'
 
@@ -13,34 +15,42 @@ const iconByVariant = {
   error: 'exclamation-point-circle'
 }
 
-const isSuccessOrError = variant => variant === 'success' || variant === 'error'
+const isImportant = variant => variant === 'success' || variant === 'error'
 
-const NotificationIcon = ({ variant }) => {
-  if (!isSuccessOrError(variant)) {
-    return null
-  }
+const renderIcon = variant => (
+  <span className={styles.icon}>
+    <Icon glyph={iconByVariant[variant]} aria-hidden="true" />
+  </span>
+)
 
-  return (
-    <span className={styles.icon}>
-      <Icon glyph={iconByVariant[variant]} aria-hidden="true" />
-    </span>
+const renderContent = (variant, children) => {
+  const content = (
+    <Paragraph bold={isImportant(variant)}>
+      {children}
+    </Paragraph>
   )
-}
-NotificationIcon.propTypes = {
-  variant: PropTypes.string.isRequired
+
+  if (variant === 'error') {
+    return (
+      <ColoredText colorClassName={styles.errorText}>
+        {content}
+      </ColoredText>
+    )
+  }
+
+  return content
 }
 
 /**
- * A banner to highlight important notices.
+ * A banner that highlights important notices.
  */
 const Notification = ({ variant, children, ...rest }) => (
   <div {...safeRest(rest)} className={styles[variant]}>
     <Container limitWidth>
-      <div className={styles.content}>
-        <NotificationIcon variant={variant} />
-        <p className={isSuccessOrError(variant) ? styles[`${variant}Text`] : styles.text}>
-          {children}
-        </p>
+      <div className={styles.flexRow}>
+        {isImportant(variant) ? renderIcon(variant) : undefined}
+
+        {renderContent(variant, children)}
       </div>
     </Container>
   </div>

src/components/NotificationNew/Notification.md

@@ -21,7 +21,7 @@ Used for feedback or chat related messages.
 
 ```
 <Notification variant="branded">
-  <strong>Tell us what you think</strong> It’s in our nature to listen. As TELUS.com continues to evolve, we’d love to hear more from you.
+  <strong>Tell us what you think</strong> It’s in our nature to listen. As TELUS.com continues to evolve, we’d love to <Link href="http://telus.com">hear more from you</Link>.
 </Notification>
 ```
 
@@ -41,6 +41,6 @@ Used for error messages. Text is bolded to show importance.
 
 ```
 <Notification variant="error">
-  Looks like our registration system is temporarily down. You’ll need to come back another time to register for My Account. In the meantime, return to TELUS.com.
+  Looks like our registration system is temporarily down. You’ll need to come back another time to register for My Account. In the meantime, return to <Link href="http://telus.com">TELUS.com</Link>.
 </Notification>
 ```

src/components/NotificationNew/Notification.modules.scss

@@ -35,7 +35,7 @@ $tds-style-typography-html-tags: false;
   background-color: $color-lavender-blush;
 }
 
-.content {
+.flexRow {
   display: flex;
   flex-direction: row;
 }
@@ -44,29 +44,6 @@ $tds-style-typography-html-tags: false;
   margin-right: $spacing-base;
 }
 
-
-.textBase {
-  @extend %text--medium;
-
-  margin: 0;
-}
-
-.text {
-  composes: textBase;
-
-  color: $color-text;
-}
-
-.successText {
-  composes: textBase;
-
-  @extend %strong;
-}
-
 .errorText {
-  composes: textBase;
-
-  @extend %strong;
-
   color: $color-cardinal;
 }

src/components/NotificationNew/__tests__/Notification.spec.jsx

@@ -3,12 +3,15 @@ import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Icon from '../../Icon/Icon'
+import Paragraph from '../../Typography/Paragraph/Paragraph'
 
 import Notification from '../Notification'
+import ColoredText from '../../Typography/ColoredText/ColoredText'
 
 describe('<Notification />', () => {
-  const doShallow = ({ ...overrides }) => (
-    shallow(<Notification {...overrides}>Some content</Notification>)
+  const defaultChildren = 'Some content'
+  const doShallow = (props = {}, children = defaultChildren) => (
+    shallow(<Notification {...props}>{children}</Notification>)
   )
 
   it('renders', () => {
@@ -25,23 +28,46 @@ describe('<Notification />', () => {
     expect(notification).toHaveClassName('success')
   })
 
-  it('adds an icon only to the error and success variants', () => {
-    let notification = doShallow({ variant: 'error' })
-    expect(notification.find('NotificationIcon').dive()).toContainReact(<Icon glyph="exclamation-point-circle" aria-hidden="true" />)
-
-    notification = doShallow({ variant: 'success' })
-    expect(notification.find('NotificationIcon').dive()).toContainReact(<Icon glyph="checkmark" aria-hidden="true" />)
+  it('does not have an icon by default', () => {
+    let notification = doShallow()
+    expect(notification.find(Icon)).toBeEmpty()
 
     notification = doShallow({ variant: 'branded' })
-    expect(notification.find('NotificationIcon').dive()).toHaveText('')
+    expect(notification.find(Icon)).toBeEmpty()
   })
 
-  it('styles the text only for success and error variants', () => {
-    let notification = doShallow({ variant: 'error' })
-    expect(notification.find('p')).toHaveClassName('errorText')
+  describe('successful variant', () => {
+    it('bolds the content', () => {
+      const notification = doShallow({ variant: 'success' }, 'A success message')
 
-    notification = doShallow({ variant: 'success' })
-    expect(notification.find('p')).toHaveClassName('successText')
+      expect(notification).toContainReact(<Paragraph bold>A success message</Paragraph>)
+    })
+
+    it('adds a checkmark icon', () => {
+      const notification = doShallow({ variant: 'success' })
+
+      expect(notification).toContainReact(<Icon glyph="checkmark" aria-hidden="true" />)
+    })
+  })
+
+  describe('error variant', () => {
+    it('bolds and colors the content', () => {
+      const notification = doShallow({ variant: 'error' }, 'An error message')
+
+      expect(notification).toContainReact(
+        <ColoredText colorClassName="errorText">
+          <Paragraph bold>An error message</Paragraph>
+        </ColoredText>
+      )
+    })
+
+    it('adds an exclamation point icon', () => {
+      const notification = doShallow({ variant: 'error' })
+
+      expect(notification).toContainReact(
+        <Icon glyph="exclamation-point-circle" aria-hidden="true" />
+      )
+    })
   })
 
   it('passes additional HTML attributes to the containing element', () => {

src/components/NotificationNew/__tests__/__snapshots__/Notification.spec.jsx.snap

@@ -8,16 +8,13 @@ exports[`<Notification /> renders 1`] = `
     limitWidth={true}
   >
     <div
-      className="content"
+      className="flexRow"
     >
-      <NotificationIcon
-        variant="instructional"
-      />
-      <p
-        className="text"
+      <Paragraph
+        bold={false}
       >
         Some content
-      </p>
+      </Paragraph>
     </div>
   </Container>
 </div>

src/components/Typography/ColoredText/ColoredText.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+class ColoredText extends React.Component {
+  getChildContext() {
+    return {
+      inheritColor: true
+    }
+  }
+
+  render() {
+    const { colorClassName, children } = this.props
+
+    return (
+      <div className={colorClassName}>
+        {children}
+      </div>
+    )
+  }
+}
+
+ColoredText.propTypes = {
+  colorClassName: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+}
+
+ColoredText.childContextTypes = {
+  inheritColor: PropTypes.bool
+}
+
+export default ColoredText

src/components/Typography/ColoredText/__tests__/ColoredText.spec.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import ColoredText from '../ColoredText'
+import Paragraph from '../../Paragraph/Paragraph'
+import Link from '../../../Link/Link'
+
+describe('ColoredText', () => {
+  it('allows text components to inherit their color', () => {
+    const coloredText = mount(
+      <ColoredText colorClassName="some-class-name">
+        <Paragraph>
+          Some content and a <Link>hyperlink</Link>
+        </Paragraph>
+      </ColoredText>
+    )
+
+    expect(coloredText.find('p')).toHaveClassName('inheritColor')
+    expect(coloredText.find('a')).toHaveClassName('inheritColor')
+  })
+})

src/components/Typography/Paragraph/Paragraph.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import styles from './Paragraph.modules.scss'
+
+const Paragraph = ({ bold, children }, context) => {
+  const classes = classnames(
+    styles.base,
+    context.inheritColor ? styles.inheritColor : styles.color,
+    {
+      [styles.bold]: bold
+    }
+  )
+
+  return (
+    <p className={classes}>
+      {children}
+    </p>
+  )
+}
+
+Paragraph.propTypes = {
+  bold: PropTypes.bool,
+  children: PropTypes.node.isRequired
+}
+
+Paragraph.defaultProps = {
+  bold: false
+}
+
+Paragraph.contextTypes = {
+  inheritColor: PropTypes.bool
+}
+
+export default Paragraph

src/components/Typography/Paragraph/Paragraph.modules.scss

@@ -0,0 +1,25 @@
+$tds-style-typography-html-tags: false;
+
+@import '../../../scss/settings/colours';
+@import '../../../scss/utility/responsive';
+@import '../../../scss/settings/responsive-grid';
+@import '../../../scss/settings/typography';
+@import '../../../scss/foundation/typography';
+
+.base {
+  @extend %text--medium;
+
+  margin: 0;
+}
+
+.bold {
+  @extend %strong;
+}
+
+.color {
+  color: $color-text;
+}
+
+.inheritColor {
+  color: inherit;
+}