playbook_ui 7.7.0 → 7.8.0

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

@@ -2,7 +2,8 @@
   pb_rails("filter", props: {
     id: "1",
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
     ],
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
@@ -10,7 +11,7 @@
       { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
     template: "default",
-    results: 546,
+    results: 1,
   }) do
 %>
   <%

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterDefault = () => {
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,12 +11,13 @@ const FilterDefault = () => {
   ]
   return (
     <Filter
+        {...props}
         double
         filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
+          'City': 'San Francisco',
         }}
-        results={256}
+        results={1}
         sortOptions={{
           popularity: 'Popularity',
           // eslint-disable-next-line
@@ -24,7 +25,7 @@ const FilterDefault = () => {
           // eslint-disable-next-line
           manager_name: 'Manager\'s Name',
         }}
-        sortValue={[{ name: 'popularity', dir: 'asc' }]}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
     >
       <TextInput
           label="Full Name"

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

@@ -3,14 +3,15 @@
     id: "3",
     background: false,
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "Las Vegas"}
     ],
     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 },
     ],
-    results: 1,
+    results: 3,
     template: "single"
   }) do
 %>
@@ -47,14 +48,15 @@
     id: "4",
     background: false,
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "Las Vegas"}
     ],
     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 },
     ],
-    results: 546,
+    results: 3,
   }) do
 %>
   <%

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterNoBackground = () => {
+const FilterNoBackground = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -10,45 +10,90 @@ const FilterNoBackground = () => {
     { value: 'A Galaxy Far Far Away Like Really Far Away' },
   ]
   return (
-    <Filter
-        background={false}
-        filters={{
+    <>
+      <Filter
+          {...props}
+          background={false}
+          filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
+          'City': 'Las Vegas',
         }}
-        results={256}
-        sortOptions={{
+          results={3}
+          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"
-          placeholder="Enter name"
-      />
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+      >
+        <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>
 
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-      />
-      <Flex
-          spacing="between"
+      <Filter
+          {...props}
+          background={false}
+          double
+          filters={{
+          'Full Name': 'John Wick',
+          'City': 'Las Vegas',
+        }}
+          results={3}
+          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: 'desc' }]}
       >
-        <Button
-            text="Apply"
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
         />
-      </Flex>
-    </Filter>
+        <Flex
+            spacing="between"
+        >
+          <Button
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </Filter>
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterOnly = () => {
+const FilterOnly = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,12 +11,8 @@ const FilterOnly = () => {
   ]
   return (
     <Filter
-        background={false}
-        filters={{
-          'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
-        }}
-        results={256}
+        {...props}
+        filters={{ 'Full Name': 'John Wick' }}
     >
       <TextInput
           label="Full Name"

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterSingle = () => {
+const FilterSingle = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,10 +11,11 @@ const FilterSingle = () => {
   ]
   return (
     <Filter
+        {...props}
         filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
         }}
+        results={546}
         sortOptions={{
           popularity: 'Popularity',
           // eslint-disable-next-line
@@ -22,7 +23,7 @@ const FilterSingle = () => {
           // eslint-disable-next-line
           manager_name: 'Manager\'s Name',
         }}
-        sortValue={[{ name: 'popularity', dir: 'asc' }]}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
     >
       <TextInput
           label="Full Name"

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

@@ -7,6 +7,5 @@
       { 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,9 +1,9 @@
 import React from 'react'
 import { Filter } from '../../'
 
-const SortOnly = () => (
+const SortOnly = (props) => (
   <Filter
-      background={false}
+      {...props}
       sortOptions={{
         popularity: 'Popularity',
         // eslint-disable-next-line
@@ -11,7 +11,7 @@ const SortOnly = () => (
         // eslint-disable-next-line
         manager_name: 'Manager\'s Name',
       }}
-      sortValue={[{ name: 'manager_title', dir: 'desc' }]}
+      sortValue={[{ name: 'popularity', dir: 'desc' }]}
   />
 )
 

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

@@ -1,16 +1,15 @@
 examples:
-  
+
   rails:
   - filter_default: Default
-  - filter_single: Single
   - filter_no_background: No Background
+  - filter_single: Single
   - filter_only: Filter Only
   - sort_only: Sort Only
-  
+
   react:
   - filter_default: Default
-  - filter_single: Single
   - filter_no_background: No Background
+  - filter_single: Single
   - filter_only: Filter Only
   - sort_only: Sort Only
-  

data/app/pb_kits/playbook/pb_form_group/_form_group.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -0,0 +1,41 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type FormGroupProps = {
+  aria?: object,
+  children?: Node,
+  className?: string,
+  data?: object,
+  id?: string,
+}
+
+const FormGroup = (props: FormGroupProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    children,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default FormGroup

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -0,0 +1,123 @@
+[class^=pb_form_group_kit] {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+
+  & [class^=pb_text_input_kit] .text_input_wrapper,
+  & [class^=pb_date_picker_kit] .input_wrapper,
+  & [class^=pb_select] {
+    margin-bottom: 0;
+  }
+
+  [class^=pb_text_input_kit].dark .text_input_wrapper {
+    margin-bottom: 0
+  }
+
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_text_input_kit]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_button_kit]:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    min-height: 45px;
+  }
+
+  & > [class^=pb_button_kit]:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-width: 0;
+    min-height: 45px;
+  }
+
+  & > [class^=pb_date_picker_kit]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_date_picker_kit]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_select]:not(:last-child) {
+    margin-bottom: 0px;
+    .pb_select_kit_wrapper select {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_select]:not(:first-child) {
+    margin-bottom: 0px;
+    .pb_select_kit_wrapper select {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_selectable_card_kit]:not(:last-child) label {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-width: 0;
+  }
+
+  & > [class^=pb_selectable_card_kit]:not(:first-child) label {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) [class^=pb_selectable_card_kit] label {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:first-child) [class^=pb_selectable_card_kit] label {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
+    [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_typeahead_kit] {
+    min-width: 200px;
+  }
+
+  & > [class^=pb_typeahead_kit]:not(:last-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+      min-height: 26px;
+    }
+  }
+
+  & > [class^=pb_typeahead_kit]:not(:first-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}