playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactSVGElement } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -27,7 +27,7 @@ type IconProps = {
   data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
-  icon: string,
+  icon: string | ReactSVGElement,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,
@@ -57,7 +57,7 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon,
+    icon = "",
     id,
     inverse = false,
     listItem = false,
@@ -79,19 +79,19 @@ const Icon = (props: IconProps) => {
     [`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 iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
+  const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+
+  const isFA = !iconElement && !customIcon && !iconURL
+
+  if (isFA) faClasses[`fa-${icon}`] = icon as string
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : fontStyle,
+    (iconElement || customIcon) ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -110,11 +110,11 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (customIcon)
+    if (iconElement || customIcon)
       return (
         <>
           {
-            React.cloneElement(customIcon, {
+            React.cloneElement(iconElement || customIcon, {
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -123,7 +123,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon))
+    else if (isValidEmoji(icon as string))
       return (
         <>
           <span
@@ -136,7 +136,19 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
-
+    else if (iconURL)
+      return (
+        <>
+          <span
+              {...dataProps}
+              {...htmlProps}
+              className={classesEmoji}
+              id={id}
+          >
+            <img src={iconURL} />
+          </span>
+        </>
+      )
     else
       return (
         <>
@@ -161,4 +173,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -2,15 +2,9 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
-
-  <%= pb_rails("body", props: {
-    text: "Custom icons are compatible with other icon props (size, rotation,
-    spin, flip, etc). Their SVG fill colors will be inherited from
-    parent element's css color properties."
-  } ) %>
+  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
 </div>

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

@@ -1,33 +1,59 @@
 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"
+  icon: (
+    <svg viewBox="0 -256 1792 1792"
         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"
-      />
+      <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
+          <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
+      </g>
     </svg>
   ),
 }
 
 const IconCustom = (props) => {
   return (
-    <div>
-      <Icon
-          customIcon={config.moon}
-          size="7x"
-          {...props}
-      />
-    </div>
+    <React.Fragment>
+      <p>
+        <Icon
+            icon={config.icon}
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            rotation={90}
+            size="2x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="3x"
+            spin
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            flip="horizontal"
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+    </React.Fragment>
   )
 }
 

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

@@ -1,19 +1,14 @@
 # Tips for Custom Icons
 
-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 component/view* you are working on. This can easily be done in programmatic and maintainable ways.
-
 ### React
 
-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.
+- Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.
+- Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
+
+  ```html
+  <img src="host.com/my/path/to/icon.svg" />
+  ```
 
 ### Rails
 
-Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
+Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,9 @@
-<% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
-<% elsif object.valid_emoji(object.icon) %>
-  <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
+<% if object.is_svg? %>
+  <%= object.render_svg %>
+<% elsif object.valid_emoji? %>
+  <span class="pb_icon_kit_emoji">
+    <%= object.icon.html_safe %>
+  </span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -38,7 +38,7 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
-      def valid_emoji(icon)
+      def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
       end
@@ -79,15 +79,15 @@ module Playbook
         )
       end
 
-      def render_svg(path)
-        if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
-          svg = doc.at_css "svg"
-          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
-          raw doc
-        else
-          raise("Custom icon must be an svg. Please check your path and file type.")
-        end
+      def render_svg
+        doc = Nokogiri::XML(URI.open(icon || custom_icon)) # rubocop:disable Security/Open
+        svg = doc.at_css "svg"
+        svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+        raw doc
+      end
+
+      def is_svg?
+        (icon || custom_icon).include?(".svg")
       end
 
     private

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

@@ -9,11 +9,12 @@ 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'
+import { GenericObject } from '../types'
 
 type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
     | "green",
 }
 
-const IconStatValue = (props: IconStatValueProps) => {
+const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
     aria = {},
     className,

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

@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps) => {
+const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -13,25 +13,26 @@ import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
+import { GenericObject } from "../types"
 
 type PassphraseProps = {
   aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputProps?: {},
+  inputProps?: GenericObject,
   label?: string,
-  onChange: (inputValue: String) => void,
+  onChange: (inputValue: string) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
 }
 
-const Passphrase = (props: PassphraseProps) => {
+const Passphrase = (props: PassphraseProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -42,7 +43,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => { },
+    onChange = () => undefined,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -84,60 +85,60 @@ const Passphrase = (props: PassphraseProps) => {
     globalProps(props),
     className
   )
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const popoverReference = (
     <CircleIconButton
-      className={tipClass}
-      dark={dark}
-      icon="info-circle"
-      onClick={toggleShowPopover}
-      variant="link"
+        className={tipClass}
+        dark={dark}
+        icon="info-circle"
+        onClick={toggleShowPopover}
+        variant="link"
     />
   )
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       <label>
         <Flex align="baseline">
           <Caption
-            className="passphrase-label"
-            text={label}
+              className="passphrase-label"
+              text={label}
           />
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
-              className="passphrase-tips"
-              closeOnClick="outside"
-              placement="right"
-              reference={popoverReference}
-              shouldClosePopover={handleShouldClosePopover}
-              show={showPopover}
+                className="passphrase-tips"
+                closeOnClick="outside"
+                placement="right"
+                reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
+                show={showPopover}
             >
               <Flex
-                align="center"
-                orientation="column"
+                  align="center"
+                  orientation="column"
               >
                 <Caption
-                  marginBottom="xs"
-                  text="Tips for a good passphrase"
+                    marginBottom="xs"
+                    text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
-                      key={i}
-                      marginBottom="xs"
-                      size="xs"
+                        key={i}
+                        marginBottom="xs"
+                        size="xs"
                     >
                       <Icon
-                        icon="shield-check"
-                        marginRight="xs"
+                          icon="shield-check"
+                          marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -149,30 +150,30 @@ const Passphrase = (props: PassphraseProps) => {
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-            className="passphrase-text-input"
-            dark={dark}
-            marginBottom="xs"
-            onChange={handleChange}
-            placeholder="Enter a passphrase..."
-            type={showPassphrase ? "text" : "password"}
-            value={displayValue}
-            {...inputProps}
+              className="passphrase-text-input"
+              dark={dark}
+              marginBottom="xs"
+              onChange={handleChange}
+              placeholder="Enter a passphrase..."
+              type={showPassphrase ? "text" : "password"}
+              value={displayValue}
+              {...inputProps}
           />
           <span
-            className="show-passphrase-icon"
-            onClick={toggleShowPassphrase}
+              className="show-passphrase-icon"
+              onClick={toggleShowPassphrase}
           >
             <Body
-              className={showPassphrase ? "hide-icon" : ""}
-              color="light"
-              dark={dark}
+                className={showPassphrase ? "hide-icon" : ""}
+                color="light"
+                dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-              className={showPassphrase ? "" : "hide-icon"}
-              color="light"
-              dark={dark}
+                className={showPassphrase ? "" : "hide-icon"}
+                color="light"
+                dark={dark}
             >
               <Icon icon="eye" />
             </Body>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 import Contact from '../pb_contact/_contact'
 import Person from '../pb_person/_person'
+import { GenericObject } from '../types'
 
 type ContactItem = {
   contactType: string,
@@ -17,7 +18,7 @@ type ContactItem = {
 type PersonContactProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
-  data?: object,
+  data?: GenericObject,
   firstName: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -25,7 +26,7 @@ type PersonContactProps = {
   contacts?: ContactItem[],
 }
 
-const PersonContact = (props: PersonContactProps) => {
+const PersonContact = (props: PersonContactProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -60,35 +61,35 @@ const PersonContact = (props: PersonContactProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       <Person
-        firstName={firstName}
-        lastName={lastName}
+          firstName={firstName}
+          lastName={lastName}
       />
       {validContacts().map((contactObject, index) => (
         <Contact
-          contactDetail={contactObject.contactDetail}
-          contactType={contactObject.contactType}
-          contactValue={contactObject.contactValue}
-          key={`valid-contact-${index}`}
+            contactDetail={contactObject.contactDetail}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={`valid-contact-${index}`}
         />
       ))}
       {wrongContacts().map((contactObject, index) => (
         <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
-            className="wrong_numbers"
-            key={`wrong-contact-caption-${index}`}
-            text="wrong number"
+              className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
+              text="wrong number"
           />
           <Contact
-            contactType={contactObject.contactType}
-            contactValue={contactObject.contactValue}
-            key={`wrong-contact-${index}`}
+              contactType={contactObject.contactType}
+              contactValue={contactObject.contactValue}
+              key={`wrong-contact-${index}`}
           />
         </div>
       ))}

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -62,6 +62,7 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
+  // eslint-disable-next-line no-useless-escape
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
@@ -259,9 +260,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   if (required) textInputProps.required = true
 
   return (
-    <div 
-      {...wrapperProps} 
-      {...htmlProps}
+    <div
+        {...wrapperProps}
+        {...htmlProps}
     >
       <TextInput
           ref={

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
@@ -54,7 +55,7 @@ const popoverModifiers = ({
   offset,
 }: {
   modifiers: Modifier<any> & any;
-  offset: {};
+  offset: boolean;
 }) => {
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
@@ -143,7 +144,7 @@ const Popover = (props: PbPopoverProps) => {
   );
 };
 
-const PbReactPopover = (props: PbPopoverProps) => {
+const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
@@ -226,9 +227,10 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
-                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
-                  ref={ref}>
+                  id={"reference-" + targetId}
+                  ref={ref}
+              >
                 <reference.type {...reference.props} />
               </span>
             )}