playbook_ui_docs 13.22.0 → 13.23.0.pre.alpha.PLAY1284investigation2657

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7816e281e1433333824ea1879e2cdef51fb005be6e30c0d1884727ae7918961e
-  data.tar.gz: 0f87385e2a060d2501250ff3d79c72fed1ccae96c45c35966065ad9c18ca8a73
+  metadata.gz: 06bdd9ccfee263666899576e57d9ef54ccb2e7906006bcf984b7cf156aa9a8f3
+  data.tar.gz: 66c6fabfcc30a18004c79541dc5c354387a624261c3460b7c8442ef5872ec712
 SHA512:
-  metadata.gz: 8303962599041c59a49fe5ee6f9122676f31ad0d25dde69f437a596462d6e454f39ddf39136e587b3a379c265e4ce4f773605c9eb7eccf1d7f225d4f49722cbd
-  data.tar.gz: 7e32c83cf7493af7caf4822ee163bc7855f494283822a5e4f54ee2e08be9332c62f97a7c1a81616be2d19d4ea809ffee7d65baffbe4ba4fdb663600696ba68d9
+  metadata.gz: 617bf467c44ac9574c0a09f6818234df1d5f8db9f9303a620052ccc748d9112a03ac5c54ed57a0301dd3b091d9b5933ba752d29bbac7368cb9c89a398d69dcb0
+  data.tar.gz: 408a9dd519c47b3fde7761c3eccbb4975f12ac4f4d846a0e587b7c7d0ed78c50399196f92599440909a7c473ee5ddf6aa8aaff2a760d0309559d6a5cbca52f28

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {
   const columnDefinitions = [
@@ -44,11 +44,16 @@ 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

@@ -1,3 +1,5 @@
+**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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json

@@ -0,0 +1,278 @@
+[
+  {
+    "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": "2021",
+                "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": "2022",
+                "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

@@ -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_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Percentage',
+    data: [48, 70, 25, 55, 72],
+    color: '#F9BB00',
+    yAxis: 1
+}] %>
+
+<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
+
+<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_format: axis_formats,
+    axis_title: axis_titles,
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Secondary Y-axis',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Percentage',
+  data: [48, 70, 25, 55, 72],
+  color: '#F9BB00',
+  yAxis: 1
+}]
+
+const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
+
+const axisFormats = [{format: ""}, {format: "{value}%"}]
+
+const BarGraphSecondaryYAxis= (props) => (
+  <div>
+    <BarGraph
+        axisFormat={axisFormats}
+        axisTitle={axisTitles}
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Secondary Y-axis"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md

@@ -0,0 +1,3 @@
+Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array. 
+
+To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

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

@@ -9,6 +9,7 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
   react:
@@ -20,3 +21,4 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,3 +6,4 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

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

@@ -10,13 +10,6 @@
   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

@@ -16,13 +16,6 @@ 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

@@ -2,4 +2,11 @@
   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

@@ -10,6 +10,13 @@ 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

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

@@ -1,6 +1,7 @@
 <%= 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 %>
@@ -12,4 +13,5 @@
 
     <% 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

@@ -1,6 +1,7 @@
 <div>
+
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
       blank_selection: "Genre",
       options: [
@@ -16,4 +17,19 @@
       ]
     }) %>
   <% 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

@@ -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,11 +18,16 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
 
+  const phoneOptions = [
+    { value: 'Cell' },
+    { value: 'Work' },
+    { value: 'Home' },
+  ]
+
   return (
     <div>
       <FormGroup>
         <TextInput
-            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
+      <FormGroup>
+        <Select
+            blankSelection="Phone"
+            options={phoneOptions}
+            />
+        <PhoneNumberInput
+            id='default'
+        />
+    </FormGroup>
     </div>
   )
 }