feat(progress-indicator): adds 'vertical' variant (#1717)

* feat(progress-indicator): adds 'vertical' variant * feat(progress-indicator): adds 'vertical' experimental variant * fix(progress-indicator): doubled vertical item's min-height to 6rem/96px
carbon-design-system · Feb 5, 2019 · 0edf18b · 0edf18b
1 parent 05dffa0
commit 0edf18b
Show file tree

Hide file tree

Showing 5 changed files with 634 additions and 106 deletions.
diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss
@@ -117,6 +117,42 @@
     height: rem(12px);
     width: rem(40px);
   }
+
+  // Vertical variant
+  .#{$prefix}--progress--vertical {
+    display: block;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    display: list-item;
+    min-height: 6rem;
+
+    svg {
+      display: inline-block;
+    }
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
+    display: inline-block;
+    width: auto;
+    vertical-align: top;
+    margin-top: 0.26rem;
+    margin-left: 0.5rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
+    top: 22px;
+    left: 0.69rem;
+    height: calc(100% - 22px);
+    width: 1px;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step:first-child .#{$prefix}--progress-line {
+    display: block;
+  }
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step:last-child .#{$prefix}--progress-line {
+    display: none;
+  }
 }
 
 @mixin progress-indicator--x {
@@ -308,6 +344,51 @@
     height: rem(12px);
     width: rem(40px);
   }
+
+  .#{$prefix}--progress--vertical {
+    display: block;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    display: list-item;
+    min-height: 6rem;
+    width: initial;
+    min-width: initial;
+
+    svg {
+      display: inline-block;
+      margin: 0.1rem 0.5rem;
+    }
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step--current svg {
+    margin-left: 0.563rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
+    display: inline-block;
+    width: initial;
+    max-width: none;
+    vertical-align: top;
+    margin: 0;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
+    margin-top: 0.5rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
+    margin-top: initial;
+    position: initial;
+    margin-left: 2.25rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 1px;
+  }
 }
 
 @include exports('progress-indicator') {

diff --git a/src/components/progress-indicator/progress-indicator.config.js b/src/components/progress-indicator/progress-indicator.config.js
@@ -54,5 +54,14 @@ module.exports = {
         componentsX,
       },
     },
+    {
+      name: 'vertical',
+      label: 'Vertical',
+      context: {
+        vertical: true,
+        steps,
+        componentsX,
+      },
+    },
   ],
 };
diff --git a/src/components/progress-indicator/progress-indicator.hbs b/src/components/progress-indicator/progress-indicator.hbs
@@ -1,11 +1,11 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
-<ul data-progress data-progress-current class="{{@root.prefix}}--progress">
+<ul data-progress data-progress-current class="{{@root.prefix}}--progress {{#if vertical}}{{@root.prefix}}--progress--vertical{{/if}}">
   {{#each steps}}
     <li class="{{@root.prefix}}--progress-step {{@root.prefix}}--progress-step--{{state}} {{#if disabled}} {{@root.prefix}}--progress-step--disabled {{/if}}" {{#if invalid}} data-invalid {{/if}}>
       {{#is state "complete"}}
@@ -39,7 +39,11 @@
       <p tabindex="0" class="{{@root.prefix}}--progress-label" {{#if ../componentsX}} aria-describedby="label-tooltip" {{/if}}>
         {{#if ../componentsX}}
           {{#if overflow}}
-            {{overflowLabel}}
+            {{#if ../vertical}}
+              {{label}}
+            {{else}}
+              {{overflowLabel}}
+            {{/if}}
           {{else}}
             {{label}}
           {{/if}}