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

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

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