playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.customiconsfa928

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -28,6 +28,7 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
+  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -41,6 +42,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
+    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -64,14 +66,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
   // Get expanded items from treeData.
-  const initialExpandedItems = getExpandedItems(treeData);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items.
   const [expanded, setExpanded] = useState(initialExpandedItems);
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData))
-  }, [treeData])
+    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
+  }, [treeData, selectedIds])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -160,6 +162,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
+    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -169,6 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
+        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -179,6 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
+          selectedIds,
           newItem.id,
           depth + 1
         )

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-seelcted_ids",
+    name: "my_data_array_selected",
+    return_all_selected: true,
+    selected_ids:["110","102"],
+    tree_data: treeData,
+}) %>
+ 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectSelectedIds = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multi-level-select-selected_ids"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          }
+          returnAllSelected
+          selectedIds={["energy1","talent1"]}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectSelectedIds;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -0,0 +1,5 @@
+`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -2,9 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   

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

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,6 +9,8 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :selected_ids, type: Playbook::Props::Array,
+                          default: []
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
@@ -24,6 +26,7 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          selectedIds: selected_ids,
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -45,6 +45,13 @@ $section_colors_dark: (
     }
   }
 
+  &[class*=_dashed] {
+    &::before, &::after {
+      border: 1px dashed $border_light;
+      background: none;
+    }
+  }
+
   // Dark =========================
 
   &.dark {

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -8,10 +8,12 @@ import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string; },
   id?: string,
+  lineStyle?: "solid" | "dashed",
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
@@ -20,9 +22,11 @@ type SectionSeparatorProps = {
 const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
     aria = {},
+    children,
     className,
     data = {},
     id,
+    lineStyle = 'solid',
     orientation = 'horizontal',
     text,
     dark = false,
@@ -30,21 +34,22 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
 
   return (
 
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {
+        children && children ||
         text && (
           <span>
-          <Caption text={text} dark={dark}/>
-        </span>
+            <Caption text={text} dark={dark} />
+          </span>
         )
       }
     </div>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) do %>
+    <%= pb_rails("card", props: {
+        border_radius: "rounded",
+        justify_content: "center",
+        padding: "none"
+    })  do %>
+        <%= pb_rails("caption", props: {
+            text: "TODAY",
+            size: "xs",
+            padding_left: "xs",
+            padding_right: "xs" 
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { SectionSeparator, Card, Caption } from '../../'
+
+const children = (
+    <Card
+        borderRadius="rounded"
+        justifyContent="center"
+        padding="none"
+    >
+        <Caption
+            paddingLeft="xs"
+            paddingRight="xs"
+            size="xs"
+            text="TODAY"
+        />
+    </Card>
+)
+
+const SectionSeparatorChildren = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
+    )
+}
+
+export default SectionSeparatorChildren

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md

@@ -0,0 +1,3 @@
+Pass anything (including any of our kits) to the `children` prop to customize a separator's content.
+
+**NOTE:** passing `children` overrides any content passed to `text`

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorDashed = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        />
+    )
+}
+
+export default SectionSeparatorDashed

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb

@@ -1 +1 @@
-<%= pb_rails("section_separator", props: { text: "Title Separator" }) %>
+<%= pb_rails("section_separator", props: { text: "Text Separator" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -5,7 +5,7 @@ const SectionSeparatorText = (props) => {
   return (
     <SectionSeparator
         {...props}
-        text="Title Separator"
+        text="Text Separator"
     />
   )
 }

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

@@ -1,12 +1,15 @@
 examples:
 
   rails:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
-
+  - section_separator_children: Children
 
   react:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
+  - section_separator_children: Children

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

@@ -1,3 +1,5 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
+export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
+export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -4,9 +4,11 @@
     data: object.data,
     class: object.classname) do %>
     <% if object.orientation === 'horizontal' %>
-        <% if object.text %>
+        <% if content %>
+            <%= content %>
+        <% elsif object.text %>
             <span><%= pb_rails("caption", props: { text: object.text }) %></span>
-        <%end%>
+        <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -12,9 +12,12 @@ module Playbook
                          default: "horizontal"
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :line_style, type: Playbook::Props::Enum,
+                        values: %w[dashed solid],
+                        default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,5 +1,6 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/screen_sizes";
 @import './title_mixin';
 
 [class^=pb_title_kit]{
@@ -33,4 +34,21 @@
   &[class*=_thin] {
     @include pb_title_thin;
   }
+
+  @each $size, $size_value in $breakpoints_grid {
+    @each $title_size_value in [1, 2, 3, 4] {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        &[class*=_#{$size}_#{$title_size_value}] {
+          @include break_on($min_size, $max_size) {
+            @if $title_size_value == 1 { @include pb_title_1; }
+            @else if $title_size_value == 2 { @include pb_title_2; }
+            @else if $title_size_value == 3 { @include pb_title_3; }
+            @else if $title_size_value == 4 { @include pb_title_4; }
+            @include title_colors;
+            @if $title_size_value != 4 { @include pb_title_bold; }
+          }
+        }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,6 +3,9 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeResponsiveType = {[key: string]: SizeType}
+
 type TitleProps = {
   aria?: {[key: string]: string},
   bold?: boolean,
@@ -11,7 +14,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
+  size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -36,9 +39,24 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
+  const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
+
+  const buildResponsiveSizeCss = () => {
+    let css = ''
+    
+    if (!isSizeNumberOrString) {
+      Object.entries(size).forEach((sizeObj) => {
+        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
+      })
+    }
+
+    return css.trim()
+  }
+
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Title from '../_title'
+
+const TitleResponsive = (props) => {
+  return (
+    <>
+      <Title
+          size={{xs: "3", sm: "2", md: "1"}}
+          text="Responsive Title"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleResponsive

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md

@@ -0,0 +1 @@
+The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

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

@@ -3,8 +3,10 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive

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

@@ -1,3 +1,4 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
+export { default as TitleResponsive } from './_title_responsive.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -6,9 +6,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, type: Playbook::Props::Enum,
-                  values: [1, 2, 3, 4],
-                  default: 3
+      prop :size, default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -20,12 +18,31 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        if is_size_responsive
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+        else
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
+        end
       end
 
       def is_bold
         bold ? nil : "thin"
       end
+
+      def is_size_responsive
+        try(:size).is_a?(::Hash)
+      end
+
+      def generate_responsive_size_classname
+        css = ""
+        if is_size_responsive
+          size.each do |key, value|
+            css += " pb_title_kit_#{key}_#{value}"
+          end
+        end
+
+        css unless css.blank?
+      end
     end
   end
 end