Merge pull request #84 from ovh-ux/feat/oui-list-step-checkbox

feat(oui-list): support checkbox as list item

Author: jimmyfortinx

packages/oui-list/README.md

@@ -178,22 +178,56 @@ oui-list is a package which provide styles for the list component.
       </span>
     </li>
     <li class="oui-list__item oui-list__item_optional oui-list__item_checked">
-      <span class="oui-list__header">List item checked</span>
+      <span class="oui-list__header">Optional list item checked</span>
       <span class="oui-list__description">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id convallis massa. Aenean eu placerat mi.
         Etiam ultricies metus ante, vel condimentum orci mollis at.
       </span>
     </li>
     <li class="oui-list__item oui-list__item_optional oui-list__item_checked oui-list__item_disabled">
-      <span class="oui-list__header">List item checked disabled</span>
+      <span class="oui-list__header">Optional list item checked disabled</span>
     </li>
-    <li class="oui-list__item oui-list__item_optional oui-list__item_complete">
-      <a href="#" class="oui-list__header">List item complete</a>
+    <li class="oui-list__item oui-list__item_optional oui-list__item_checked oui-list__item_complete">
+      <span class="oui-list__header">Optional list item complete</span>
       <span class="oui-list__description">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id convallis massa. Aenean eu placerat mi.
         Etiam ultricies metus ante, vel condimentum orci mollis at.
       </span>
     </li>
+    <li class="oui-list__item">
+      <div class="oui-checkbox">
+        <input class="oui-checkbox__input" id="oui-checkbox-1" name="oui-checkbox-1" type="checkbox">
+        <label class="oui-checkbox__label-container" for="oui-checkbox-1">
+          <span class="oui-checkbox__label">Checkbox list item</span>
+          <span class="oui-checkbox__description">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id convallis massa. Aenean eu placerat mi.
+            Etiam ultricies metus ante, vel condimentum orci mollis at.
+          </span>
+          <span class="oui-checkbox__icon">
+            <i class="oui-icon oui-icon-checkbox-unchecked" aria-hidden="true"></i>
+            <i class="oui-icon oui-icon-checkbox-checked" aria-hidden="true"></i>
+            <i class="oui-icon oui-icon-checkbox-checkmark" aria-hidden="true"></i>
+          </span>
+        </label>
+      </div>
+    </li>
+    <li class="oui-list__item">
+      <div class="oui-checkbox oui-checkbox_m">
+        <input class="oui-checkbox__input" id="oui-checkbox-2" name="oui-checkbox-2" type="checkbox">
+        <label class="oui-checkbox__label-container" for="oui-checkbox-2">
+          <span class="oui-checkbox__label">Checkbox list item</span>
+          <span class="oui-checkbox__description">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id convallis massa. Aenean eu placerat mi.
+            Etiam ultricies metus ante, vel condimentum orci mollis at.
+          </span>
+          <span class="oui-checkbox__icon">
+            <i class="oui-icon oui-icon-checkbox-unchecked" aria-hidden="true"></i>
+            <i class="oui-icon oui-icon-checkbox-checked" aria-hidden="true"></i>
+            <i class="oui-icon oui-icon-checkbox-checkmark" aria-hidden="true"></i>
+          </span>
+        </label>
+      </div>
+    </li>
   </ul>
 </div>
 ```
@@ -282,13 +316,15 @@ Will stylize your list as a stepped one.
 
 ```less
 #oui > .list-steps(
-  @oui-list-selector
+  @oui-list-selector,
+  @oui-checkbox-selector
 );
 ```
 
 ```less
 #oui > .list-steps(
   @selector: Class,
+  @checkbox-selector: Class,
   @font-color: Color,
   @icon-color: Color,
   @font-color-disabled: Color,

packages/oui-list/_mixins.less

@@ -1,4 +1,5 @@
 @import '../oui-icons/_variables';
+@import '../oui-checkbox/_variables';
 @import './_variables';
 
 #oui {
