playbook_ui 10.26.0.pre.alpha.display1 → 10.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4f47a9244130b0b201a8a8bfff26b8cda3de6efd934e0cbe2094c4a4a26bf56
-  data.tar.gz: 9c4edb754d6fae9fbef2c6d6511f5e75cfb7972c0981eaef7c6e1cdba514d87f
+  metadata.gz: 8ed156e9b15608fb8116a723d8dca86eb5b4295d88698532dc4bf8242bcd3ef6
+  data.tar.gz: d5a5f5e68f1aeeafdd80dc066ee4be2271e7c4f8c666ef1ccf6ff205a98645ef
 SHA512:
-  metadata.gz: d8a99fee564a9f31533369b6ee239271b919aca58a965bf50c94fa6ad962e2e363454a3653404157848649269e3556da7cd79a73eaa4454ee38781f121af0beb
-  data.tar.gz: e41bcf582fc5d536d489dd09a841c896bf69bdd4f0efbe8500ac9f63fa0a0fa39f7082450a9c25cfbe5cd70d323563af877ef02ad0f8c999f1b32646650c0586
+  metadata.gz: 2e8aef1428a28b4c32bde81b9d61f76a4cdf02c6f5a08bb226ec4af88b86a83060f1322ed8e5033ba9a212c11fcef9e364d633505c42139beb7a9a167d0084ac
+  data.tar.gz: f58619e5f506e3d5c8dfbcab0605e65566c0a8e22dfdf73ac561a5391da2b02893aa95d2ec252ebc018b9ff8bcfcc9097086d2374c5c33fb53b01cb0d6578de2

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/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_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 { ProductColors, CategoryColors, BackgroundColors } from '../types'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+import type { 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,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_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 %>

data/app/pb_kits/playbook/pb_flex/{_flex.jsx → _flex.tsx}

@@ -1,11 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+
 type FlexProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactChild[] | React.ReactNode,
   className?: string,
   data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
@@ -22,7 +21,7 @@ type FlexProps = {
   columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
-}
+} & GlobalProps
 
 const Flex = (props: FlexProps) => {
   const {
@@ -43,6 +42,7 @@ const Flex = (props: FlexProps) => {
     wrap = false,
     alignSelf = 'none',
   } = props
+  
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

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

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

data/app/pb_kits/playbook/pb_highlight/_highlight.tsx

@@ -8,7 +8,7 @@ type HighlightProps = {
   className?: string,
   data?: {[key: string]: string},
   id?: string,
-  children?: React.ReactChild[] | string,
+  children?: React.ReactChild[] | React.ReactChild | string,
   text?: string,
   highlightedText?: string[],
 } & GlobalProps