playbook_ui 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

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

@@ -1,68 +1,127 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "200",
-    expanded: true,
+<% treeData = [
+  {
+    label: "HQ",
+    value: "HQ",
+    id: "hq",
+  },
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl",
     children: [
       {
-        label: "People",
-        value: "People",
-        id: "201",
-        expanded: true,
+        label: "Marketing & Sales PHL",
+        value: "Marketing & Sales PHL",
+        id: "marketingPHL",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "Installation Office PHL",
+        id: "installationPHL",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "Warehouse PHL",
+        id: "warehousePHL",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "New Jersey",
+    id: "nj",
+    children: [
+      {
+        label: "New Jersey",
+        value: "New Jersey",
+        id: "nj1",
         children: [
           {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "202",
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketingNJ",
           },
           {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "203",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "204",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "205",
-              },
-            ],
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installationNJ",
           },
           {
-            label: "People Experience",
-            value: "People Experience",
-            id: "206",
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouseNJ",
           },
         ],
       },
       {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "207",
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton",
         children: [
           {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "208",
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketingPR",
           },
           {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "209",
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installationPR",
           },
           {
-            label: "Energy",
-            value: "Energy",
-            id: "210",
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehousePR",
           },
-        ],
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "Maryland",
+    id: "MD",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "Marketing & Sales MD",
+        id: "marketingMD",
+      },
+      {
+        label: "Installation Office MD",
+        value: "Installation Office MD",
+        id: "installationMD",
+      },
+      {
+        label: "Warehouse MD",
+        value: "Warehouse MD",
+        id: "warehouseMD",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "Connecticut",
+    id: "CT",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "Marketing & Sales CT",
+        id: "marketingCT",
+      },
+      {
+        label: "Installation Office CT",
+        value: "Installation Office CT",
+        id: "installationCT",
+      },
+      {
+        label: "Warehouse CT",
+        value: "Warehouse CT",
+        id: "warehouseCT",
       },
-    ],
-}] %>
+    ]
+  },
+]; %>
 
 <%= pb_rails("multi_level_select", props: {
     id: "multi-level-select-single-rails",

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

@@ -3,69 +3,126 @@ import MultiLevelSelect from "../_multi_level_select";
 
 const treeData = [
   {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome2",
-    expanded: true,
+    label: "HQ",
+    value: "HQ",
+    id: "hq",
+  },
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl",
     children: [
       {
-        label: "People",
-        value: "People",
-        id: "people2",
-        expanded: true,
+        label: "Marketing & Sales PHL",
+        value: "Marketing & Sales PHL",
+        id: "marketingPHL",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "Installation Office PHL",
+        id: "installationPHL",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "Warehouse PHL",
+        id: "warehousePHL",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "New Jersey",
+    id: "nj",
+    children: [
+      {
+        label: "New Jersey",
+        value: "New Jersey",
+        id: "nj1",
         children: [
           {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent2",
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketingNJ",
           },
           {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business2",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative2",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development2",
-              },
-            ],
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installationNJ",
           },
           {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience2",
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouseNJ",
           },
         ],
       },
       {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact2",
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton",
         children: [
           {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment2",
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketingPR",
           },
           {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer2",
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installationPR",
           },
           {
-            label: "Energy",
-            value: "Energy",
-            id: "energy2",
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehousePR",
           },
-        ],
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "Maryland",
+    id: "MD",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "Marketing & Sales MD",
+        id: "marketingMD",
+      },
+      {
+        label: "Installation Office MD",
+        value: "Installation Office MD",
+        id: "installationMD",
+      },
+      {
+        label: "Warehouse MD",
+        value: "Warehouse MD",
+        id: "warehouseMD",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "Connecticut",
+    id: "CT",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "Marketing & Sales CT",
+        id: "marketingCT",
+      },
+      {
+        label: "Installation Office CT",
+        value: "Installation Office CT",
+        id: "installationCT",
+      },
+      {
+        label: "Warehouse CT",
+        value: "Warehouse CT",
+        id: "warehouseCT",
       },
-    ],
+    ]
   },
 ];
 

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

@@ -0,0 +1 @@
+Optionally enable the `single` variant to replace checkboxes with radios so the input accepts and returns only a single selection.

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

