playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2107 → 13.16.0.pre.alpha.powercentrainplaybookpt22125

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -27,7 +27,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: 16px;
+      font-size: $font_base;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

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

@@ -1,4 +1,4 @@
-import React, { ReactSVGElement } from 'react'
+import React 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 | ReactSVGElement,
+  icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,
@@ -47,12 +47,6 @@ const flipMap = {
   none: ""
 }
 
-
-declare global {
-  // eslint-disable-next-line no-var
-  var POWER_ICONS: {[key: string]: React.FunctionComponent<any>}
-}
-
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -63,7 +57,7 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon = "",
+    icon,
     id,
     inverse = false,
     listItem = false,
@@ -75,8 +69,6 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
-  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
-
   const faClasses = {
     'fa-border': border,
     'fa-fw': fixedWidth,
@@ -87,23 +79,19 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
-  }
-
-  if (!customIcon && !iconElement) {
-    const PowerIcon: React.FunctionComponent<any> | undefined =
-      window.POWER_ICONS ? window.POWER_ICONS[icon as string] : null
 
-    if (PowerIcon) {
-      iconElement = <PowerIcon /> as ReactSVGElement
-    } else {
-      faClasses[`fa-${icon}`] = icon as string
-    }
   }
 
+  // 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],
-    (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
-    (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
+    'pb_icon_kit',
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -122,22 +110,20 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (iconElement || customIcon)
+    if (customIcon)
       return (
         <>
           {
-            React.cloneElement(iconElement || customIcon, {
+            React.cloneElement(customIcon, {
               ...dataProps,
               ...htmlProps,
               className: classes,
               id,
-              width: 'auto',
-              height: 'auto',
             })
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(icon))
       return (
         <>
           <span
@@ -150,6 +136,7 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
+
     else
       return (
         <>
@@ -174,4 +161,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

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

@@ -2,9 +2,15 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <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>
+  <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."
+  } ) %>
 </div>

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

@@ -1,59 +1,33 @@
 import React from 'react'
 import { Icon } from '../../'
 
+// import Icons as config from 'power-icons'
 const config = {
-  icon: (
-    <svg viewBox="0 -256 1792 1792"
+  moon: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
         xmlns="http://www.w3.org/2000/svg"
     >
-      <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>
+      <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 (
-    <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>
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
   )
 }
 

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

@@ -4,12 +4,16 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
 
 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.
+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**!
+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.
+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.
 
 ### Rails
 
-Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
+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.

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

@@ -1,9 +1,7 @@
-<% if object.is_svg? %>
-  <%= object.render_svg %>
-<% elsif object.valid_emoji? %>
-  <span class="pb_icon_kit_emoji">
-    <%= object.icon.html_safe %>
-  </span>
+<% 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>
 <% 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?
+      def valid_emoji(icon)
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
       end
@@ -79,33 +79,19 @@ module Playbook
         )
       end
 
-      def asset_path
-        return unless Rails.application.config.respond_to?(:icon_path)
-        return unless Dir.entries(Rails.application.config.icon_path).include? "#{icon}.svg"
-
-        Rails.root.join(Rails.application.config.icon_path, "#{icon}.svg")
-      end
-
-      def render_svg
-        doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
-        svg = doc.at_css "svg"
-        svg["class"] = "pb_custom_icon " + object.custom_icon_classname
-        svg["height"] = "auto"
-        svg["width"] = "auto"
-        doc.at_css("path")["fill"] = "currentColor"
-        raw doc
-      end
-
-      def is_svg?
-        (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
+      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
       end
 
     private
 
-      def svg_size
-        size.nil? ? "1x" : size
-      end
-
       def border_class
         border ? "fa-border" : nil
       end

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       28px !default;
+$font_larger:       27px !default;
 $font_large:        20px !default;
-$font_base:         16px !default;
+$font_base:         15.5px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px !default;
-$heading_2: 34px !default;
+$heading_1: 44px !default;
+$heading_2: 32px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           0 !default;
+$lspace_normal:           .003em !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          600 !default;
+$bold:          700 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
+$extrabold:     700 !default;
+$boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       100 !default;
+$lighter:       300 !default;