playbook_ui 4.14.0 → 4.15.0

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_layout/_layout.jsx

@@ -2,56 +2,108 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
 } from '../utilities/props'
 
-type LayoutProps = {
+type LayoutPropTypes = {
   aria?: object,
-  children?: Array<React.ReactChild>,
+  children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
   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,
-  size = 'base',
-}: LayoutProps) => {
+}: LayoutPropTypes) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('layout', position, 'collapse', collapse),
-    buildCss('pb_layout_kit', size, position, {
-      'dark': dark,
-      'transparent': transparent,
-      'full': full,
+  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 nonSideChildren = layoutChildren.filter((child) => !child.type || child.type.displayName !== 'Side')
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(classes)}
+        className={classnames(layoutCss, layoutCollapseCss, className)}
     >
-      {children}
+      {subComponentTags('Side')}
+      {nonSideChildren}
     </div>
   )
 }
 
+Layout.Side = Side
+Layout.Body = Body
+
 export default Layout

data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Body, Layout } from '../../'
+
+const LayoutColor = () => {
+  return (
+    <div>
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+      >
+        <Layout.Side>
+          {'Light'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+          variant="dark"
+      >
+        <Layout.Side>
+          <Body
+              dark
+              text="Dark"
+          />
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+          variant="gradient"
+      >
+        <Layout.Side>
+          <Body
+              dark
+              text="Gradient"
+          />
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutColor

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutSizes = () => {
+  return (
+    <div>
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xs"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="sm"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="md"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="lg"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xl"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutSizes

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutSizesDark = () => {
+  return (
+    <div>
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xs"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="sm"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="md"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="lg"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xl"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutSizesDark

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutTransparent = () => {
+  return (
+    <div>
+      <Layout
+          collapse="sm"
+          position="left"
+          size="xs"
+          transparent
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutTransparent

data/app/pb_kits/playbook/pb_layout/docs/example.yml

@@ -5,4 +5,7 @@ examples:
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
   react:
-  - layout_default: Default
+  - layout_colors: Colors
+  - layout_transparent: Transparent
+  - layout_sizes: Sizes
+  - layout_sizes_dark: Sizes Dark

data/app/pb_kits/playbook/pb_layout/docs/index.js

@@ -1 +1,4 @@
-export { default as LayoutDefault } from './_layout_default.jsx'
+export { default as LayoutColors } from './_layout_colors.jsx'
+export { default as LayoutTransparent } from './_layout_transparent.jsx'
+export { default as LayoutSizes } from './_layout_sizes.jsx'
+export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -1,21 +1,38 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  buildDataProps,
+} from '../utilities/props'
 
-class OnlineStatus extends React.Component {
-  render() {
-    return (
-      <div className="pb_online_status">
-        <span>{'ONLINE STATUS CONTENT'}</span>
-      </div>
-    )
-  }
+type OnlineStatusProps = {
+  className?: String,
+  data?: object,
+  id?: String,
+  status?: "online" | "offline" | "away",
 }
 
-OnlineStatus.propTypes = propTypes
+const OnlineStatus = ({
+  id,
+  data = {},
+  className,
+  status = 'offline',
+}: OnlineStatusProps) => {
+  const dataProps = buildDataProps(data)
+  const css = classnames([
+    `pb_online_status_kit_${status}`,
+    className,
+  ])
+
+  return (
+    <div
+        {...dataProps}
+        className={css}
+        id={id}
+    />
+  )
+}
 
 export default OnlineStatus