playbook_ui 10.26.0.pre.alpha3 → 10.26.0.pre.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eec4050a38ffdbc91288fa4d1ebe864edc0485bf814f1569b50a4df569e6c666
-  data.tar.gz: 5967691eccad475c60406d60b9aca79ee520a2736bfde034b48e6db8c1de3316
+  metadata.gz: '048acddb29dd15f68b34839ca45ccd4df1d42336d4820e47de25dbe3ebc0249c'
+  data.tar.gz: 34eebfcebf6b68b56463789a1e38c1fb5984f3a84359b18e2443155cbe3ac8c8
 SHA512:
-  metadata.gz: 8ea97fd90f89882ee7e54d80b46e468fa5beffa6ee2e9dc64475e14ebfe4cdcfef43dcf6b3dd0ab06db030da9fb04f4e35fae1e35dcba93a8009a80200d24fd5
-  data.tar.gz: edbf22cf4988bf3ddc4f7872dce6fe51041dd8a8a657bd8b118196fe42c8a0c06428fbc5a1efcec55525d6ae4b769279a3438b12ad174d2e52497b7610e2260d
+  metadata.gz: 9c9c0665cee4d841bb9b4b404727e5a0912218f6e1f285996cb8c3de268380e7b5936a63f0befd150a0f5c9bfd6db55551da65a29d59269d3add7710f95d9c73
+  data.tar.gz: 3507fad3d27741a06660b2f50c8068e0a2736b80b9f07edb753a539c31f43cfa34b36e1d0e0251547c6262570ff7d02859b0ee69fa0377a0f63068b82f49b1a7

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

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

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ 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'
@@ -98,9 +97,11 @@ 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_badge/{_badge.jsx → _badge.tsx}

