Merge pull request #254 from havgry/feature/vertical-flow-steps

Flow Steps: Vertical variant
youseedk · Aug 6, 2020 · 78eaca9 · 78eaca9
2 parents 83c7acd + 6bf2887
commit 78eaca9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 9 deletions.
diff --git a/src/assets/scss/elements/ys-flow-steps.scss b/src/assets/scss/elements/ys-flow-steps.scss
@@ -4,22 +4,27 @@
 @import '../tools/ys-functions';
 
 .ys-flow-steps {
+  $bullet-size-px: 34;
   color: $ys-color-grey-28;
 
   &__list {
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
-    flex-flow: row;
     counter-reset: progress-bullet;
     text-align: center;
+
+    .ys-flow-steps--vertical & {
+      display: initial;
+      text-align: left;
+    }
   }
 
   &__item {
     position: relative;
-    flex: 1 0 10px;
-    padding-top: rem(34);
+    flex: 1 0;
+    padding-top: rem($bullet-size-px);
     font-size: rem(14);
     counter-increment: progress-bullet;
     list-style-type: none;
@@ -28,6 +33,14 @@
       padding-top: rem(42);
     }
 
+    .ys-flow-steps--vertical & {
+      display: flex;
+      padding-top: 0;
+      padding-left: rem(48);
+      align-items: center;
+      height: rem(64);
+    }
+
     // ::before is the line in the bg
     &::before {
       content: '';
@@ -38,6 +51,13 @@
       height: rem(2);
       width: 100%;
       background-color: $ys-color-digital-moss;
+
+      .ys-flow-steps--vertical & {
+        height: 100%;
+        width: rem(2);
+        top: -50%;
+        left: rem($bullet-size-px / 2 - 1);
+      }
     }
 
     &:first-child::before {
@@ -46,13 +66,14 @@
 
     // ::after is the actual "bullets"
     &::after {
+      $bullet-center-point: calc(50% - #{rem($bullet-size-px / 2)});
       content: '';
       position: absolute;
       z-index: 1;
       top: 0;
-      left: calc(50% - #{rem(17)});
-      width: rem(34);
-      height: rem(34);
+      left: $bullet-center-point;
+      width: rem($bullet-size-px);
+      height: rem($bullet-size-px);
       border-radius: 50%;
       background: $ys-color-digital-moss url('data:image/svg+xml,%3Csvg viewBox%3d%22-1 -2 16 16%22 xmlns%3d%22http://www.w3.org/2000/svg%22%3E%3Cpath fill%3d%22none%22 fill-rule%3d%22evenodd%22 stroke%3d%22%23fff%22 stroke-linecap%3d%22round%22 stroke-linejoin%3d%22round%22 stroke-width%3d%222%22 d%3d%22M1 6.16534L5.68013 11 13 1%22/%3E%3C/svg%3E') no-repeat center;
       background-size: 14px 14px;
@@ -61,10 +82,14 @@
       font-size: rem(16);
       line-height: rem(30);
       font-weight: 600;
+
+      .ys-flow-steps--vertical & {
+        left: 0;
+        top: $bullet-center-point;
+      }
     }
 
     &--active {
-
       // Change color of line
       & ~ .ys-flow-steps__item::before {
         background-color: $ys-color-grey-28;
@@ -80,7 +105,7 @@
       }
 
       // "Bullets" after the active "bullet"
-      & ~ .ys-flow-steps__item::after {
+      & ~ .ys-flow-steps__item:not(.ys-flow-steps__item--active)::after {
         content: counter(progress-bullet);
         background-color: $ys-color-white;
         background-image: none;
@@ -93,7 +118,9 @@
   &__label {
     font-weight: 600;
     line-height: rem(20);
+  }
 
+  &:not(.ys-flow-steps--vertical) &__label {
     @media screen and (max-width: $ys-breakpoint-md) {
       display: none;
     }

diff --git a/src/docs/01-Components/06-Feedback/03-flow-steps.md b/src/docs/01-Components/06-Feedback/03-flow-steps.md
@@ -25,6 +25,15 @@ secondaryKeywords: minvalue maxvalue valuemax valuemin
 {{render '@flow-steps'}}
 ```
 
+## Vertical flow steps
+<div class="element-preview">
+  <div class="element-preview__inner">{{render '@flow-steps--vertical'}}</div>
+</div>
+
+```html
+{{render '@flow-steps--vertical'}}
+```
+
 # HTML Guidelines
 
 # UX and Design Guidelines

diff --git a/src/elements/02-elements/flow-steps/flow-steps.config.js b/src/elements/02-elements/flow-steps/flow-steps.config.js
@@ -2,10 +2,18 @@ module.exports = {
   status: "wip",
   preview: "@element-preview",
   label: "Flow Steps",
+  isVertical: false,
   variants: [
     {
       name: "default",
       label: "Flow Steps"
+    },
+    {
+      name: "vertical",
+      label: "Flow Steps Vertical",
+      context: {
+        isVertical: true
+      }
     }
   ],
   "context": {

diff --git a/src/elements/02-elements/flow-steps/flow-steps.hbs b/src/elements/02-elements/flow-steps/flow-steps.hbs
@@ -1,4 +1,4 @@
-<div class="ys-flow-steps" role="progressbar" aria-valuenow="3"
+<div class="ys-flow-steps{{#if isVertical}} ys-flow-steps--vertical{{/if}}" role="progressbar" aria-valuenow="3"
     aria-valuemin="0" aria-valuetext="Task description" aria-valuemax="5">
     <ol class="ys-flow-steps__list" aria-hidden="true">
         <li class="ys-flow-steps__item">