playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

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_table/docs/_table_action_middle.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Table } from '../../'
+import { Button } from '../../'
+
+const TableActionMiddle = () => {
+  return (
+    <Table size="sm">
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Action"
+                variant="link"
+            />
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Action"
+                variant="link"
+            />
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Action"
+                variant="link"
+            />
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableActionMiddle

data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md

@@ -0,0 +1,2 @@
+If the button is towards the middle of the table, it should likely use button variant `link`
+

data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb

@@ -0,0 +1,61 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+        <%= pb_rails("flex") do %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
+                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
+            <% end %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
+            <% end %>
+        <% end %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+        <%= pb_rails("flex") do %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
+                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
+            <% end %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
+            <% end %>
+        <% end %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+        <%= pb_rails("flex") do %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
+                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
+            <% end %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
+            <% end %>
+        <% end %>
+      </td>    
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Table } from '../..'
+import { CircleIconButton, Flex, FlexItem } from '../../'
+
+const TableIconButtons = () => {
+  return (
+    <Table size="sm">
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Flex orientation="row">
+              <FlexItem>
+                <CircleIconButton
+                    icon="trash-alt"
+                    variant="link"
+                />
+              </FlexItem>
+              <FlexItem>
+                <CircleIconButton
+                    icon="pencil"
+                    variant="secondary"
+                />
+              </FlexItem>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Flex orientation="row">
+              <FlexItem>
+                <CircleIconButton
+                    icon="trash-alt"
+                    variant="link"
+                />
+              </FlexItem>
+              <FlexItem>
+                <CircleIconButton
+                    icon="pencil"
+                    variant="secondary"
+                />
+              </FlexItem>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Flex orientation="row">
+              <FlexItem>
+                <CircleIconButton
+                    icon="trash-alt"
+                    variant="link"
+                />
+              </FlexItem>
+              <FlexItem>
+                <CircleIconButton
+                    icon="pencil"
+                    variant="secondary"
+                />
+              </FlexItem>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableIconButtons