feat(notification): Add Row and Column wrapper to Notification

To add gutter to Notification text when on mobile view
telus · Aug 25, 2017 · 7c2ad91 · 7c2ad91
1 parent dc50ffc
commit 7c2ad91
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 
 import safeRest from '../../safeRest'
 
-import Container from '../../old-components/Grid/Container/Container'
+import Grid from '../../old-components/Grid/Grid'
 import Icon from '../../old-components/Icon/Icon'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../Typography/Paragraph/Paragraph'
 
 import styles from './Notification.modules.scss'
 
+const { Container, Row, Column } = Grid
+
 const iconByVariant = {
   success: 'checkmark',
   error: 'exclamation-point-circle'
@@ -47,11 +49,15 @@ const renderContent = (variant, children) => {
 const Notification = ({ variant, children, ...rest }) => (
   <div {...safeRest(rest)} className={styles[variant]}>
     <Container limitWidth>
-      <div className={styles.flexRow}>
-        {isImportant(variant) ? renderIcon(iconByVariant[variant]) : undefined}
+      <Row>
+        <Column xs={12}>
+          <div className={styles.flexRow}>
+            {isImportant(variant) ? renderIcon(iconByVariant[variant]) : undefined}
 
-        {renderContent(variant, children)}
-      </div>
+            {renderContent(variant, children)}
+          </div>
+        </Column>
+      </Row>
     </Container>
   </div>
 )

diff --git a/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap b/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
@@ -7,18 +7,24 @@ exports[`<Notification /> renders 1`] = `
   <Container
     limitWidth={true}
   >
-    <div
-      className="flexRow"
-    >
-      <Paragraph
-        align="left"
-        bold={false}
-        invert={false}
-        size="medium"
+    <Row>
+      <Column
+        xs={12}
       >
-        Some content
-      </Paragraph>
-    </div>
+        <div
+          className="flexRow"
+        >
+          <Paragraph
+            align="left"
+            bold={false}
+            invert={false}
+            size="medium"
+          >
+            Some content
+          </Paragraph>
+        </div>
+      </Column>
+    </Row>
   </Container>
 </div>
 `;