playbook_ui 13.16.0 → 13.18.0

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -12,12 +12,12 @@ type NavProps = {
   borderless?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string | string[],
-  data?: object,
+  data?: Record<string, unknown>,
   dark?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
   itemSpacing?: SpacingObject
 } & GlobalProps
 
-const Nav = (props: NavProps) => {
+const Nav = (props: NavProps): React.ReactElement => {
   const {
     aria = {},
     borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
     htmlOptions = {},
     id,
     link = '#',
-    onClick = () => { },
+    onClick,
     orientation = 'vertical',
     title = '',
     variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
 
   return (
     <nav
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={cardCss}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={cardCss}
+        id={id}
     >
       {title &&
         <div className="pb_nav_list_title">
           <a
-            className="pb_nav_list_item_link_text"
-            href={link}
-            onClick={onClick}
+              className="pb_nav_list_item_link_text"
+              href={link}
+              onClick={onClick}
           >
             <Caption
-              dark={dark}
-              size="md"
-              text={`${title}`}
+                dark={dark}
+                size="md"
+                text={`${title}`}
             />
           </a>
         </div>

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'

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -12,9 +12,9 @@ const PopoverTest = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -34,9 +34,9 @@ const PopoverTestZIndex = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -58,9 +58,9 @@ const PopoverTestHeight = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -75,7 +75,7 @@ const PopoverTestHeight = () => {
   )
 };
 
-//Test Popover with click to close 'anywhere' 
+//Test Popover with click to close 'anywhere'
 const PopoverTestClicktoClose = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -86,9 +86,9 @@ const PopoverTestClicktoClose = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -103,7 +103,7 @@ const PopoverTestClicktoClose = () => {
   )
 };
 
-//Test Popover with click to close 'inside' 
+//Test Popover with click to close 'inside'
 const PopoverTestClicktoClose2 = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -114,9 +114,9 @@ const PopoverTestClicktoClose2 = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -131,7 +131,7 @@ const PopoverTestClicktoClose2 = () => {
   )
 };
 
-//Test Popover with click to close 'outside' 
+//Test Popover with click to close 'outside'
 const PopoverTestClicktoClose3 = () => {
   const [mockState, setMockState] = React.useState(false)
   const togglePopover = () => {
@@ -142,9 +142,9 @@ const PopoverTestClicktoClose3 = () => {
   }
 
   const popoverReference = (
-    <Button onClick={togglePopover} 
+    <Button onClick={togglePopover}
         text="Click Me"
-     />
+    />
   );
   return (
       <PbReactPopover
@@ -165,7 +165,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
   });
 
   test("renders Popover with z index", () => {
@@ -173,7 +173,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body z_index_3"); 
+    expect(kit).toHaveClass("pb_popover_body z_index_3");
   });
 
   test("renders Popover with max height and max width", () => {
@@ -181,42 +181,40 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling"); 
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
   });
 
-  test("closes Popover on click anywhere", () => {
+  test("closes Popover on click anywhere", async () => {
     render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
+    expect(kit).toBeInTheDocument();
+    fireEvent.click(document.body);
 
+    expect(kit).not.toBeInTheDocument;
   });
 
-  test("closes Popover on click inside", () => {
+  test("closes Popover on click inside", async () => {
     render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Inside");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
 
+    expect(kit).not.toBeInTheDocument;
   });
 
-  test("closes Popover on click outside", () => {
+  test("closes Popover on click outside", async () => {
     render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Outside");
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(kit);
-    expect(kit).toBeInTheDocument(); 
+    expect(kit).toBeInTheDocument();
     fireEvent.click(btn);
-    expect(kit).not.toBeInTheDocument();
 
+    expect(kit).not.toBeInTheDocument;
   });

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
@@ -9,19 +9,20 @@ type TableProps = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
-  container: boolean,
+  container?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
   dataTable: boolean,
-  disableHover: boolean,
+  disableHover?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  responsive: "collapse" | "scroll" | "none",
-  singleLine: boolean,
-  size: "sm" | "md" | "lg",
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
   sticky?: boolean,
+  striped?: boolean,
   verticalBorder?: boolean,
-}
+} & GlobalProps
 
 const Table = (props: TableProps) => {
   const {
@@ -40,6 +41,7 @@ const Table = (props: TableProps) => {
     singleLine = false,
     size = 'sm',
     sticky = false,
+    striped = false,
     verticalBorder = false,
   } = props
 
@@ -56,29 +58,30 @@ const Table = (props: TableProps) => {
 
   return (
     <table
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
-          'table-card': container,
-          'table-dark': dark,
-          'data_table': dataTable,
-          'single-line': singleLine,
-          'no-hover': disableHover,
-          'sticky-header': sticky,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-      )}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
+            'table-card': container,
+            'table-dark': dark,
+            'data_table': dataTable,
+            'single-line': singleLine,
+            'no-hover': disableHover,
+            'sticky-header': sticky,
+            'striped': striped,
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
     >
-      {children}
+        {children}
     </table>
   )
 }

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_table/styles/_all.scss

@@ -18,3 +18,4 @@
 @import "sticky_header";
 @import "vertical_border";
 @import "table_header";
+@import "striped";

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -0,0 +1,19 @@
+[class^=pb_table] {
+  &.striped {
+    tbody {
+      tr:nth-child(odd) {
+        background-color: $bg_light;
+      }
+    }
+  }
+
+  &.dark {
+    &.striped {
+      tbody {
+        tr:nth-child(odd) {
+          background-color: $bg_dark;
+        }
+      }
+    }
+  }
+}