playbook_ui 9.19.0.pre.alphafonts → 10.0.1.alpha.rtflexfix

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) => {

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

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

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

@@ -2,7 +2,12 @@
 
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
-import { Button, Icon, List, ListItem, PbReactPopover } from '../../'
+
+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'
 
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }

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

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+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'
 
 const FilterSingle = (props) => {
   const options = [

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -2,8 +2,11 @@
 
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { Icon, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+
+import { globalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
 
 const iconMap = {
   success: 'check',

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { FixedConfirmationToast } from '../../'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastClose = (props) => {
   return (

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { FixedConfirmationToast } from '../../'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { FixedConfirmationToast } from '../../'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastMultiLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, FormGroup, TextInput } from '../../'
+
+import Button from '../../pb_button/_button'
+import FormGroup from '../../pb_form_group/_form_group'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FormGroupButton = (props) => (
   <div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { DatePicker, FormGroup, TextInput } from '../../'
+
+import FormGroup from '../_form_group'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FormGroupDatePicker = (props) => (
   <div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { FormGroup, TextInput } from '../../'
+
+import FormGroup from '../_form_group'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FormGroupDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, FormGroup, TextInput } from '../../'
+
+import FormGroup from '../_form_group'
+import TextInput from '../../pb_text_input/_text_input'
+import Button from '../../pb_button/_button'
 
 const FormGroupFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { FormGroup, Select, TextInput } from '../../'
+
+import FormGroup from '../_form_group'
+
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FormGroupSelect = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { FormGroup, SelectableCard } from '../../'
+
+import FormGroup from '../../pb_form_group/_form_group'
+import SelectableCard from '../../pb_selectable_card/_selectable_card'
 
 const FormGroupSelectableCard = (props) => {
   const [value, setValue] = useState('')

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { FormGroup, SelectableCardIcon } from '../../'
+
+import FormGroup from '../_form_group'
+import SelectableCardIcon from '../../pb_selectable_card_icon/_selectable_card_icon'
 
 const FormGroupSelectableCardIcon = (props) => {
   const [selectedFormat, toggleFormat] = useState(null)

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, FormGroup, Typeahead } from '../../'
+
+import FormGroup from '../_form_group'
+
+import Button from '../../pb_button/_button'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const FormGroupTypeahead = (props) => {
   const options = [

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

@@ -1,16 +1,12 @@
 /* @flow */
 
 import React, { useEffect, useRef } from 'react'
-import { pbChart } from '../'
-import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 import Highcharts from 'highcharts'
 
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
 
 type GaugeProps = {
   aria: Object,

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -4,9 +4,10 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { Badge } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Badge from '../pb_badge/_badge'
 
 type HashtagProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Body, Highlight } from '../../'
+
+import Highlight from '../_highlight'
+import Body from '../../pb_body/_body'
 
 const HighlightDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -4,8 +4,11 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { joinPresent, titleize } from '../utilities/text'
-import { Body, Hashtag, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Hashtag from '../pb_hashtag/_hashtag'
+import Title from '../pb_title/_title'
 
 type HomeAddressStreetProps = {
   address: string,

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { HomeAddressStreet } from '../../'
+
+import HomeAddressStreet from '../_home_address_street'
 
 const HomeAddressStreetDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { HomeAddressStreet } from '../../'
+
+import HomeAddressStreet from '../_home_address_street'
 
 const HomeAddressStreetEmphasis = (props) => {
   return (

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { HomeAddressStreet } from '../../'
+
+import HomeAddressStreet from '../_home_address_street'
 
 const HomeAddressStreetModified = (props) => {
   return (

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

@@ -9,6 +9,7 @@ type IconProps = {
   aria?: object,
   border?: boolean,
   className?: string,
+  customIcon?: SVGElement,
   data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
@@ -46,6 +47,7 @@ const Icon = (props: IconProps) => {
     aria = {},
     border = false,
     className,
+    customIcon,
     data = {},
     fixedWidth = true,
     flip = false,
@@ -59,22 +61,29 @@ const Icon = (props: IconProps) => {
     size,
     spin = false,
   } = props
+
+  const faClasses = {
+    'fa-border': border,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-li': listItem,
+    'fa-pulse': pulse,
+    'fa-spin': spin,
+    [`fa-${size}`]: size,
+    [`fa-pull-${pull}`]: pull,
+    [`fa-rotate-${rotation}`]: rotation,
+  }
+
+  // Lets check and see if the icon prop is referring to a custom Power icon...
+  // If so, then set fa-icon to "custom"
+  // this ensures the JS will not do any further operations
+  faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
     'far',
-    {
-      'fa-border': border,
-      'fa-fw': fixedWidth,
-      'fa-inverse': inverse,
-      'fa-li': listItem,
-      'fa-pulse': pulse,
-      'fa-spin': spin,
-      [`fa-${icon}`]: icon,
-      [`fa-${size}`]: size,
-      [`fa-pull-${pull}`]: pull,
-      [`fa-rotate-${rotation}`]: rotation,
-    },
+    faClasses,
     globalProps(props),
     className
   )
@@ -83,17 +92,28 @@ const Icon = (props: IconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
+  // Add a conditional here to show only the SVG if custom
   return (
     <>
-      <i
-          {...dataProps}
-          className={classes}
-          id={id}
-      />
-      <span
-          {...ariaProps}
-          hidden
-      />
+      <If condition={customIcon}>
+        {
+          React.cloneElement(customIcon, {
+            ...dataProps,
+            className: classes,
+            id,
+          })
+        }
+        <Else />
+        <i
+            {...dataProps}
+            className={classes}
+            id={id}
+        />
+        <span
+            {...ariaProps}
+            hidden
+        />
+      </If>
     </>
   )
 }