@@ -1,9 +1,7 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
@@ -13,21 +11,22 @@ import {
 import Icon from '../pb_icon/_icon'
 
 type BadgeProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
   closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
+    onClick?: React.MouseEventHandler<HTMLSpanElement>,
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
+    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
-  removeIcon?: Boolean,
-  removeOnClick?: EventHandler,
+  removeIcon?: boolean,
+  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
-}
+} & GlobalProps
+
 const Badge = (props: BadgeProps) => {
   const {
     aria = {},
@@ -36,7 +35,7 @@ const Badge = (props: BadgeProps) => {
     data = {},
     id,
     removeIcon = false,
-    removeOnClick = () => {},
+    removeOnClick,
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +43,7 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded }),
+    buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )
@@ -58,7 +57,7 @@ const Badge = (props: BadgeProps) => {
     >
       <span>
         {text}
-        <If condition={removeIcon}>
+        {removeIcon && (
           <span
               onClick={removeOnClick}
               style={{ cursor: 'pointer' }}
@@ -69,7 +68,7 @@ const Badge = (props: BadgeProps) => {
                 icon="times"
             />
           </span>
-        </If>
+        )}
       </span>
     </div>
   )

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Badge from '../_badge.jsx'
+import Badge from '../_badge'
 
 const BadgeColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Badge from '../_badge.jsx'
+import Badge from '../_badge'
 
 const BadgeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Badge from '../_badge.jsx'
+import Badge from '../_badge'
 
 const BadgeRounded = (props) => {
   return (

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

@@ -1,3 +1,3 @@
-export { default as BadgeDefault } from './_badge_default.jsx'
-export { default as BadgeRounded } from './_badge_rounded.jsx'
-export { default as BadgeColors } from './_badge_colors.jsx'
+export { default as BadgeDefault } from './_badge_default'
+export { default as BadgeRounded } from './_badge_rounded'
+export { default as BadgeColors } from './_badge_colors'

data/app/pb_kits/playbook/pb_button/{_button.jsx → _button.tsx}

@@ -1,18 +1,17 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
 
-import Icon from '../pb_icon/_icon.jsx'
+type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
-type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: object,
-  children?: array<React.ReactChild>,
-  className?: string | array<string>,
-  data?: object,
+  aria?: {[key: string]: string},
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string | string[],
+  data?: {[key: string]: string},
   disabled?: boolean,
   fixedWidth?: boolean,
   form?: string,
@@ -26,11 +25,11 @@ type ButtonPropTypes = {
   size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
-  htmlType: string | 'button',
+  htmlType: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
   variant: 'primary' | 'secondary' | 'link',
   wrapperClass: string,
-}
+} & GlobalProps
 
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
@@ -64,7 +63,7 @@ const Button = (props: ButtonPropTypes) => {
     icon = null,
     id,
     loading = false,
-    onClick = () => {},
+    onClick,
     link = null,
     newWindow = false,
     text,
@@ -92,46 +91,66 @@ const Button = (props: ButtonPropTypes) => {
 
   const content = (
     <span className="pb_button_content">
-      <If condition={icon !== null}>
+      {icon && (
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
-        {' '}
-      </If>
+      )}
       <span>{text || children}</span>
     </span>
   )
 
+  const ifLoading = () => {
+    if (loading){
+      return(
+        <>
+          {loadingIcon}
+        </>
+      )
+    } else {
+      return (
+        content
+      )
+    }
+  }
+
+  const displayButton = () => {
+    if (link)
+      return (
+        <a
+            {...ariaProps}
+            {...dataProps}
+            className={css}
+            href={link}
+            id={id}
+            rel="noreferrer"
+            role="link"
+            target={newWindow ? '_blank' : null}
+        >
+          {ifLoading()}
+        </a>
+      )
+    else
+      return (
+        <button
+            {...ariaProps}
+            {...dataProps}
+            className={css}
+            disabled={disabled}
+            form={form}
+            id={id}
+            onClick={onClick}
+            role="button"
+            type={htmlType}
+            value={value}
+        >
+          {ifLoading()}
+        </button>
+      )
+  }
+
   return (
-    <If condition={link !== null}>
-      <a
-          {...ariaProps}
-          {...dataProps}
-          className={css}
-          href={link}
-          id={id}
-          rel="noreferrer"
-          role="link"
-          target={newWindow ? '_blank' : null}
-      >
-        <If condition={loading}>{loadingIcon}</If>
-        {content}
-      </a>
-      <Else />
-      <button
-          {...ariaProps}
-          {...dataProps}
-          className={css}
-          disabled={disabled}
-          form={form}
-          id={id}
-          onClick={onClick}
-          role="button"
-          type={htmlType}
-          value={value}
-      >
-        <If condition={loading}>{loadingIcon}</If>
-        {content}
-      </button>
-    </If>
+    <>
+      {displayButton()}
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from '../_button.jsx'
+import Button from '../_button'
 
 const ButtonOptions = (props) => (
   <div>

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

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: object,
+  data?: {[key: string]: string},
   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) => {
+const Caption = (props: CaptionProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -32,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     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_collapsible/child_kits/CollapsibleMain.jsx

@@ -35,12 +35,14 @@ const Icon = ({ collapsed }: IconProps) => {
 const CollapsibleMain = ({
   children,
   className,
+  cursor = 'pointer',
   padding = 'md',
+
   ...props
 }: CollapsibleMainProps) => {
   const context = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
-  const mainSpacing = globalProps(props, { padding })
+  const mainSpacing = globalProps(props, { cursor, padding })
 
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>
@@ -50,7 +52,7 @@ const CollapsibleMain = ({
             vertical="center"
         >
           <FlexItem>{children}</FlexItem>
-          <FlexItem><Icon collapsed={context.collapsed} /></FlexItem>
+          <FlexItem><Icon collapsed={context.collapsed}/></FlexItem>
         </Flex>
       </div>
     </div>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
 
-    <%= pb_rails("flex", props: {vertical: "center", spacing: "between"}) do %>
+    <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= content.presence %>
       <% end %>

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

@@ -209,6 +209,43 @@ 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,6 +209,43 @@ 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,8 +1,8 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
-import Icon from '../pb_icon/_icon.jsx'
+import Title from '../pb_title/_title'
+import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_icon/{_icon.jsx → _icon.tsx}

@@ -1,16 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type IconProps = {
-  aria?: object,
-  border?: boolean,
+  aria?: {[key: string]: string},
+  border?: string,
   className?: string,
-  customIcon?: SVGElement,
-  data?: object,
+  customIcon?: {[key: string] :SVGElement},
+  data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -34,12 +32,13 @@ type IconProps = {
     | "9x"
     | "10x",
   spin?: boolean,
-}
+} & GlobalProps
 
 const flipMap = {
   horizontal: 'fa-flip-horizontal',
   vertical: 'fa-flip-vertical',
   both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
 const Icon = (props: IconProps) => {
@@ -50,7 +49,7 @@ const Icon = (props: IconProps) => {
     customIcon,
     data = {},
     fixedWidth = true,
-    flip = false,
+    flip = "none",
     icon,
     id,
     inverse = false,
@@ -90,31 +89,42 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
 
   // Add a conditional here to show only the SVG if custom
+  const displaySVG = (customIcon: any) => {
+    if (customIcon)
+      return (
+        <>
+          {
+            React.cloneElement(customIcon, {
+              ...dataProps,
+              className: classes,
+              id,
+            })
+          }
+        </>
+      )
+    else
+      return (
+        <>
+          <i
+              {...dataProps}
+              className={classes}
+              id={id}
+          />
+          <span
+              {...ariaProps}
+              hidden
+          />
+        </>
+      )
+  }
+
   return (
     <>
-      <If condition={customIcon}>
-        {
-          React.cloneElement(customIcon, {
-            ...dataProps,
-            className: classes,
-            id,
-          })
-        }
-        <Else />
-        <i
-            {...dataProps}
-            className={classes}
-            id={id}
-        />
-        <span
-            {...ariaProps}
-            hidden
-        />
-      </If>
+      {displaySVG(customIcon)}
     </>
   )
 }

data/app/pb_kits/playbook/pb_pill/{_pill.jsx → _pill.tsx}

@@ -1,21 +1,19 @@
-/* @flow */
-
 import React from 'react'
 
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type PillProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
   textTransform?: "none" | "lowercase"
-}
+} & GlobalProps
 
 const Pill = (props: PillProps) => {
   const {
@@ -49,4 +47,4 @@ const Pill = (props: PillProps) => {
   )
 }
 
-export default Pill
+export default Pill

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Pill from '../_pill.jsx'
+import Pill from '../_pill'
 
 const PillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Pill from '../_pill.jsx'
+import Pill from '../_pill'
 
 const PillVariants = (props) => {
   return (

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

@@ -1,3 +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.