playbook_ui 10.25.0 → 10.26.0.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5787076b1b4c285e67e4c71a89d98b6c78768fb2ed6fb92500a53a9b336eff2b
-  data.tar.gz: 9f83e659e948d30274f39cb02b6806c620a7cfa44aaab529481e8a1bd29c1f8f
+  metadata.gz: eec4050a38ffdbc91288fa4d1ebe864edc0485bf814f1569b50a4df569e6c666
+  data.tar.gz: 5967691eccad475c60406d60b9aca79ee520a2736bfde034b48e6db8c1de3316
 SHA512:
-  metadata.gz: a8d3751c1bf0bd5fd88870161c5f92ed1437007b3931d422e86206bb46e437aa285d18289817e7304d0ad7cd23b8889c8cbb9b4e51be3e63f316ea817f67bb8e
-  data.tar.gz: d64982803deee6c1a08c949ca493d7fc74b4e8b56047190df2d1fc98c1db9922f8a95066cd63897430150da2784ccdddd597af50662a9e0ab818ac83318dce8a
+  metadata.gz: 8ea97fd90f89882ee7e54d80b46e468fa5beffa6ee2e9dc64475e14ebfe4cdcfef43dcf6b3dd0ab06db030da9fb04f4e35fae1e35dcba93a8009a80200d24fd5
+  data.tar.gz: edbf22cf4988bf3ddc4f7872dce6fe51041dd8a8a657bd8b118196fe42c8a0c06428fbc5a1efcec55525d6ae4b769279a3438b12ad174d2e52497b7610e2260d

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
@@ -18,14 +18,14 @@ type AvatarProps = {
   name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status: "away" | "offline" | "online",
-}
+} & GlobalProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
     .join('')
     .substring(0, 2)
 
