playbook_ui 4.15.1.alpha1 → 4.16.0

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

@@ -1 +1,3 @@
-Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -16,11 +16,11 @@
 }] %>
 
 <%= pb_rails("line_graph", props: { 
-        id: "line-test", 
-        gradient: false, 
-        chart_data: data, 
-        x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-        title: 'Solar Employment Growth by Sector, 2010-2016', 
-        subtitle: 'Source: thesolarfoundation.com', 
-        axis_title: 'Number of Employees' 
-    }) %>
+    id: "line-default", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Solar Employment Growth by Sector, 2010-2016', 
+    subtitle: 'Source: thesolarfoundation.com', 
+    axis_title: 'Number of Employees' 
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -23,7 +23,7 @@ const LineGraphDefault = () => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="bar-test"
+        id="line-default"
         subTitle="Source: thesolarfoundation.com"
         title="Solar Employment Growth by Sector, 2010-2016"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-fixed-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)', 
+    axis_title: 'Number of Employees',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-precentage-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)', 
+    axis_title: 'Number of Employees',
+    height: '50%'
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { LineGraph } from '../../'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphDefault = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default LineGraphDefault

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb

@@ -0,0 +1,15 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-test-2", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Line Graph with Legend', 
+    axis_title: 'Number of Employees',
+    legend: true
+}) %>
+

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { LineGraph } from '../..'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphLegend = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="bar-test-2"
+        legend
+        title="Line Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default LineGraphLegend

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

@@ -2,7 +2,11 @@ examples:
   
   rails:
   - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_height: Height
   
   
   react:
-  - line_graph_default: Default
+  - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_height: Height

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

@@ -1 +1,3 @@
 export { default as LineGraphDefault } from './_line_graph_default.jsx'
+export { default as LineGraphLegend } from './_line_graph_legend.jsx'
+export { default as LineGraphHeight } from './_line_graph_height.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -19,6 +19,10 @@ module Playbook
                                 default:[]
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
+      prop :legend, type: Playbook::Props::Boolean,
+                    default: false
+      prop :height
+
       def chart_type
         gradient ? "area" : "line"
       end
@@ -35,6 +39,8 @@ module Playbook
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
+          legend: legend,
+          height: height,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -1,21 +1,38 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  buildDataProps,
+} from '../utilities/props'
 
-class OnlineStatus extends React.Component {
-  render() {
-    return (
-      <div className="pb_online_status">
-        <span>{'ONLINE STATUS CONTENT'}</span>
-      </div>
-    )
-  }
+type OnlineStatusProps = {
+  className?: String,
+  data?: object,
+  id?: String,
+  status?: "online" | "offline" | "away",
 }
 
-OnlineStatus.propTypes = propTypes
+const OnlineStatus = ({
+  id,
+  data = {},
+  className,
+  status = 'offline',
+}: OnlineStatusProps) => {
+  const dataProps = buildDataProps(data)
+  const css = classnames([
+    `pb_online_status_kit_${status}`,
+    className,
+  ])
+
+  return (
+    <div
+        {...dataProps}
+        className={css}
+        id={id}
+    />
+  )
+}
 
 export default OnlineStatus

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { OnlineStatus } from '../../'
+
+const OnlineStatusDefault = () => (
+  <>
+    <OnlineStatus status="offline" />
+
+    <br />
+
+    <OnlineStatus status="online" />
+
+    <br />
+
+    <OnlineStatus status="away" />
+
+  </>
+)
+
+export default OnlineStatusDefault

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

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - online_status_default: Default
-  
+
   react:
-  
+  - online_status_default: Default

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

@@ -0,0 +1 @@
+export { default as OnlineStatusDefault } from './_online_status_default.jsx'

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

@@ -26,14 +26,22 @@ type PbPopoverProps = {
   shouldClosePopover?: () => Boolean,
 } & PopperProps
 
-const POPOVER_OFFSET_Y = {
-  offset: {
-    offset: '0, 8',
+// Prop enabled default modifiers here
+// https://popper.js.org/docs/v2/modifiers
+
+const POPOVER_MODIFIERS = {
+  offset: { //https://popper.js.org/docs/v2/modifiers/offset/
+    enabled: true,
+    name: 'offset',
+    options: {
+      offset: [0, 8],
+    },
+    phase: 'main',
   },
 }
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? { ...modifiers, ...POPOVER_OFFSET_Y } : modifiers
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
 }
 
 const Popover = ({
@@ -43,23 +51,21 @@ const Popover = ({
   offset,
   placement,
   referenceElement,
-  show,
 }: PbPopoverProps) => (
   <Popper
       modifiers={popoverModifiers({ modifiers, offset })}
       placement={placement}
       referenceElement={referenceElement}
   >
-    {({ placement, ref, scheduleUpdate, style }) => {
-      scheduleUpdate()
+    {({ placement, ref, style }) => {
       return (
         <div
-            className={buildCss('pb_popover_kit', className)}
+            className={`${buildCss('pb_popover_kit')} ${className}`}
             data-placement={placement}
             ref={ref}
             style={style}
         >
-          <div className={buildCss('popover_tooltip', show ? 'show' : '')}>
+          <div className={`${buildCss('popover_tooltip')} show`}>
             <Card shadow="deeper">
               { children }
             </Card>
@@ -73,13 +79,13 @@ const Popover = ({
 
 export default class PbReactPopover extends React.Component<PbPopoverProps> {
   static defaultProps = {
-    modifiers: {},
+    modifiers: [],
     offset: false,
     placement: 'left',
     portal: 'body',
     show: false,
     shouldClosePopover: noop,
-    usePortal: false,
+    usePortal: true,
   }
 
   componentDidMount() {
@@ -134,7 +140,6 @@ export default class PbReactPopover extends React.Component {
           offset={offset}
           placement={placement}
           referenceElement={referenceElement}
-          show={show}
       >
         {children}
       </Popover>
@@ -156,13 +161,15 @@ export default class PbReactPopover extends React.Component {
             )}
           </PopperReference>
         </If>
-        <If condition={usePortal}>
-          {ReactDOM.createPortal(
-            popoverComponent,
-            document.querySelector(portal)
-          )}
-          <Else />
-          {popoverComponent}
+        <If condition={show}>
+          <If condition={usePortal}>
+            {ReactDOM.createPortal(
+              popoverComponent,
+              document.querySelector(portal)
+            )}
+            <Else />
+            {popoverComponent}
+          </If>
         </If>
       </PopperManager>
     )

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

@@ -1,7 +1,6 @@
 examples:
   rails:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
@@ -9,9 +8,7 @@ examples:
 
   react:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
-    - popover_portal: Use with `portal` option
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
     - popover_click_any: Close on click anywhere

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

@@ -1,7 +1,5 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
-export { default as PopoverWithButton } from './_popover_with_button.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
-export { default as PopoverPortal } from './_popover_portal.jsx'
 export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
 export { default as PopoverClickInside } from './_popover_click_inside.jsx'
 export { default as PopoverClickAny } from './_popover_click_any.jsx'

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

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= capture(&object.children) %>
+<% end %>

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

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+
+type ProgressStepProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  children?: Array<React.ReactChild>,
+  orientation?: 'horizontal' | 'vertical',
+  icon?: Boolean,
+  dark?: Boolean,
+}
+
+const ProgressStep = ({
+  className,
+  children,
+  orientation = 'horizontal',
+  icon = false,
+  dark = false,
+}: ProgressStepProps) => {
+  const iconStyle = icon === true ? 'icon' : ''
+  const darkStyle = dark === true ? 'dark' : ''
+  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
+
+  return (
+    <div className={classnames(progressStepCss, className)}>
+      {children}
+    </div>
+  )
+}
+
+export default ProgressStep

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

@@ -0,0 +1,388 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$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;
+
+@mixin pb_progress_step_circle($background_color, $border_color, $border_width, $icon_color) {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    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;
+}
+
+@mixin pb_progress_step_line($width, $height, $color, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $color;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_progress_step_item_wrapper_horizontal {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+@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^=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*=_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;
+                    }
+                }
+            }
+        }
+        [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);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &[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*=_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;
+                        }
+                    }
+                }
+            }
+        }
+        >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;
+                        }
+                    }
+                }
+            }
+        }
+        [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*=_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);
+                                    }
+                                }
+                            }
+                        }
+                    }  
+                }
+            }
+        }
+    }
+}