playbook_ui 4.15.1.alpha1 → 4.16.0

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -12,16 +12,19 @@ const FilterNoBackground = () => {
   return (
     <Filter
         background={false}
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
         results={256}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'asc' }]}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -1,40 +1,33 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id: "fo",
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "fo",
+    filters: [
+      { name: "name", value: "John Wick" }
     ],
-  template:"filter_only"
-  }) do%>
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    template:"filter_only"
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
 <% end %>
-
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -12,12 +12,11 @@ const FilterOnly = () => {
   return (
     <Filter
         background={false}
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
-        results={1}
-        template="filter_only"
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
+        results={256}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -1,46 +1,40 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id:"2",
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  results: 546,
-  template: "single"
-  }) do%>
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    results: 546,
+    template: "single"
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
-<% end %>
-
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -11,16 +11,18 @@ const FilterSingle = () => {
   ]
   return (
     <Filter
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
-        template="single"
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'asc' }]}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb

@@ -1,18 +1,12 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id: "so",
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  template:"sort_only",
-  background: false,
-  }) do%>
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>
+<%=
+  pb_rails("filter", props: {
+    id: "so",
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template:"sort_only",
+    background: false,
+  })
+%>

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx

@@ -1,48 +1,18 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Filter } from '../../'
 
-const SortOnly = () => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
-  ]
-  return (
-    <Filter
-        background={false}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
-        template="sort_only"
-    >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-      />
-
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-      />
-      <Flex
-          spacing="between"
-      >
-        <Button
-            text="Apply"
-        />
-        <Button
-            text="Clear"
-            variant="secondary"
-        />
-      </Flex>
-    </Filter>
-  )
-}
+const SortOnly = () => (
+  <Filter
+      background={false}
+      sortOptions={{
+        popularity: 'Popularity',
+        // eslint-disable-next-line
+        manager_title: 'Manager\'s Title',
+        // eslint-disable-next-line
+        manager_name: 'Manager\'s Name',
+      }}
+      sortValue={[{ name: 'manager_title', dir: 'desc' }]}
+  />
+)
 
 export default SortOnly

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -13,7 +13,7 @@
 <%end%>
 
 <% if object.template != "filter_only"%>
-  <%= pb_rails("popover", props: { close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
       <%= pb_rails("list") do %>
         <% object.sort_menu.each do |item| %>
           <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_label_pill/_label_pill.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -1,21 +1,66 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  buildAriaProps,
+  buildDataProps,
+} from '../utilities/props'
+
+import {
+  Caption,
+  Pill,
+} from '../'
 
-class LabelPill extends React.Component {
-  render() {
-    return (
-      <div className="pb_label_pill">
-        <span>{'LABEL PILL CONTENT'}</span>
-      </div>
-    )
-  }
+type LabelPillProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+  label?: String,
+  pillValue?: String,
+  variant: 'error' | 'info' | 'neutral' | 'primary' | 'success' | 'warning',
 }
 
-LabelPill.propTypes = propTypes
+const LabelPill = ({
+  aria = {},
+  className,
+  data = {},
+  id,
+  label,
+  pillValue,
+  variant = 'neutral',
+}: LabelPillProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames([
+    'pb_label_pill_kit',
+    className,
+  ])
+
+  return (
+
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+
+      <Caption
+          className="pb_label_pill_label"
+          text={label}
+      />
+
+      <Pill
+          className="pb_label_pill_pill"
+          text={pillValue}
+          variant={variant}
+      />
+
+    </div>
+  )
+}
 
 export default LabelPill

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { LabelPill } from '../../'
+
+const LabelPillDefault = () => (
+
+  <>
+    <LabelPill
+        label="Service Needed"
+        pillValue="76"
+    />
+
+    <LabelPill
+        label="Waiting"
+        pillValue="69"
+        variant="success"
+    />
+
+    <LabelPill
+        label="In Service"
+        pillValue="28"
+        variant="error"
+    />
+
+    <LabelPill
+        label="Fully Serviced"
+        pillValue="101"
+        variant="warning"
+    />
+
+    <LabelPill
+        label="Inbox"
+        pillValue="197"
+        variant="info"
+    />
+
+    <LabelPill
+        label="Outbox"
+        pillValue="13"
+        variant="neutral"
+    />
+
+    <LabelPill
+        label="Inbox"
+        pillValue="218"
+        variant="primary"
+    />
+  </>
+)
+
+export default LabelPillDefault