playbook_ui 14.22.0.pre.rc.2 → 14.22.0.pre.rc.3

data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import ResultsCount from './ResultsCount'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+
+export type FilterSidebarProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  filters?: FilterDescription,
+  results?: number,
+} & FilterBackgroundProps
+
+const FilterSidebar = ({
+  onCollapse,
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  isCollapsed,
+  maxHeight,
+  minWidth,
+  placement,
+  popoverProps,
+  ...bgProps
+}: FilterSidebarProps): React.ReactElement => (
+  <FilterBackground
+      dark={dark}
+      {...bgProps}
+  >
+    <Card.Body
+        paddingX="sm"
+        paddingY="xs"
+    >
+      <Flex
+          align="center"
+          justify="between"
+          orientation="row"
+      >
+        <ResultsCount
+            dark={dark}
+            results={results}
+            title
+        />
+        <div onClick={onCollapse}>
+          <Caption
+              color="link"
+              cursor="pointer"
+              size="xs"
+              text={isCollapsed ? "Expand All" : "Collapse All"}
+          />
+        </div>
+      </Flex>
+    </Card.Body>
+    <SectionSeparator dark={dark} />
+    <>
+      { children }
+    </>
+  </FilterBackground>
+)
+
+export default FilterSidebar

data/app/pb_kits/playbook/pb_filter/Filter/index.tsx

@@ -1,18 +1,29 @@
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
+import FilterSection from './FilterSection'
 
 type FilterProps =
   | FilterSingleProps
   | (FilterDoubleProps & {
       double?: boolean,
     })
+  | (FilterSidebarProps & {
+    variant?: null | 'sidebar',
+  })
 
 const Filter = ({
   double = false,
+  variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
   const displayFilter = () => {
+    if (variant === 'sidebar') {
+      return (
+        <FilterSidebar {...templateProps} />
+      )
+    }
     if (double === true) {
       return (
         <FilterDouble {...templateProps} />
@@ -30,4 +41,6 @@ const Filter = ({
   )
 }
 
+Filter.Section = FilterSection
+
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -88,6 +88,10 @@
     z-index: 1;
   }
 
+  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
+    padding-top: $space_xs !important;
+  }
+
   &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;

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

@@ -0,0 +1,224 @@
+import React, { useState } from 'react'
+
+import Filter from '../../pb_filter/_filter'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Flex from '../../pb_flex/_flex'
+import Table from '../../pb_table/_table'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+
+const people = [
+  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
+  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
+  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
+  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
+  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
+  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
+  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
+  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
+  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
+  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
+  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
+  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
+  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
+]
+
+const FilterSidebar = (props) => {
+  const [name, setName] = useState('')
+  const [ territory, setTerritory ] = useState('')
+  const [ products, setProducts ] = useState({})
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
+  const handleUpdateTerritory = ({ target }) => {
+    setTerritory(target.value)
+  }
+  const handleCheckboxChange = ({ target }) => {
+    setProducts(prev => ({
+      ...prev,
+      [target.name]: !prev[target.name],
+    }))
+  }
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  const filteredPeople = people.filter((person) => {
+    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
+
+    const matchesTerritory = territory === '' ? true : person.territory === territory
+
+    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
+
+    return matchesName && matchesTerritory && matchesProducts
+  })
+
+  return (
+    <>
+      <Flex>
+        <Filter
+            isCollapsed={isCollapsed}
+            marginRight="xs"
+            onCollapse={() => setIsCollapsed(!isCollapsed)}
+            results={filteredPeople.length}
+            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' }]}
+            variant="sidebar"
+            width="xs"
+            {...props}
+        >
+          <Filter.Section
+              collapsed={isCollapsed}
+              headerText="Full Name"
+          >
+            <TextInput
+                onChange={handleUpdateName}
+                placeholder="Enter name"
+                value={name}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Territory"
+          >
+            <Select
+                blankSelection="Select One..."
+                name="location"
+                onChange={handleUpdateTerritory}
+                options={options}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Products"
+          >
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Doors"
+                  onChange={handleCheckboxChange}
+                  text="Doors"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Windows"
+                  onChange={handleCheckboxChange}
+                  text="Windows"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Siding"
+                  onChange={handleCheckboxChange}
+                  text="Siding"
+              />
+            </div>
+            {!isProductsCollapsed &&
+              <>
+                <div>
+                  <Checkbox
+                      checked={products["Roofing"]}
+                      marginBottom="sm"
+                      name="Roofing"
+                      onChange={handleCheckboxChange}
+                      text="Roofing"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Gutters"]}
+                      marginBottom="sm"
+                      name="Gutters"
+                      onChange={handleCheckboxChange}
+                      text="Gutters"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Solar"]}
+                      marginBottom="sm"
+                      name="Solar"
+                      onChange={handleCheckboxChange}
+                      text="Solar"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Insulation"]}
+                      marginBottom="sm"
+                      name="Insulation"
+                      onChange={handleCheckboxChange}
+                      text="Insulation"
+                  />
+                </div>
+              </>
+            }
+            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
+              <Flex
+                  cursor="pointer"
+                  marginBottom="sm"
+              >
+                <Caption
+                    color="link"
+                    marginRight="xxs"
+                    size="xs"
+                    text={isProductsCollapsed ? "Show More" : "Show Less"}
+                />
+                <Icon
+                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
+                />
+              </Flex>
+            </div>
+          </Filter.Section>
+        </Filter>
+        <Table
+            size="sm"
+        >
+          <thead>
+            <tr>
+              <th>{'Name'}</th>
+              <th>{'Territory'}</th>
+              <th>{'Products'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredPeople.map((person) => (<tr key={person.name}>
+              <td>{ person.name }</td>
+              <td>{ person.territory }</td>
+              <td>{ person.products.join(", ") }</td>
+            </tr>))}
+          </tbody>
+        </Table>
+      </Flex>
+    </>
+  )
+}
+
+export default FilterSidebar

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

@@ -24,4 +24,5 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_sidebar: Sidebar
 

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

@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'