playbook_ui 7.0.1.pre.alpha15 → 7.0.1

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_table/docs/example.yml

@@ -10,12 +10,6 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-
  
   react:
     - table_sm: Small
@@ -28,9 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-

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

@@ -8,9 +8,3 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'
-export { default as TableOneAction } from './_table_one_action.jsx'
-export { default as TableTwoActions } from './_table_two_actions.jsx'
-export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
-export { default as TableActionMiddle } from './_table_action_middle.jsx'
-export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,36 +2,39 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%
-    # convert deprecated prop values
-    size = object.size
-    size = "sm" if object.size == "xs"
-    size = "md" if object.size == "lg"
-  %>
+    <%
+      # convert deprecated prop values
+      size = object.size
+      size = "sm" if object.size == "xs"
+      size = "md" if object.size == "lg"
+    %>
   <% if size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
     <% if object.show_timezone %>
-      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
+      <%= content_tag(:span, class: "pb_time_timezone") do %>
+        <%= object.pb_date_time.to_timezone.upcase %>
+      <% end %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    
-    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= object.format_time_string %>
-        <% if object.show_timezone %>
-          <span class="pb_time_timezone">
-            <%= object.pb_date_time.to_timezone.upcase %>
-          </span>
+        <%= content_tag(:span) do %>
+          <%= object.format_time_string %>
+          <% if object.show_timezone %>
+            <%= content_tag(:span, class: "pb_time_timezone") do %>
+              <%= object.pb_date_time.to_timezone.upcase %>
+            <% end %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -18,12 +18,11 @@ type TimeProps = {
   id?: string,
   showIcon?: boolean,
   size?: 'md' | 'sm',
-  showTimezone?: boolean,
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
+  const { align, className, date, showIcon, size, timeZone } = props
   const classes = classnames(
     buildCss('pb_time_kit', align, size),
     globalProps(props),
@@ -34,53 +33,41 @@ const Time = (props: TimeProps) => {
 
   return (
     <div className={classes}>
-      <If condition={showIcon}>
-        <Body
-            color="light"
-            tag="span"
-        >
-          <Icon
-              fixedWidth
-              icon="clock"
-              size={size === 'md' ? '' : 'sm'}
-          />
-        </Body>
-        {' '}
-      </If>
-
-      <time dateTime={date}>
-        <span>
-          <If condition={size === 'md'}>
-            <Body
-                className="pb_time"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
+      <span className="pb_body_kit">
+        <If condition={showIcon}>
+          <Body
+              color="light"
+              tag="span"
+          >
+            <Icon
+                fixedWidth
+                icon="clock"
+                size={size === 'md' ? 'lg' : 'sm'}
             />
-            {' '}
-            <If condition={showTimezone}>
+          </Body>
+          {' '}
+        </If>
+        <time dateTime={date}>
+          <span>
+            <If condition={size !== 'md'}>
               <Body
                   color="light"
                   tag="span"
-                  text={dateTimestamp.toTimezone()}
+                  text={dateTimestamp.toTimeWithMeridian()}
               />
-            </If>
-            <Else />
-            <Caption
-                color="light"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
-            />
-            {' '}
-            <If condition={showTimezone}>
+              <Else />
               <Caption
-                  color="light"
+                  size="lg"
                   tag="span"
-                  text={dateTimestamp.toTimezone()}
+                  text={dateTimestamp.toTimeWithMeridian()}
               />
             </If>
-          </If>
-        </span>
-      </time>
+            <If condition={timeZone !== undefined}>
+              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
+            </If>
+          </span>
+        </time>
+      </span>
     </div>
   )
 }