playbook_ui 13.31.0.pre.alpha.play1262iconstyles3172 → 13.31.0.pre.alpha.play1416movealiaslogic3232

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

@@ -55,74 +55,10 @@ const aliases: AliasesJson = aliasesJson;
 
 
 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 {
@@ -194,44 +130,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' : '',
-    isFA? fontStyle : null, 
+    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-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,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 require "open-uri"
 require "json"
 
@@ -37,8 +39,6 @@ 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)
@@ -80,6 +80,14 @@ module Playbook
         )
       end
 
+      def icon_alias_map
+        return unless Rails.application.config.respond_to?(:icon_alias_path)
+
+        base_path = Rails.application.config.icon_alias_path
+        json = File.read(Rails.root.join(base_path))
+        JSON.parse(json)["aliases"].freeze
+      end
+
       def asset_path
         return unless Rails.application.config.respond_to?(:icon_path)
 
@@ -109,7 +117,7 @@ module Playbook
     private
 
       def resolve_alias(icon)
-        aliases = ALIASES[icon]
+        aliases = icon_alias_map[icon]
         return icon unless aliases
 
         if aliases.is_a?(Array)
@@ -129,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
@@ -143,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
@@ -189,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_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 far pb_nav_list_item_icon_right fa-fw fa-fw 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 far pb_nav_list_item_icon_left fa-fw fa-fw 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_rich_text_editor/_rich_text_editor.tsx

@@ -86,33 +86,18 @@ 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
-
-    // set button attributes
-    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    if (!inlineCodeButton) {
+      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+      blockCodeButton.hidden = true
+      // 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/tokens/_titles.scss

@@ -5,10 +5,11 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
+    $lineHeight: $lh_tighter,
+    $letterSpacing: $lspace_tight
 ){
   font-size: $fontSize;
-  letter-spacing: $lspace_tight;
+  letter-spacing: $letterSpacing;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -29,8 +30,7 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em;
+  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
 @mixin pb_title_dark {

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       28px !default;
+$font_larger:       27px !default;
 $font_large:        20px !default;
-$font_base:         16px !default;
+$font_base:         15.5px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px !default;
-$heading_2: 34px !default;
+$heading_1: 44px !default;
+$heading_2: 32px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           0 !default;
+$lspace_normal:           .003em !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          600 !default;
+$bold:          700 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
+$extrabold:     700 !default;
+$boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       100 !default;
+$lighter:       300 !default;