@@ -0,0 +1,138 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "HQ",
+    id: "hq1",
+  },
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "Marketing & Sales PHL",
+        id: "marketingPHL1",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "Installation Office PHL",
+        id: "installationPHL1",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "Warehouse PHL",
+        id: "warehousePHL1",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "New Jersey",
+    id: "nj2",
+    hideRadio: true,
+    children: [
+      {
+        label: "New Jersey",
+        value: "New Jersey",
+        id: "nj3",
+        hideRadio: true,
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketingNJ1",
+          },
+          {
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installationNJ1",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouseNJ1",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton1",
+        hideRadio: true,
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketingPR1",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installationPR1",
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehousePR1",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "Maryland",
+    id: "MD1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "Marketing & Sales MD",
+        id: "marketingMD1",
+      },
+      {
+        label: "Installation Office MD",
+        value: "Installation Office MD",
+        id: "installationMD1",
+      },
+      {
+        label: "Warehouse MD",
+        value: "Warehouse MD",
+        id: "warehouseMD1",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "Connecticut",
+    id: "CT1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "Marketing & Sales CT",
+        id: "marketingCT1",
+      },
+      {
+        label: "Installation Office CT",
+        value: "Installation Office CT",
+        id: "installationCT1",
+      },
+      {
+        label: "Warehouse CT",
+        value: "Warehouse CT",
+        id: "warehouseCT1",
+      },
+    ]
+  },
+]; %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-children-only-rails",
+    name: "my_single_children_only_select_array",
+    tree_data: treeData,
+    input_name: "PowerChildren",
+    variant: "single"
+}) %>

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

@@ -0,0 +1,150 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "HQ",
+    value: "HQ",
+    id: "hq1",
+  },
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "Marketing & Sales PHL",
+        id: "marketingPHL1",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "Installation Office PHL",
+        id: "installationPHL1",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "Warehouse PHL",
+        id: "warehousePHL1",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "New Jersey",
+    id: "nj2",
+    hideRadio: true,
+    children: [
+      {
+        label: "New Jersey",
+        value: "New Jersey",
+        id: "nj3",
+        hideRadio: true,
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketingNJ1",
+          },
+          {
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installationNJ1",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouseNJ1",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton1",
+        hideRadio: true,
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketingPR1",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installationPR1",
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehousePR1",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "Maryland",
+    id: "MD1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "Marketing & Sales MD",
+        id: "marketingMD1",
+      },
+      {
+        label: "Installation Office MD",
+        value: "Installation Office MD",
+        id: "installationMD1",
+      },
+      {
+        label: "Warehouse MD",
+        value: "Warehouse MD",
+        id: "warehouseMD1",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "Connecticut",
+    id: "CT1",
+    hideRadio: true,
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "Marketing & Sales CT",
+        id: "marketingCT1",
+      },
+      {
+        label: "Installation Office CT",
+        value: "Installation Office CT",
+        id: "installationCT1",
+      },
+      {
+        label: "Warehouse CT",
+        value: "Warehouse CT",
+        id: "warehouseCT1",
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectSingleChildrenOnly = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-children-only"
+          inputName="PowerChildren"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleChildrenOnly;

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

@@ -0,0 +1 @@
+Dynamically control your selectable options by passing `hideRadio: true` to any node within your tree data to omit that node's radio selector. In this example we've hidden all radios except ultimate children (nodes without descendants).

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
+  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
@@ -9,5 +10,6 @@ examples:
   react:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
+  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - 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,4 +1,5 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
+export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.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_rich_text_editor/_rich_text_editor.tsx

@@ -29,6 +29,7 @@ type Editor = {
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
+  advancedEditorToolbar?: boolean,
   toolbarBottom?: Boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
@@ -51,6 +52,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     advancedEditor,
+    advancedEditorToolbar = true,
     toolbarBottom = false,
     children,
     className,
@@ -163,8 +165,14 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     >
       {
         advancedEditor ? (
-          <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+          <div 
+              className={classnames("pb_rich_text_editor_advanced_container", { 
+              ["toolbar-active"]: advancedEditorToolbar,
+              })}
+            >
+            {advancedEditorToolbar && (
+              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+            )}
           { children }
           </div>
         ) : (