Merge pull request #54 from CartoDB/53-step_component

Step component

src/scss/cdb-components/headers.scss

@@ -47,9 +47,11 @@
     </li>
   </ul>
 </div>
+
 <br/>
 <br/>
 <br/>
+
 <div class="CDB-HeaderInfo">
   <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
@@ -85,6 +87,7 @@
     <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
@@ -111,6 +114,7 @@
     <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
@@ -130,10 +134,35 @@
     <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
 
+<div class="CDB-HeaderInfo">
+  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+
+  <div class="CDB-HeaderInfo-Inner CDB-Text">
+    <div class="CDB-HeaderInfo-Title u-bSpace--m">
+      <h2 class="CDB-HeaderInfo-TitleText CDB-Size-large u-color-cMainDark">Type</h2>
+      
+      <div class="CDB-HeaderInfo-Actions">
+        <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <p class="CDB-HeaderInfo-Text is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
+    <p class="CDB-HeaderInfo-Text CDB-Size-medium">Distribution of a numeric variable in a range</p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
 ```
 */
 
@@ -148,7 +177,6 @@
     display: block;
   }
 }
-
 .CDB-HeaderInfo-ListItem {
   display: inline-block;
   margin-right: 8px;
@@ -158,24 +186,23 @@
     margin-right: 0;
   }
 }
-
 .CDB-HeaderInfo-Text {
   color: $cTypo3;
+  
+  &.is-uppercase {
+    text-transform: uppercase;
+  }
 }
-
 .CDB-HeaderInfo-Inner {
   @include flex(1);
 }
-
 .CDB-HeaderInfo-Back {
   margin-top: 7px;
 }
-
 .CDB-HeaderInfo-Title {
   @include display-flex();
   @include align-items(center);
 }
-
 .CDB-HeaderInfo-TitleText {
   @include flex(1);
   width: 0;
@@ -184,12 +211,20 @@
   white-space: nowrap;
   overflow: hidden;
 }
-
 .CDB-HeaderInfo-ActionsItem {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
 }
-
-
-
+.CDB-HeaderNumeration {
+  width: $baseSize * 3;
+  height: $baseSize * 3;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background-color: $cWhite;
+  color: $cTypo3;
+  font-size: $sFontSize-small;
+  line-height: 23px;
+  text-align: center;
+  box-sizing: border-box;
+}

src/scss/cdb-components/typography.scss

@@ -52,3 +52,11 @@
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
 }
+
+.CDB-FontSize-small {
+  font-size: $sFontSize-small;
+}
+
+.CDB-FontSize-medium {
+  font-size: $sFontSize-medium;
+}