playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

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>
     </>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon } from '../../'
+
+import Icon from '../_icon'
 
 const IconAnimate = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon } from '../../'
+
+import Icon from '../_icon'
 
 const IconBorder = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon } from '../../'
+
+// import Icons as config from 'power-icons'
+const config = {
+  moon: (
+    <svg
+        aria-hidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const IconCustom = (props) => {
+  return (
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCustom

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon } from '../../'
+
+import Icon from '../_icon'
 
 const IconDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon } from '../../'
+
+import Icon from '../_icon'
 
 const IconFlip = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon } from '../../'
+
+import Icon from '../_icon'
 
 const IconPull = (props) => {
   return (