Fix/cx (#99)

* Add x-small and dark background.

* No need for loaders on dark background.

* Removing default message and borderless messages

* Added confirmation and success modals

* Add text to no icon modal

* remove warning state

* Cx-status : complete

* CX-status complete

* CX- Remove input warning

* CX-status - complete

* CX-status complete

* CX-add guideline

* Cx-status complete

* CX-add content and groups

* Update README.md

* CX-status complete

* CX-status : complete

* Update README.md

* CX-correct the description

* update small width

* Add guidelines

* add labels/fields examples in no icon modal

* add guidelines

* CX-Status : complete

* CX-status update : complete

* Add examples

* Update README.md

* Add guidelines

* Cx-status : complete

* modifiy name of confirmation icon modal

* cx update : merge formfield to field

packages/oui-button-group/README.md

@@ -1,6 +1,6 @@
 # oui-input-group
 
-<component-status cx-design="partial" ux="prototype"></component-status>
+<component-status cx-design="complete" ux="prototype"></component-status>
 
 oui-button-group is a package which provide styles to group buttons together.
 
@@ -11,6 +11,10 @@ oui-button-group is a package which provide styles to group buttons together.
 ```
 
 ## Usage
+Guidelines : 
+* A button is selected by default.
+* The labels are short: 1 or 2 words.
+* On mobile, the button-group is on a line must remain on one line.
 
 ```html:preview
 <div>

packages/oui-button/README.md

@@ -1,6 +1,6 @@
 # oui-button
 
-<component-status cx-design="partial" ux="rc"></component-status>
+<component-status cx-design="complete" ux="rc"></component-status>
 
 oui-button is a package which provide styles for the button component.
 
@@ -12,156 +12,189 @@ oui-button is a package which provide styles for the button component.
 
 ## Usage
 
-### Normal
+### Primary Action Button
+* This button represents the action that the user is waiting for.  It must stand out visually, catching the eye and encourage the user to click.  This button is equivalent to press on the “Enter” key on the keypad.
+* Normally, there’s only one primary action button per form.
+* The min-width is set to 195px and the max-width is set to 300px. If the translation is longer than that, find a another translation or the bouton will be transform in a link (without border).
 
 ```html:preview
 <div>
   <button class="oui-button oui-button_primary">
     Primary Button
   </button>
-  <button class="oui-button oui-button_secondary">
-    Secondary Button
-  </button>
-  <button class="oui-button oui-button_dropdown">
-    Dropdown Button
-    <i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
-  </button>
   <button class="oui-button oui-button_primary oui-button_icon-right">
     Button Icon right
     <i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
   </button>
-  <button class="oui-button oui-button_secondary oui-button_icon-left">
-    <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
-    Button Icon left
-  </button>
-  <button class="oui-button oui-button_link">
-    Button link
-  </button>
-  <button class="oui-button oui-button_link oui-button_icon-left">
-    <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Icon left
-  </button>
-  <button class="oui-button oui-button_link oui-button_icon-right">
-    Button link Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
-  </button>
+  <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_full-width oui-button_primary">
+      Primary Button Full width
+    </button>
+  </div>
+    <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary">
+      Primary Full width Icon right
+      <i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>
 ```
 
-### Disabled
+#### Disabled Primary Action Button
 
 ```html:preview
 <div>
   <button class="oui-button oui-button_primary" disabled>
     Primary Button
   </button>
-  <button class="oui-button oui-button_secondary" disabled>
-    Secondary Button
-  </button>
-  <button class="oui-button oui-button_dropdown" disabled>
-    Dropdown Button
-    <i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
-  </button>
   <button class="oui-button oui-button_primary oui-button_icon-right" disabled>
     Button Icon right
     <i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
   </button>
-  <button class="oui-button oui-button_secondary oui-button_icon-left" disabled>
-    <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
-    Button Icon left
-  </button>
-  <button class="oui-button oui-button_link" disabled>
-    Button link
-  </button>
-  <button class="oui-button oui-button_link oui-button_icon-left" disabled>
-    <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Icon left
-  </button>
-  <button class="oui-button oui-button_link oui-button_icon-right" disabled>
-    Button link Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
-  </button>
+   <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_full-width oui-button_primary" disabled>
+      Primary Button Full width
+    </button>
+  </div>
+  <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary" disabled>
+      Primary Full width Icon right
+      <i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>
 ```
 
-### Full width
+### Secondary Action Button
 
+Multiple secondary action buttons can be found on a page.
+
 ```html:preview
 <div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_link oui-button_icon-left">
-      <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Full width Icon left
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_link oui-button_icon-right">
-      Button link Full width Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_primary">
-      Primary Button Full width
-    </button>
-  </div>
+  <button class="oui-button oui-button_secondary">
+    Secondary Button
+  </button>
+    <button class="oui-button oui-button_secondary oui-button_icon-left">
+    <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
+    Button Icon left
+  </button>
   <div style="display: inline-block; width: 300px">
     <button class="oui-button oui-button_full-width oui-button_secondary">
       Secondary Button Full width
     </button>
   </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-left oui-button_primary">
-      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Primary Full width Icon left
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary">
-      Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
-    </button>
-  </div>
   <div style="display: inline-block; width: 300px">
     <button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary">
-      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Secondary Full width Icon left
+      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
+      Secondary Full width Icon left
     </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_secondary">
-      Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_link oui-button_full-width oui-button_icon-left" disabled>
-      <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Full width Icon left
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_link oui-button_full-width oui-button_icon-right" disabled>
-      Button link Full width Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
-    </button>
-  </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_primary" disabled>
-      Primary Button Full width
-    </button>
-  </div>
+  </div>  
+</div>
+```
+
+#### Disabled Secondary Action Button
+
+```html:preview
+<div>
+  <button class="oui-button oui-button_secondary" disabled>
+    Secondary Button
+  </button>
+    <button class="oui-button oui-button_secondary oui-button_icon-left" disabled>
+    <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
+    Button Icon left
+  </button>
+  
   <div style="display: inline-block; width: 300px">
     <button class="oui-button oui-button_full-width oui-button_secondary" disabled>
       Secondary Button Full width
     </button>
   </div>
   <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-left oui-button_primary" disabled>
-      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Primary Full width Icon left
+    <button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary" disabled>
+      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
+      Secondary Full width Icon left
     </button>
   </div>
+</div>
+```
+### Dropdown Button
+Actions grouped under a Dropdown button.  On click, a panel slides down to display the actions list.
+* Chevron points down when the menu is open.
+
+```html:preview
+<div>
+  <button class="oui-button oui-button_dropdown">
+    Dropdown Button
+    <i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
+  </button>
+</div>
+```
+#### Disabled Dropdown Button
+
+```html:preview
+<div>
+  <button class="oui-button oui-button_dropdown" disabled>
+    Dropdown Button
+    <i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
+  </button>
+</div>
+```
+
+### Link Button
+
+```html:preview
+<div>
+  <button class="oui-button oui-button_link">
+    Button link
+  </button>
+  <button class="oui-button oui-button_link oui-button_icon-left">
+    <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
+    Button link Icon left
+  </button>
+  <button class="oui-button oui-button_link oui-button_icon-right">
+    Button link Icon right
+    <i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
+  </button>
   <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary" disabled>
-      Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
+    <button class="oui-button oui-button_full-width oui-button_link oui-button_icon-left">
+      <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
+      Button link Full width Icon left
     </button>
   </div>
-  <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary" disabled>
-      <i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Secondary Full width Icon left
+    <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_full-width oui-button_link oui-button_icon-right">
+      Button link Full width Icon right
+      <i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
+    </button>
+  </div>
+</div>
+```
+
+#### Disabled Link Button
+
+```html:preview
+<div>
+  <button class="oui-button oui-button_link" disabled>
+    Button link
+  </button>
+  <button class="oui-button oui-button_link oui-button_icon-left" disabled>
+    <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
+    Button link Icon left
+  </button>
+  <button class="oui-button oui-button_link oui-button_icon-right" disabled>
+    Button link Icon right
+    <i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
+  </button>
+      <div style="display: inline-block; width: 300px">
+    <button class="oui-button oui-button_link oui-button_full-width oui-button_icon-left" disabled>
+      <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
+      Button link Full width Icon left
     </button>
   </div>
   <div style="display: inline-block; width: 300px">
-    <button class="oui-button oui-button_full-width oui-button_icon-right oui-button_secondary" disabled>
-      Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
+    <button class="oui-button oui-button_link oui-button_full-width oui-button_icon-right" disabled>
+      Button link Full width Icon right
+      <i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
     </button>
   </div>
 </div>
@@ -172,10 +205,10 @@ oui-button is a package which provide styles for the button component.
 ```html:preview
 <div>
   <button class="oui-button oui-button_primary oui-button_small-width">
-    1
+    OK
   </button>
   <button class="oui-button oui-button_secondary oui-button_small-width">
-    1
+    OK
   </button>
   <button class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width">
     <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>