playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

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 %>

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

@@ -2,9 +2,12 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 
-const ProgressStepDefault = () => (
+const ProgressStepDefault = (props) => (
   <div>
-    <ProgressStep icon>
+    <ProgressStep
+        icon
+        {...props}
+    >
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
       <ProgressStepItem status="inactive" />
@@ -13,7 +16,7 @@ const ProgressStepDefault = () => (
     <br />
     <br />
 
-    <ProgressStep>
+    <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
       <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
       <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>

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

@@ -1,4 +1,5 @@
-<%= pb_rails("progress_step",props:{ variant:"tracker"}) do %>
+<br><br>
+<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
@@ -9,3 +10,18 @@
       <%= pb_rails("caption", props:{text: "Delivered"})%>
   <% end %>
 <% end %>
+
+<br>
+
+<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+    <%= pb_rails("progress_step/progress_step_item", props: {status: "hidden"}) 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 %>

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

@@ -2,10 +2,13 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 import { Caption } from '../../'
-const ProgressStepTracker = () => (
+const ProgressStepTracker = (props) => (
   <div>
+    <br />
     <ProgressStep
+        icon
         variant="tracker"
+        {...props}
     >
       <ProgressStepItem status="complete">
         <Caption>{'Ordered'}</Caption>
@@ -17,6 +20,19 @@ const ProgressStepTracker = () => (
         <Caption>{'Delivered'}</Caption>
       </ProgressStepItem>
     </ProgressStep>
+
+    <br />
+    <ProgressStep
+        icon
+        variant="tracker"
+        {...props}
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="hidden" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
   </div>
 )
 

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

@@ -2,11 +2,12 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 
-const ProgressStepVertical = () => (
+const ProgressStepVertical = (props) => (
   <div>
     <ProgressStep
         icon
         orientation="vertical"
+        {...props}
     >
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
@@ -15,7 +16,10 @@ const ProgressStepVertical = () => (
 
     <br />
 
-    <ProgressStep orientation="vertical">
+    <ProgressStep
+        orientation="vertical"
+        {...props}
+    >
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
       <ProgressStepItem status="inactive" />
@@ -23,7 +27,10 @@ const ProgressStepVertical = () => (
 
     <br />
 
-    <ProgressStep orientation="vertical">
+    <ProgressStep
+        orientation="vertical"
+        {...props}
+    >
       <ProgressStepItem status="complete">
         {'Child'}
       </ProgressStepItem>

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

@@ -15,8 +15,11 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"
+      prop :color, type: Playbook::Props::Enum,
+                     values: %w[primary info],
+                     default: "primary"
       def classname
-        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
+        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
       end
 
     private
@@ -31,6 +34,13 @@ module Playbook
           "tracker"
         end
       end
+
+      def color_class
+        case color
+        when "info"
+          "info"
+        end
+      end
     end
   end
 end

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

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_progress_step/progress_step_item"
 
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[complete active inactive],
+                    values: %w[complete active inactive hidden],
                     default: "inactive"
 
       def classname

data/app/pb_kits/playbook/pb_radio/_radio.html.erb

@@ -9,7 +9,7 @@
     <% if object.children %>
       <%= capture(&object.children) %>
     <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected %>
+      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
     <% end %>
 
     <span class="pb_radio_button"></span>

data/app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("radio", props: {
+  text: "Radio with Options",
+  input_options: {
+    id: "radio-id",
+    name: "radio-name",
+    value: "radio-value",
+    class: "radio-class",
+  }
+}) %>

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

@@ -4,6 +4,7 @@ examples:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
+  - radio_options: With Options
 
   react:
   - radio_default: Default

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -15,6 +15,8 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"
       prop :text, type: Playbook::Props::String,
@@ -26,10 +28,6 @@ module Playbook
         generate_classname("pb_radio_kit") + error_class
       end
 
-      def input
-        check_box_tag(name, value, checked)
-      end
-
       def selected
         "checked" if checked == true
       end

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

@@ -20,17 +20,15 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
     aria = {},
     className,
-    dark = false,
     data = {},
     id,
     orientation = 'horizontal',
     text,
     variant = 'card',
   } = props
-  const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation), globalProps(props), className)
 
   return (
 

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

@@ -1,10 +1,16 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
-@import "../pb_caption/caption";
+@import "../tokens/opacity";
+@import "./section_separator_mixin";
 
-$section_colors: (
+$section_colors_light: (
   background:   $bg_light,
-  card:   $card_light,
+  card:         $card_light,
+);
+
+$section_colors_dark: (
+  background:   $bg_dark,
+  card:         tint($bg_dark,10),
 );
 
 [class^=pb_section_separator_kit] {
@@ -12,8 +18,7 @@ $section_colors: (
   justify-content: center;
   align-items: center;
   position: relative;
-
-  @each $color_name, $color_value in $section_colors {
+  @each $color_name, $color_value in $section_colors_light {
     &[class*=_#{$color_name}] {
       span {
         display: inline-block;
@@ -24,64 +29,38 @@ $section_colors: (
       }
     }
   }
- 
   &::after {
-    content: "";
-    height: 1px;
-    width: 100%;
-    background: $border_light;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
+    @include section_separator_horizontal(false);
   }
-
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     &::after {
-      content: "";
-      height: 100%;
-      width: 1px;
-      margin-left: $space_xs;
-      margin-right: $space_xs;
-      background: $border_light;
-      position: initial;
-      z-index: 0;
+      @include section_separator_vertical(false);
     }
   }
   
-  &[class*=_dark] {
+  // Dark =========================
+  
+  &.dark {
     &::after {
-      content: "";
-      height: 1px;
-      width: 100%;
-      background: $border_dark;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      z-index: 0;
+      @include section_separator_horizontal(true);
     }
-    &[class*=_background] {
-      span {
-        display: inline-block;
-        padding: 0 $space_xs;
-        background: $bg_dark;
-        position: relative;
-        z-index: 1;
+    @each $color_name, $color_value in $section_colors_dark {
+      &[class*=_#{$color_name}] {
+        span {
+          display: inline-block;
+          padding: 0 $space_xs;
+          background: #{$color_value};
+          position: relative;
+          z-index: 1;
+        }
       }
     }
     &[class*=_vertical] {
       &::after {
-        content: "";
-        height: 100%;
-        width: 1px;
-        margin-left: $space_xs;
-        margin-right: $space_xs;
-        background: $border_dark;
-        position: initial;
-        z-index: 0;
+        @include section_separator_vertical(true);
       }
     }
   }