RubyGems - playbook_ui_docs - Versions diffs - 13.22.0.pre.alpha.playbookgemspecrailsversion2608 → 13.22.0 - Mend

playbook_ui_docs 13.22.0.pre.alpha.playbookgemspecrailsversion2608 → 13.22.0

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 (40) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45231373914385c1a87911aabeb3cc65256c4c874356894e30cc148c3edd18a9
-  data.tar.gz: 44843deb7040754391dec172d5397b5f7cd19626059da0e5912debd8ee8a5882
+  metadata.gz: 7816e281e1433333824ea1879e2cdef51fb005be6e30c0d1884727ae7918961e
+  data.tar.gz: 0f87385e2a060d2501250ff3d79c72fed1ccae96c45c35966065ad9c18ca8a73
 SHA512:
-  metadata.gz: 0bc0f7bb219bd88b7d7aa34204fef9e82c4314cb53180801ca183662eb21cee32816748ddbaa544ed115a2eb1c728cd2b33bcb8ec278ad61554c2ab97830e4b6
-  data.tar.gz: 8480214ba05eace0268aafd2a1629787923baa167eb619d023c3a3b239edae9aae2cad3a91e7fe8766f97a50e422f4be3acbd7859505a8ec0492360737a853a0
+  metadata.gz: 8303962599041c59a49fe5ee6f9122676f31ad0d25dde69f437a596462d6e454f39ddf39136e587b3a379c265e4ce4f773605c9eb7eccf1d7f225d4f49722cbd
+  data.tar.gz: 7e32c83cf7493af7caf4822ee163bc7855f494283822a5e4f54ee2e08be9332c62f97a7c1a81616be2d19d4ea809ffee7d65baffbe4ba4fdb663600696ba68d9

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableCollapsibleTrail = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableDefault = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableExpandedControl = (props) => {
   const columnDefinitions = [
@@ -44,16 +44,11 @@ const AdvancedTableExpandedControl = (props) => {
     onChange: setExpanded,
   }
-  const onRowToggleClick = (row) => {
-    setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
-  }
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           expandedControl={expandedControl}
-          onRowToggleClick={onRowToggleClick}
           tableData={MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md CHANGED Viewed

@@ -1,5 +1,3 @@
-**NOTE**: If using `expandedControl` the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
 `expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc.
 In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../../"
 import { Button } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../.."
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableSort = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../.."
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableSortControl = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../.."
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableSubrowHeaders = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableTableOptions = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import MOCK_DATA from "./advanced_table_mock_data.json"
+import { MOCK_DATA } from "./_mock_data"
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js ADDED Viewed

@@ -0,0 +1,278 @@
+export const MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "20",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "February",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "15",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "25",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "May",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "May",
+                day: "2",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      {
+        year: "2023",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "March",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "11",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "April",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "April",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED Viewed

@@ -1,6 +1,6 @@
 examples:
   # rails:
-  # - advanced_table_default: Default (Required Props)
+  #   - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb CHANGED Viewed

@@ -10,6 +10,13 @@
   picker_id: "date-picker-default-date2"
 }) %>
+<%= pb_rails("date_picker", props: {
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
+}) %>
 <%= pb_rails("date_picker", props: {
   label: "Default Behavior",
   picker_id: "date-picker-default-date4"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx CHANGED Viewed

@@ -16,6 +16,13 @@ const DatePickerDefaultDate = (props) => (
         pickerId="date-picker-default-date2"
         {...props}
     />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+        {...props}
+    />
     <DatePicker
         label="Default Behavior"
         pickerId="date-picker-default-date4"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb CHANGED Viewed

@@ -2,11 +2,4 @@
   default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
-}) %>
-<%= pb_rails("date_picker", props: {
-  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
-  label: "Default Date Range",
-  mode: "range",
-  picker_id: "date-picker-default-date3"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx CHANGED Viewed

@@ -10,13 +10,6 @@ const DatePickerRange = (props) => (
         pickerId="date-picker-range"
         {...props}
     />
-    <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(7)]}
-        label="Default Date Range"
-        mode="range"
-        pickerId="date-picker-default-date3"
-        {...props}
-    />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -7,7 +7,7 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  # - date_picker_range: Range
+  - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -37,7 +37,7 @@ examples:
   - date_picker_label: Label
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
-  # - date_picker_range: Range
+  - date_picker_range: Range
   - date_picker_quick_pick_react: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb CHANGED Viewed

@@ -1,7 +1,6 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +12,4 @@
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  </form>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb CHANGED Viewed

@@ -1,7 +1,6 @@
 <div>
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
       blank_selection: "Genre",
       options: [
@@ -17,19 +16,4 @@
       ]
     }) %>
   <% end %>
-  <br>
-  <br>
-  <%= pb_rails("form_group") do %>
-    <%= pb_rails("select", props: {
-        blank_selection: "Phone",
-        options: [
-          { value: "Cell" },
-          { value: "Work" },
-          { value: "Home" },
-        ]
-      }) %>
-      <%= pb_rails("phone_number_input", props: {
-        id: "phone"
-    }) %>
-  <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import FormGroup from '../_form_group'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
@@ -18,16 +18,11 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
-  const phoneOptions = [
-    { value: 'Cell' },
-    { value: 'Work' },
-    { value: 'Home' },
-  ]
   return (
     <div>
       <FormGroup>
         <TextInput
+            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -37,17 +32,6 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
-      <br />
-      <br />
-      <FormGroup>
-        <Select
-            blankSelection="Phone"
-            options={phoneOptions}
-            />
-        <PhoneNumberInput
-            id='default'
-        />
-    </FormGroup>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb CHANGED Viewed

@@ -1,8 +1,3 @@
-<%= pb_rails("icon_circle", props: {
-  icon: "rocket",
-  size: "xxs"
-}) %>
-<br />
 <%= pb_rails("icon_circle", props: {
   icon: "rocket",
   size: "xs"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx CHANGED Viewed

@@ -4,12 +4,6 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
-      <IconCircle
-          icon="rocket"
-          size="xxs"
-          {...props}
-      />
-      <br />
       <IconCircle
           icon="rocket"
           size="xs"

data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids_react.jsx → _multi_level_select_selected_ids.jsx} RENAMED Viewed

@@ -68,7 +68,7 @@ const treeData = [
   },
 ];
-const MultiLevelSelectSelectedIdsReact = (props) => {
+const MultiLevelSelectSelectedIds = (props) => {
   return (
     <div>
       <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIdsReact = (props) => {
   );
 };
-export default MultiLevelSelectSelectedIdsReact;
+export default MultiLevelSelectSelectedIds;

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

@@ -1,5 +1,5 @@
-`selected_ids` 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.
+`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.
+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 CHANGED Viewed

@@ -12,4 +12,4 @@ examples:
   - 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_react: Selected Ids
+  - multi_level_select_selected_ids: Selected Ids

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

@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
 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 MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb CHANGED Viewed

@@ -1,6 +1,9 @@
-<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "offline" }) %>
+<br>
+<%= pb_rails("online_status", props: { status: "online" }) %>
+<br>
+<%= pb_rails("online_status", props: { status: "away" }) %>