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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -1,18 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-
-export default class PbFixedConfirmationToast extends PbEnhancedElement {
-  static get selector() {
-    return '.remove_toast'
-  }
-
-  connect() {
-    this.self = this.element
-    this.self.addEventListener('click', () => {
-      this.removeToast(this.self)
-    })
-  }
-
-  removeToast(elem) {
-    elem.parentNode.removeChild(elem)
-  }
-}

data/app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("radio", props: {
-  text: "Radio with Options",
-  input_options: {
-    id: "radio-id",
-    name: "radio-name",
-    value: "radio-value",
-    class: "radio-class",
-  }
-}) %>

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

@@ -1,34 +0,0 @@
-<%= 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

@@ -1,68 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,61 +0,0 @@
-<%= 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

@@ -1,89 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,34 +0,0 @@
-<%= 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

@@ -1,68 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<%= 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

@@ -1,80 +0,0 @@
-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