playbook_ui 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171

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

@@ -1,4 +1,3 @@
-// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -10,3 +9,226 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
+
+$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,
+  &.pb_custom_icon{
+    @each $r in $rotate-list {
+      &.rotate_#{$r} {
+        transform: rotate(#{$r}deg);
+      }
+    }
+    @each $f, $v in $flip-list {
+      &.flip_#{$f} {
+        transform: scale($v);
+      }
+    }
+    &.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: var(--fa-pull-margin, .3em)
+    }
+
+    &.fa-pull-right {
+      float: right;
+      margin-left: var(--fa-pull-margin, .3em)
+    }
+    &.fa-li {
+      left: calc(var(--fa-li-width, 2em) * -1);
+      position: absolute;
+      text-align: center;
+      width: var(--fa-li-width, 2em);
+      line-height: inherit
+    }
+    &.svg-inline--fa.fa-li {
+      width: var(--fa-li-width, 2em);
+      top: .25em
+    }
+    &.svg-inline--fa.fa-fw {
+      width: var(--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 {
+      -webkit-animation-name: fa-flip;
+      animation-name: fa-flip;
+      -webkit-animation-delay:  0s;
+      animation-delay: 0s;
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+      -webkit-animation-duration: 1s;
+      animation-duration: 1s;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -webkit-animation-timing-function: ease-in-out;
+      animation-timing-function: ease-in-out;
+    }
+    &.fa-spin {
+      -webkit-animation-name: fa-spin;
+      animation-name: fa-spin;
+      -webkit-animation-delay: 0s;
+      animation-delay: 0s;
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+      -webkit-animation-duration: 2s;
+      animation-duration: 2s;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      animation-timing-function: linear;
+    }
+    &.fa-pulse {
+      animation: fa-spin 1s infinite linear;
+    }
+  }
+}

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

@@ -55,10 +55,74 @@ 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 {
@@ -130,16 +194,44 @@ const Icon = (props: IconProps) => {
     }
   }
 
-  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),

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

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/HashLikeCase
-
 require "open-uri"
 require "json"
 
@@ -131,11 +129,13 @@ module Playbook
       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
@@ -143,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
@@ -182,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_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_rich_text_editor/_rich_text_editor.tsx

@@ -86,18 +86,33 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
-    // replace default trix "block code" button with "inline code" button
     let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) {
-      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
-      blockCodeButton.hidden = true
-      // set button attributes
-      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    } 
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+
+    // set button attributes
+    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
+    const getCodeFormattingType = (): string => {
+      if (editor.attributeIsActive('code')) return 'block'
+      if (editor.attributeIsActive('inlineCode')) return 'inline'
+
+      const range = editor.getSelectedRange()
+      if (range[0] == range[1]) return 'block'
+
+      const text = editor.getSelectedDocument().toString().trim()
+      return /\n/.test(text) ? 'block' : 'inline'
+    }
+
+    // DOM event listeners
+    element.addEventListener('trix-selection-change', () => {
+      const type = getCodeFormattingType()
+      blockCodeButton.hidden = type == 'inline'
+      inlineCodeButton.hidden = type == 'block'
+    })
+
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),

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

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps): React.ReactElement => {
+const Table = (props: TableProps) => {
     const {
         aria = {},
         children,

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector(): string {
+  static get selector() {
     return '.table-responsive-collapse'
   }
 
-  connect(): void {
+  connect() {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      const headers: string[] = [];
+      let headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        const colSpan = header.colSpan
+        let colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
+const TableBody = (props: TableBodyPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes): React.ReactElement => {
+const TableCell = (props: TableCellPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
+const TableHead = (props: TableHeadPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
+const TableHeader = (props: TableHeaderPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes): React.ReactElement => {
+const TableRow = (props: TableRowPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-     />)
+    />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
-  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
+  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',