playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 9.19.0.pre.alphafonts

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx

@@ -6,7 +6,7 @@ import AnimateHeight from 'react-animate-height'
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps.js'
 
-import CollapsibleContext from '../context'
+import { CollapsibleContext } from '../_collapsible.jsx'
 
 type CollapsibleContentProps = {
   children: array<React.ReactNode> | React.ReactNode | string,

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx

@@ -1,13 +1,12 @@
 /* @flow */
 
 import classnames from 'classnames'
+import { Flex, FlexItem } from '../../'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps.js'
 
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import CollapsibleContext from '../context'
+import { CollapsibleContext } from '../_collapsible.jsx'
 
 type CollapsibleMainProps = {
   children: array<React.ReactNode> | React.ReactNode,

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -2,13 +2,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
+import { Body, Caption, Icon } from '../'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
 
 const contactTypeMap = {
   'cell': 'mobile',

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -4,12 +4,9 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps.js'
+import { Body, Caption, Title } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Title from '../pb_title/_title'
-
 type CurrencyProps = {
   align?: 'center' | 'left' | 'right',
   amount: string,

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyNoSymbol = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencySize = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -4,10 +4,11 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-
-import Body from '../pb_body/_body'
-import StatChange from '../pb_stat_change/_stat_change'
-import StatValue from '../pb_stat_value/_stat_value'
+import {
+  Body,
+  StatChange,
+  StatValue,
+} from '../'
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
+import { DashboardValue } from '../../'
 
 const DashboardValueAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
+import { DashboardValue } from '../../'
 
 const DashboardValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -1,16 +1,11 @@
 /* @flow */
 
 import React from 'react'
+import DateTime from '../pb_kit/dateTime.js'
+import { Body, Caption, Icon, Title } from '../'
 import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
 
 type PbDateProps = {
   alignment?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -2,14 +2,10 @@
 
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import datePickerHelper from './date_picker_helper'
-
-import Icon from '../pb_icon/_icon'
-import TextInput from '../pb_text_input/_text_input'
+import { globalProps } from '../utilities/globalProps.js'
+import { Icon, TextInput } from '../'
+import datePickerHelper from './date_picker_helper.js'
 
 type DatePickerProps = {
   allowInput?: Boolean,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,11 @@
 /* @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'
+import { globalProps } from '../utilities/globalProps.js'
 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,15 +2,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
-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'
+import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 
 type DateRangeStackedProps = {
   className?: string | array<string>,

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

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

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

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

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

@@ -2,15 +2,10 @@
 /* @flow */
 
 import React from 'react'
-
 import { buildCss } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
-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'
+import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
 
 type DateTimeStackedProps = {
   id?: string,

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

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DateTimeStacked from '../_date_time_stacked'
+import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = (props) => (
   <div>
@@ -27,3 +26,6 @@ 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,13 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime.js'
+import { globalProps } from '../utilities/globalProps.js'
 
-import Body from '../pb_body/_body'
-import Title from '../pb_title/_title'
+import { Body, Title } from '../'
 
 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 '../pb_icon/_icon'
+import { Icon } from '../'
 
 type CloseIconProps = {
   onClose: () => mixed,

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

@@ -2,12 +2,10 @@
 
 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 Button from '../pb_button/_button'
+import Modal from 'react-modal'
+import { Button } from '../'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'

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

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

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

@@ -4,11 +4,9 @@ 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_enhanced_element/index.js

@@ -26,12 +26,11 @@ export default class PbEnhancedElement {
   }
 
   static addMatch(element) {
-    if (element._pbEnhanced || this.elements.has(element)) return
+    if (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,14 +2,13 @@
 
 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 { buildCss, noop } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import type { Callback } from '../types'
+import type { Callback } from '../types.js'
 
-import Body from '../pb_body/_body'
-import Card from '../pb_card/_card'
+import { Body, Card } from '..'
 
 type FileUploadProps = {
   accept?: array<string>,

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

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

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

@@ -1,12 +1,10 @@
 /* @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,6 +1,7 @@
 /* @flow */
 
 import React from 'react'
+import { Caption, Flex, SectionSeparator } from '../../'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
@@ -12,9 +13,6 @@ 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,8 +2,7 @@
 
 import React from 'react'
 import { isEmpty } from 'lodash'
-
-import Flex from '../../pb_flex/_flex'
+import { Flex } from '../../'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'

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

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

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

@@ -1,9 +1,7 @@
 /* @flow */
 
 import React from 'react'
-
-import Caption from '../../pb_caption/_caption'
-import TitleCount from '../../pb_title_count/_title_count'
+import { Caption, TitleCount } from '../../'
 
 const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
 

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

@@ -2,12 +2,7 @@
 
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
-
-import Button from '../../pb_button/_button'
-import Icon from '../../pb_icon/_icon'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
-import PbReactPopover from '../../pb_popover/_popover'
+import { Button, Icon, List, ListItem, PbReactPopover } from '../../'
 
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -1,11 +1,5 @@
 import React from 'react'
-
-import Filter from '../_filter'
-
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
 const FilterSingle = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Filter from '../_filter'
+import { Filter } from '../../'
 
 const SortOnly = (props) => (
   <Filter