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

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

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

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

@@ -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("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

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

@@ -1 +0,0 @@
-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_toggle/docs/_toggle_options.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("toggle" , props: {
-  text: "Toggle with Options",
-  input_options: {
-    id: "toggle-id",
-    name: "toggle-name",
-    value: "toggle-value",
-    class: "toggle-class",
-    checked: true
-  }
-}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -1,25 +0,0 @@
-<%
-  options = [
-    { label: 'Windows', value: '#FFA500' },
-    { label: 'Siding', value: '#FF0000' },
-    { label: 'Doors', value: '#00FF00' },
-    { label: 'Roofs', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-result-clear", function() {
-    console.log('All options cleared')
-  })
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -1,8 +0,0 @@
-Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
-
-`{ label: "Foo", value: "bar" }`
-
-#### Rails: Subscribing to JS Events
-`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
-`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
-`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
-
-<!-- This section is an example of how to provide load_options prop for using dynamic options -->
-<%= javascript_tag defer: "defer" do %>
-  // Simple filter function, providing a list of results in the expected data format
-
-  const filterResults = function(results) {
-    return results.items.map(function(result) {
-      return {
-        label: result.login,
-        value: result.id,
-      }
-    })
-  }
-
-  /* Note: Make sure you assign this to window or a namespace within window
-  or it will not be accessible to the kit! */
-
-  window.asyncPillsPromiseOptions = function(inputValue) {
-    return new Promise(function(resolve) {
-      if (inputValue) {
-        fetch(`https://api.github.com/search/users?q=${inputValue}`)
-          .then(function(response) { return response.json() })
-          .then(function(results) { resolve(filterResults(results))})
-      } else {
-        resolve([])
-      }
-    })
-  }
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md

@@ -1,11 +0,0 @@
-#### Rails: Providing the `load_options` Promise
-
-**Additional required props: ** `async: true`, `pills: true`
-
-The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
-
-#### React: `loadOptions`
-
-**Additional required props: ** `async: true`
-
-[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb

@@ -1,25 +0,0 @@
-<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
-
-<%= javascript_tag defer: "defer" do %>
-  const filterUserResults = function(results) {
-    return results.items.map(function(result) {
-      return {
-        imageUrl: result.avatar_url,
-        label: result.login,
-        value: result.id,
-      }
-    })
-  }
-
-  window.asyncPillsPromiseOptionsUsers = function(inputValue) {
-    return new Promise(function(resolve) {
-      if (inputValue) {
-        fetch(`https://api.github.com/search/users?q=${inputValue}`)
-          .then(function(response) { return response.json() })
-          .then(function(results) { resolve(filterUserResults(results))})
-      } else {
-        resolve([])
-      }
-    })
-  }
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md

@@ -1 +0,0 @@
-If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.

data/app/pb_kits/playbook/react_rails_kits.js

@@ -1,6 +0,0 @@
-// React-Rendered Rails Kit Exports =====
-export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
-export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
-export { default as Legend } from './pb_legend/_legend.jsx'
-export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
-export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'

data/app/pb_kits/playbook/tokens/index.scss

@@ -1,11 +0,0 @@
-@import "animation-curves";
-@import "border_radius";
-@import "colors";
-@import "line_height";
-@import "opacity";
-@import "positioning";
-@import "screen_sizes";
-@import "shadows";
-@import "spacing";
-@import "transition";
-@import "typography";