playbook_ui 10.21.0.pre.alpha.na1 → 10.21.1.pre.alpha1

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx

@@ -3,7 +3,7 @@
 import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type DistributionBarProps = {
   className?: string,

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
 
-import { buildCss, noop } from '../utilities/props'
+import { buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import type { Callback } from '../types'
 
@@ -14,15 +14,17 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  data?: object,
   acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['*'],
+    accept = null,
     acceptedFilesDescription = '',
     className,
+    data = {},
     onFilesAccepted = noop,
   } = props
   const onDrop = useCallback((files) => {
@@ -34,17 +36,22 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
-  const acceptedFileTypes = accept.map((fileType) => {
-    if (fileType.startsWith('image/')) {
-      return fileType.replace('image/', ' ')
-    } else {
-      return fileType
-    }
-  })
+  const acceptedFileTypes = () => {
+    return accept.map((fileType) => {
+      if (fileType.startsWith('image/')) {
+        return fileType.replace('image/', ' ')
+      } else {
+        return fileType
+      }
+    })
+  }
+
+  const dataProps = buildDataProps(data)
 
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        {...dataProps}
         {...getRootProps()}
     >
       <Card>
@@ -53,7 +60,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
+            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import FileUpload from './_file_upload'
+
+const testid = 'fileupload-test'
+
+test('returns namespaced class name', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveClass('pb_file_upload_kit')
+})
+
+test('shows default drag text', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here')
+})
+
+test('shows type-specific drag text', () => {
+  render(
+    <FileUpload
+        accept={['image/svg+xml']}
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
+})

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx

@@ -3,7 +3,7 @@
 import React, { Node } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
 

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: array<React.ReactNode> | React.ReactNode,
   fixedSize: string,

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -7,7 +7,7 @@ const FlexAlign = (props) => {
 
       <Title
           size={4}
-          text="Row"
+          text="row"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -8,17 +8,11 @@ module Playbook
                   default: false
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
-      prop :flex, type: Playbook::Props::Enum,
-                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
-                  default: "none"
+
       prop :overflow, type: Playbook::Props::Enum,
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
-      prop :order, type: Playbook::Props::Enum,
-                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
-                   default: "none"
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -27,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -59,22 +53,6 @@ module Playbook
       def shrink_class
         shrink ? "shrink" : nil
       end
-
-      def flex_class
-        if flex == "none"
-          nil
-        else
-          "flex_#{flex}"
-        end
-      end
-
-      def order_class
-        if order == "none"
-          ""
-        else
-          "order_#{order}"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type FormGroupProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -41,6 +41,7 @@
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_button_kit]:not(:first-child) {
@@ -48,6 +49,7 @@
     border-top-left-radius: 0;
     border-left-width: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {

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

@@ -3,8 +3,8 @@ import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
-import Avatar from '../pb_avatar/_avatar.jsx'
-import { globalProps } from '../utilities/globalProps.js'
+import Avatar from '../pb_avatar/_avatar'
+import { globalProps } from '../utilities/globalProps'
 
 type FormPillProps = {
   className?: string,

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -12,6 +12,7 @@ type GaugeProps = {
   aria: Object,
   className?: string,
   chartData?: array,
+  dark?: Boolean,
   data?: Object,
   disableAnimation: boolean,
   fullCircle: boolean,
@@ -33,6 +34,7 @@ const Gauge = (props: GaugeProps) => {
     aria = {},
     className,
     chartData = [{ name: 'Name', value: 0 }],
+    dark = false,
     data = {},
     disableAnimation = false,
     fullCircle = false,
@@ -67,6 +69,7 @@ const Gauge = (props: GaugeProps) => {
       id: id,
       chartData: formattedChartData,
       circumference: fullCircle ? [0, 360] : [-100, 100],
+      dark,
       disableAnimation: disableAnimation,
       height: height,
       min: min,

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -32,6 +32,7 @@ module Playbook
           id: id,
           chartData: chart_data_formatted,
           circumference: full_circle ? [0, 360] : [-100, 100],
+          dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
           height: height,
           min: min,

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

@@ -3,7 +3,7 @@
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type HighlightProps = {
   className?: string,

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type IconProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -73,7 +73,7 @@ module Playbook
 
       def render_svg(path)
         if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
           svg = doc.at_css "svg"
           svg["class"] = "pb_custom_icon " + object.custom_icon_classname
           raw doc

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'

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

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=_#{$name}] {
+    &[class*=size_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-    
+
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-    
+
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/{_image.jsx → _image.tsx}

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-type ImageProps = {
+type ImageType = {
   alt?: string,
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
-  onError?: () => {},
-  size: "xs" | "sm" | "md" | "lg" | "xl",
+  onError?: () => void,
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
-  transition: "blur" | "fade" | "scale",
-  url: string,
-}
+  transition?: "blur" | "fade" | "scale",
+  url?: string,
+} & GlobalProps
 
-const Image = (props: ImageProps) => {
+const Image = (props: ImageType) => {
   const {
     alt = '',
     aria = {},
@@ -34,7 +32,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size),
+    buildCss('pb_image_kit', size ? `size_${size}` : null),
     'lazyload',
     transition,
     { rounded },
@@ -52,9 +50,7 @@ const Image = (props: ImageProps) => {
         data-src={url}
         id={id}
         onError={onError}
-        rounded={+rounded}
         src={url}
-        transition={transition}
     />
   )
 }

data/app/pb_kits/playbook/pb_image/docs/{_default_image.jsx → _default_image.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Image from '../_image'
 
-const DefaultImage = (props) => {
+const DefaultImage = (props: any) => {
   return (
     <>
       <br />

data/app/pb_kits/playbook/pb_image/docs/index.js

@@ -1,4 +1,4 @@
-export { default as DefaultImage } from './_default_image.jsx'
-export { default as RoundedImage } from './_rounded_image.jsx'
-export { default as CustomErrorImage } from './_custom_error_image.jsx'
-export { default as TransitionImage } from './_transition_image.jsx'
+export { default as DefaultImage } from './_default_image'
+export { default as RoundedImage } from './_rounded_image'
+export { default as CustomErrorImage } from './_custom_error_image'
+export { default as TransitionImage } from './_transition_image'

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_#{size}"
+        size == "none" ? nil : "_size_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
 })
 
 test('transition = blur', () => {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
   aria?: object,

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -3,11 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
   axisTitle?: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -31,6 +32,7 @@ type LineGraphProps = {
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     gradient: false,
     type: 'line',
     legend: false,
@@ -40,6 +42,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -60,6 +63,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       axisTitle: axisTitle,
       chartData: chartData,
       colors: colors,
+      dark,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -11,6 +11,7 @@ const LineGraphDefault = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
+        height="300px"
         id="line-fixed-height"
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -32,6 +32,7 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
+          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type ListProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type ListItemProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
 

data/app/pb_kits/playbook/pb_online_status/{_online_status.jsx → _online_status.tsx}

@@ -1,18 +1,16 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string | number},
   id?: string,
   status?: "online" | "offline" | "away",
-}
+} & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {
   const {

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -1,10 +1,11 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type PillProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -13,7 +13,7 @@ import {
 import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type PbPopoverProps = {
   aria?: object,
@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
-      if (targetIsReference) return
-
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover) {
+        if (!targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover) {
+        if (targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break