playbook_ui 7.0.1.pre.alpha14 → 7.1.1.pre.alpha1

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -23,6 +23,7 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
+          key="person-contact-1"
           lastName="Smith"
       />
     </>

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -31,12 +31,14 @@
 
 .pb_popover_tooltip {
   opacity: 0;
-  animation-name: fadeOut;
-  animation-duration: 150ms;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
   visibility: hidden;
   pointer-events: none;
+  &.hide {
+    animation-name: fadeOut;
+    animation-duration: 150ms;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
   &.show {
     animation-name: fadeIn;
     animation-duration: 150ms;

data/app/pb_kits/playbook/pb_popover/index.js

@@ -37,7 +37,7 @@ export default class PbPopover extends PbEnhancedElement {
 
       setTimeout(() => {
         this.popper.update()
-        this.tooltip.classList.toggle('show')
+        this.toggleTooltip()
       }, 0)
     })
   }
@@ -71,10 +71,12 @@ export default class PbPopover extends PbEnhancedElement {
 
   hideTooltip() {
     this.tooltip.classList.remove('show')
+    this.tooltip.classList.add('hide')
   }
 
   toggleTooltip() {
     this.tooltip.classList.toggle('show')
+    this.tooltip.classList.toggle('hide')
   }
 
   get triggerElement() {

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -13,12 +13,14 @@ type ProgressStepProps = {
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   variant?: string,
+  color?: string,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {
   const {
     className,
     children,
+    color,
     orientation = 'horizontal',
     icon = false,
     variant,
@@ -29,6 +31,7 @@ const ProgressStep = (props: ProgressStepProps) => {
     orientation,
     iconStyle,
     variant,
+    color,
   )
 
   return (

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -4,18 +4,17 @@
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
+
+
 [class^=pb_progress_step_kit]{
     list-style:none;
     display: flex;
-
   [class*=pb_progress_step_item] {
     display:flex;
-    flex-basis:100%;
     flex-direction:column;
-    justify-content:space-between;
     position: relative;
-    align-items: center;
-    
+    flex-basis: 100%;
+
     .circle {
         height:14px;
         width:14px;
@@ -39,7 +38,6 @@
         height: 4px;
         position: absolute;
         top: 5px;
-        left: -50%;
         width:100%;
         background-color:$border_light;
     }
@@ -58,7 +56,7 @@
         .circle{
             background-color: $white;
             border: solid 2px $primary;
-            color: rgba($color: $primary, $alpha: 0)
+            color: rgba( $primary, 0)
         }
         &::before{
             background-color: $primary;
@@ -74,18 +72,163 @@
         }
     }
   }
-
+// Start of Horizontal
   &[class*=horizontal]{
     flex-direction: row;
+    [class*=pb_progress_step_item]{
+        align-items: flex-end;
+        &::before{
+            width: calc(100% + .04em);
+        }
+        [class*=box]{
+           display: flex;
+           flex-direction: column;
+           align-items: center;
+           .content{
+               top: 16px;
+               position: absolute;
+               width: fit-content;
+               min-width: max-content;
+           }
+        }
+        &:first-child {
+            position: relative;
+            align-items: flex-start;
+            flex-basis: 0;
+            .box{
+                align-items: flex-start;
+            }
+        }
+        &:last-child{
+            .box{
+                align-items: flex-end;
+            }
+    
+        }
+    }
+    // Start of Tracker
+    &[class*=tracker] {
+        background-color: $border_light;
+        border-radius: 1rem;
+        height:24px;
+        align-items: center;
+        [class*=box]{
+            .circle{
+                box-shadow: none;
+                height: 24px;
+                width: 24px;
+                border: $primary solid 4px;
+            }
+            .content{
+                top:-24px;
+                position: absolute;  
+            }
+        }
+        li[class*=pb_progress_step_item]{
+            &::before{
+                background-color: $border_light;
+                height: 24px;
+                border-radius: 1rem;
+                top: 0;
+                width: calc(100% + 1.5em);
+            }
+            .box{
+                align-items: center;
+            }
+            &:first-child{
+                position: relative;
+                .box{
+                    align-items: flex-start;
+                }
+            }
+            &:last-child{
+                .box{
+                    align-items: flex-end;
+                }
+            }
+        }
+        li[class*=_active]{
+            .circle{
+                height: 24px;
+                width: 24px;
+                border: $primary solid 6px;
+                background-color: rgba($white, $opacity_8);
+            }
+            &::before {
+                background-color: $primary;
+            }
+        }
+        li[class*=_inactive]{
+            &::before {
+                display: none;
+                background-color: $border_light;
+            }
+            .circle{
+                background-color: darken($border_light,10%);
+                border: $border_light solid 6px;
+            }
+            
+        }
+        li[class*=_complete]{
+            &::before {
+                background-color: $primary;
+            }
+            .circle{
+                background-color: darken($primary,25%);
+            }
+        }
+        li[class*=_hidden]{
+            &::before, .circle {
+                display: none;
+            }
+        }
+        li[class*=_hidden] ~ li[class*=_active],
+        li[class*=_hidden] ~ li[class*=_complete] {
+            &::before {
+                width: calc(200% + 1.5em);
+            }
+        }
+        &[class*=dark]{
+            background-color: tint($bg_dark,20%);
+            [class*=_inactive]{
+                .circle{
+                    border-color: tint($bg_dark,20%);
+                }
+            }
+        }
+        &[class*=info]{
+            li[class*=inactive] .circle{
+                border-color: $border_light;
+            }
+            .box .circle , li[class*=_active] .circle{
+                border-color: $teal;
+            }
+            li[class*=_complete],li[class*=_active]{
+                &::before {
+                    background-color: $teal;
+                }
+            }
+            li[class*=_complete] .circle{
+                background-color: darken($teal,25%);
+            }
+        }
+    }
+    //End of Tracker
+
   }
+// End of Horizontal
 
+// Start of Vertical
   &[class*=vertical]{
     flex-direction: column; 
     [class*=pb_progress_step_item]{
+        [class*=box]{
+        display:flex;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
         margin: 8px;
+        }
         &::before {
             display: flex;
             flex-direction: column;
@@ -93,7 +236,7 @@
             height: 100%;
             position: absolute;
             top:14px;
-            left: 13px;
+            left: 21px;
             width:4px;
             background-color:$border_light;
         }
@@ -105,47 +248,39 @@
         }
     }
   }
+//End of Vertical
 
   &[class*=icon] [class*=_complete] svg{
     opacity: 1;
   }
 
   &[class*=dark] {
+    [class*=progress_step_item]{
+        &::before{
+            background-color: tint($bg_dark,20%);
+        }
+    }
     .circle{
-        box-shadow: 0 0 0 2px $bg_dark;
+        box-shadow: 0 0 0 2px tint($bg_dark,10%);
     }
     [class*=active]{
         .circle{
-            background-color: $bg_dark;
+            background-color: tint($bg_dark,10%);
+        }
+        &::before{
+            background-color: $primary;
         }
     }
     [class*=inactive]{
         .circle, &::before{
-           background-color: tint($bg_dark,10%);
+           background-color: tint($bg_dark,20%);
         }
     }
-  }
-  &[class*=tracker] {
-    .circle{
-        box-shadow: none;
-    }
-    li[class*=pb_progress_step_item]{
-        flex-direction: column-reverse;
-        &::before{
-            background-color: $border_light;
-            top:auto;
-            bottom: 5px;
-        }
-    }
-    li[class*=active] .circle,li[class*=inactive] .circle{
-        background-color: $border_light;
-        border:none;
-    }
-    li[class*=complete]{
-        .circle, &::before {
-            background-color: $teal;
+    [class*=complete]{
+        .circle, &::before{
+           background-color: $primary;
         }
     }
   }
 
-}
+}

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -2,10 +2,12 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
+    <div class="box">
       <div class="circle">
         <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
       </div>
-      <div>
+      <div class="content">
         <%= capture(&object.children) %>
       <div>
+    </div>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -7,7 +7,7 @@ import { Icon } from '..'
 
 type ProgressStepItemProps = {
   className?: string,
-  status?: 'complete' | 'active' | 'inactive',
+  status?: 'complete' | 'active' | 'inactive' | 'hidden',
   children?: React.Node,
 }
 
@@ -20,13 +20,15 @@ const ProgressStepItem = ({
 
   return (
     <li className={classnames(progressStepItem, className)}>
-      <div className="circle">
-        <Icon
-            icon="check"
-        />
-      </div>
-      <div>
-        {children}
+      <div className="box">
+        <div className="circle">
+          <Icon
+              icon="check"
+          />
+        </div>
+        <div className="content">
+          {children}
+        </div>
       </div>
     </li>
   )

data/app/pb_kits/playbook/pb_progress_step/docs/_description.md

@@ -1,5 +1,5 @@
 Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle. 
 
 **Tracker**
-This kit variant only uses the *completed* and *inactive* statuses
+You must set the icon prop to true for this kit.
 This variant takes children just like the default progress step. It is best to use the caption kit for children in this variant.

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -7,41 +7,39 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
   <% end %>
 <% end %>
-<br /><br />
-<%= pb_rails("progress_step", props: {classname:"connected", orientation: "horizontal"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
-  <% end %>
-<% end %>
 
 <br /><br />
 
+
 <%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 3
   <% end %>
+   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 4
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 5
+  <% end %>
 <% end %>
 
-
 <br /><br />
 
-<%= pb_rails("progress_step", props: {orientation: "horizontal", icon:true}) do %>
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon:true }) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
   step 3
   <% end %>
-<% end %>
+<% end %>