playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

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

@@ -5,6 +5,7 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
+          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

data/app/pb_kits/playbook/pb_pill/_pill.html.erb

@@ -1,7 +1,6 @@
 <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
+    id: object.id,
     data: object.data,
-    id: object.id) do %>
+    class: object.classname) do %>
   <%= pb_rails("title", props: { text: object.display_text, size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -4,39 +4,21 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PillProps = {
-  aria?: object,
   className?: string,
-  data?: object,
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 
 const Pill = (props: PillProps) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    id,
-    text,
-    variant = 'neutral',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_pill_kit', variant), globalProps(props), className)
+  const { className, text, variant = 'neutral' } = props
+  const css = classnames([`pb_pill_kit_${variant}`, className], globalProps(props))
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
+    <div className={css}>
       <Title
           className="pb_pill_text"
           size={4}

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -15,7 +15,7 @@ $pb_pill_height: 22px;
 
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {
-        background: rgba($color_value, $opacity-1);
+      background: rgba($color_value, $opacity-1);
 
       .pb_pill_text {
         color: $color_value !important;

data/app/pb_kits/playbook/pb_pill/docs/example.yml

@@ -2,8 +2,8 @@ examples:
   
   rails:
   - pill_default: Default
- 
   
   
   react:
   - pill_default: Default
+  

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
+  id: object.id,
   data: object.data,
-  id: object.id) do %>
+  class: object.classname) do %>
     <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
       <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>

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

@@ -10,17 +10,14 @@ import {
   Reference as PopperReference,
 } from 'react-popper'
 
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import { buildCss, noop } from '../utilities/props'
 
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PbPopoverProps = {
-  aria?: object,
   className?: string,
   closeOnClick?: "outside" | "inside",
-  data?: object,
-  id?: String,
   offset?: boolean,
   reference: PopperReference,
   show?: boolean,
@@ -48,11 +45,8 @@ const popoverModifiers = ({ modifiers, offset }) => {
 
 const Popover = (props: PbPopoverProps) => {
   const {
-    aria = {},
-    className,
     children,
-    data = {},
-    id,
+    className,
     modifiers,
     offset,
     placement,
@@ -64,7 +58,7 @@ const Popover = (props: PbPopoverProps) => {
     minWidth,
   } = props
 
-  const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
+  const popoverSpacing = globalProps(props) ? globalProps(props) : 'p_sm'
   const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
@@ -76,13 +70,6 @@ const Popover = (props: PbPopoverProps) => {
       minWidth ? { minWidth: minWidth } : {}
     )
   }
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_popover_kit'),
-    globalProps(props),
-    className
-  )
 
   return (
     <Popper
@@ -93,11 +80,8 @@ const Popover = (props: PbPopoverProps) => {
       {({ placement, ref, style }) => {
         return (
           <div
-              {...ariaProps}
-              {...dataProps}
-              className={classes}
+              className={`${buildCss('pb_popover_kit')} ${className}`}
               data-placement={placement}
-              id={id}
               ref={ref}
               style={Object.assign(
                 {},

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -1,5 +1,4 @@
 <%= pb_rails("flex", props: {
-    dark: true,
     orientation: "row",
     vertical: "center"
     }) do %>

data/app/pb_kits/playbook/pb_popover/docs/example.yml

@@ -5,11 +5,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
 
   react:
     - popover_default: Default
@@ -17,11 +12,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
   
 
 

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

@@ -3,8 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
-export { default as PopoverDark } from './_popover_dark.jsx'
-export { default as PopoverListDark } from './_popover_list_dark.jsx'
-export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
-export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
-export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb

@@ -16,5 +16,5 @@
         <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
-    
+
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -37,7 +37,7 @@ const showSteps = (steps, active, dark) => {
 const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
-      dark ? ' dark' : ''
+      dark ? '_dark' : ''
     }`}
       key={step}
   />
@@ -55,10 +55,11 @@ const ProgressPills = (props: ProgressPillsProps) => {
     value,
     dark = false,
   } = props
+  const darkClass = dark ? '_dark' : ''
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_progress_pills_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -24,12 +24,13 @@
     }
   }
 
+
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
     &[class*=_inactive] {
       background-color: $border_light;
-      &.dark {
+      &[class*=_dark]{
       background-color: $border_dark;
       }
     }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { steps: 3, active: 2, title: "Status:", value: "Orientation", dark: true}) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.jsx

@@ -0,0 +1,20 @@
+
+import React from 'react'
+import ProgressPills from '../_progress_pills.jsx'
+
+const ProgressPillsDark = () => {
+  return (
+    <div>
+      <ProgressPills
+          active={2}
+          dark
+          steps={3}
+          title="Status:"
+          value="Orientation"
+      />
+
+    </div>
+  )
+}
+
+export default ProgressPillsDark

data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml

@@ -3,9 +3,10 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
-
+  - progress_pills_dark: Dark
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_dark: Dark

data/app/pb_kits/playbook/pb_progress_pills/docs/index.js

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsDark } from './_progress_pills_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -10,14 +10,18 @@ module Playbook
       prop :active, type: Playbook::Props::Number,
                     default: 0
       prop :value
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
 
       def classname
-        generate_classname("pb_progress_pills_kit")
+        generate_classname("pb_progress_pills_kit", dark_class)
       end
 
+
+
       def with_status
         yield title if title.present?
       end
@@ -31,8 +35,15 @@ module Playbook
       end
 
       def dark_pill
-        dark ? " dark" : nil
+          dark ? "_dark" : nil
       end
+
+      private
+      
+      def dark_class
+        dark ? "dark" : nil
+      end
+
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -41,14 +41,14 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   }
 
   const wrapperClass = classnames(
+    className,
     buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   const kitClass = classnames(
-    buildCss('pb_progress_simple_kit', { muted }, variantStyle, align),
-    className
+    className,
+    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
   )
 
   return (

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

@@ -1,4 +1,4 @@
-<%= content_tag(:ul,
+<%= content_tag(:div,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -12,7 +12,7 @@ type ProgressStepProps = {
   children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
-  variant?: string,
+  dark?: boolean,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {
@@ -21,20 +21,21 @@ const ProgressStep = (props: ProgressStepProps) => {
     children,
     orientation = 'horizontal',
     icon = false,
-    variant,
+    dark = false,
   } = props
   const iconStyle = icon === true ? 'icon' : ''
+  const darkStyle = dark === true ? 'dark' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
     orientation,
     iconStyle,
-    variant,
+    darkStyle
   )
 
   return (
-    <ul className={classnames(progressStepCss, globalProps(props), className)}>
+    <div className={classnames(progressStepCss, className, globalProps(props))}>
       {children}
-    </ul>
+    </div>
   )
 }
 

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

@@ -1,151 +1,388 @@
 @import "../tokens/colors";
-@import "../utilities/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
-[class^=pb_progress_step_kit]{
-    list-style:none;
-    display: flex;
+$pb_progress_step_circle_size: 14px;
+$pb_progress_step_connector_width: 3px;
+$pb_progress_step_connector_height_from_top: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2 + 2;
+$pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2;
 
-  [class*=pb_progress_step_item] {
-    display:flex;
-    flex-basis:100%;
-    flex-direction:column;
-    justify-content:space-between;
-    position: relative;
+@mixin pb_progress_step_circle($background_color, $border_color, $border_width, $icon_color) {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
     align-items: center;
-    
-    .circle {
-        height:14px;
-        width:14px;
-        border-radius:100%;  
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 3;
-        box-shadow: 0 0 0 2px $white;
+    padding-right: 0;
+    overflow: hidden;
+    height: $pb_progress_step_circle_size;
+    width: $pb_progress_step_circle_size;
+    background-color: $background_color;
+    color: $icon_color;
+    font-size: $font_smallest;
+    border-radius: $pb_progress_step_circle_size/2;
+    border: $border_width solid $border_color;
+    margin: 2px;
+}
 
-        svg {
-            width:10px;
-            height:10px;
-            opacity: 0;
-            color: $white;
-        }
-    }
+@mixin pb_progress_step_line($width, $height, $color, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $color;
+    margin: $margin;
+    flex-grow: 1;
+}
 
-    &::before{
-        content: '';
-        height: 4px;
-        position: absolute;
-        top: 5px;
-        left: -50%;
-        width:100%;
-        background-color:$border_light;
-    }
+@mixin pb_progress_step_item_wrapper_horizontal {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
 
-    &:last-child::after, &:first-child::before {
-        display:none;
-    }
+@mixin pb_progress_step_item_wrapper_flex($flex_direction, $align_items, $align_self) {
+    display: flex;
+    flex-direction: $flex_direction;
+    align-items: $align_items;
+    align-self: $align_self;
+}
 
-    &[class*=_inactive]{
-        .circle{
-            background-color: $border_light;
-            color: $border_light;
+[class^=pb_progress_step_kit] {
+    &[class*=_icon] {
+        [class^=pb_progress_step_item_kit_complete] {
+            [class=pb_progress_step_item_step_circle] {
+                svg {
+                    width: $pb_progress_step_circle_size;
+                    height: $pb_progress_step_circle_size - 2;
+                    color: $white;
+                }
+            }
         }
     }
-    &[class*=_active]{
-        .circle{
-            background-color: $white;
-            border: solid 2px $primary;
-            color: rgba($color: $primary, $alpha: 0)
+    &[class*=_horizontal] {
+        @include pb_progress_step_item_wrapper_horizontal;
+        >div {
+            &:first-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_first], &[class*=_step_connector_first] {
+                        opacity: 0;
+                    }
+                }
+            }
+            &:last-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_second], &[class*=_step_connector_second] {
+                        opacity: 0;
+                    }
+                }
+            }
         }
-        &::before{
-            background-color: $primary;
-        }
-    }
-    &[class*=_complete]{
-        .circle{
-            background-color: $primary;
-            color:$white;
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
-        &::before{
-            background-color: $primary;
+        &[class*=_dark] {
+            [class*=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        [class=pb_progress_step_item_step] {
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($bg_dark, $primary, 2px, $bg_dark);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class^=pb_progress_step_item] {
+                            &[class*=_connector_first], &[class*=_connector_second] {
+                                @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                            }
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                    }
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
-  }
-
-  &[class*=horizontal]{
-    flex-direction: row;
-  }
-
-  &[class*=vertical]{
-    flex-direction: column; 
-    [class*=pb_progress_step_item]{
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: flex-start;
-        margin: 8px;
-        &::before {
-            display: flex;
-            flex-direction: column;
-            content: '';
-            height: 100%;
-            position: absolute;
-            top:14px;
-            left: 13px;
-            width:4px;
-            background-color:$border_light;
+    &[class*=_vertical] {
+        @include pb_progress_step_item_wrapper_flex(column, flex-start, auto);
+        > div:first-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_first] {
+                    opacity: 0;
+                    margin: 0 0 0 $pb_progress_step_connector_height_from_left;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:first-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
         }
-        &:last-child::before{
-            display:none;
+        >div:last-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_second] {
+                    opacity: 0;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:last-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
         }
-        .circle{
-            margin: 0 8px;
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $primary, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $primary, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                }  
+            }
         }
-    }
-  }
-
-  &[class*=icon] [class*=_complete] svg{
-    opacity: 1;
-  }
-
-  &[class*=dark] {
-    .circle{
-        box-shadow: 0 0 0 2px $bg_dark;
-    }
-    [class*=active]{
-        .circle{
-            background-color: $bg_dark;
+        &[class*=_dark] {
+            [class^=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle(transparent, $primary, 2px, $bg_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    } 
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    }  
+                }
+            }
         }
     }
-    [class*=inactive]{
-        .circle, &::before{
-           background-color: tint($bg_dark,10%);
-        }
-    }
-  }
-  &[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;
-        }
-    }
-  }
-
-}
+}