playbook_ui 4.15.0 → 4.15.1.alpha1

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

@@ -1,83 +1,88 @@
-<%=
-  pb_rails("filter", props: {
-    id: "3",
-    background: false,
-    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 },
+
+<%= pb_rails("filter", props: {
+  id:"3",
+  background: false,
+  filters: [
+    {name: "name", value: "John Wick"}
     ],
-    results: 1,
-    template: "single"
-  }) do
-%>
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
+    {item:"Title", link:"#", active: false},
+    {item:"Name", link:"#", active: false},
+  ],
+  results: 1,
+  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),
-    ]
-  %>
+  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" } %>
-    <% end %>
+  <%= 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 %>
+
+<% 2.times do%>
 <br>
+<%end%>
 
-<%=
-  pb_rails("filter", props: {
-    id: "4",
-    background: false,
-    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 },
+
+<%= pb_rails("filter", props: {
+  id:"4",
+  background: false,
+  filters: [
+    {name: "name", value: "John Wick"}
     ],
-    results: 546,
-  }) do
-%>
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
+    {item:"Title", link:"#", active: false},
+    {item:"Name", link:"#", active: false},
+  ],
+  results: 546,
+
+  }) 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 } %>
+  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 } %>
 
-    <%= 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 %>
+  <%= 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 %>
+

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

@@ -12,19 +12,16 @@ const FilterNoBackground = () => {
   return (
     <Filter
         background={false}
-        filters={{
-          'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
-        }}
+        filters={[
+        { name: 'Full Name', value: 'John Wick' },
+        { name: 'Territory', value: 'San Francisco' },
+      ]}
         results={256}
-        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' }]}
+        sortMenu={[
+      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
+      { item: 'Title', link: '#', active: false },
+      { item: 'Name', link: '#', active: false },
+    ]}
     >
       <TextInput
           label="Full Name"

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

@@ -1,33 +1,40 @@
-<%=
-  pb_rails("filter", props: {
-    id: "fo",
-    filters: [
-      { name: "name", value: "John Wick" }
+<% 5.times do%>
+<br>
+<%end%>
+
+<%= pb_rails("filter", props: {
+  id: "fo",
+  filters: [
+    {name: "name", value: "John Wick"}
     ],
-    template:"filter_only"
-  }) do
+  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),
+  ]
 %>
-  <%
-    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 } %>
 
-    <%= 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 %>
+<%= 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" } %>
   <% end %>
 <% end %>
+
+<% end %>
+<% 5.times do%>
+<br>
+<%end%>

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

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

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

@@ -1,40 +1,46 @@
-<%=
-  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 },
+<% 5.times do%>
+<br>
+<%end%>
+
+<%= pb_rails("filter", props: {
+  id:"2",
+  filters: [
+    {name: "name", value: "John Wick"}
     ],
-    results: 546,
-    template: "single"
-  }) do
+  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),
+  ]
 %>
-  <%
-    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" } %>
-    <% end %>
+  <%= 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_single.jsx

@@ -11,18 +11,16 @@ const FilterSingle = () => {
   ]
   return (
     <Filter
-        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' }]}
+        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"
     >
       <TextInput
           label="Full Name"

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

@@ -1,12 +1,18 @@
-<%=
-  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,
-  })
-%>
+<% 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%>

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

@@ -1,18 +1,48 @@
 import React from 'react'
-import { Filter } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-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' }]}
-  />
-)
+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>
+  )
+}
 
 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: {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("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("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_layout/_body.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
+
+class Body extends Component {
+  render() {
+    const {
+      children,
+    } = this.props
+    return (
+      <div className="layout_body">
+        {children}
+      </div>
+    )
+  }
+}
+
+Body.propTypes = propTypes
+
+export default Body

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -2,108 +2,56 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
 } from '../utilities/props'
 
-type LayoutPropTypes = {
+type LayoutProps = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: Array<React.ReactChild>,
   collapse?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   dark?: Boolean,
   data?: object,
   full?: Boolean,
   position?: 'left' | 'right',
   size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
-  variant?: 'light' | 'dark' | 'gradient',
   transparent?: Boolean
 }
 
-type LayoutSideProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
-}
-
-type LayoutBodyProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
-}
-
-// Side component
-const Side = ({
-  children,
-  className,
-}: LayoutSideProps) => {
-  return (
-    <div className={classnames('layout_sidebar', className)}>
-      {children}
-    </div>
-  )
-}
-
-// Body component
-const Body = ({
-  children,
-  className,
-}: LayoutBodyProps) => {
-  return (
-    <div className={classnames('layout_body', className)}>
-      {children}
-    </div>
-  )
-}
-
-// Main componenet
 const Layout = ({
   aria = {},
   children,
-  className,
   collapse = 'md',
   dark = false,
   data = {},
   full = false,
   position = 'left',
-  size = 'md',
-  variant = 'light',
   transparent = false,
-}: LayoutPropTypes) => {
+  size = 'base',
+}: LayoutProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const layoutCss = buildCss('pb_layout_kit', `size_${size}`, position, variant, {
-    'dark': dark,
-    'transparent': transparent,
-    'full': full,
-  })
-  const layoutCollapseCss = buildCss('layout', position, 'collapse', collapse)
-
-  const layoutChildren = typeof(children) === 'object' && children.length ? children : [children]
-
-  const subComponentTags = (tagName) => {
-    return layoutChildren.filter((c) => {
-      return c.type && c.type.displayName === tagName
-    }).map((child, i) => {
-      return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
+  const classes = classnames(
+    buildCss('layout', position, 'collapse', collapse),
+    buildCss('pb_layout_kit', size, position, {
+      'dark': dark,
+      'transparent': transparent,
+      'full': full,
     })
-  }
-
-  const nonSideChildren = layoutChildren.filter((child) => !child.type || child.type.displayName !== 'Side')
+  )
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(layoutCss, layoutCollapseCss, className)}
+        className={classnames(classes)}
     >
-      {subComponentTags('Side')}
-      {nonSideChildren}
+      {children}
     </div>
   )
 }
 
-Layout.Side = Side
-Layout.Body = Body
-
 export default Layout