playbook_ui 13.31.0.pre.alpha.play1262iconstyles3171 → 13.31.0.pre.alpha.powercentrainplaybookpt23212

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,226 +10,3 @@ 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,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"
 
@@ -129,13 +131,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 +143,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 +182,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;