playbook_ui 13.16.0.pre.alpha.powercentrainplaybookpt22125 → 13.17.0.pre.alpha.nodealphaupgrade2157

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23d0612e30988562c51f3645ab1b8e17457040f5429fd42349efdac4ba34721d
-  data.tar.gz: a8b761742544cf542cf3982ed1ddd78df0121f2e9a630fcf3b0c1993b9b088c7
+  metadata.gz: d229baf16d600479c55f9fc35e8b93b5978cba2506b23e883860ea2094294809
+  data.tar.gz: 0d23fa917195b34c496c19a7f7f741e4ffce3807706019805469d92ba728c015
 SHA512:
-  metadata.gz: 6f91ed683d6637134e8b5738aada3c9a6d75a2642155d94ea0d3c3e1df3046b2a450f5550aea700e5eeb8b3397f623b083d9d190391d34e6ea34a23ed915e563
-  data.tar.gz: fccc217fe8e00235f3dc800d02b0b605b7d1c80896cc7cfde49a52a24b33a636bba300f921122e347fad0f24b1a5ba31e05ac2e203c60eff27b06da3be0aaac1
+  metadata.gz: 2d3610e3ec299cc4bc396ebe9d11169d3da50624aec176a2656bb846f426410027213461715d2cfd83f55f8e53b478c4f734e2115fe9265a4203046d6318358d
+  data.tar.gz: f91b7cfefcb02e1078a1ff1f607bb71b55a10460ec8b9707f0e740783aeb0e36d6c54b84538cfa4857ef8daa044f1045d7d2aded18e2e51877acc2542d1a815c

data/app/pb_kits/playbook/_reset.scss

@@ -1,5 +1,5 @@
-@import "./tokens/typography";
-@import "./tokens/colors";
+@import "tokens/typography";
+@import "tokens/colors";
 
 * {
   box-sizing: border-box;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { render, screen } from "../utilities/test-utils";
 
 import { AdvancedTable } from "../";
@@ -13,7 +13,25 @@ const MOCK_DATA = [
     scheduledMeetings: "10",
     children: [
       {
-        year: "2011",
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    children: [
+      {
+        year: "2022",
         quarter: "Q1",
         month: null,
         day: null,
@@ -40,9 +58,70 @@ const columnDefinitions = [
   },
 ];
 
+const subRowHeaders = ["Quarter"]
+
 const testId = "advanced_table";
 
-test("generated scaffold test", () => {
+const AdvancedTableExpandControl = () => {
+  const [expanded, setExpanded] = useState({'0': true})
+
+  const expandedControl = {
+    value: expanded,
+    onChange: setExpanded,
+  }
+
+return (
+  <div>
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={expandedControl}
+        tableData={MOCK_DATA}
+    />
+  </div>
+);
+}
+
+const AdvancedTableSortControl = () => {
+  const [isSortDesc, setIsSortDesc] = useState({desc: false})
+
+  const sortControl = {
+    value: isSortDesc,
+    onChange: setIsSortDesc,
+  }
+
+return (
+  <div>
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{testid: testId}}
+        sortControl={sortControl}
+        tableData={MOCK_DATA}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+  </div>
+);
+}
+
+const tableOptions = {
+  initialState: {
+      sorting: [
+        {
+          id: "year",
+          desc: true,
+        },
+      ],
+    },
+}
+
+const tableProps = {
+  container: false,
+  sticky: true
+}
+
+test("Generates default kit and classname", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}
@@ -53,4 +132,214 @@ test("generated scaffold test", () => {
 
   const kit = screen.getByTestId(testId);
   expect(kit).toBeInTheDocument();
+  expect(kit).toHaveClass('pb_advanced_table')
+});
+
+test("Generates aria label", () => {
+  render(
+    <AdvancedTable
+        aria={{label:testId}}
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveAttribute('aria-label', testId)
+});
+
+test("Row toggle button exists and toggles subrows open and closed", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
+  expect(rowButton).toBeInTheDocument()
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
+  expect(subRow1).not.toBeInTheDocument()
+  rowButton.click()
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+});
+
+test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(toggleButton).toBeInTheDocument()
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
+  expect(subRow1).not.toBeInTheDocument()
+  toggleButton.click()
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+});
+
+test("loading state + initialLoadingRowCount prop", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        initialLoadingRowsCount={13}
+        loading
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const table = kit.querySelector('table')
+  expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
+
+  const tableBody = kit.querySelector('tbody')
+  const tableRows = tableBody.getElementsByTagName('tr')
+  expect(tableRows).toHaveLength(13)
+});
+
+test("subRowHeaders are rendered", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    >
+      <AdvancedTable.Header />
+      <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+    </AdvancedTable>
+    );
+
+  const kit = screen.getByTestId(testId);
+
+  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
+  rowButton.click()
+  
+  const subRowHeader = kit.querySelector(".custom-row.bg-silver")
+  expect(subRowHeader).toBeInTheDocument()
+});
+
+test("expandControl prop works as expected", () => {
+  render (<AdvancedTableExpandControl/>)
+
+  const kit = screen.getByTestId(testId);
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+})
+
+test("tableOptions prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        tableOptions={tableOptions}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const row1 = kit.getElementsByTagName('tr')[1]
+  
+  expect(row1.id).toBe("1-1-0-row")
+});
+
+test("tableProps prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const table = kit.querySelector('table')
+  expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
 });
+
+test("enableExpansionIcon changes icon", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+        toggleExpansionIcon= "chevron-up"
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const tableHead = kit.querySelector('table')
+  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
+  expect(toggleIcon).toHaveClass("fa-chevron-up")
+});
+
+test("sortIcon changes icon", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    >
+      <AdvancedTable.Header 
+          enableSorting
+          sortIcon= {["chevron-up","chevron-down"]}
+      />
+      <AdvancedTable.Body />
+    </AdvancedTable>
+  );
+
+  const kit = screen.getByTestId(testId);
+  const sortIcon = kit.querySelector('.sort-button-icon')
+  const icon= sortIcon.querySelector(".pb_icon_kit")
+  expect(icon).toHaveClass("fa-chevron-down")
+});
+
+test("Sort icon renders with enableSorting + sortControl works as expected", () => {
+  render (<AdvancedTableSortControl/>)
+
+  const kit = screen.getByTestId(testId);
+  const sortIcon = kit.querySelector(".sort-button-icon")
+  expect(sortIcon).toBeInTheDocument()
+
+  const row1 = kit.getElementsByTagName('tr')[1]
+  
+  expect(row1.id).toBe("1-1-0-row")
+})
+
+test("sort button exists and sorts column data", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    >
+      <AdvancedTable.Header enableSorting />
+      <AdvancedTable.Body />
+    </AdvancedTable>
+  );
+
+  const kit = screen.getByTestId(testId);
+
+  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
+  expect(sortButton).toBeInTheDocument()
+
+  const row1 = kit.getElementsByTagName('tr')[1]
+  
+  expect(row1.id).toBe("0-0-0-row")
+  sortButton.click()
+
+  const row2 = kit.getElementsByTagName('tr')[2]
+  expect(row2.id).toBe("0-0-0-row")
+}); 

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   $font_smaller,
-  "md":   $font_small,
-  "lg":   ($font_large - 2px),
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 28px;
+$pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,12 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
-  letter-spacing: $lspace_loose;
   text-align: center;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_heavy;
+  border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_loosest;
+  letter-spacing: $lspace_looser;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,5 +1,5 @@
-@import "./tokens/colors";
-@import "./tokens/spacing";
+@import "tokens/colors";
+@import "tokens/spacing";
 
 [class^=pb_collapsible_kit] {
   padding: $space_md;

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.regular
+  axis.labels.style.fontWeight = typography.light
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -27,7 +27,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
+      fontWeight: typography.regular,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -27,7 +27,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
+      fontWeight: typography.regular,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -1,5 +1,5 @@
 // Manual Import -- Flatpickr Styles
-@import "./tokens/typography";
+@import "tokens/typography";
 
 .flatpickr-calendar {
   background: transparent;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_base;
+      font-size: 16px;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

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/_popover.tsx

@@ -171,29 +171,27 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
 
     document.body.addEventListener(
       "click",
-      ({ target }) => {
+      (e: MouseEvent) => {
+        const target = e.target as HTMLElement
+
         const targetIsPopover =
-          (target as HTMLElement).closest("#" + targetId) !==
-          null;
+          target.closest("#" + targetId) !== null;
         const targetIsReference =
-          (target as HTMLElement).closest("#reference-" + targetId) !==
-          null;
+          target.closest("#reference-" + targetId) !== null;
+
+        const shouldClose = () => {
+          setTimeout(() => shouldClosePopover(true), 0);
+        }
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            if (!targetIsPopover && !targetIsReference) shouldClose();
             break;
           case "inside":
-            if (targetIsPopover) {
-              shouldClosePopover(true);
-            }
+            if (targetIsPopover) shouldClose();
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
             break;
         }
       },

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'