playbook_ui 7.0.1.pre.alpha15 → 7.0.1

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -1,27 +0,0 @@
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/opacity";
-
-$primary_border:      rgba($white, $opacity_1);
-$secondary_border:    rgba($white, $opacity_10);
-$primary_dark:        rgba($bg_dark, $opacity_2);
-$secondary_dark:      rgba($bg_dark, $opacity_2);
-
-@mixin toolbar_border($horizontal: true, $color: $color) {
-    @if $horizontal == true {
-        height: 2px;
-        width: calc(100% + #{$space_md} + #{$space_md});
-        top: calc(-#{$space_xs} - 1px);
-        left: -$space_md;
-    } @else {
-        width: 2px;
-        height: $space_md;
-        top: 0;
-        right: calc(#{$space_lg} + 2px);
-    }
-    background-color: $color;
-    content: '';
-    position: relative;
-    bottom: 0;
-    display: block;
-}

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("caption") do %>
-  Block
-<% end %>
-
-<%= pb_rails("caption", props: { size: 'lg' }) do %>
-  Large Block
-<% end %>
-
-<%= pb_rails("caption", props: { size: 'xs' }) do %>
-  Subcaption Block
-<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { Caption } from '../../'
-
-const CaptionBlock = (props) => {
-  return (
-    <div>
-      <Caption {...props}>
-        {'Block'}
-      </Caption>
-
-      <Caption
-          {...props}
-          size="lg"
-      >
-        {'Large Block'}
-      </Caption>
-
-      <Caption
-          {...props}
-          size="xs"
-      >
-        {'Subcaption Block'}
-      </Caption>
-    </div>
-  )
-}
-
-export default CaptionBlock

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1 +0,0 @@
-The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Error Message",
-  status: "error",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Items Successfully Moved",
-  status: "success",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items",
-  status: "neutral",
-  closeable: true
-})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { FixedConfirmationToast } from '../../'
-
-const FixedConfirmationToastClose = () => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="error"
-            text="Error Message"
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="success"
-            text="Items Successfully Moved"
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="neutral"
-            text="Scan to Assign Selected Items"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastClose

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_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 %>