playbook_ui 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 → 13.14.0.pre.alpha.play1101betaicons1798

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconRotate = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={90}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={180}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={270}
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconRotate

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md

@@ -0,0 +1,11 @@
+![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon(FontAwesome.user, rotation: .right)
+  PbBetaIcon(FontAwesome.user, rotation: .zero)
+  PbBetaIcon(FontAwesome.user, rotation: .obtuse)
+}
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb

@@ -0,0 +1,16 @@
+<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
+
+<br/><br/>
+
+<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx

@@ -0,0 +1,133 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconSizes = (props) => {
+  return (
+    <div>
+      <p>
+        <Icon
+            icon="user"
+            size="lg"
+            {...props}
+        />
+        {' '}
+        <span>{'Large'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="sm"
+            {...props}
+        />
+        {' '}
+        <span>{'Small'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="xs"
+            {...props}
+        />
+        {' '}
+        <span>{'XSmall'}</span>
+      </p>
+
+      <br />
+      <br />
+
+      <p>
+        <Icon
+            icon="user"
+            size="1x"
+            {...props}
+        />
+        {' '}
+        <span>{'1x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        {' '}
+        <span>{'2x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="3x"
+            {...props}
+        />
+        {' '}
+        <span>{'3x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="4x"
+            {...props}
+        />
+        {' '}
+        <span>{'4x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="5x"
+            {...props}
+        />
+        {' '}
+        <span>{'5x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="6x"
+            {...props}
+        />
+        {' '}
+        <span>{'6x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="7x"
+            {...props}
+        />
+        {' '}
+        <span>{'7x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="8x"
+            {...props}
+        />
+        {' '}
+        <span>{'8x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="9x"
+            {...props}
+        />
+        {' '}
+        <span>{'9x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="10x"
+            {...props}
+        />
+        {' '}
+        <span>{'10x'}</span>
+      </p>
+    </div>
+  )
+}
+
+export default IconSizes

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md

@@ -0,0 +1,46 @@
+![icon-size](https://github.com/powerhome/playbook/assets/92755007/b3aa3933-56b1-4fe4-bb8b-00d786abb23a)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon.fontAwesome(.atlas, size: .xSmall)
+  Text("xSmall")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .small)
+  Text("small")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .large)
+  Text("large")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x1)
+  Text("x1")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x2)
+  Text("x2")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x3)
+  Text("x3")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x4)
+  Text("x4")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x5)
+  Text("x5")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x6)
+  Text("x6")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x7)
+  Text("x7")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x8)
+  Text("x8")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x9)
+  Text("x9")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x10)
+  Text("x10")
+}
+
+```

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

@@ -0,0 +1,30 @@
+examples:
+  rails:
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
+
+  react:
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
+
+  swift:
+  - icon_default_swift: Icon Default
+  - icon_rotate_swift: Icon Rotate
+  - icon_flip_swift: Icon Flip
+  - icon_border_swift: Icon Border
+  - icon_sizes_swift: Icon Sizes
+  - icon_props_swift: Props

data/app/pb_kits/playbook/pb_beta_icon/docs/index.js

@@ -0,0 +1,9 @@
+export { default as IconDefault } from './_icon_default.jsx'
+export { default as IconRotate } from './_icon_rotate.jsx'
+export { default as IconFlip } from './_icon_flip.jsx'
+export { default as IconAnimate } from './_icon_animate.jsx'
+export { default as IconPull } from './_icon_pull.jsx'
+export { default as IconBorder } from './_icon_border.jsx'
+export { default as IconSizes } from './_icon_sizes.jsx'
+export { default as IconCustom } from './_icon_custom.jsx'
+export { default as IconFaKit} from './_icon_fa_kit.jsx'

data/app/pb_kits/playbook/pb_beta_icon/icon.html.erb

@@ -0,0 +1,15 @@
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% elsif object.valid_emoji(object.icon) %>
+  <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
+<% else %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname
+  ) %>
+  <%= content_tag(:span, nil,
+      aria: { label: "#{object.icon} icon" }.merge(object.aria),
+      hidden: true
+  ) %>
+<% end %>

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

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/StringConcatenation, Style/HashLikeCase
+
+require "open-uri"
+
+module Playbook
+  module PbBetaIcon
+    class Icon < Playbook::KitBase
+      prop :border, type: Playbook::Props::Boolean,
+                    default: false
+      prop :fixed_width, type: Playbook::Props::Boolean,
+                         default: false
+      prop :flip, type: Playbook::Props::Enum,
+                  values: ["horizontal", "vertical", "both", nil],
+                  default: nil
+      prop :icon
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
+      prop :inverse, type: Playbook::Props::Boolean,
+                     default: false
+      prop :list_item, type: Playbook::Props::Boolean,
+                       default: false
+      prop :pull, type: Playbook::Props::Enum,
+                  values: ["left", "right", nil],
+                  default: nil
+      prop :pulse, type: Playbook::Props::Boolean,
+                   default: false
+      prop :rotation, type: Playbook::Props::Enum,
+                      values: [90, 180, 270, nil],
+                      default: nil
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
+                  default: nil
+      prop :font_style, type: Playbook::Props::Enum,
+                        values: %w[far fas fab fak],
+                        default: "far"
+      prop :spin, type: Playbook::Props::Boolean,
+                  default: false
+
+      def valid_emoji(icon)
+        emoji_regex = /\p{Emoji}/
+        emoji_regex.match?(icon)
+      end
+
+      def classname
+        generate_classname(
+          "pb_icon_kit",
+          font_style_class,
+          icon_class,
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def custom_icon_classname
+        generate_classname(
+          "pb_icon_kit",
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
+      end
+
+    private
+
+      def border_class
+        border ? "fa-border" : nil
+      end
+
+      def fixed_width_class
+        fixed_width ? "fa-fw" : nil
+      end
+
+      def icon_class
+        icon ? "fa-#{icon}" : nil
+      end
+
+      def inverse_class
+        inverse ? "fa-inverse" : nil
+      end
+
+      def list_item_class
+        list_item ? "fa-li" : nil
+      end
+
+      def flip_class
+        case flip
+        when "horizontal"
+          "fa-flip-horizontal"
+        when "vertical"
+          "fa-flip-vertical"
+        when "both"
+          "fa-flip-horizontal fa-flip-vertical"
+        end
+      end
+
+      def pull_class
+        pull ? "fa-pull-#{pull}" : nil
+      end
+
+      def pulse_class
+        pulse ? "fa-pulse" : nil
+      end
+
+      def rotation_class
+        rotation ? "fa-rotate-#{rotation}" : nil
+      end
+
+      def size_class
+        size ? "fa-#{size}" : nil
+      end
+
+      def font_style_class
+        font_style ? font_style.to_s : "far"
+      end
+
+      def spin_class
+        spin ? "fa-spin" : nil
+      end
+    end
+  end
+end
+
+# rubocop:enable Style/StringConcatenation, Style/HashLikeCase

data/app/pb_kits/playbook/pb_beta_icon/icon.test.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import Icon from './_icon'
+
+const testId = "icon-kit"
+
+describe("Icon Kit", () => {
+    test("renders Icon classname", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+    })
+
+    test("renders rotate prop", () => {[
+        "90", "180", "270"].forEach((rotateProp)=> {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+                rotation={rotateProp}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+
+        cleanup()
+    })
+})
+
+    test("renders flip prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                flip="horizontal"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+    })
+
+
+    test("renders spinning icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="spinner"
+                spin
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders border around icon", () => {
+        render(
+            <Icon
+                border
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+    })
+
+    test("renders size prop", () => {
+        ["lg",
+        "sm",
+        "xs",
+        "1x",
+        "2x",
+        "3x",
+        "4x",
+        "5x",
+        "6x",
+        "7x",
+        "8x",
+        "9x",
+        "10x"].forEach(
+            (sizeProp) => {
+            render(
+                <Icon
+                    data={{ testid: testId }}
+                    icon="user"
+                    size={sizeProp}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+
+            cleanup()
+        }) 
+    })
+
+    test("renders fontStyle prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                fontStyle="fas"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+    })
+
+})

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -37,15 +37,10 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
-  
-  &[class*=_truncate] {
-    @include body_truncate;
-  }
 
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
-      @include body_truncate;
     }
   }
 

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -15,12 +15,11 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
-  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | 'link',
 } & GlobalProps
 
@@ -39,21 +38,18 @@ const Body = (props: BodyProps): React.ReactElement => {
     status = null,
     tag = 'div',
     text = '',
-    truncate = null,
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
-  const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
-    buildCss('pb_body_kit', color, variant, status, isTruncated),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )
-  const Tag: React.ReactElement | any = `${tag}`
-
+  const Tag: keyof JSX.IntrinsicElements = `${tag}`
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -36,26 +36,6 @@ $pb_body_status: (
   font-family: $font-family-base;
 }
 
-$pb_body_truncate: (
-  truncate_1: 1,
-  truncate_2: 2,
-  truncate_3: 3,
-  truncate_4: 4,
-  truncate_5: 5
-);
-
-@mixin body_truncate {
-  @each $name, $number in $pb_body_truncate {
-    &[class*=_#{$name}] {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: $number;
-      -webkit-box-orient: vertical; 
-    }
-  }
-}
-
-
 // Colors ======================
 @mixin pb_body_light {
   @include pb_body($text_lt_light);