playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2107

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

@@ -0,0 +1,6 @@
+examples:
+  react:
+  - advanced_table_default: Default
+  # - advanced_table_sort: enableSorting
+  
+  

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

@@ -0,0 +1,2 @@
+export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
+export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

@@ -0,0 +1,71 @@
+
+  //animation scss
+  @keyframes wave {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+
+.content-loading {
+  pointer-events: none;
+  p,
+  .pb_body_kit_light,
+  .loading-toggle-icon,
+  .pb_caption_kit_md,
+  h4,
+  .loading-cell {
+    position: relative;
+    color: rgba($white, 0) !important;
+    background: rgba($white, 0) !important;
+    border: 0 !important;
+    &::after {
+      content: "";
+      position: absolute;
+      top: $space-xxs;
+      left: 0;
+      width: 100%;
+      height: calc(100% - #{$space-xxs * 2});
+      display: block;
+      border-radius: $border-rad-light;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: wave;
+      animation-timing-function: linear;
+      background: $silver;
+      background-color: $silver;
+      background-image: linear-gradient(
+        to left,
+        $silver 0%,
+        lighten($silver, 1%) 50%,
+        lighten($silver, 1%) 60%,
+        $silver 80%,
+        $silver 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 800px 104px;
+    }
+  }
+
+  .loading-cell {
+    height: $space_sm + 4;
+  }
+
+  .loading-toggle-icon {
+    width: $space_sm - 1;
+    height: $space_sm - 1;
+    margin-bottom: $space_xxs + 2;
+    &::after {
+      height: $space_sm - 1;
+      border-radius: $border_radius_rounded;
+    }
+  }
+
+  svg,
+  img {
+    visibility: hidden;
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss

@@ -0,0 +1,12 @@
+%primary-color-pseudo {
+  &:hover,
+  &:active {
+    color: $primary;
+  }
+
+  &:focus-visible {
+    border-color: transparent;
+    box-shadow: 0px 0px 0 2px $primary_action;
+    outline: none;
+  }
+}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -10,7 +10,7 @@ type FlexProps = {
   data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",

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

@@ -1,51 +1,9 @@
-$rotate-list: (90, 180, 270);
-$flip-list: (
-  "horizontal": (-1, 1),
-  "vertical": (1, -1),
-  "both": (-1, -1)
-);
-
-@keyframes pb_icon_spin {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-};
-
-svg {
-  &.pb_icon_kit {
-    path {
-      fill: currentColor !important;
-    }
-    @each $r in $rotate-list {
-      &.rotate_#{$r} {
-        transform: rotate(#{$r}deg);
-      }
-    }
-    @each $f, $v in $flip-list {
-      &.flip_#{$f} {
-        transform: scale($v);
-      }
-    }
-    &.pulse {
-      animation-name: pb_icon_spin;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: steps(8);
-    }
-    &.spin {
-      animation-name: pb_icon_spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
   }
 }
 

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

@@ -4,11 +4,10 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
-type IconSizeNames = "lg"
+export type IconSizes = "lg"
 | "xs"
 | "sm"
-
-export type IconSizes = IconSizeNames | "1x"
+| "1x"
 | "2x"
 | "3x"
 | "4x"
@@ -22,7 +21,6 @@ export type IconSizes = IconSizeNames | "1x"
 
 type IconProps = {
   aria?: {[key: string]: string},
-  aspectRatio?: string,
   border?: string,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
@@ -42,66 +40,22 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
-const iconSizeMap = {
-  base: 16,
-  xs: .75,
-  sm: .875,
-  lg: 1.25
+const flipMap = {
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
-const getSvgDimensions = (aspectRatio = '1:1', size: string): {width: number, height: number} | null => {
-  if (!size) return null
-  const aspect = aspectRatio.split(':')
 
-  const scale = size.toLowerCase().endsWith('x') ?
-    parseInt(size.replace(/\x/i, '')) :
-    iconSizeMap[size as IconSizeNames]
-
-  return {
-    width: (iconSizeMap.base * scale) * parseInt(aspect[0]),
-    height: (iconSizeMap.base * scale) * parseInt(aspect[1])
-  }
-}
-
-const flipMap = {
-  fa: {
-    horizontal: 'fa-flip-horizontal',
-    vertical: 'fa-flip-vertical',
-    both: 'fa-flip-horizontal fa-flip-vertical',
-    none: ''
-  },
-  svg: {
-    horizontal: 'flip_horizontal',
-    vertical: 'flip_vertical',
-    both: 'flip_horizontal flip_vertical',
-    none: ''
-  }
-}
-const pulseMap = {
-  fa: 'fa-pulse',
-  svg: 'pulse'
-}
-const spinMap = {
-  fa: 'fa-spin',
-  svg: 'spin'
-}
-const rotateMap = {
-  fa: {
-    90: 'fa-rotate-90',
-    180: 'fa-rotate-180',
-    270: 'fa-rotate-270'
-  },
-  svg: {
-    90: 'rotate_90',
-    180: 'rotate_180',
-    270: 'rotate_270'
-  }
+declare global {
+  // eslint-disable-next-line no-var
+  var POWER_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
 const Icon = (props: IconProps) => {
   const {
     aria = {},
-    aspectRatio,
     border = false,
     className,
     customIcon,
@@ -116,45 +70,45 @@ const Icon = (props: IconProps) => {
     pull,
     pulse = false,
     rotation,
-    size = '1x',
+    size,
     fontStyle = 'far',
     spin = false,
   } = props
 
-  const iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
-  const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+
+  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,
+  }
 
-  const isFA = !iconElement && !customIcon && !iconURL
-  const svgProps = isFA ? null : {...{fill: 'currentColor'}, ...getSvgDimensions(aspectRatio, size)}
+  if (!customIcon && !iconElement) {
+    const PowerIcon: React.FunctionComponent<any> | undefined =
+      window.POWER_ICONS ? window.POWER_ICONS[icon as string] : null
 
-  let classes = classnames(
-    'pb_icon_kit',
-    isFA ? fontStyle : null,
+    if (PowerIcon) {
+      iconElement = <PowerIcon /> as ReactSVGElement
+    } else {
+      faClasses[`fa-${icon}`] = icon as string
+    }
+  }
+
+  const classes = classnames(
+    flipMap[flip],
+    (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
+    (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
+    faClasses,
     globalProps(props),
     className
   )
 
-  const transformClasses = classnames(
-    flip ? flipMap[isFA ? 'fa' : 'svg'][flip] : null,
-    pulse ? pulseMap[isFA ? 'fa' : 'svg'] : null,
-    rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
-    spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
-  )
-  if (transformClasses) classes += ` ${transformClasses}`
-
-  if (isFA) {
-    const faClassList = {
-      'fa-border': border,
-      'fa-fw': (iconElement) ? false : fixedWidth,
-      'fa-inverse': inverse,
-      'fa-li': listItem,
-      [`fa-${size}`]: size,
-      [`fa-pull-${pull}`]: pull,
-    }
-    faClassList[`fa-${icon}`] = icon as string
-    classes += ` ${classnames(faClassList)}`
-  }
-
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
     globalProps(props),
@@ -175,9 +129,10 @@ const Icon = (props: IconProps) => {
             React.cloneElement(iconElement || customIcon, {
               ...dataProps,
               ...htmlProps,
-              ...svgProps,
               className: classes,
               id,
+              width: 'auto',
+              height: 'auto',
             })
           }
         </>
@@ -195,19 +150,6 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
-    else if (iconURL)
-      return (
-        <>
-          <img
-              {...dataProps}
-              {...htmlProps}
-              {...svgProps}
-              className={classes}
-              id={id}
-              src={iconURL}
-          />
-        </>
-      )
     else
       return (
         <>

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

@@ -10,15 +10,6 @@ Pay attention to your custom icon's dimensions and `viewBox` attribute. It is be
 
 You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
 
-### React
-
-- 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
 
 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.rb

@@ -79,18 +79,25 @@ 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(icon || custom_icon)) # rubocop:disable Security/Open
+        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"] = svg_dims[svg_size] * 16
-        svg["width"] = svg_dims[svg_size] * 16
+        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")
+        (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
       end
 
     private
@@ -99,22 +106,6 @@ module Playbook
         size.nil? ? "1x" : size
       end
 
-      def svg_dims
-        { "lg" => 1.25,
-          "xs" => 0.75,
-          "sm" => 0.875,
-          "1x" => 1,
-          "2x" => 2,
-          "3x" => 3,
-          "4x" => 4,
-          "5x" => 5,
-          "6x" => 6,
-          "7x" => 7,
-          "8x" => 8,
-          "9x" => 9,
-          "10x" => 10 }
-      end
-
       def border_class
         border ? "fa-border" : nil
       end

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,11 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-1x fa-angle-down" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
 })
 
 test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-1x fa-users-class" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
 })

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
@@ -9,19 +9,19 @@ type TableProps = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
-  container: boolean,
+  container?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
   dataTable: boolean,
-  disableHover: boolean,
+  disableHover?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  responsive: "collapse" | "scroll" | "none",
-  singleLine: boolean,
-  size: "sm" | "md" | "lg",
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
   sticky?: boolean,
   verticalBorder?: boolean,
-}
+} & GlobalProps
 
 const Table = (props: TableProps) => {
   const {
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
 
   return (
     <table
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
-          'table-card': container,
-          'table-dark': dark,
-          'data_table': dataTable,
-          'single-line': singleLine,
-          'no-hover': disableHover,
-          'sticky-header': sticky,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-      )}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
+            'table-card': container,
+            'table-dark': dark,
+            'data_table': dataTable,
+            'single-line': singleLine,
+            'no-hover': disableHover,
+            'sticky-header': sticky,
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
     >
-      {children}
+        {children}
     </table>
   )
 }

data/app/pb_kits/playbook/playbook-doc.js

@@ -4,6 +4,7 @@ import WebpackerReact from 'webpacker-react'
 
 // KIT EXAMPLES
 import 'pb_form/pb_form_validation'
+import * as AdvancedTable from 'pb_advanced_table/docs'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Background from 'pb_background/docs'
@@ -105,6 +106,7 @@ import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.registerComponents({
+  ...AdvancedTable,
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -17,7 +17,7 @@ type AlignContent = {
 }
 
 type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+  alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
 type AlignSelf = {

data/dist/menu.yml

@@ -43,6 +43,9 @@ kits:
       - name: "table"
         platforms: *web
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
+      - name: "advanced_table"
+        platforms: *react_only
+        description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting. 
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.
@@ -354,4 +357,4 @@ kits:
         description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.