playbook_ui 9.19.0 → 10.0.2.pre.alpha.pre.iconfix

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,30 @@ 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
+  if (!customIcon) faClasses[`fa-${icon}`] = 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,
-    },
+    customIcon ? '' : 'far',
+    faClasses,
     globalProps(props),
     className
   )
@@ -83,17 +93,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
+        ariaHidden="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_custom.md

@@ -0,0 +1,11 @@
+### Experimental: Not currently available in the Rails version!
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.

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 (

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

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

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

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

data/app/pb_kits/playbook/pb_icon/docs/example.yml

@@ -16,3 +16,4 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom

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

@@ -5,3 +5,4 @@ export { default as IconAnimate } from './_icon_animate.jsx'
 export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
+export { default as IconCustom } from './_icon_custom.jsx'

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -4,9 +4,10 @@ import React from 'react'
 
 import classnames from 'classnames'
 
-import { Icon } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
 
 type IconCircleProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { IconCircle } from '../../'
+
+import IconCircle from '../_icon_circle'
 
 const IconCircleColor = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { IconCircle } from '../../'
+
+import IconCircle from '../_icon_circle'
 
 const IconCircleDefault = (props) => {
   return (

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

@@ -2,10 +2,16 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Body, Caption, Flex, IconCircle, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import IconCircle from '../pb_icon_circle/_icon_circle'
+import Title from '../pb_title/_title'
+
 type IconStatValueProps = {
   aria?: object,
   className?: string,

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -2,11 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Body, Icon } from '../'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import { globalProps } from '../utilities/globalProps.js'
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { IconValue } from '../../'
+
+import IconValue from '../_icon_value'
 
 const IconValueAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { IconValue } from '../../'
+
+import IconValue from '../_icon_value'
 
 const IconValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Body, Image } from '../../'
+
+import Image from '../_image'
+
+import Body from '../../pb_body/_body'
 
 const CustomErrorImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Image } from '../../'
+
+import Image from '../_image'
 
 const DefaultImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Image } from '../../'
+
+import Image from '../_image'
 
 const RoundedImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -2,8 +2,8 @@
 /*eslint-disable flowtype/space-before-type-colon */
 
 import moment from 'moment'
-require('moment-strftime')
-require('moment-timezone')
+import 'moment-strftime'
+import 'moment-timezone'
 
 type DateTimeType = {
   value: String | Date,

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

@@ -6,7 +6,8 @@ import { globalProps } from '../utilities/globalProps.js'
 
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
-import { Caption, Pill } from '../'
+import Pill from '../pb_pill/_pill'
+import Caption from '../pb_caption/_caption'
 
 type LabelPillProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { LabelPill } from '../../'
+
+import LabelPill from '../_label_pill'
 
 const LabelPillDefault = (props) => (
 

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -4,8 +4,13 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { Body, Caption, Flex, Icon, Title } from '../'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
 
 type LabelValueProps = {
   active?: boolean,

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Layout } from '../../'
+
+import Layout from '../_layout'
+
+import Card from '../../pb_card/_card'
 
 const LayoutCollection = (props) => {
   return (