playbook_ui_docs 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a326e4362d44975344eaf65fa2578f32b868936ed1ac5c4fbf44edb2e7c42ba
-  data.tar.gz: 7f8a811d46eaa01c28f14929c82c0a83bbc21171f2caebf698badb319b40162c
+  metadata.gz: 8f46c37c2eca826cb24861f95445c890d8d4ad23323dae2bf2bc20da61550f18
+  data.tar.gz: a9bb15e4be05af63c48a923bc0ba6f13adbaee4dbc468bc6084f611ad31d0aae
 SHA512:
-  metadata.gz: 043cb2183b14a1706c6419333b5224af96d2196d62af314e10638330a1f159b11bde931634042e35c0fce9e6328f907bd96f649ab3f72817e082439a5b714a3e
-  data.tar.gz: c324a17c11fce71aeea3a0f8c80cef7bf0c66ec4a1bb02230193d6b7360fd9cbafaa6a74ffec201a0b6a8dd0c8f8dc559b11f97e8cff845aad6911114284b97b
+  metadata.gz: 0a1d281da841af3a27f74d3bf004052d93cde45aec96f7556b5a5704dae4cefd362e038e3d28ced650f90531cb847a1e0d8982ab06846d497fe0dc819b9df5ee
+  data.tar.gz: 3c4d5adbfe9c56ff0ed82b64d715c3ff771fdb5a256c61ff7c6481d8e8f172c93171d92dc6fe57d5a8e0b63e5543e37768ed389db131345738c97047007e2232

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/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
+  <div class="thead">
+    <div class="tr">
+      <div class="th">Column 1</div>
+      <div class="th">Column 2</div>
+      <div class="th">Column 3</div>
+      <div class="th">Column 4</div>
+      <div class="th">Column 5</div>
+    </div>
+  </div>
+  <div class="tbody">
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableDiv = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <div className="thead">
+        <div className="tr">
+          <div className="th">{'Column 1'}</div>
+          <div className="th">{'Column 2'}</div>
+          <div className="th">{'Column 3'}</div>
+          <div className="th">{'Column 4'}</div>
+          <div className="th">{'Column 5'}</div>
+        </div>
+      </div>
+      <div className="tbody">
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+      </div>
+    </Table>
+  )
+}
+
+export default TableDiv

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

@@ -1,5 +1,6 @@
 examples:
   rails:
+    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -26,6 +27,7 @@ examples:
     - table_striped: Striped Table
 
   react:
+    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large