playbook_ui_docs 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

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/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+
+import { RichTextEditor } from "../..";
+
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+
+const RichTextEditorToolbarDisabled = (props) => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text],
+    content:
+      "Add your text here. You can format your text, add links, quotes, and bullets.",
+  });
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div>
+      <RichTextEditor 
+          advancedEditor={editor} 
+          advancedEditorToolbar={false}
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+    </div>
+  );
+};
+
+export default RichTextEditorToolbarDisabled;

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md

@@ -0,0 +1,3 @@
+Because our default variant's toolbar requires [Tiptap's StarterKit](https://tiptap.dev/api/extensions/starter-kit) which may include features that are not relevant to your project or even block some custom extensions, optionally setting `advancedEditorToolbar` to `false` creates an editor without a toolbar, using only the minimum requirements.
+
+__NOTE__: Omitting the Starter Kit requires that the editor’s default extensions (`document`, `paragraph`, and `text`) __must__ be imported directly from Tiptap or as a custom extensions.

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

@@ -15,6 +15,7 @@ examples:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
+  - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -8,4 +8,5 @@ export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_tool
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
-export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("star_rating", props: { rating: 3 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "outline" }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "primary" }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingColorOptions = (props) => (
+  <>
+
+    <StarRating
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        colorOption='outline'
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        colorOption='primary'
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        colorOption='subtle'
+        rating={3}
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingColorOptions

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb

@@ -2,12 +2,22 @@
 
 <br>
 
+<%= pb_rails("star_rating", props: { rating: 1 }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 2}) %>
+
+<br>
+
 <%= pb_rails("star_rating", props: { rating: 3 }) %>
 
 <br>
 
-<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
+<%= pb_rails("star_rating", props: { rating: 4 }) %>
 
 <br>
 
 <%= pb_rails("star_rating", props: { rating: 5 }) %>
+
+<br>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -4,12 +4,12 @@ import StarRating from '../_star_rating'
 
 const StarRatingDefault = (props) => (
   <>
-    <StarRating />
+    <StarRating {...props} />
 
     <br />
 
     <StarRating
-        rating={3}
+        rating={0.9}
         {...props}
     />
 
@@ -20,6 +20,21 @@ const StarRatingDefault = (props) => (
         {...props}
     />
 
+    <br />
+
+    <StarRating
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={4.2}
+        {...props}
+    />
+
+
     <br />
 
     <StarRating

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb

@@ -1 +1,6 @@
-<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
+<%= pb_rails("star_rating", props: { rating: 3 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "number" }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "onestar" }) %>
+</br>