playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerDisabled = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerError = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx

@@ -1,5 +1,8 @@
 import React, { useEffect } from 'react'
-import { Button, DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
+
+import Button from '../../pb_button/_button'
 
 const DatePickerFlatpickrMethods = () => {
   let fpInstance

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerFormat = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerHideIcon = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerHooks = (props) => {
   // Define hooks

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerInput = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerLabel = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerMinMax = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerRange = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DatePicker } from '../../'
+
+import DatePicker from '../_date_picker'
 
 const DatePickerYearRange = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -1,4 +1,5 @@
-@import "../../pb_title/title_mixin";
+@import "../../tokens/titles";
+
 // Header Styles
 .flatpickr-months {
   border-bottom: solid 1px $border_light;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -1,11 +1,15 @@
 /* @flow */
 
 import React from 'react'
-import DateTime from '../pb_kit/dateTime.js'
-import { Body, Caption, Icon } from '../'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+
+import { globalProps } from '../utilities/globalProps'
 import { buildCss } from '../utilities/props'
+import DateTime from '../pb_kit/dateTime'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
 
 type DateRangeInlineProps = {
   className?: string,

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -2,10 +2,15 @@
 
 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 { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
+import Body from '../pb_body/_body'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+import DateYearStacked from '../pb_date_year_stacked/_date_year_stacked'
+import Icon from '../pb_icon/_icon'
 
 type DateRangeStackedProps = {
   className?: string | array<string>,

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -1,11 +1,15 @@
 /* @flow */
 
 import React from 'react'
+
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+
+import DateTime from '../pb_kit/dateTime'
 import { buildCss } from '../utilities/props'
-import { Caption, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Caption from '../pb_caption/_caption'
+import Title from '../pb_title/_title'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -2,9 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import {  Flex, Date as FormattedDate, Time } from '../'
+import { globalProps } from '../utilities/globalProps'
+
+import Flex from '../pb_flex/_flex'
+import Time from '../pb_time/_time'
+import FormattedDate from '../pb_date/_date'
 
 type DateTimeProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -2,10 +2,15 @@
 /* @flow */
 
 import React from 'react'
+
 import { buildCss } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
-import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import TimeStacked from '../pb_time_stacked/_time_stacked'
+import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
   id?: string,

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { DateTimeStacked } from '../../'
+
+import DateTimeStacked from '../_date_time_stacked'
 
 const DateTimeStackedDefault = (props) => (
   <div>
@@ -26,6 +27,3 @@ const DateTimeStackedDefault = (props) => (
 )
 
 export default DateTimeStackedDefault
-
-// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -2,11 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
+import DateTime from '../pb_kit/dateTime'
 import { buildCss } from '../utilities/props'
-import DateTime from '../pb_kit/dateTime.js'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
-import { Body, Title } from '../'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_dialog/_close_icon.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-import { Icon } from '../'
+import Icon from '../pb_icon/_icon'
 
 type CloseIconProps = {
   onClose: () => mixed,

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -2,10 +2,12 @@
 
 import React, { useState } from 'react'
 import classnames from 'classnames'
+import Modal from 'react-modal'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-import Modal from 'react-modal'
-import { Button } from '../'
+
+import Button from '../pb_button/_button'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'
@@ -20,6 +22,7 @@ type DialogProps = {
   confirmButton?: string,
   data?: object,
   id?: string,
+  loading?: boolean,
   onCancel?: () => void,
   onChange?: () => void,
   onClose?: () => void,
@@ -43,6 +46,7 @@ const Dialog = (props: DialogProps) => {
     id,
     size = 'md',
     children,
+    loading = false,
     opened,
     onCancel = () => {},
     onConfirm = () => {},
@@ -121,7 +125,12 @@ const Dialog = (props: DialogProps) => {
 
           <If condition={cancelButton && confirmButton}>
             <Dialog.Footer>
-              <Button onClick={onConfirm}>{confirmButton}</Button>
+              <Button
+                  loading={loading}
+                  onClick={onConfirm}
+              >
+                {confirmButton}
+              </Button>
               <Button
                   id="cancel-button"
                   onClick={onCancel}

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

@@ -2,9 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps.js'
-import { Flex, SectionSeparator } from '../../'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 // Footer component
 const DialogFooter = (props: DialogFooterProps) => {

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

@@ -4,9 +4,11 @@ import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps.js'
-import { Flex, SectionSeparator } from '../../'
+
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogHeaderProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -5,6 +5,7 @@ const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
@@ -13,9 +14,10 @@ const DialogDefault = () => {
           cancelButton="Cancel"
           className="wrapper"
           confirmButton="Okay"
+          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={close}
+          onConfirm={() => setIsLoading(!isLoading)}
           opened={isOpen}
           portalClassName="portal"
           size="sm"

data/app/pb_kits/playbook/pb_enhanced_element/index.js

@@ -26,11 +26,12 @@ export default class PbEnhancedElement {
   }
 
   static addMatch(element) {
-    if (this.elements.has(element)) return
+    if (element._pbEnhanced || this.elements.has(element)) return
 
     const enhansedElement = new this(element)
     enhansedElement.connect()
     this.elements.set(element, enhansedElement)
+    element._pbEnhanced = enhansedElement
   }
 
   static removeMatch(element) {

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

@@ -2,13 +2,14 @@
 
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { buildCss, noop } from '../utilities/props'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
 
-import type { Callback } from '../types.js'
+import { buildCss, noop } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import type { Callback } from '../types'
 
-import { Body, Card } from '..'
+import Body from '../pb_body/_body'
+import Card from '../pb_card/_card'
 
 type FileUploadProps = {
   accept?: array<string>,

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

@@ -2,7 +2,10 @@
 
 import React from 'react'
 import { isEmpty, map, omitBy } from 'lodash'
-import { Body, Caption, Title } from '../../'
+
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
 
 export type FilterDescription = {
   [key: string]: ?string | boolean,

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

@@ -1,10 +1,12 @@
 /* @flow */
 
 import React, { Node } from 'react'
-import { Card } from '../../'
 import classnames from 'classnames'
+
 import { globalProps } from '../../utilities/globalProps.js'
 
+import Card from '../../pb_card/_card'
+
 type FilterBackgroundProps = {
   background: boolean,
   className: string,

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

@@ -1,7 +1,6 @@
 /* @flow */
 
 import React from 'react'
-import { Caption, Flex, SectionSeparator } from '../../'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
@@ -13,6 +12,9 @@ import SortMenu, {
   SortValue,
 } from './SortMenu'
 
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 export type FilterDoubleProps = {
   children: Node,
   filters?: FilterDescription,

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

@@ -2,7 +2,8 @@
 
 import React from 'react'
 import { isEmpty } from 'lodash'
-import { Flex } from '../../'
+
+import Flex from '../../pb_flex/_flex'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'

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

@@ -1,7 +1,9 @@
 /* @flow */
 
 import React, { Node, useState } from 'react'
-import { CircleIconButton, PbReactPopover } from '../../'
+
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import PbReactPopover from '../../pb_popover/_popover'
 
 const FiltersPopoverProps = { children: Node }
 const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {