XW-3171 | banner notifications styles refactor

Author: Karol Tatała

app/templates/route-components/banner-notifications.hbs

@@ -8,7 +8,7 @@
 	</p>
 
 	{{#component-demo}}
-		<div class="wds-banner-notification-container">
+		<div class="wds-banner-notification__container">
 			{{#wds-banner-notification type='alert'}}
 				This is an error message.
 			{{/wds-banner-notification}}
@@ -25,7 +25,7 @@
 	</p>
 
 	{{#component-demo}}
-		<div class="wds-banner-notification-container">
+		<div class="wds-banner-notification__container">
 			{{#wds-banner-notification type='warning'}}
 				This is a warning message.
 			{{/wds-banner-notification}}
@@ -43,7 +43,7 @@
 
 
 	{{#component-demo}}
-		<div class="wds-banner-notification-container">
+		<div class="wds-banner-notification__container">
 			{{#wds-banner-notification type='success'}}
 				This is a confirmation message.
 			{{/wds-banner-notification}}
@@ -60,7 +60,7 @@
 	</p>
 
 	{{#component-demo}}
-		<div class="wds-banner-notification-container">
+		<div class="wds-banner-notification__container">
 			{{#wds-banner-notification type='message'}}
 				This is a general notification message.
 			{{/wds-banner-notification}}
@@ -73,7 +73,7 @@
 	<h2>Stacked</h2>
 
 	{{#component-demo}}
-		<div class="wds-banner-notification-container">
+		<div class="wds-banner-notification__container">
 			{{#wds-banner-notification type='message'}}
 				Stacked notification 1.
 			{{/wds-banner-notification}}

dist/css/styles.css

@@ -1,12 +1,12 @@
-.wds-banner-notification-container {
-	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-}
-
 .wds-banner-notification {
 	background-color: $wds-color-white;
 	color: $wds-color-light-gray;
 	display: flex;
 
+	&__container {
+		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+	}
+
 	&__icon {
 		align-items: center;
 		color: $wds-color-white;
@@ -44,9 +44,8 @@
 		padding: 18px;
 	}
 
-	+ .wds-banner-notification .wds-banner-notification {
-		&__close, &__text {
-			border-top: 1px solid #ccc;
-		}
+	& + & &__close,
+	& + & &__text {
+		border-top: 1px solid #ccc;
 	}
 }

dist/scss/wds-components/_banner-notification.scss

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.7.0+b5a051a5%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.7.0+0608361c%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link rel="stylesheet" href="/assets/vendor.css">
     <link rel="stylesheet" href="/assets/design-system.css">

docs/assets/design-system.css

@@ -1,12 +1,12 @@
-.wds-banner-notification-container {
-	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-}
-
 .wds-banner-notification {
 	background-color: $wds-color-white;
 	color: $wds-color-light-gray;
 	display: flex;
 
+	&__container {
+		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+	}
+
 	&__icon {
 		align-items: center;
 		color: $wds-color-white;
@@ -44,9 +44,8 @@
 		padding: 18px;
 	}
 
-	+ .wds-banner-notification .wds-banner-notification {
-		&__close, &__text {
-			border-top: 1px solid #ccc;
-		}
+	& + & &__close,
+	& + & &__text {
+		border-top: 1px solid #ccc;
 	}
 }