playbook_ui 10.26.0.pre.rc1 → 10.27.0.pre.lazysizes1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '048acddb29dd15f68b34839ca45ccd4df1d42336d4820e47de25dbe3ebc0249c'
-  data.tar.gz: 34eebfcebf6b68b56463789a1e38c1fb5984f3a84359b18e2443155cbe3ac8c8
+  metadata.gz: 17b5223ce5053256ecdeca31b0cba4aa944be3e036c5a7f87e618ac210743c70
+  data.tar.gz: 249659c9162fc5866c95f4e7ca93526242cac418d643805106a30024a8f68387
 SHA512:
-  metadata.gz: 9c9c0665cee4d841bb9b4b404727e5a0912218f6e1f285996cb8c3de268380e7b5936a63f0befd150a0f5c9bfd6db55551da65a29d59269d3add7710f95d9c73
-  data.tar.gz: 3507fad3d27741a06660b2f50c8068e0a2736b80b9f07edb753a539c31f43cfa34b36e1d0e0251547c6262570ff7d02859b0ee69fa0377a0f63068b82f49b1a7
+  metadata.gz: 5795693f1395e8770cac42d3883e784a21249937f31da3608e04c9109e6e07e765a6650f958108fb826a2bc76d99ed4bd8d14395dcf485c3beebd1cb6c0b5239
+  data.tar.gz: b784cac79800c6c20578e8d5b411f665bcbc75ece551eaa577b9026c2ed8de31abf0f785007861b23d27f249579435378cae0ed9f5b4ae9e4df141ac237fae3c

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_image/_image.scss

@@ -11,9 +11,9 @@ $image-sizes: (
 
 [class^=pb_image_kit] {
   position: relative;
-  object-fit: cover;
 
   @each $name, $size in $image-sizes {
+    &.ls-blur-up-img,
     &[class*=size_#{$name}] {
       width: $size;
       height: $size;
@@ -22,13 +22,16 @@ $image-sizes: (
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
+      font-family: "blur-up: auto", "object-fit: cover";
+      object-fit: cover;
     }
 
     &[class*= rounded] {
       border-radius: $border-rad-heaviest;
     }
 
-    &.fade {
+    &.ls-blur-up-img,
+    &.fade:not(.ls-is-cached) {
       opacity: 0;
       &.lazyloaded {
         opacity: 1;
@@ -36,7 +39,8 @@ $image-sizes: (
       }
     }
 
-    &.blur {
+    &.ls-blur-up-img,
+    &.blur:not(.ls-is-cached) {
       filter: blur(5px);
       &.lazyloaded {
         -webkit-filter: blur(0);
@@ -45,7 +49,8 @@ $image-sizes: (
       }
     }
 
-    &.scale {
+    &.ls-blur-up-img,
+    &.scale:not(.ls-is-cached) {
       opacity: 0;
       transform: scale(0.9);
       &.lazyloaded {

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import 'lazysizes';
+import 'lazysizes/plugins/blur-up/ls.blur-up';
 
 type ImageType = {
   alt?: string,
@@ -42,16 +44,18 @@ const Image = (props: ImageType): React.ReactElement => {
   const dataProps = buildDataProps(data)
 
   return (
-    <img
-        {...ariaProps}
-        {...dataProps}
-        alt={alt}
-        className={classes}
-        data-src={url}
-        id={id}
-        onError={onError}
-        src={url}
-    />
+    <>
+      <img
+          {...ariaProps}
+          {...dataProps}
+          alt={alt}
+          className={classes}
+          data-src={url}
+          id={id}
+          onError={onError}
+          src={url}
+      />
+    </>
   )
 }
 

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/playbook-rails.js

@@ -11,6 +11,7 @@ window.datePickerHelper = datePickerHelper
 
 // Lazy image loading
 import 'lazysizes'
+import 'lazysizes/plugins/blur-up/ls.blur-up'
 
 import PbCollapsible from './pb_collapsible'
 PbCollapsible.start()

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');