playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2261 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd2574ae523e03ec003144dc0828e2be333b8c20caa185490e5360efb1ce7d45
-  data.tar.gz: 38c45d1ab01e857b8a9157bdb723ed5b908fd93925f300796ba5f21eaa604af6
+  metadata.gz: dc85d46bc740674b47dbae257e9c81833befa30e371132c6b8c666e5b9085d10
+  data.tar.gz: e5f9fddaf77380e589222c5a5a5b7d4f6113a3b972daf02d8b5a5a2428056111
 SHA512:
-  metadata.gz: 6415b74cbfeda721b63d4556fcfdd70137fc58dce674091eecabd324e2ef2cb0600da1f3595c915cffca96bcbbcf8ed411cb428d9c60fd4c6a5a2cd915963771
-  data.tar.gz: feda22338e269b570af8ac88e003f6162216c086c7cb80bc3abb5743b90a452031734e95b4de1abdf60156ca81ca60cd72c19333600f9e8b3441d404fdd3c1c6
+  metadata.gz: 873f1d7fd3362e9e8825e9565864de562f7df6a3867f872f34e937ad494595ff9741534192c545f28673e0ce2f6790483eb4a059fc733393dfe1342663f95a59
+  data.tar.gz: 0b5450fc7b8d3311f2d1ae1d6f1923d3aaee4c4c5267daab6080e535fa88dec66695131ea87e28f95f8ee20cfd7bd6e8891e4c902b96421dfbd4a6de30d6f113

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,
@@ -47,6 +47,11 @@ const flipMap = {
   none: ""
 }
 
+declare global {
+  // eslint-disable-next-line no-var
+  var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
+}
+
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -57,7 +62,7 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon,
+    icon = "",
     id,
     inverse = false,
     listItem = false,
@@ -69,6 +74,8 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
+  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+
   const faClasses = {
     'fa-border': border,
     'fa-fw': fixedWidth,
@@ -79,19 +86,23 @@ 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.PB_ICONS ? window.PB_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],
-    'pb_icon_kit',
-    customIcon ? '' : fontStyle,
+    (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
+    (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -110,20 +121,22 @@ 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,
               id,
+              width: 'auto',
+              height: 'auto',
             })
           }
         </>
       )
-    else if (isValidEmoji(icon))
+    else if (isValidEmoji(icon as string))
       return (
         <>
           <span
@@ -136,7 +149,6 @@ const Icon = (props: IconProps) => {
           </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

@@ -4,16 +4,12 @@ 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.
-
-### 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.
+You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
 
 ### 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,19 +79,36 @@ 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 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["id"] = object.id
+        svg["data"] = object.data
+        svg["aria"] = object.aria
+        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?
       end
 
     private
 
+      def svg_size
+        size.nil? ? "1x" : size
+      end
+
       def border_class
         border ? "fa-border" : nil
       end

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -5,60 +5,67 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
-    aria?: { [key: string]: string },
-    children: React.ReactNode[] | React.ReactNode,
-    className: string,
-    collapse?: "sm" | "md" | "lg",
-    container?: boolean,
-    dark?: boolean,
-    data?: { [key: string]: string },
-    dataTable: boolean,
-    disableHover?: boolean,
-    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-    id?: string,
-    responsive?: "collapse" | "scroll" | "none",
-    singleLine?: boolean,
-    size?: "sm" | "md" | "lg",
-    sticky?: boolean,
-    striped?: boolean,
-    tag?: "table" | "div",
-    verticalBorder?: boolean,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
+  className: string,
+  collapse?: "sm" | "md" | "lg",
+  container?: boolean,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  dataTable: boolean,
+  disableHover?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
+  sticky?: boolean,
+  striped?: boolean,
+  verticalBorder?: boolean,
 } & GlobalProps
 
 const Table = (props: TableProps) => {
-    const {
-        aria = {},
-        children,
-        className,
-        collapse = 'sm',
-        container = true,
-        dark,
-        data = {},
-        dataTable = false,
-        disableHover = false,
-        htmlOptions = {},
-        id,
-        responsive = 'collapse',
-        singleLine = false,
-        size = 'sm',
-        sticky = false,
-        striped = false,
-        tag = 'table',
-        verticalBorder = false,
-    } = props
+  const {
+    aria = {},
+    children,
+    className,
+    collapse = 'sm',
+    container = true,
+    dark,
+    data = {},
+    dataTable = false,
+    disableHover = false,
+    htmlOptions = {},
+    id,
+    responsive = 'collapse',
+    singleLine = false,
+    size = 'sm',
+    sticky = false,
+    striped = false,
+    verticalBorder = false,
+  } = props
 
-    const ariaProps = buildAriaProps(aria)
-    const dataProps = buildDataProps(data)
-    const htmlProps = buildHtmlProps(htmlOptions)
-    const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-    const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
-    const isTableTag = tag === 'table'
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+  const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
 
-    const classNames = classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
+
+  return (
+    <table
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
             'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
@@ -66,43 +73,17 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-    )
-
-    useEffect(() => {
-        const instance = new PbTable()
-        instance.connect()
-    }, [])
-
-    return (
-        <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </div>
-            )}
-        </>
-    )
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
+    >
+        {children}
+    </table>
+  )
 }
 
 export default Table

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -27,7 +26,6 @@ examples:
     - table_striped: Striped Table
 
   react:
-    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

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

@@ -21,4 +21,3 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
-export { default as TableDiv } from './_table_div.jsx'

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody, .pb_table_tbody {
-      tr, .pb_table_tr {
-        td, .pb_table_td {
+    tbody {
+      tr {
+        td {
           font-size: $default-font-size;
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead, .pb_table_thead {
-        tr, .pb_table_tr {
+      thead {
+        tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th, .pb_table_th {
+          th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
-          td, .pb_table_td {
+      tbody {
+        tr {
+          td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td, .pb_table_td {
+            td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
-            td, .pb_table_td {
+        tbody {
+          tr {
+            td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
+          tbody {
+            tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
+          tbody {
+            tr {
+              td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -4,9 +4,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    thead, .pb_table_thead {
-      tr, .pb_table_tr {
-        th, .pb_table_th {
+    thead {
+      tr {
+        th {
           @include caption;
           border-bottom: 1px solid $border_light;
         }