playbook_ui_docs 13.18.0 → 13.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fdb50ea187fb51c4568a5a77c1aa1b9281a017ec5f71612910770722f0d95be3
-  data.tar.gz: 205eacdf9b5e1a691612eae3ebce313d1421cee2a54a176abb648c782164e50e
+  metadata.gz: 9eeff004a877b4b2a9c9b62917bf09020bb6132cc1940ba8399079ca07146b35
+  data.tar.gz: cb9f138868190020ac845c816f765d920f3609aeed33dbe5d3d87f9ccfb5a080
 SHA512:
-  metadata.gz: d32f600e38c86e7874192b00c32edeb9d7f6a4f285ff332a5dacc0da7255e75b7b3da29b02124342cbbc7c90dbd314190907bab829f16e7f75ff9eaf9654e908
-  data.tar.gz: 55cdde05865ea36538e55d3956230e3fcc7240fa60dd2a265c040de74ccf57f55da378bf5fb6a8a80cfd0c66d8f231f6d37e4611885eab72ad6a4bcaf9ef1121
+  metadata.gz: 9fa5d81c3a0bde9c250ae1bcd531a4d145b8ce799c8736328ae618260c5fe7a4ccb3f18ebed003c4b8dc299b0728b15ffe8bba10a3e187dbed33e61c9bccb5bf
+  data.tar.gz: 2038b8cb20ba23ef8519dd8588c8a33d622b83c8563ebc6d35861bf28519a823e653fc755b0627ebec35d1c7d1eebc1d469dc0c19c7a9426038ef985a7d52d1b

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { AdvancedTable } from "../..";
+import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
+
+const AdvancedTableInlineRowLoading = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          tableData={MOCK_DATA_INLINE_LOADING}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableInlineRowLoading;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -0,0 +1,5 @@
+As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic]. 
+
+In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+
+This prop is set to `false` by default. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js

@@ -0,0 +1,200 @@
+export const MOCK_DATA_INLINE_LOADING = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      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

@@ -9,4 +9,5 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
+  - advanced_table_inline_row_loading: inline Row Loading
 

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

@@ -7,3 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb

@@ -0,0 +1,49 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<% custom_options = {
+    customOptions: {
+        subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red"
+            }
+        },
+        xAxis: {
+            categories: [
+                '<i class="far fa-apple-whole"></i> Jan',
+                '<i class="far fa-strawberry"></i> Feb',
+                '<i class="far fa-lemon"></i> Mar',
+                '<i class="far fa-pear"></i> Apr',
+                '<i class="far fa-peach"></i> May'
+            ],
+            labels: {
+                useHTML: true,
+            }
+        }
+    }
+} %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    subtitle: 'Subtitle to replace',
+    title: 'Bar Graph with Custom Overrides',
+    custom_options: custom_options
+}) %>

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

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+const barGraphOptions = {
+  subtitle: {
+    text: "Overwritten subtitle",
+    style: {
+      color: "red"
+    }
+  },
+  xAxis: {
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="far fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
+}
+
+const BarGraphCustom = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="bar-custom"
+        subTitle="Subtitle to replace"
+        title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphCustom

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

@@ -0,0 +1 @@
+See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.

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

@@ -8,6 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides
 
 
   react:
@@ -18,3 +19,4 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides

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

@@ -5,3 +5,4 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
 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'

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb

@@ -0,0 +1,42 @@
+<%=
+  pb_rails("filter", props: {
+    max_height: "360px",
+    id: "filter_max_height_rails",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const FilterMaxHeight = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        maxHeight="360px"
+        minWidth="360px"
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+    {({ closePopover }) => (
+      <form>
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+        />
+        <TextInput
+            label="First Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Email"
+            placeholder="Enter email"
+            {...props}
+        />
+        <TextInput
+            label="Address"
+            placeholder="Enter address"
+            {...props}
+        />
+        <Flex
+            spacing="between"
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterMaxHeight

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

@@ -8,6 +8,7 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -18,4 +19,5 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement

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

@@ -5,4 +5,5 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
+export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'

data/dist/menu.yml

@@ -55,7 +55,7 @@ kits:
       - name: "advanced_table"
         platforms: *react_only
         description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
-        status: "beta" 
+        status: "stable" 
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.