playbook_ui 10.26.0.pre.alpha.sticky1 → 10.26.0.pre.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf78ed906a18245b33919539767b4548820b23c2e88196f790cc4cc3c928dde4
-  data.tar.gz: f4619a7704a66989d2dbc5221d904e0fe3bec27d6908ea8349247de683fc68b2
+  metadata.gz: '048acddb29dd15f68b34839ca45ccd4df1d42336d4820e47de25dbe3ebc0249c'
+  data.tar.gz: 34eebfcebf6b68b56463789a1e38c1fb5984f3a84359b18e2443155cbe3ac8c8
 SHA512:
-  metadata.gz: 27b1b9f29f502c1fb95cb03b6bd623ecd0a0c90cb3aad20b95fb687c9048f37c3a3e7737f27d14f54719f1dd0afa3455cfc46f2fdd0470e70b1879db59cdb615
-  data.tar.gz: 9d7a07450758941dc3c1427723d94508bfef0a9db8ebc227d5ad12af04556fc4fe2a5d0aaa12d7f273bcd3658b8c2733581b24ca4dba3ac4fed359fb2965ef56
+  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_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_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_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/{_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_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_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_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 = {},