feat(notification): Size the icon as "large"

Add a hidden prop to Icon to make icons large. This will be expanded on in a future story for Icons
to support multiple sizes.

src/components/Notification/Notification.jsx

@@ -19,7 +19,7 @@ const isImportant = variant => variant === 'success' || variant === 'error'
 
 const renderIcon = glyph => (
   <span className={styles.icon}>
-    <Icon glyph={glyph} aria-hidden="true" />
+    <Icon glyph={glyph} size="large" aria-hidden="true" />
   </span>
 )
 

src/components/Notification/Notification.modules.scss

@@ -36,6 +36,7 @@
 
 .icon {
   margin-right: $spacing-base;
+  line-height: 1;
 }
 
 .errorText {

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

@@ -46,7 +46,9 @@ describe('<Notification />', () => {
     it('adds a checkmark icon', () => {
       const notification = doShallow({ variant: 'success' })
 
-      expect(notification).toContainReact(<Icon glyph="checkmark" aria-hidden="true" />)
+      expect(notification).toContainReact(
+        <Icon glyph="checkmark" size="large" aria-hidden="true" />
+      )
     })
   })
 
@@ -65,7 +67,7 @@ describe('<Notification />', () => {
       const notification = doShallow({ variant: 'error' })
 
       expect(notification).toContainReact(
-        <Icon glyph="exclamation-point-circle" aria-hidden="true" />
+        <Icon glyph="exclamation-point-circle" size="large" aria-hidden="true" />
       )
     })
   })

src/old-components/Icon/Icon.jsx

@@ -2,14 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const Icon = ({ glyph, variant, fixedWidth, className, children, ...rest }) => {
+const Icon = ({ glyph, variant, fixedWidth, size, className, children, ...rest }) => {
   const classes = classNames(
     'icon',
     `icon-core-${glyph}`,
     className,
     {
       'icon--fw': fixedWidth,
-      [`icon--${variant}`]: variant
+      [`icon--${variant}`]: variant,
+      'icon--large': size
     }
   )
 
@@ -54,6 +55,10 @@ Icon.propTypes = {
    * Whether or not to give the icon a fixed width.
    */
   fixedWidth: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  size: PropTypes.oneOf(['large']),
   /**
    * One or more CSS class names separated by spaces to append onto the icon.
    * Don't advertise as we plan on removing this feature soon.
@@ -72,6 +77,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   variant: null,
   fixedWidth: false,
+  size: null,
   className: '',
   children: null
 }

src/old-components/Icon/__tests__/Icon.spec.jsx

@@ -34,6 +34,12 @@ describe('<Icon />', () => {
     expect(icon).toHaveClassName('icon--fw')
   })
 
+  it('can be sized', () => {
+    const icon = doShallow({ size: 'large' })
+
+    expect(icon).toHaveClassName('icon--large')
+  })
+
   it('supports custom CSS classes', () => {
     const icon = doShallow({ className: 'custom-class' })
 

src/scss/foundation/_core-icons.scss

@@ -36,6 +36,10 @@
     width: 1.09rem;
     text-align: center;
   }
+
+  &--large {
+    font-size: 1.5rem;
+  }
 }
 
 @each $name, $codepoint in $core-icon-codepoints {