RubyGems - playbook_ui - Versions diffs - 14.21.2 → 14.22.0.pre.alpha.PLAY2248railstooltipclicktoopen8667 - Mend

playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2248railstooltipclicktoopen8667

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb CHANGED Viewed

@@ -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_custom_padding.html.erb CHANGED Viewed

@@ -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_custom_padding.jsx CHANGED Viewed

@@ -6,21 +6,21 @@ const DropdownWithCustomPadding = (props) => {
   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_custom_radio_options.html.erb ADDED Viewed

@@ -0,0 +1,28 @@
+<%
+  options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" }
+  ]
+  selected_value = params[:selected_value]
+%>
+<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <% checked = (option[:value] == selected_value) %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center" }) do %>
+          <%= pb_rails("radio", props: {
+            text: option[:label],
+            name: "dropdown_radio",
+            value: option[:value],
+            checked: checked,
+          }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Dropdown from '../_dropdown'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import Radio from '../../pb_radio/_radio'
+const DropdownCustomRadioOptions = (props) => {
+  const [selectedValue, setSelectedValue] = useState(null)
+  const options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" },
+  ]
+  return (
+  <div>
+      <Dropdown
+          label="Select Item"
+          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
+          options={options}
+          {...props}
+      >
+        {options.map((option) => {
+          return (
+            <Dropdown.Option key={option.id}
+                option={option}
+            >
+              <Flex align="center">
+                <Radio
+                    checked={selectedValue === option.value}
+                    name="dropdown_radio"
+                    value={option.value}
+                />
+                <Body text={option.label} />
+              </Flex>
+            </Dropdown.Option>
+          )
+        })}
+      </Dropdown>
+  </div>
+  )
+}
+export default  DropdownCustomRadioOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx CHANGED Viewed

@@ -14,21 +14,21 @@ const [selectedOption, setSelectedOption] = useState();
   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_custom_trigger_rails.html.erb CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;