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

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

@@ -0,0 +1 @@
+Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon

data/app/pb_kits/playbook/pb_table/docs/_table_one_action.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></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Table } from '../..'
+import { Button } from '../../'
+
+const TableOneAction = () => {
+  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>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOneAction

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

@@ -0,0 +1,2 @@
+If there is one button on each row of the table, ideally, it should use the `secondary` variant and be placed at the end of the row
+

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

@@ -0,0 +1,43 @@
+<%= 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("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>    
+      </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Table } from '../..'
+import { Button } from '../../'
+
+const TableOneAction = () => {
+  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>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOneAction

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

@@ -0,0 +1 @@
+If there are two actions on each of the row, one should ideally one should use the `secondary` variant and the other use the `link` variant. The button using the `secondary` variant should be placed at the end.

data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.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></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+      </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Table } from '../..'
+import { CircleIconButton } from '../../'
+
+const TableTwoPlusActions = () => {
+  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>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableTwoPlusActions

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

@@ -0,0 +1 @@
+If there are more than two actions on each row, then they should be contained in secondary circle icon button with the `ellipsis-h` icon (horizontal ellipsis) at the end of the row

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

@@ -10,6 +10,12 @@ 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
@@ -22,3 +28,9 @@ 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,3 +8,9 @@ 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,39 +2,36 @@
     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, size: "lg" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
     <% if object.show_timezone %>
-      <%= content_tag(:span, class: "pb_time_timezone") do %>
-        <%= object.pb_date_time.to_timezone.upcase %>
-      <% end %>
+      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
     <% end %>
   <% else %>
     <% 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: "sm" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    
+    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= 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 %>
+        <%= object.format_time_string %>
+        <% if object.show_timezone %>
+          <span class="pb_time_timezone">
+            <%= object.pb_date_time.to_timezone.upcase %>
+          </span>
         <% end %>
       <% end %>
     <% end %>

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

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