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

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

@@ -20,6 +20,7 @@ type TableProps = {
   singleLine?: boolean,
   size?: "sm" | "md" | "lg",
   sticky?: boolean,
+  striped?: boolean,
   verticalBorder?: boolean,
 } & GlobalProps
 
@@ -40,6 +41,7 @@ const Table = (props: TableProps) => {
     singleLine = false,
     size = 'sm',
     sticky = false,
+    striped = false,
     verticalBorder = false,
   } = props
 
@@ -70,6 +72,7 @@ const Table = (props: TableProps) => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'striped': striped,
           },
           globalProps(props),
           tableCollapseCss,

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;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table.rb

@@ -25,12 +25,14 @@ module Playbook
                     default: false
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
+      prop :striped, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, "table-responsive-#{responsive}", separator: " "
+          vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -64,6 +66,10 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
+      def striped_class
+        striped ? "striped" : nil
+      end
+
       def vertical_border_class
         vertical_border ? "vertical-border" : nil
       end

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -15,3 +15,8 @@ test("when sticky is true", () => {
   const kit = renderKit(Table, props, { sticky: true })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card sticky-header table-collapse-sm")
 })
+
+test("when striped is true", () => {
+  const kit = renderKit(Table, props, { striped: true })
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
+})

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       27px !default;
+$font_larger:       28px !default;
 $font_large:        20px !default;
-$font_base:         15.5px !default;
+$font_base:         16px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 44px !default;
-$heading_2: 32px !default;
+$heading_1: 46px !default;
+$heading_2: 34px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           .003em !default;
+$lspace_normal:           0 !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          700 !default;
+$bold:          600 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     700 !default;
-$boldest:       700 !default;
+$extrabold:     900 !default;
+$boldest:       800 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       300 !default;
+$lighter:       100 !default;