playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

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

@@ -2,12 +2,10 @@
   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 class="content">
+      <div>
         <%= 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' | 'hidden',
+  status?: 'complete' | 'active' | 'inactive',
   children?: React.Node,
 }
 
@@ -20,15 +20,13 @@ const ProgressStepItem = ({
 
   return (
     <li className={classnames(progressStepItem, className)}>
-      <div className="box">
-        <div className="circle">
-          <Icon
-              icon="check"
-          />
-        </div>
-        <div className="content">
-          {children}
-        </div>
+      <div className="circle">
+        <Icon
+            icon="check"
+        />
+      </div>
+      <div>
+        {children}
       </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**
-You must set the icon prop to true for this kit.
+This kit variant only uses the *completed* and *inactive* statuses
 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,39 +7,41 @@
   <%= 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: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 2
-  <% end %>
-   <%= 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
+  step 3
   <% end %>
 <% end %>
 
-<br /><br />
 
+<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: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
   step 2
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
   step 3
   <% end %>
-<% end %>
+<% end %>

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

@@ -2,12 +2,9 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 
-const ProgressStepDefault = (props) => (
+const ProgressStepDefault = () => (
   <div>
-    <ProgressStep
-        icon
-        {...props}
-    >
+    <ProgressStep icon>
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
       <ProgressStepItem status="inactive" />
@@ -16,7 +13,7 @@ const ProgressStepDefault = (props) => (
     <br />
     <br />
 
-    <ProgressStep {...props}>
+    <ProgressStep>
       <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,5 +1,4 @@
-<br><br>
-<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
+<%= pb_rails("progress_step",props:{ variant:"tracker"}) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
@@ -10,18 +9,3 @@
       <%= 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,13 +2,10 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 import { Caption } from '../../'
-const ProgressStepTracker = (props) => (
+const ProgressStepTracker = () => (
   <div>
-    <br />
     <ProgressStep
-        icon
         variant="tracker"
-        {...props}
     >
       <ProgressStepItem status="complete">
         <Caption>{'Ordered'}</Caption>
@@ -20,19 +17,6 @@ const ProgressStepTracker = (props) => (
         <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,12 +2,11 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 
-const ProgressStepVertical = (props) => (
+const ProgressStepVertical = () => (
   <div>
     <ProgressStep
         icon
         orientation="vertical"
-        {...props}
     >
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
@@ -16,10 +15,7 @@ const ProgressStepVertical = (props) => (
 
     <br />
 
-    <ProgressStep
-        orientation="vertical"
-        {...props}
-    >
+    <ProgressStep orientation="vertical">
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
       <ProgressStepItem status="inactive" />
@@ -27,10 +23,7 @@ const ProgressStepVertical = (props) => (
 
     <br />
 
-    <ProgressStep
-        orientation="vertical"
-        {...props}
-    >
+    <ProgressStep orientation="vertical">
       <ProgressStepItem status="complete">
         {'Child'}
       </ProgressStepItem>

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

@@ -15,11 +15,8 @@ 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, color_class)
+        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
       end
 
     private
@@ -34,13 +31,6 @@ 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 hidden],
+                    values: %w[complete active inactive],
                     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, object.input_options %>
+      <%= radio_button_tag object.name, object.value, object.selected %>
     <% end %>
 
     <span class="pb_radio_button"></span>

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

@@ -4,7 +4,6 @@ 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,8 +15,6 @@ 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,
@@ -28,6 +26,10 @@ 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,15 +20,17 @@ 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), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
 
   return (
 

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

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,13 +1,9 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorLine = (props) => {
+const SectionSeparatorLine = () => {
   return (
-    <div>
-      <SectionSeparator
-          {...props}
-      />
-    </div>
+    <SectionSeparator />
   )
 }