playbook_ui 10.26.0.pre.alpha3 → 10.26.0.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eec4050a38ffdbc91288fa4d1ebe864edc0485bf814f1569b50a4df569e6c666
-  data.tar.gz: 5967691eccad475c60406d60b9aca79ee520a2736bfde034b48e6db8c1de3316
+  metadata.gz: 045be6d1cc5d7923963af542060ef78d8a45fc31c65eebb95923a18ab641c26e
+  data.tar.gz: 435afe93b7139f04a498ed7ce11091061cdb8e1a3d471f31d9dc9bbad937d0d1
 SHA512:
-  metadata.gz: 8ea97fd90f89882ee7e54d80b46e468fa5beffa6ee2e9dc64475e14ebfe4cdcfef43dcf6b3dd0ab06db030da9fb04f4e35fae1e35dcba93a8009a80200d24fd5
-  data.tar.gz: edbf22cf4988bf3ddc4f7872dce6fe51041dd8a8a657bd8b118196fe42c8a0c06428fbc5a1efcec55525d6ae4b769279a3438b12ad174d2e52497b7610e2260d
+  metadata.gz: 05c0785c96569ca1bbbe5c1b84b6a9b4d0f475d5e77f6aa79d50d0e9508844b123312cf199b06d6a024cdba74fd2375ad491badb9ef17c3f64c93cdbe56a735e
+  data.tar.gz: ade48dc78c3998cf6483daae945badafbde0f2214fa902bbc17096166d7b4ea54cd66ad67eac20254ec4f1caa44238da44f96cb5c4cf16d5c020ff0d323bc06d

data/app/pb_kits/playbook/_playbook.scss

@@ -92,6 +92,7 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import './utilities/mixins';
 @import './utilities/spacing';
 @import './utilities/cursor';
 @import './utilities/max_width';

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

@@ -1,26 +1,24 @@
-/* @flow */
-
 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'
 
 type BackgroundProps = {
   alt?: string,
-  aria?: object,
+  aria?: {[key: string]: string},
   backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
   backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
   backgroundSize?: 'auto' | 'cover' | 'contain',
-  children?: array<React.ReactNode> | React.ReactNode,
+  children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   transition?: 'fade' | 'blur' | 'scale',
-}
+} & GlobalProps
 
 const Background = (props: BackgroundProps) => {
   const {
@@ -49,11 +47,13 @@ const Background = (props: BackgroundProps) => {
   }
   const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
   const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
-  const Tag = `${tag}`
 
-  return (
-    <>
-      <If condition={imageUrl}>
+
+  const Tag: React.ReactElement | any = `${tag}`
+
+  const displayReturn = () => {
+    if (imageUrl)
+      return (
         <Tag
             alt={alt}
             style={backgroundStyle}
@@ -64,7 +64,9 @@ const Background = (props: BackgroundProps) => {
         >
           { children }
         </Tag>
-        <Else />
+      )
+    else
+      return (
         <Tag
             {...ariaProps}
             {...dataProps}
@@ -74,7 +76,12 @@ const Background = (props: BackgroundProps) => {
         >
           { children }
         </Tag>
-      </If>
+      )
+  }
+
+  return (
+    <>
+      { displayReturn() }
     </>
   )
 }

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

@@ -9,7 +9,7 @@ import Highlight from '../pb_highlight/_highlight'
 type BodyProps = {
   aria?: {[key: string]: string},
   className?: string,
-  children?: React.ReactChild[],
+  children?: React.ReactChild[] | React.ReactChild,
   color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
   data?: {[key: string]: string},

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_default.html.erb

@@ -2,3 +2,4 @@
 <%= 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_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 → _card.tsx}

@@ -1,43 +1,43 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 
 import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { ProductColors, CategoryColors, BackgroundColors } from '../types'
 
 type CardPropTypes = {
-  aria?: object,
+  aria?: {[key: string]: string},
   background?: BackgroundColors | ProductColors | "none",
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   highlight?: {
     position?: "side" | "top",
     color?: string,
   },
+  length?: number,
   padding?: string,
   selected?: boolean,
   tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
-}
+} & GlobalProps
 
 type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactChild[] | React.ReactChild,
   className?: string,
-  padding?: string
-}
+  padding?: string,
+} & GlobalProps
 
 type CardBodyProps = {
-  children: array<React.ReactNode> | React.ReactNode | string,
+  children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
   padding?: string,
-}
+} & GlobalProps
 
 // Header component
 const Header = (props: CardHeaderProps) => {
@@ -57,7 +57,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 (
@@ -84,26 +83,27 @@ const Card = (props: CardPropTypes) => {
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
   const backgroundCSS = background == 'none' ? '' : `background_${background}`
-  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
-    [`highlight_${highlight.position}`]: highlight.position,
-    [`highlight_${highlight.color}`]: highlight.color,
-  })
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS,
+    `highlight_${highlight.position}`,
+    `highlight_${highlight.color}`,
+  )
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
 
   // coerce to array
-  const cardChildren =
-    typeof children === 'object' && children.length ? children : [children]
+  const cardChildren = React.Children.toArray(children)
 
-  const subComponentTags = (tagName) => {
-    return cardChildren.filter((c) => (
+  const subComponentTags = (tagName: string) => {
+    return cardChildren.filter((c: string) => (
       get(c, 'type.displayName') === tagName
     )).map((child, i) => {
+      if(React.isValidElement(child)) {
       return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
+      }
     })
   }
 
-  const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
+  const nonHeaderChildren = cardChildren.filter((child: Node) => (get(child, 'type.displayName') !== 'Header'))
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
 import { Body } from '../../'
-import Card from '../_card.jsx'
+import Card from '../_card'
 
 const CardBackground = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Card from '../_card.jsx'
+import Card from '../_card'
 
 const CardBorderNone = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Card from '../_card.jsx'
+import Card from '../_card'
 
 const CardLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx

@@ -1,10 +1,25 @@
 import React from 'react'
-import Card from '../_card.jsx'
+import Card from '../_card'
 
 const CardLight = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          flexDirection={{xs: "row", sm: "column", md: "rowReverse", lg: "columnReverse"}}
+          {...props}
+      >{'Card content'}</Card>
+      <Card
+          flexDirection="column"
+          {...props}
+      >{'Card content'}</Card>
+      <Card
+          flexDirection="rowReverse"
+          {...props}
+      >{'Card content'}</Card>
+      <Card
+          flexDirection="columnReverse"
+          {...props}
+      >{'Card content'}</Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Card from '../_card.jsx'
+import Card from '../_card'
 
 const CardSelected = (props) => {
   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 %>