playbook_ui 10.26.0.pre.alpha1 → 10.26.0.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2189d1ada1c39446fecca8e67776e0e5b086e79d842fbfaf5ed800313c81f5df
-  data.tar.gz: 4640c10e464c670714c67a3875412fcda9c79f06edbbea2a50cdd5ab330889ed
+  metadata.gz: eec4050a38ffdbc91288fa4d1ebe864edc0485bf814f1569b50a4df569e6c666
+  data.tar.gz: 5967691eccad475c60406d60b9aca79ee520a2736bfde034b48e6db8c1de3316
 SHA512:
-  metadata.gz: 6d133f2ab6121d7f7a3895fe907a51f3713c48d1463a80cba165ae6c5fc6e1f64d6bf9ccb2b368f7f17304eee8e8a36a40c02a00b456044f4199e15c698e9d80
-  data.tar.gz: 9515dbe37dab4c9d0a5a6e90c7074a3641ec9e31669b4fdd502e3b12e5ca6bf541ecf36eea0ec711c52710f3bd1cec017b3be76d68cb36b6e15aeb690c7185f9
+  metadata.gz: 8ea97fd90f89882ee7e54d80b46e468fa5beffa6ee2e9dc64475e14ebfe4cdcfef43dcf6b3dd0ab06db030da9fb04f4e35fae1e35dcba93a8009a80200d24fd5
+  data.tar.gz: edbf22cf4988bf3ddc4f7872dce6fe51041dd8a8a657bd8b118196fe42c8a0c06428fbc5a1efcec55525d6ae4b769279a3438b12ad174d2e52497b7610e2260d

data/app/pb_kits/playbook/data/menu.yml

@@ -20,7 +20,6 @@ kits:
     - gauge
     - legend
     - line_graph
-    - treemap_chart
   - dialog
   - filter
   - fixed_confirmation_toast

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -97,11 +98,9 @@ export { default as Title } from './pb_title/_title'
 export { default as TitleCount } from './pb_title_count/_title_count'
 export { default as TitleDetail } from './pb_title_detail/_title_detail'
 export { default as Toggle } from './pb_toggle/_toggle'
-export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

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_button/docs/_button_default.html.erb

@@ -2,4 +2,3 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
-

data/app/pb_kits/playbook/pb_caption/{_caption.tsx → _caption.jsx}

@@ -1,22 +1,24 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
-  aria?: {[key: string]: string},
-  children: React.ReactChild[],
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: {[key: string]: string},
+  data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-} & GlobalProps;
+};
 
-const Caption = (props: CaptionProps): React.ReactElement => {
+const Caption = (props: CaptionProps) => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -30,7 +32,6 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     text,
     variant = null,
   } = props
-
   const tagOptions = [
     'h1',
     'h2',

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_dashboard/pbChartsDarkTheme.js

@@ -209,43 +209,6 @@ const highchartsDarkTheme = {
         threshold: null,
       },
     },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      colorByPoint: true,
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -40 },
-      }
-    },
   },
 }
 

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

@@ -209,43 +209,6 @@ const highchartsTheme = {
         threshold: null,
       },
     },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      colorByPoint: true,
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -40 },
-      }
-    },
   },
 }
 

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

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Title from '../pb_title/_title'
+import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps } from '../utilities/globalProps'

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_pill/_pill.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 
 import classnames from 'classnames'
-import Title from '../pb_title/_title'
+import Title from '../pb_title/_title.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

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/pb_title/{_title.tsx → _title.jsx}

@@ -1,22 +1,24 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 type TitleProps = {
-  aria?: {[key: string]: string},
-  children?: React.ReactChild[],
+  aria?: object,
+  children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: {[key: string]: string},
+  data?: object,
   id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
-} & GlobalProps
+}
 
-const Title = (props: TitleProps): React.ReactElement => {
+const Title = (props: TitleProps) => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -31,14 +33,14 @@ const Title = (props: TitleProps): React.ReactElement => {
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
-  const dataProps: {[key: string]: string | number} = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color),
+    buildCss('pb_title_kit', size, variant, color),
     globalProps(props),
     className,
   )
-  const Tag: React.ReactElement | any = `${tag}`
+  const Tag = `${tag}`
 
   return (
     <Tag