playbook_ui 10.26.0.pre.rc1 → 10.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '048acddb29dd15f68b34839ca45ccd4df1d42336d4820e47de25dbe3ebc0249c'
-  data.tar.gz: 34eebfcebf6b68b56463789a1e38c1fb5984f3a84359b18e2443155cbe3ac8c8
+  metadata.gz: 8ed156e9b15608fb8116a723d8dca86eb5b4295d88698532dc4bf8242bcd3ef6
+  data.tar.gz: d5a5f5e68f1aeeafdd80dc066ee4be2271e7c4f8c666ef1ccf6ff205a98645ef
 SHA512:
-  metadata.gz: 9c9c0665cee4d841bb9b4b404727e5a0912218f6e1f285996cb8c3de268380e7b5936a63f0befd150a0f5c9bfd6db55551da65a29d59269d3add7710f95d9c73
-  data.tar.gz: 3507fad3d27741a06660b2f50c8068e0a2736b80b9f07edb753a539c31f43cfa34b36e1d0e0251547c6262570ff7d02859b0ee69fa0377a0f63068b82f49b1a7
+  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_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/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_card/{_card.jsx → _card.tsx}

@@ -1,42 +1,43 @@
-/* @flow */
+/* eslint-disable react/no-multi-comp */
 
 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,
-}
+} & 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) => {
@@ -82,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_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_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

data/app/pb_kits/playbook/pb_user/{_user.jsx → _user.tsx}

@@ -1,10 +1,9 @@
-/* @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'
 
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
@@ -12,19 +11,19 @@ import Title from '../pb_title/_title'
 
 type UserProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
-  avatar?: Boolean,
-  avatarUrl?: String,
-  className?: String,
+  aria?: {[key: string]: string},
+  avatar?: boolean,
+  avatarUrl?: string,
+  className?: string,
   dark?: boolean,
-  data?: object,
-  id?: String,
-  name?: String,
+  data?: {[key: string]: string},
+  id?: string,
+  name?: string,
   orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
-  territory?: String,
-  title?: String,
-}
+  territory?: string,
+  title?: string,
+} & GlobalProps
 
 const User = (props: UserProps) => {
   const {
@@ -43,14 +42,8 @@ const User = (props: UserProps) => {
     title = '',
   } = props
 
-  const avatarSizeMap = {
-    lg: 'xl',
-    md: 'md',
-    sm: 'sm',
-  }
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
 
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
@@ -58,6 +51,8 @@ const User = (props: UserProps) => {
     className,
   )
 
+  const avatarPresent = avatar || avatarUrl
+
   return (
     <div
         {...ariaProps}
@@ -65,14 +60,14 @@ const User = (props: UserProps) => {
         className={classes}
         id={id}
     >
-      <If condition={avatar || avatarUrl}>
+      { avatarPresent &&
         <Avatar
             imageUrl={avatarUrl}
             name={name}
-            size={avatarSizeMap[size]}
+            size={size}
+            status={null}
         />
-      </If>
-
+      }
       <div className="content_wrapper">
         <Title
             dark={dark}
@@ -82,6 +77,7 @@ const User = (props: UserProps) => {
         <Body
             color="light"
             dark={dark}
+            variant={null}
         >
           {territory === '' ? title : `${territory} • ${title}`}
         </Body>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -9,6 +9,7 @@ $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
 $red:                 #FF2229;
+$red_dark:            #ff4a50;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
@@ -154,7 +155,7 @@ $data_colors: (
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
-$error_dark:          lighten($error, 5%);
+$error_dark:          $red_dark;
 $error_dark_body:     lighten($error_dark, 2%);
 $info:                $teal;
 $neutral:             $slate;

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -1,29 +1,10 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}
+$align_content_values: (
+  start: start,
+  end: end,
+  center: center,
+  space_between: space-between,
+  space_around: space-around,
+  space_evenly: space-evenly
+);
+
+@include global_props_responsive_css($align_content_values, 'align_content', 'align-content');

data/app/pb_kits/playbook/utilities/_align_items.scss

@@ -1,35 +1,11 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}
+$align_items_values: (
+  flex_start: flex-start,
+  flex_end: flex-end,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_items_values, 'align_items', 'align-items');

data/app/pb_kits/playbook/utilities/_align_self.scss

@@ -1,29 +1,10 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}
+$align_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_self_values, 'align_self', 'align-self');

data/app/pb_kits/playbook/utilities/_flex.scss

@@ -1,15 +1,20 @@
-.flex_auto {
-  flex: auto !important;
-}
+$flex_values: (
+  auto: auto,
+  initial: initial,
+  none: none,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
 
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}
+@include global_props_responsive_css($flex_values, 'flex', 'flex');

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -1,19 +1,8 @@
-.flex_direction_row {
-  display: flex;
-  flex-direction: row !important;
-}
+$flex_direction_values: (
+  row: row,
+  column: column,
+  row_reverse: row-reverse,
+  column_reverse: column-reverse
+);
 
-.flex_direction_column {
-  display: flex;
-  flex-direction: column !important;
-}
-
-.flex_direction_row_reverse {
-  display: flex;
-  flex-direction: row-reverse !important;
-}
-
-.flex_direction_column_reverse {
-  display: flex;
-  flex-direction: column-reverse !important;
-}
+@include global_props_responsive_css($flex_direction_values, 'flex_direction', 'flex-direction');

data/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -1,9 +1,6 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
+$flex_grow_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}
+@include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow');

data/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -1,9 +1,6 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
+$flex_shrink_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}
+@include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink');

data/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -1,14 +1,7 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
+$flex_wrap_values: (
+  wrap: wrap,
+  nowrap: nowrap,
+  wrap_reverse: wrap-reverse,
+);
 
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}
+@include global_props_responsive_css($flex_wrap_values, 'flex_wrap', 'flex-wrap');