PPM-496. Add support for --success modifier

.npmrc

@@ -0,0 +1,2 @@
+git-tag-version=false
+registry=***REMOVED***

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## Version 1.1.0
+ * Add support for --success modifier with same bg color as `ffe-message-box--success`
+
 ## Version 1.0.4
  * Add rounded corners
 

examples/ffe-context-message.html

@@ -95,6 +95,50 @@ <h1 class='ffe-h1' style="text-align: center">tips</h1>
     </button>
 </div>
 
+<h1 class='ffe-h1' style="text-align: center">success</h1>
+<div class="ffe-context-message ffe-context-message--success">
+    <div class="ffe-context-message-content">
+        <div class="ffe-context-message-content__icon">
+            <svg class="ffe-context-message-content__icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+                <path d="M176.56-8.325E-7c-4.403,0-8.307,2.46595-10.288,5.89248l-90.5448,156.336-42.6109-59.77c-2.46172-2.94562-5.88534-4.89058-9.78806-4.89058h-7.3426c-4.40307,0-8.30704,2.46094-10.2884,6.36839-1.94136,3.94753-1.46102,8.8406,1.0007,12.2671l54.8007,75.963c3.4224,4.89,9.3077,7.834,15.1918,7.834,6.84477,0,12.7076-3.42654,16.13-9.31777l100.827-173.487c2.46172-3.4666,2.46547-7.83618,0.0438-11.3028-1.942-3.94755-5.886-5.8925-10.289-5.8925h-6.84226z"/>
+            </svg>
+        </div>
+        <div>
+            <header class="ffe-context-message-content__header">Informasjon</header>
+            <div class="ffe-body-text">
+                Her kan det stå informasjon om at noe gikk bra. Maecenas sed diam eget risus varius. Her kan det
+                stå informasjon om at noe gikk bra. Maecenas sed diam eget risus varius
+                blandit sit ame. Maecenas sed diam eget risus variusblandit sit ame.
+            </div>
+        </div>
+    </div>
+    <button class="ffe-context-message-content__close-button">
+        <svg class="ffe-context-message-content__close-button-svg" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 200 200">
+            <path d="M18.77,0c-3.562,0-7.125,1.347-9.834,4.044l-4.429,4.439c-5.381,5.394-5.381,14.25,0,19.68l71.19,71.83-71.66,71.83c-5.381,5.394-5.381,14.25,0,19.68l4.429,4.439c5.381,5.394,14.22,5.394,19.64,0l71.66-71.83,71.65,71.83c5.381,5.394,14.23,5.394,19.65,0l4.429-4.439c5.381-5.394,5.381-14.25,0-19.68l-71.19-71.83,71.66-71.83c5.381-4.914,5.381-13.78,0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64,0l-72.13,71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"/>
+        </svg>
+    </button>
+</div>
+<br/>
+<div class="ffe-context-message ffe-context-message--success">
+    <div class="ffe-context-message-content">
+        <div>
+            <header class="ffe-context-message-content__header">Informasjon</header>
+            <div class="ffe-body-text">
+                Her kan det stå informasjon om at noe gikk bra. Maecenas sed diam eget risus varius. Her kan det
+                stå informasjon om at noe gikk bra. Maecenas sed diam eget risus varius
+                blandit sit ame. Maecenas sed diam eget risus variusblandit sit ame.
+            </div>
+        </div>
+    </div>
+    <button class="ffe-context-message-content__close-button">
+        <svg class="ffe-context-message-content__close-button-svg" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 200 200">
+            <path d="M18.77,0c-3.562,0-7.125,1.347-9.834,4.044l-4.429,4.439c-5.381,5.394-5.381,14.25,0,19.68l71.19,71.83-71.66,71.83c-5.381,5.394-5.381,14.25,0,19.68l4.429,4.439c5.381,5.394,14.22,5.394,19.64,0l71.66-71.83,71.65,71.83c5.381,5.394,14.23,5.394,19.65,0l4.429-4.439c5.381-5.394,5.381-14.25,0-19.68l-71.19-71.83,71.66-71.83c5.381-4.914,5.381-13.78,0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64,0l-72.13,71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"/>
+        </svg>
+    </button>
+</div>
+
 <script>
     document.querySelector('.ffe-context-message-content__close-button').addEventListener('click', function () {
         var element = document.querySelector('.ffe-context-message');

less/ffe-context-message.less

@@ -11,6 +11,10 @@
   &--tip {
     background-color: @ffe-sand;
   }
+
+  &--success {
+    background-color: @ffe-green-wcag-20;
+  }
 }
 
 .ffe-context-message-content {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-context-message",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Messagebox showing non-critical tip or information about a page or product",
   "style": "less/ffe-context-message.less",
   "scripts": {