feat(input): Add a Messaging.modules CSS file to share messaging rela…

…ted styles for Notification and
telus · Sep 11, 2017 · 2221b6c · 2221b6c
1 parent 1a15b60
commit 2221b6c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 28 deletions.
diff --git a/src/components/Input/Helper/Helper.jsx b/src/components/Input/Helper/Helper.jsx
@@ -5,6 +5,7 @@ import safeRest from '../../../safeRest'
 import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 
+import messagingStyles from '../../Messaging.modules.scss'
 import styles from './Helper.modules.scss'
 
 const getClassName = feedback => (feedback ? styles[feedback] : styles.default)
@@ -18,7 +19,7 @@ const renderContent = (feedback, children) => {
 
   if (feedback === 'error') {
     return (
-      <ColoredTextProvider colorClassName={styles.errorText}>
+      <ColoredTextProvider colorClassName={messagingStyles.errorText}>
         {content}
       </ColoredTextProvider>
     )

diff --git a/src/components/Input/Helper/Helper.modules.scss b/src/components/Input/Helper/Helper.modules.scss
@@ -5,29 +5,19 @@
   composes: rounded from '../../Borders.modules.scss';
 
   padding: $spacing-base;
-
-  // transition: background-color .1s linear; TODO: Why?
 }
 
 .default {
   composes: base;
-
-  background: $color-athens-grey;
+  composes: default from '../../Messaging.modules.scss';
 }
 
 .success {
   composes: base;
-
-  background: $color-panache;
+  composes: success from '../../Messaging.modules.scss';
 }
 
 .error {
   composes: base;
-
-  background-color: $color-lavender-blush;
-}
-
-// TODO: This is duplicated in Notification...
-.errorText {
-  color: $color-cardinal;
+  composes: error from '../../Messaging.modules.scss';
 }
diff --git a/src/components/Input/Input.modules.scss b/src/components/Input/Input.modules.scss
@@ -2,9 +2,6 @@
 @import '../../scss/settings/typography';
 @import '../../scss/settings/spacing';
 
-// TODO: Bring over the responsive styles
-// TODO: Bring over/globalize the browser specific styles for the pseudo elements/placeholders
-
 .inputWrapper {
   composes: thin rounded from '../Borders.modules.scss';
 

diff --git a/src/components/Messaging.modules.scss b/src/components/Messaging.modules.scss
@@ -0,0 +1,17 @@
+@import '../scss/settings/colours';
+
+.default {
+  background-color: $color-athens-grey;
+}
+
+.success {
+  background-color: $color-panache;
+}
+
+.error {
+  background-color: $color-lavender-blush;
+}
+
+.errorText {
+  color: $color-cardinal;
+}
diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
@@ -9,6 +9,7 @@ import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextPr
 import Paragraph from '../Typography/Paragraph/Paragraph'
 
 import flexboxStyles from '../Flexbox.modules.scss'
+import messagingStyles from '../Messaging.modules.scss'
 import styles from './Notification.modules.scss'
 
 const { Container, Row, Column } = Grid
@@ -35,7 +36,7 @@ const renderContent = (variant, children) => {
 
   if (variant === 'error') {
     return (
-      <ColoredTextProvider colorClassName={styles.errorText}>
+      <ColoredTextProvider colorClassName={messagingStyles.errorText}>
         {content}
       </ColoredTextProvider>
     )

diff --git a/src/components/Notification/Notification.modules.scss b/src/components/Notification/Notification.modules.scss
@@ -7,8 +7,7 @@
 
 .instructional {
   composes: base;
-
-  background-color: $color-athens-grey;
+  composes: default from '../Messaging.modules.scss';
 }
 
 .branded {
@@ -19,21 +18,15 @@
 
 .success {
   composes: base;
-
-  background-color: $color-panache;
+  composes: success from '../Messaging.modules.scss';
 }
 
 .error {
   composes: base;
-
-  background-color: $color-lavender-blush;
+  composes: error from '../Messaging.modules.scss';
 }
 
 .icon {
   margin-right: $spacing-base;
   line-height: 1;
 }
-
-.errorText {
-  color: $color-cardinal;
-}