playbook_ui 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

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

@@ -1,3 +1,4 @@
+// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -9,213 +10,3 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
-
-$rotate-list: (90, 180, 270);
-
-@keyframes pb_icon_spin {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-};
-
-svg {
-  &.pb_icon_kit,
-  &.pb_custom_icon{
-    @each $r in $rotate-list {
-      &.rotate_#{$r} {
-        transform: rotate(#{$r}deg);
-      }
-    }
-    &.flip_horizontal {
-      transform: scaleX(-1);
-    }
-    &.flip_vertical {
-      transform: scaleY(-1);
-    }
-    &.flip_horizontal.flip_vertical {
-      transform: scaleX(-1) scaleY(-1);
-    }
-    &.svg-inline--fa {
-      height: 1em;
-      overflow: visible;
-      vertical-align: -.125em
-    }
-    &.svg_inverse {
-      color: #fff;
-    }
-    &.svg_border {
-      border-color: #eee;
-      border-radius: .1em;
-      border-style: solid;
-      border-width: .08em;
-      padding: .2em .25em .15em;
-    }
-    &.svg_fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.svg_li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.pull_left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.pull_right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.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;
-    }
-
-    &.svg_xs {
-      font-size: 0.75em
-    }
-
-    &.svg_sm {
-      font-size: 0.875em
-    }
-
-    &.svg_lg {
-      font-size: 1.25em
-    }
-
-    &.svg_1x {
-      font-size: 1em
-    }
-
-    &.svg_2x {
-      font-size: 2em
-    }
-
-    &.svg_3x {
-      font-size: 3em
-    }
-
-    &.svg_4x {
-      font-size: 4em
-    }
-
-    &.svg_5x {
-      font-size: 5em
-    }
-
-    &.svg_6x {
-      font-size: 6em
-    }
-
-    &.svg_7x {
-      font-size: 7em
-    }
-
-    &.svg_8x {
-      font-size: 8em
-    }
-
-    &.svg_9x {
-      font-size: 9em
-    }
-
-    &.svg_10x {
-      font-size: 10em
-    }
-    &.fa-xs {
-      font-size: .75em;
-      line-height: .0833333337em;
-      vertical-align: .125em
-    }
-    &.fa-sm {
-      font-size: .875em;
-      line-height: .0714285718em;
-      vertical-align: .0535714295em
-    }
-    &.fa-lg {
-      font-size: 1.25em;
-      line-height: .05em;
-      vertical-align: -.075em
-    }
-    &.fa-pull-left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.fa-pull-right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.fa-li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.svg-inline--fa.fa-li {
-      width: 2em;
-      top: .25em
-    }
-    &.svg-inline--fa.fa-fw {
-      width: 1.25em;
-    }
-    &.fa-fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.fa-layers {
-      display: inline-block;
-      height: 1em;
-      position: relative;
-      text-align: center;
-      vertical-align: -.125em;
-      width: 1em
-    }
-    &.fa-2x {
-      font-size: 2em
-    }
-    &.fa-3x {
-      font-size: 3em
-    }
-    &.fa-flip {
-      animation-name: fa-flip;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: ease-in-out;
-    }
-    &.fa-spin {
-      animation-name: fa-spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-    &.fa-pulse {
-      animation: fa-spin 1s infinite linear;
-    }
-  }
-}

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

@@ -41,74 +41,10 @@ type IconProps = {
 } & GlobalProps
 
 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'
-  }
-}
-
-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",
-    "": ""
-  }
-
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
 declare global {
@@ -163,42 +99,16 @@ const Icon = (props: IconProps) => {
     }
   }
 