-const Avatar = (props: AvatarProps) => {
+const Avatar = (props: AvatarProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
 
@@ -20,7 +20,7 @@ type BodyProps = {
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
   variant: null | 'link',
-}
+} & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
   const {
@@ -56,12 +56,12 @@ const Body = (props: BodyProps): React.ReactElement => {
         id={id}
     >
       { highlighting && (
-         <Highlight
-             highlightedText={highlightedText}
-             text={text}
-         >
-            {children}
-         </Highlight>
+        <Highlight
+            highlightedText={highlightedText}
+            text={text}
+        >
+          {children}
+        </Highlight>
       ) }
       { !highlighting && (
         text || children

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 /* @flow */
 
 import React from 'react'
@@ -29,7 +30,7 @@ type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  padding?: string,
+  padding?: string
 }
 
 type CardBodyProps = {
@@ -56,6 +57,7 @@ const Header = (props: CardHeaderProps) => {
 const Body = (props: CardBodyProps) => {
   const { children, padding = 'md', className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
+
   const bodySpacing = globalProps(props, { padding })
 
   return (

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -4,6 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/transition";
 @import "../tokens/animation-curves";
+@import "../tokens/display";
 
 $pb_card_border_width: 1px;
 $pb_card_border_radius: $border_rad_heavier;

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -16,7 +16,7 @@ type ImageType = {
   url?: string,
 } & GlobalProps
 
-const Image = (props: ImageType) => {
+const Image = (props: ImageType): React.ReactElement => {
   const {
     alt = '',
     aria = {},

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -1,8 +1,9 @@
 /* @flow */
 /*eslint-disable flowtype/space-before-type-colon */
 
-import moment from 'moment-timezone'
+import moment from 'moment'
 import 'moment-strftime'
+import 'moment-timezone'
 
 type DateTimeType = {
   value: String | Date,

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

@@ -20,6 +20,7 @@ type TableProps = {
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,
   size: "sm" | "md" | "lg",
+  sticky?: boolean,
 }
 
 const Table = (props: TableProps) => {
@@ -37,6 +38,7 @@ const Table = (props: TableProps) => {
     responsive = 'collapse',
     singleLine = false,
     size = 'sm',
+    sticky = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -60,6 +62,7 @@ const Table = (props: TableProps) => {
           'data_table': dataTable,
           'single-line': singleLine,
           'no-hover': disableHover,
+          'sticky-header': sticky,
         },
         globalProps(props),
         tableCollapseCss,

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

@@ -0,0 +1,83 @@
+<%= pb_rails("table", props: { sticky: 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>
+    <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_sticky.jsx

@@ -0,0 +1,94 @@
+import React from "react"
+
+import Table from "../_table"
+
+const TableSticky = (props) => (
+  <Table
+      sticky
+      {...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>
+      <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 TableSticky

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

@@ -0,0 +1,3 @@
+React: Use `sticky` on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.
+
+Rails: Pass `sticky: true` to props.

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

@@ -3,6 +3,7 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_sticky: Sticky Header
     - table_alignment_row: Row Alignment
     - table_alignment_column: Column Alignment
     - table_alignment_shift_row: Shift Row
@@ -25,6 +26,7 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_sticky: Sticky Header
     - table_alignment_row: Row Alignment
     - table_alignment_column: Column Alignment
     - table_alignment_shift_row: Shift Row

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

@@ -1,6 +1,7 @@
 export { default as TableSm } from './_table_sm.jsx'
 export { default as TableMd } from './_table_md.jsx'
 export { default as TableLg } from './_table_lg.jsx'
+export { default as TableSticky } from './_table_sticky.jsx'
 export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'

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

@@ -16,3 +16,4 @@
 @import "mobile_collapse";
 @import "tablet_collapse";
 @import "desktop_collapse";
+@import "sticky_header";

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

@@ -0,0 +1,21 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+  &.sticky-header {
+    thead {
+      position: sticky;
+      background: $white;
+      top: -40px;
+    }
+  }
+
+  &.dark {
+    &.sticky-header {
+      thead {
+        position: sticky;
+        background: #0a0527;
+        top: -40px;
+      }
+    }
+  }
+}

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

@@ -21,11 +21,13 @@ module Playbook
                       values: %w[sm md lg],
                       default: "sm"
       prop :text
+      prop :sticky, 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, collapse_class,
+          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -55,6 +57,10 @@ module Playbook
       def collapse_class
         responsive != "none" ? "table-collapse-#{collapse}" : ""
       end
+
+      def sticky_class
+        sticky ? "sticky-header" : nil
+      end
     end
   end
 end

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

@@ -0,0 +1,17 @@
+import { ensureAccessible, renderKit } from "../utilities/test-utils"
+
+import Table from "./_table"
+
+const props = {
+  data: { testid: "table" },
+  sticky: false
+}
+
+it("should be accessible", async () => {
+  ensureAccessible(Table, props)
+})
+
+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")
+})

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

@@ -0,0 +1,13 @@
+$display_inline: inline;
+$display_block: block;
+$display_inline_block: inline-block;
+$display_flex: flex;
+$display_hidden: hidden;
+$display_inline_flex: inline-flex;
+$displays: (
+  display_hidden:   $display_hidden,
+  display_flex: $display_flex,
+  display_inline: $display_inline,
+  display_inline_block: $display_inline_block,
+  display_block: $display_block
+);

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

@@ -10,11 +10,11 @@ $screen-xl-min: 1200px;
 $screen-xl-max: $screen-xl-min - 1;
 
 $breakpoints: (
-  xs: $screen-xs-min,
-  sm: $screen-sm-min,
-  md: $screen-md-min,
-  lg: $screen-lg-min,
-  xl: $screen-xl-min
+  xs: $screen-xs-min, // $screen-xs-min
+  sm: $screen-sm-min, // $screen-xs-min + 1 thru $screen-md-min
+  md: $screen-md-min, // $screen-md-min + 1 thru $screen-md-lg
+  lg: $screen-lg-min, // $screen-lg-min + 1 thru $screen-md-xl
+  xl: $screen-xl-min  // $screen-xl-min + 1
 );
 
 
@@ -28,3 +28,19 @@ $breakpoints: (
     @content;
   }
 }
+
+@mixin break_on($min: null, $max: null) {
+  @if not $max {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  } @else if not $min {
+    @media screen and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @media screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/_display.scss

@@ -1,3 +1,5 @@
+@import "../tokens/display";
+
 .display_block {
     display: block;
 }
@@ -20,4 +22,59 @@
 
 .display_hidden {
     display: none;
-}
+}
+
+$screen-xs-min: 575px;
+$screen-xs-max: $screen-xs-min - 1;
+$screen-sm-min: 576px;
+$screen-sm-max: $screen-sm-min - 1;
+$screen-md-min: 768px;
+$screen-md-max: $screen-md-min - 1;
+$screen-lg-min: 992px;
+$screen-lg-max: $screen-lg-min - 1;
+$screen-xl-min: 1200px;
+$screen-xl-max: $screen-xl-min - 1;
+
+$breakpoints: (
+    xs: (
+        // min: 0,
+        max: $screen-xs-min // 575
+    ),
+    sm: (
+        min: $screen-sm-min, // 576
+        max: $screen-md-max  // 767
+    ),
+    md: (
+        min: $screen-md-min, // 768
+        max: $screen-lg-max // 991
+    ),
+    lg: (
+        min: $screen-lg-min, // 992
+        max: $screen-xl-max // 1199
+    ),
+    xl: (
+        min: $screen-xl-min, //1200
+        // max: 0
+    )
+);
+
+
+$display_values: (
+    hidden: $display_hidden,
+    flex: $display_flex,
+    inline: $display_inline,
+    inline_block: $display_inline_block,
+    block: $display_block
+);
+
+@each $size, $size_value in $breakpoints {
+    @each $display, $display_value in $display_values {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        @include break_on($min_size, $max_size) {
+            .display_#{$size}_#{$display} {
+                display: #{$display_value} !important;
+            }
+        }
+    }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -1,7 +1,12 @@
 import { omit } from 'lodash'
 
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-type None = "none"
+import {
+  Binary,
+  Display,
+  DisplaySizes,
+  None,
+  Sizes,
+} from '../types'
 
 type AllSizes = None & Sizes
 
@@ -42,27 +47,23 @@ type ZIndex = {
 }
 
 type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
+  shadow?: None | "deep" | "deeper" | "deepest",
 }
 
 type LineHeight = {
   lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
 }
 
-type Display = {
-  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
-}
-
 type Cursor = {
   cursor?: "pointer",
 }
 
 type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+  borderRadius?: None | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
 type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
+  flex?: None | "initial" | "auto" | 1
 }
 
 type FlexDirection = {
@@ -70,11 +71,11 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
-  flexShrink?: 0 | 1
+  flexShrink?: Binary
 }
 
 type FlexWrap = {
@@ -106,11 +107,11 @@ type AlignSelf = {
 }
 
 type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  order?: None | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 }
 
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
-  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
@@ -180,9 +181,21 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += lineHeight ? `line_height_${lineHeight} ` : ''
     return css
   },
-  displayProps: ({ display }: Display) => {
+  displayProps: (display: Display ) => {
     let css = ''
-    css += display ? `display_${display} ` : ''
+    Object.entries(display).forEach((displayEntry) => {
+      if (displayEntry[0] == "display") {
+        if (typeof displayEntry[1] == "string") {
+          css += `display_${displayEntry[1]}`
+        } else if (typeof displayEntry[1] == "object") {
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]}`
+          })
+        } else {
+          ' '
+        }
+      }
+    })
     return css
   },
   cursorProps: ({ cursor }: Cursor) => {
@@ -259,7 +272,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+type DefaultProps = {[key: string]: string} | Record<string, unknown>
+
+export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

data/lib/playbook/display.rb

@@ -8,12 +8,22 @@ module Playbook
 
     def display_props
       selected_props = display_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-
-      selected_props.map do |k|
-        display_value = send(k)
-        "display_#{display_value}" if display_values.include? display_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(:display).is_a?(::Hash)
+      css = ""
+      if responsive
+        display_value = send(:display)
+        display_value.each do |key, value|
+          css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
+        end
+      elsif display_value.is_a?(String)
+        selected_props.each do |k|
+          display_value = send(k)
+          css += "display_#{display_value}" if display_values.include? display_value
+        end
+      else
+        ""
+      end
+      css unless css.blank?
     end
 
     def display_options
@@ -22,6 +32,10 @@ module Playbook
       }
     end
 
+    def display_size_values
+      %w[xs sm md lg xl]
+    end
+
     def display_values
       %w[block inline_block inline flex inline_flex hidden]
     end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.24.0"
-  VERSION = "10.25.0"
+  PREVIOUS_VERSION = "10.25.0"
+  VERSION = "10.26.0.pre.alpha3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.25.0
+  version: 10.26.0.pre.alpha3
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-22 00:00:00.000000000 Z
+date: 2022-05-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1734,6 +1734,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.md
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.md
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
@@ -1755,6 +1758,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
+- app/pb_kits/playbook/pb_table/styles/_sticky_header.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
@@ -1762,6 +1766,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.html.erb
 - app/pb_kits/playbook/pb_table/table.rb
+- app/pb_kits/playbook/pb_table/table.test.js
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
@@ -2050,6 +2055,7 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
+- app/pb_kits/playbook/tokens/_display.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
 - app/pb_kits/playbook/tokens/_positioning.scss
@@ -2155,7 +2161,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- MIT
+- ISC
 metadata: {}
 post_install_message:
 rdoc_options: []
@@ -2168,9 +2174,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key: