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

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
-
-const WithImageNav = () => {
-  return (
-    <Nav
-        link="#"
-        title="Browse"
-    >
-      <NavItem
-          imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
-          text="News Feed"
-      />
-      <NavItem
-          active
-          imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
-          link="#"
-          text="Messages"
-      />
-      <NavItem
-          iconRight="angle-down"
-          imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
-          link="#"
-          text="Events"
-      />
-      <NavItem
-          imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
-          link="#"
-          text="Friends"
-      />
-      <NavItem
-          iconRight="angle-down"
-          imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
-          link="#"
-          text="Groups"
-      />
-    </Nav>
-  )
-}
-
-export default WithImageNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md

@@ -1 +0,0 @@
-Icon used needs to be square. Icon size is 24px by 24px.

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_section_separator/_section_separator_mixin.scss

@@ -1,32 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/spacing";
-
-@mixin section_separator_vertical($dark: false) {
-    @if $dark == false {
-        background: $border_light;
-    } @else {
-        background: $border_dark;
-    }
-    content: "";
-    height: 100%;
-    width: 1px;
-    margin-left: $space_xs;
-    margin-right: $space_xs;
-    position: initial;
-    z-index: 0;
-}
-
-@mixin section_separator_horizontal($dark: false) {
-    @if $dark == false {
-        background: $border_light;
-    } @else {
-        background: $border_dark;
-    }
-    content: "";
-    height: 1px;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
-}

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb

@@ -1,16 +0,0 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("selectable_card", props: {
-    text: "Selected With Options",
-    input_id: "selected_with options",
-    name: "selected_with options",
-    value: "selected_with options",
-    checked: true,
-    input_options: {
-      class: "input-class",
-      name: "overwriting-name",
-      value: "overwriting-value",
-    }
-  }) %>
-
-</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb

@@ -1,16 +0,0 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("selectable_card_icon", props: {
-    icon: "chart-line",
-    title_text: "Quarterly Report",
-    body_text: "Export",
-    input_id: "card-icon-id",
-    checked: true,
-    input_options: {
-      class: "input-class",
-      name: "overwriting-name",
-      value: "overwriting-value",
-    }
-  }) %>
-
-</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb

@@ -1,15 +0,0 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("selectable_icon", props: {
-    icon: "dollar-sign",
-    input_id: "options-id",
-    checked: true,
-    text: "US Dollar",
-    input_options: {
-      class: "input-class",
-      name: "overwriting-name",
-      value: "overwriting-value",
-    }
-  }) %>
-
-</div>

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