feat(box): Use Box inline between in Notification component

To separate optional icon and notificatio message
telus · Nov 9, 2017 · 32c220d · 32c220d
1 parent d147d79
commit 32c220d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
@@ -7,14 +7,12 @@ import Grid from '../../old-components/Grid/Grid'
 import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../Typography/Paragraph/Paragraph'
-import Flexbox from '../Flexbox/Flexbox'
 import Box from '../Box/Box'
 
 import messagingStyles from '../Messaging.modules.scss'
-import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
 import styles from './Notification.modules.scss'
 
-const {Container, Row, Column} = Grid
+const { Container, Row, Column } = Grid
 
 const iconByVariant = {
   success: {
@@ -29,11 +27,7 @@ const iconByVariant = {
 
 const isImportant = variant => variant === 'success' || variant === 'error'
 
-const renderIcon = icon => (
-  <Box right={3} dangerouslyAddClassName={iconWrapperStyles.fixLineHeight}>
-    <DecorativeIcon symbol={icon.symbol} variant={icon.color} />
-  </Box>
-)
+const renderIcon = icon => <DecorativeIcon symbol={icon.symbol} variant={icon.color} />
 
 const renderContent = (variant, children) => {
   const content = <Paragraph bold={isImportant(variant)}>{children}</Paragraph>
@@ -52,16 +46,16 @@ const renderContent = (variant, children) => {
 /**
  * A banner that highlights important messages.
  */
-const Notification = ({variant, children, ...rest}) => (
+const Notification = ({ variant, children, ...rest }) => (
   <Box {...safeRest(rest)} vertical={3} dangerouslyAddClassName={styles[variant]}>
     <Container limitWidth>
       <Row>
         <Column xs={12}>
-          <Flexbox direction="row">
+          <Box inline between={3}>
             {isImportant(variant) ? renderIcon(iconByVariant[variant]) : undefined}
 
             {renderContent(variant, children)}
-          </Flexbox>
+          </Box>
         </Column>
       </Row>
     </Container>

diff --git a/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap b/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
@@ -14,7 +14,7 @@ exports[`<Notification /> renders 1`] = `
         class="xs-12"
       >
         <div
-          class="row"
+          class="betweenRightMargin-3 betweenRight"
         >
           <p
             class="noSpacing color medium mediumFont leftAlign"