playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2256stickydataidreact8523

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx

@@ -11,21 +11,21 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx

@@ -8,20 +8,20 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       icon: "🇺🇸",
       id: "United-states"
 
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       icon: "🇬🇧",
       id: "united-kingdom"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       icon: "🇵🇰",
       id: "pakistan"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

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

@@ -15,6 +15,8 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_icon_options: Custom Icon Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -37,6 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_icon_options: Custom Icon Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -19,4 +19,6 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'

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

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+
+type FilterSectionProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  collapsible?: boolean,
+  collapsed?: boolean,
+  headerText?: string,
+}
+const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
+  if (collapsible) {
+    return (
+      <Collapsible
+          collapsed={collapsed}
+          padding="none"
+      >
+        <Collapsible.Main
+            paddingX="sm"
+            paddingY="xs"
+        >
+            <Caption>{ headerText }</Caption>
+        </Collapsible.Main>
+        <Collapsible.Content
+            className="filter_section_collapsible"
+            paddingX="sm"
+        >
+          { children }
+        </Collapsible.Content>
+      </Collapsible>
+    )
+  }
+  
+  return (
+    <Body
+        paddingTop="xs"
+        paddingX="sm"
+    >
+      <>
+        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
+        { children }
+      </>
+    </Body>
+  )
+}
+
+export default FilterSection

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'

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -58,12 +58,12 @@ function FilterTest(props) {
 }
 
 test("triggers popover on filter button click", () => {
-  render(<FilterTest data={{ testid: "render-test" }}/>);
+  const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
 
   const btn = screen.getAllByRole("button")[0];
 
   // checks if the sort menu rendered
-  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
+  expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
 
   // hits the filter button and triggers popover

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
   <thead>
     <tr>
-      <th id="a">Column 1</th>
+      <th data-sticky-id="a">Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
@@ -15,12 +15,12 @@
       <th>Column 12</th>
       <th>Column 13</th>
       <th>Column 14</th>
-      <th id="b">Column 15</th>
+      <th data-sticky-id="b">Column 15</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -34,10 +34,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -51,10 +51,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -68,7 +68,7 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
   </tbody>
 <% end %>