-  const isFA = !iconElement && !customIcon 
-
-  let classes = classnames(
+  const classes = classnames(
+    flipMap[flip],
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
+    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,
-    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-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),

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from 'playbook-ui'
+import { Icon } from '../../'
 
 const config = {
   icon: (

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

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 require "open-uri"
 require "json"
 
@@ -115,8 +117,6 @@ module Playbook
     private
 
       def resolve_alias(icon)
-        return icon unless icon_alias_map
-
         aliases = icon_alias_map[icon]
         return icon unless aliases
 
@@ -137,13 +137,11 @@ module Playbook
       end
 
       def border_class
-        prefix = is_svg? ? "svg_border" : "fa-border"
-        border ? prefix : nil
+        border ? "fa-border" : nil
       end
 
       def fixed_width_class
-        prefix = is_svg? ? "svg_fw" : "fa-fw"
-        fixed_width ? prefix : nil
+        fixed_width ? "fa-fw" : nil
       end
 
       def icon_class
@@ -151,45 +149,38 @@ module Playbook
       end
 
       def inverse_class
-        class_name = is_svg? ? "svg_inverse" : "fa-inverse"
-        inverse ? class_name : nil
+        inverse ? "fa-inverse" : nil
       end
 
       def list_item_class
-        class_name = is_svg? ? "svg_li" : "fa-li"
-        list_item ? class_name : nil
+        list_item ? "fa-li" : nil
       end
 
       def flip_class
-        prefix = is_svg? ? "flip_" : "fa-flip-"
         case flip
         when "horizontal"
-          "#{prefix}horizontal"
+          "fa-flip-horizontal"
         when "vertical"
-          "#{prefix}vertical"
+          "fa-flip-vertical"
         when "both"
-          "#{prefix}horizontal #{prefix}vertical"
+          "fa-flip-horizontal fa-flip-vertical"
         end
       end
 
       def pull_class
-        class_name = is_svg? ? "pull_#{pull}" : "fa-pull-#{pull}"
-        pull ? class_name : nil
+        pull ? "fa-pull-#{pull}" : nil
       end
 
       def pulse_class
-        class_name = is_svg? ? "pulse" : "fa-pulse"
-        pulse ? class_name : nil
+        pulse ? "fa-pulse" : nil
       end
 
       def rotation_class
-        class_name = is_svg? ? "rotate_#{rotation}" : "fa-rotate-#{rotation}"
-        rotation ? class_name : nil
+        rotation ? "fa-rotate-#{rotation}" : nil
       end
 
       def size_class
-        class_name = is_svg? ? "svg_#{size}" : "fa-#{size}"
-        size ? class_name : nil
+        size ? "fa-#{size}" : nil
       end
 
       def font_style_class
@@ -197,9 +188,10 @@ module Playbook
       end
 
       def spin_class
-        class_name = is_svg? ? "spin" : "fa-spin"
-        spin ? class_name : nil
+        spin ? "fa-spin" : 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_icon_circle/_icon_circle.scss

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: calc($size/2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
   }
 
   @each $color_name, $color_value in $colors {
-    &[class*=_#{"" + $color_name}] {
+    &[class*=_#{$color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconCircle } from 'playbook-ui'
+import { IconCircle } from '../..'
 
 const IconCircleSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueColor = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueVertical = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: calc($space-xs/1.5);
+    margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from 'playbook-ui'
+import { LabelValue } from '../../'
 
 const LabelValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from 'playbook-ui'
+import { LabelValue } from '../../'
 
 const LabelValueDetails = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, LabelValue, Title } from 'playbook-ui'
+import { Flex, LabelValue, Title } from '../../'
 
 const LabelValueDetailsExamples = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, cleanup } from "../utilities/test-utils"
-import { Layout, Card } from "playbook-ui"
+import { Layout, Card } from ".."
 
 function LayoutTest(props) {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendCustomColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendPrefix = (props) => (
   <div>

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import { noop } from 'lodash'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-multi-comp */
+/* @flow */
 import React, { useContext } from "react";
 import classnames from "classnames";
 import {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import { Flex, Image } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
+import { Flex, Image, Button, Body, FlexItem } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "playbook-ui";
+import { Flex, Image, Title, Pill } from "../../";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import { Flex, Image } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {