playbook_ui_docs 13.16.0 → 13.17.0.pre.alpha.nodealphaupgrade2157

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

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

@@ -0,0 +1,12 @@
+examples:
+  react:
+  - advanced_table_default: Default (Required Props)
+  - advanced_table_loading: Loading State
+  - advanced_table_sort: enable Sorting
+  - advanced_table_sort_control: Sort Control
+  - advanced_table_expanded_control: Expanded Control
+  - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_collapsible_trail: Collapsible Trail
+  - advanced_table_table_options: Table Options
+  - advanced_table_table_props: Table Props
+

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

@@ -0,0 +1,9 @@
+export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
+export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
+export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
+export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
+export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
+export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
+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'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -3,12 +3,10 @@
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
-<% content_for(:pb_js) do %>
-    <%= javascript_tag do %>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-            })
+<%= javascript_tag do %>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
-    <% end %>
+    })
 <% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "actionable-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        close_on_click: "any",
+        trigger_element_id: "actionable-popover-1",
+        tooltip_id: "actionable-tooltip-1",
+        offset: true,
+        position: "top"
+    }) do %>
+        <%= pb_rails("button", props: { id: "actionable-tooltip-button", text: "Learn more" }) %>
+    <% end %>
+<% end %>
+
+<%= javascript_tag do %>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelector('#actionable-tooltip-button').addEventListener('click', function (e) {
+            alert("Let's do this")
+        }, { once: true })
+    })
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverActionableContent = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClose) => {
+    setShowPopover(!shouldClose)
+  }
+
+  const popoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
+  )
+
+  return (
+    <Flex
+        orientation="row"
+        vertical="center"
+        {...props}
+    >
+      <Body text="Click info for more details" />
+      &nbsp;
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          placement="top"
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          {...props}
+      >
+        <Body textAlign="center">
+          <Button
+              onClick={() => {alert("Let's do this!")}}
+              text="Learn More"
+          />
+        </Body>
+      </PbReactPopover>
+    </Flex>
+  )
+}
+
+export default PopoverActionableContent

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

@@ -5,6 +5,7 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_actionable_content: With Actionable Content
 
   react:
     - popover_default: Default
@@ -12,4 +13,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    
+    - popover_actionable_content: With Actionable Content

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

@@ -3,3 +3,4 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
+export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb

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

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

@@ -0,0 +1,58 @@
+import React from "react"
+import Table from "../_table"
+
+const TableStriped = (props) => (
+  <Table
+      striped
+      {...props}
+  >
+    <thead>
+      <tr>
+        <th>{'Column 1'}</th>
+        <th>{'Column 2'}</th>
+        <th>{'Column 3'}</th>
+        <th>{'Column 4'}</th>
+        <th>{'Column 5'}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export default TableStriped

data/app/pb_kits/playbook/pb_table/docs/_table_striped.md

@@ -0,0 +1 @@
+Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.

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

@@ -23,6 +23,7 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table
 
   react:
     - table_sm: Small
@@ -47,3 +48,4 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table

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

@@ -20,3 +20,4 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
 export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
+export { default as TableStriped } from './_table_striped.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ data }: any) => (
-      <span>{data.name}</span>
+    SingleValue: ({ ...props }) => (
+      <components.SingleValue {...props}>
+        <span>{props.data.name}</span>
+      </components.SingleValue>
     )
   }