playbook_ui 13.30.0 → 13.31.0.pre.alpha.play1262iconstyles3171

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

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import aliasesJson from './icon_aliases.json'
 
 export type IconSizes = "lg"
 | "xs"
@@ -40,11 +41,88 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
+type AliasType = string | string[];
+
+interface Aliases {
+  [key: string]: AliasType;
+}
+
+interface AliasesJson {
+  aliases: Aliases;
+}
+
+const aliases: AliasesJson = aliasesJson;
+
+
 const flipMap = {
-  horizontal: 'fa-flip-horizontal',
-  vertical: 'fa-flip-vertical',
-  both: 'fa-flip-horizontal fa-flip-vertical',
-  none: ""
+  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'
+  }
+}
+
+const sizeMap = {
+  fa: {
+    "lg": "fa-lg",
+    "xs": "fa-xs",
+    "sm": "fa-sm",
+    "1x": "fa-1x",
+    "2x": "fa-2x",
+    "3x": "fa-3x",
+    "4x": "fa-4x",
+    "5x": "fa-5x",
+    "6x": "fa-6x",
+    "7x": "fa-7x",
+    "8x": "fa-8x",
+    "9x": "fa-9x",
+    "10x": "fa-10x",
+    "": ""
+  },
+  svg: {
+    "lg": "svg_lg",
+    "xs": "svg_xs",
+    "sm": "svg_sm",
+    "1x": "svg_1x",
+    "2x": "svg_2x",
+    "3x": "svg_3x",
+    "4x": "svg_4x",
+    "5x": "svg_5x",
+    "6x": "svg_6x",
+    "7x": "svg_7x",
+    "8x": "svg_8x",
+    "9x": "svg_9x",
+    "10x": "svg_10x",
+    "": ""
+  }
+
 }
 
 declare global {
@@ -52,6 +130,22 @@ declare global {
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
+// Resolve alias function
+const resolveAlias = (icon: string): string => {
+  const alias = aliases.aliases[icon];
+
+  if (alias) {
+    if (Array.isArray(alias)) {
+      return alias[0];
+    } else {
+      return alias;
+    }
+  }
+
+  return icon;
+};
+
+
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -74,7 +168,8 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
-  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+  const resolvedIcon = resolveAlias(icon as string)
+  let iconElement: ReactSVGElement | null = typeof(resolvedIcon) === "object" ? resolvedIcon : null
 
   const faClasses = {
     'fa-border': border,
@@ -90,32 +185,60 @@ const Icon = (props: IconProps) => {
 
   if (!customIcon && !iconElement) {
     const PowerIcon: React.FunctionComponent<any> | undefined =
-      window.PB_ICONS ? window.PB_ICONS[icon as string] : null
+      window.PB_ICONS ? window.PB_ICONS[resolvedIcon as string] : null
 
     if (PowerIcon) {
       iconElement = <PowerIcon /> as ReactSVGElement
     } else {
-      faClasses[`fa-${icon}`] = icon as string
+      faClasses[`fa-${resolvedIcon}`] = resolvedIcon as string
     }
   }
 
-  const classes = classnames(
-    flipMap[flip],
+  const isFA = !iconElement && !customIcon 
+
+  let classes = classnames(
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
-    faClasses,
+    isFA? fontStyle : null, 
     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,
+    size ? sizeMap[isFA ? 'fa' : 'svg'][size] : null,
+    border ? isFA ? 'fa-border' : 'svg_border' : null,
+    fixedWidth ? isFA ? 'fa-fw' : 'svg_fw' : null,
+    inverse ? isFA ? 'fa-inverse' : 'svg_inverse' : null,
+    listItem ? isFA ? 'fa-li' : 'svg_li' : null,
+    pull ? isFA ? `fa-pull-${pull}` : `pull_${pull}` : null,
+  )
+  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),
     className
   )
 
-  aria.label ? null : aria.label = `${icon} icon`
+  aria.label ? null : aria.label = `${resolvedIcon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -137,7 +260,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(resolvedIcon as string))
       return (
         <>
           <span
@@ -146,7 +269,7 @@ const Icon = (props: IconProps) => {
               className={classesEmoji}
               id={id}
           >
-            {icon}
+            {resolvedIcon}
           </span>
         </>
       )

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

@@ -1 +1 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

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

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

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

@@ -1,8 +1,7 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/HashLikeCase
-
 require "open-uri"
+require "json"
 
 module Playbook
   module PbIcon
@@ -38,6 +37,8 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
+      ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
+
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
@@ -83,7 +84,8 @@ module Playbook
         return unless Rails.application.config.respond_to?(:icon_path)
 
         base_path = Rails.application.config.icon_path
-        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{icon}.svg")).first
+        resolved_icon = resolve_alias(icon)
+        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{resolved_icon}.svg")).first
         icon_path if icon_path && File.exist?(icon_path)
       end
 
@@ -106,16 +108,34 @@ module Playbook
 
     private
 
+      def resolve_alias(icon)
+        aliases = ALIASES[icon]
+        return icon unless aliases
+
+        if aliases.is_a?(Array)
+          aliases.find { |alias_name| file_exists?(alias_name) } || icon
+        else
+          aliases
+        end
+      end
+
+      def file_exists?(alias_name)
+        base_path = Rails.application.config.icon_path
+        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
+      end
+
       def svg_size
         size.nil? ? "1x" : size
       end
 
       def border_class
-        border ? "fa-border" : nil
+        prefix = is_svg? ? "svg_border" : "fa-border"
+        border ? prefix : nil
       end
 
       def fixed_width_class
-        fixed_width ? "fa-fw" : nil
+        prefix = is_svg? ? "svg_fw" : "fa-fw"
+        fixed_width ? prefix : nil
       end
 
       def icon_class
@@ -123,38 +143,45 @@ module Playbook
       end
 
       def inverse_class
-        inverse ? "fa-inverse" : nil
+        class_name = is_svg? ? "svg_inverse" : "fa-inverse"
+        inverse ? class_name : nil
       end
 
       def list_item_class
-        list_item ? "fa-li" : nil
+        class_name = is_svg? ? "svg_li" : "fa-li"
+        list_item ? class_name : nil
       end
 
       def flip_class
+        prefix = is_svg? ? "flip_" : "fa-flip-"
         case flip
         when "horizontal"
-          "fa-flip-horizontal"
+          "#{prefix}horizontal"
         when "vertical"
-          "fa-flip-vertical"
+          "#{prefix}vertical"
         when "both"
-          "fa-flip-horizontal fa-flip-vertical"
+          "#{prefix}horizontal #{prefix}vertical"
         end
       end
 
       def pull_class
-        pull ? "fa-pull-#{pull}" : nil
+        class_name = is_svg? ? "pull_#{pull}" : "fa-pull-#{pull}"
+        pull ? class_name : nil
       end
 
       def pulse_class
-        pulse ? "fa-pulse" : nil
+        class_name = is_svg? ? "pulse" : "fa-pulse"
+        pulse ? class_name : nil
       end
 
       def rotation_class
-        rotation ? "fa-rotate-#{rotation}" : nil
+        class_name = is_svg? ? "rotate_#{rotation}" : "fa-rotate-#{rotation}"
+        rotation ? class_name : nil
       end
 
       def size_class
-        size ? "fa-#{size}" : nil
+        class_name = is_svg? ? "svg_#{size}" : "fa-#{size}"
+        size ? class_name : nil
       end
 
       def font_style_class
@@ -162,10 +189,9 @@ module Playbook
       end
 
       def spin_class
-        spin ? "fa-spin" : nil
+        class_name = is_svg? ? "spin" : "fa-spin"
+        spin ? class_name : nil
       end
     end
   end
 end
-
-# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_icon/icon_aliases.json

@@ -0,0 +1,39 @@
+{
+    "aliases": {
+      "arrow-alt-circle-right": "circle-right",
+      "angles-down": "angle-double-down",
+      "arrow-alt-down": "down",
+      "arrow-alt-up": "up",
+      "arrow-right-long": "long-arrow-right",
+      "arrow-to-bottom": "arrow-down-to-line",
+      "arrows-h": "arrows-left-right",
+      "calendar-days": "calendar-alt",
+      "circle-arrow-right": "arrow-circle-right",
+      "clock-rotate-left": "history",
+      "close": [
+        "times",
+        "xmark"
+      ],
+      "ellipsis-h": "ellipsis",
+      "exclamation-circle": "circle-exclamation",
+      "external-link": "arrow-up-right-from-square",
+      "file-lines": "file-alt",
+      "gear": "cog",
+      "home": "house",
+      "info-circle": "circle-info",
+      "map-o": "map",
+      "message": "comment-alt",
+      "minus-circle": "circle-minus",
+      "money": "money-bill",
+      "mouse-pointer": "arrow-pointer",
+      "nitro": "nitro-n",
+      "play-circle": "circle-play",
+      "plus-circle": "circle-plus",
+      "plus-square": "square-plus",
+      "powergon": "powergon-p",
+      "question-circle": "circle-question",
+      "roofing": "product-roofing",
+      "shelves": "inventory",
+      "th-list": "table-list"
+    }
+  }

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -10,7 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  draggable?: boolean;
+  enableDrag?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -32,7 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    draggable = false,
+    enableDrag = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -54,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant, draggable });
+      return React.cloneElement(child, { text, variant, enableDrag });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -74,7 +74,7 @@ const List = (props: ListProps) => {
   return (
     <>
     {
-      draggable ? (
+      enableDrag ? (
         <Draggable.Container>
      <div className={classes}>
       {ordered ? (

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -11,6 +11,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
+  dragId?: string,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -23,7 +24,8 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
-    draggable = false,
+    enableDrag,
+    dragId, 
     dragHandle = true,
     htmlOptions = {},
     id,
@@ -42,8 +44,10 @@ const ListItem = (props: ListItemProps) => {
   return (
     <>
     {
-      draggable ? (
-        <Draggable.Item id={id}>
+      enableDrag ? (
+        <Draggable.Item 
+            dragId={dragId}
+        >
         <li
             {...ariaProps}
             {...dataProps}

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 fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far far pb_nav_list_item_icon_right fa-fw fa-fw fa-angle-down" />')
 })
 
 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 fa-fw fa-users-class pb_nav_list_item_icon_left" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far far pb_nav_list_item_icon_left fa-fw fa-fw fa-users-class" />')
 })

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("nav", props: { variant: "bold" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false }) do %>
         <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -9,6 +9,7 @@ const CollapsibleNav = (props) => {
     >
       <NavItem
           active
+          collapsed={false}
           collapsible 
           iconLeft="city" 
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +1,3 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+
+The optional `collapsed` prop can also be used to set the default state for the collapsed nav on first render of the page. `collapsed` takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -22,7 +22,7 @@
           </span>
         <% end %>    
        <% end %>
-      <%= pb_rails("collapsible/collapsible_content") do %>
+      <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -12,6 +12,7 @@ module Playbook
                          default: "regular"
       prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
+      prop :collapsed, type: Playbook::Props::Boolean, default: true
       prop :link
       prop :text
       prop :collapsible_trail, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+                <th>Column 5</th>
+            </tr>
+        </thead>
+        <tbody>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1,7 @@
-Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
 
-The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
 
-The `position` key accepts `top`, `bottom`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -2,3 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -0,0 +1,27 @@
+<%= pb_content_tag(:div,
+aria: object.aria,
+class: object.classname,
+data: object.data,
+id: object.id,
+**combined_html_options) do %>
+    <% if is_size_percentage %>
+        <div class="overlay_linear_gradient"
+        style="background: <%= previous_overlay %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="overlay_linear_gradient"
+            style="background: <%= subsequent_overlay %>"></div>
+        <% end %>
+
+    <% else %>
+        <div class="<%= previous_overlay_class_name %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
+        <% end %>
+    <% end %>
+<% end %>