playbook_ui 10.26.0.pre.alpha.display1 → 10.26.0.pre.alpha.sticky1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4f47a9244130b0b201a8a8bfff26b8cda3de6efd934e0cbe2094c4a4a26bf56
-  data.tar.gz: 9c4edb754d6fae9fbef2c6d6511f5e75cfb7972c0981eaef7c6e1cdba514d87f
+  metadata.gz: cf78ed906a18245b33919539767b4548820b23c2e88196f790cc4cc3c928dde4
+  data.tar.gz: f4619a7704a66989d2dbc5221d904e0fe3bec27d6908ea8349247de683fc68b2
 SHA512:
-  metadata.gz: d8a99fee564a9f31533369b6ee239271b919aca58a965bf50c94fa6ad962e2e363454a3653404157848649269e3556da7cd79a73eaa4454ee38781f121af0beb
-  data.tar.gz: e41bcf582fc5d536d489dd09a841c896bf69bdd4f0efbe8500ac9f63fa0a0fa39f7082450a9c25cfbe5cd70d323563af877ef02ad0f8c999f1b32646650c0586
+  metadata.gz: 27b1b9f29f502c1fb95cb03b6bd623ecd0a0c90cb3aad20b95fb687c9048f37c3a3e7737f27d14f54719f1dd0afa3455cfc46f2fdd0470e70b1879db59cdb615
+  data.tar.gz: 9d7a07450758941dc3c1427723d94508bfef0a9db8ebc227d5ad12af04556fc4fe2a5d0aaa12d7f273bcd3658b8c2733581b24ca4dba3ac4fed359fb2965ef56

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, GlobalProps } from '../utilities/globalProps'
+import { 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): React.ReactElement => {
+const Avatar = (props: AvatarProps) => {
   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, GlobalProps } from '../utilities/globalProps'
+import { 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_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,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 /* @flow */
 
 import React from 'react'
@@ -30,7 +29,7 @@ type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  padding?: string
+  padding?: string,
 }
 
 type CardBodyProps = {
@@ -57,7 +56,6 @@ 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,7 +4,6 @@
 @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): React.ReactElement => {
+const Image = (props: ImageType) => {
   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,10 @@
+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.
+
+If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
+React Example: `<thead style={{ top: "-16px" }}>`
+Rails Example: `<thead style="top: -16px">`
+
+### Troubleshooting CSS Problems
+Sticky may not work if any parent/ancestor of the sticky element has any of the `overflow` properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to `position: static` as well.

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,23 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+  &.sticky-header {
+    thead {
+      background: $white;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  &.dark {
+    &.sticky-header {
+      thead {
+        background: $bg_dark;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+    }
+  }
+}

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