playbook_ui 6.1.0 → 6.2.0

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

@@ -13,15 +13,15 @@ import {
 import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressPillsProps = {
-  active?: Number,
+  active?: number,
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  steps?: Number,
-  title?: String,
-  value?: String,
-  dark?: Boolean,
+  id?: string,
+  steps?: number,
+  title?: string,
+  value?: string,
+  dark?: boolean,
 }
 
 const showSteps = (steps, active, dark) => {

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

@@ -6,16 +6,16 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  id?: String,
-  max?: String,
-  muted: Boolean,
-  percent: String,
-  value: Number,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  id?: string,
+  max?: string,
+  muted: boolean,
+  percent: string,
+  value: number,
   variant?: "default" | "positive" | "negative",
-  width: String,
+  width: string,
 }
 
 const ProgressSimple = (props: ProgressSimpleProps) => {

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

@@ -6,13 +6,13 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressStepProps = {
-  className?: String,
-  data?: String,
-  id?: String,
-  children?: Array<React.ReactChild>,
+  className?: string,
+  data?: string,
+  id?: string,
+  children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
-  icon?: Boolean,
-  dark?: Boolean,
+  icon?: boolean,
+  dark?: boolean,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {

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

@@ -39,6 +39,12 @@ $pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 -
     width: 100%;
 }
 
+@mixin pb_progress_step_item_wrapper_child {
+    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;
@@ -65,6 +71,15 @@ $pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 -
                 [class^=pb_progress_step_item] {
                     &[class*=_connector_first], &[class*=_step_connector_first] {
                         opacity: 0;
+                        display: none;
+                    }
+                }
+            }
+            &:first-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_first], &[class*=_step_connector_first] {
+                        opacity: 0;
+                        display: none;
                     }
                 }
             }
@@ -72,6 +87,7 @@ $pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 -
                 [class^=pb_progress_step_item] {
                     &[class*=_connector_second], &[class*=_step_connector_second] {
                         opacity: 0;
+                        display: none;
                     }
                 }
             }
@@ -219,6 +235,167 @@ $pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 -
             }
         }
     }
+    &[class*=_child] {
+        @include pb_progress_step_item_wrapper_child;
+        >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_child;
+                    [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_child;
+                            [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_child;
+                    [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_child;
+                            [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_child;
+                    [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_child;
+                            [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 {
@@ -385,4 +562,4 @@ $pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 -
             }
         }
     }
-}
+}

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

@@ -6,7 +6,7 @@ import { buildCss } from '../utilities/props'
 import { Icon } from '..'
 
 type ProgressStepItemProps = {
-  className?: String,
+  className?: string,
   status?: 'complete' | 'active' | 'inactive',
   children?: React.Node,
 }

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

@@ -0,0 +1,11 @@
+<%= pb_rails("progress_step", props: { orientation: "child" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_child.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepChild = () => (
+  <div>
+    <ProgressStep
+        orientation="child"
+    >
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepChild

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

@@ -18,16 +18,4 @@
   <% end %>
 <% end %>
 
-<br /><br />
 
-<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
-      Child
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-      Child
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
-      Child
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -21,18 +21,6 @@ const ProgressStepDefault = () => (
 
     <br />
     <br />
-
-    <ProgressStep>
-      <ProgressStepItem status="complete">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="active">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="inactive">
-        {'Child'}
-      </ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

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

@@ -2,11 +2,13 @@ examples:
   
   rails:
   - progress_step_default: Default
+  - progress_step_child: Child
   - progress_step_vertical: Vertical
   - progress_step_dark: Dark
   
   
   react:
   - progress_step_default: Default
+  - progress_step_child: Child
   - progress_step_vertical: Vertical
   - progress_step_dark: Dark

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

@@ -1,3 +1,4 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
+export { default as ProgressStepChild } from './_progress_step_child.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepDark } from './_progress_step_dark.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_progress_step/progress_step"
 
       prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[vertical horizontal],
+                         values: %w[vertical horizontal child],
                          default: "horizontal"
       prop :icon, type: Playbook::Props::Boolean,
                   default: false

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -7,18 +7,18 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
-  className?: String,
-  data?: String,
-  error?: Boolean,
-  id?: String,
-  label: String,
-  name: String,
-  value: String,
-  checked?: Boolean,
-  dark?: Boolean,
-  text: String,
+  className?: string,
+  data?: string,
+  error?: boolean,
+  id?: string,
+  label: string,
+  name: string,
+  value: string,
+  checked?: boolean,
+  dark?: boolean,
+  text: string,
   children?: Node,
-  onChange: (Boolean)=>void,
+  onChange: (boolean)=>void,
 }
 
 const Radio = ({

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -7,12 +7,12 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SectionSeparatorProps = {
   aria: object,
-  className: String,
-  dark?: Boolean,
+  className: string,
+  dark?: boolean,
   data: object,
-  id: String,
+  id: string,
   orientation?: "horizontal" | "vertical",
-  text: String,
+  text: string,
   variant?: "card" | "background",
 }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -17,19 +17,19 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableCardProps = {
   aria?: object,
-  checked: Boolean,
-  children?: Array<React.ReactChild>,
-  className?: String,
+  checked: boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
   data: object,
-  disabled?: Boolean,
-  icon?: Boolean,
-  id?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
+  disabled?: boolean,
+  icon?: boolean,
+  id?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
   onChange: InputCallback<HTMLInputElement>,
-  text?: String,
-  value?: String,
+  text?: string,
+  value?: string,
 }
 
 const SelectableCard = ({