@@ -204,6 +205,7 @@
 
   .list-steps (
     @selector,
+    @checkbox-selector,
     @font-color: @oui-list-steps-font-color,
     @icon-color: @oui-list-steps-icon-color,
     @font-color-disabled: @oui-list-steps-disabled-font-color,
@@ -221,7 +223,9 @@
     @padding: @oui-list-steps-padding,
     @spacing: @oui-list-steps-spacing
   ) {
-    line-height: 1.2;
+    @label-padding-top: rem-calc(2);
+
+    line-height: 1.4;
 
     .@{selector}__items {
       counter-reset: counter;
@@ -265,7 +269,7 @@
 
       .@{selector}__header {
         color: @font-color;
-        line-height: 1.2;
+        line-height: 1.4;
       }
 
       .@{selector}__header::before {
@@ -298,32 +302,20 @@
     .@{selector}__item_checked,
     .@{selector}__item_complete {
       .@{selector}__header {
-        line-height: 1.2;
+        line-height: 1.4;
         color: @font-color-checked;
       }
 
       .@{selector}__header::before {
         position: absolute;
-        content: "";
+        content: @oui-icon-index-success;
         border: 1px solid @icon-border-color-checked;
         background-color: @icon-color-checked;
         color: @icon-color-checked;
-      }
-
-      .@{selector}__header::after {
-        position: absolute;
-        top: (@icon-size - @icon-check-size) / 2;
-        left: (@icon-size - @icon-check-size) / 2;
-        content: @oui-icon-index-success;
-        border: 0 none;
-        background: none;
-        color: @icon-color-checked;
         -webkit-text-stroke: 1px @icon-border-color-checked;
         font-family: 'Oui Icons';
         font-size: @icon-check-size;
-        line-height: 1;
         font-weight: @oui-font-regular;
-        vertical-align: bottom;
       }
     }
 
@@ -342,29 +334,57 @@
 
       .@{selector}__header::before {
         background-color: @icon-color-complete;
-      }
-
-      .@{selector}__header::after {
         color: @icon-color-checked;
         -webkit-text-stroke: 0;
       }
     }
 
     .@{selector}__item_checked.@{selector}__item_optional {
       .@{selector}__header::before {
-        display: none;
+        border: 0 none;
+        background: none;
       }
     }
 
     .@{selector}__item_complete.@{selector}__item_optional {
       .@{selector}__header::before {
-        display: none;
-      }
-
-      .@{selector}__header::after {
         color: @icon-color-complete;
         -webkit-text-stroke: 0;
       }
     }
+
+    .@{selector}__item > .@{checkbox-selector} {
+      margin-bottom: 0;
+    }
+
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__label-container {
+      position: inherit;
+      margin-bottom: 0;
+    }
+
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__label {
+      padding-top: @label-padding-top;
+      font-size: @font-size;
+    }
+
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__description {
+      margin-top: rem-calc(7);
+      line-height: 1.4;
+    }
+
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__label,
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__description {
+      padding-left: 0;
+    }
+
+    .@{selector}__item > .@{checkbox-selector} .@{checkbox-selector}__icon {
+      top: (@font-size * @oui-checkbox-line-height - @oui-checkbox-size + @label-padding-top) / 2;
+      left: (@icon-size - @oui-checkbox-size) / 2;
+    }
+
+    .@{selector}__item > .@{checkbox-selector}.@{checkbox-selector}_m .@{checkbox-selector}__icon {
+      top: (@font-size * @oui-checkbox-m-line-height - @oui-checkbox-m-size + @label-padding-top) / 2;
+      left: (@icon-size - @oui-checkbox-m-size) / 2;
+    }
   }
 }

packages/oui-list/list.less

@@ -3,6 +3,7 @@
 
 .oui-list {
   @oui-list-selector: oui-list;
+  @oui-checkbox-selector: oui-checkbox;
 
   #oui > .list-normalize();
   #oui > .list(@oui-list-selector);
@@ -17,6 +18,6 @@
 
   &_steps {
     #oui > .list-normalize();
-    #oui > .list-steps(@oui-list-selector);
+    #oui > .list-steps(@oui-list-selector, @oui-checkbox-selector);
   }
 }