playbook_ui 12.33.1.pre.alpha.PLAY933navkitcollapsible994 → 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33130ba9d6074894b7db63e664ca3a35730c9ac366285de0bcfb7bc78fbb88a9
-  data.tar.gz: e2b5fe4b62c4117d14b09cdd7e9ec93de3678c54b8575b4c1e6ccf26edac759f
+  metadata.gz: de8314a6b967b5e972e46892edd4fe1c7b9dfcb9ca199120cc898e92724b137a
+  data.tar.gz: 4f323f8d98c5219d26de002ed897bf31ab5dee71af172727559e3b1aca47b04c
 SHA512:
-  metadata.gz: 1ec5221a8aa347f88b9483e371eefafae1fbdd9e340e7b8029fa077eac7f03c3ef5536564b677367698b58489dee4415b77298de4efa5ac62d08078eb8dde54e
-  data.tar.gz: e95ca7bbcba72fbc6fc2309a09aec09f4b9ae3ab616837192a520c1b337b221a2656062f9ebbb27ae4832df39b592453d56cc39c436f533e8f32490e0ca586a3
+  metadata.gz: 2fb6010127b3e609045f7b7b6ba41aa650ed266e00b8b0660a4b9e544568300b2a7a7722a6b43f9913bc2791ef7234522b303433a566fa52bf95345ecf13ef89
+  data.tar.gz: 4bf867ee4ee1ef8fa70d12a0fd5bd61efbdbab94d0a7b03f3060857eac345c75c4de7a02bb65ef200f5a5c1e801317d6e8208e55cba22f8fee32a553728860ae

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,9 @@
 @import "./button_mixins";
 @import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/typography";
 
 $pb_button_sizes: (
   "sm":   0.75rem,
@@ -30,6 +34,34 @@ $pb_button_sizes: (
   &[class*=_link]  {
     @include pb_button_link;
   }
+  &[class*=_reaction] {
+    background-color: $card_light;
+    min-width: 40px;
+    border-radius: $border_radius_rounded;
+    border: 1px solid $border_light;
+    color: $text_lt_light;
+    padding: ($space_xxs - 2) $space_xs;
+    min-height: $space_md + 4;
+
+    .pb_icon_kit_emoji, .pb_icon_kit {
+      font-size: $font_base;
+    }
+    &:hover {
+      background-color: $bg_light;
+    }
+    &.active {
+      border-color:transparent;
+      box-shadow: 0px 0px 0 2px $primary_action;
+      &:hover {
+        background-color: rgba($primary, 0.03);
+      }
+    }
+  }
+
+  &.reaction_default {
+    padding: ($space_xxs + 1) ($space_sm - 4);
+    color: $text_lt_lighter;
+  }
 
   // Disabled =================
   &[class*=_disabled]  {

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -4,6 +4,8 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
+import Caption from "../pb_caption/_caption"
+import Flex from "../pb_flex/_flex"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -11,11 +13,13 @@ type ButtonPropTypes = {
   aria?: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string | string[],
+  count?: number,
   data?: { [key: string]: string },
   disabled?: boolean,
   fixedWidth?: boolean,
   form?: string,
   fullWidth?: boolean,
+  highlight?: boolean,
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -30,14 +34,22 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link',
+  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
+const isValidEmoji = (emoji: string) => {
+  // Using regular expression to check if the string is a valid emoji/emoji Unicode
+  const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+  return emojiRegex.test(emoji);
+};
+
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
     disabled = false,
     fullWidth = false,
+    highlight,
+    icon,
     loading = false,
     type = 'inline',
     variant = 'primary',
@@ -52,6 +64,8 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
   className += `${size !== null ? ` size_${size}` : ''}`
+  className += `${variant === 'reaction' && !isValidEmoji(icon) ? ` reaction_default` : ''}`
+  className += `${variant === 'reaction' && highlight ? ` active` : ''}`
 
   return className
 }
@@ -61,6 +75,7 @@ const Button = (props: ButtonPropTypes) => {
     aria = {},
     children,
     className,
+    count,
     data = {},
     disabled,
     icon = null,
@@ -75,6 +90,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    variant,
     form = null
   } = props
 
@@ -131,41 +147,77 @@ const Button = (props: ButtonPropTypes) => {
     return null
   }
 
-  const displayButton = () => {    
-    if (link)
+  const displayButton = () => {
+    if (link) {
       return (
         <a
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            href={link}
-            id={id}
-            rel={target !== 'child' ? 'noreferrer' : null}
-            role="link"
-            tabIndex={tabIndex}
-            target={getTargetAttribute()}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          href={link}
+          id={id}
+          rel={target !== "child" ? "noreferrer" : null}
+          role="link"
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
-      )
-    else
+      );
+    } else if (variant === "reaction") {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
+        >
+          {icon && isValidEmoji(icon) && (
+            <Flex align='center'>
+              <Icon icon={icon} />
+              {count && (
+                <Caption paddingLeft="xxs" size="xs">
+                  {count}
+                </Caption>
+              )}
+            </Flex>
+           )
+          }
+          {
+            !isValidEmoji(icon) && (
+              <Icon icon={icon ? icon : "face-smile-plus"} />
+            )
+          }
+
+        
+        </button>
+      );
+    } else {
+      return (
+        <button
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {ifLoading()}
         </button>
-      )
+      );
+    }
   }
 
   return (

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,21 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
+    <% if object.variant === "reaction" %>
+        <% if icon && object.valid_emoji(object.icon) %>
+            <%= pb_rails("flex", props:{ align: "center" }) do %>
+                <%= pb_rails("icon", props: { icon: "#{icon}"}) %>
+                <% if object.count %>
+                    <%= pb_rails("caption", props: { text: "#{count}", size: "xs", padding_left:"xxs" }) %>
+                <% end %>
+            <% end %>
+        <% elsif !object.valid_emoji(object.icon) %>
+            <% if object.icon %>
+                <%= pb_rails("icon", props: { icon: "#{icon}" }) %>
+            <% else %>
+                <%= pb_rails("icon", props: { icon: "face-smile-plus" }) %>
+            <% end %>
+        <% end %>
+    <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
@@ -12,5 +28,6 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
         </span>
     <% end %>
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -16,8 +16,11 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link],
+                     values: %w[primary secondary link reaction],
                      default: "primary"
+      prop :count, type: Playbook::Props::Number
+      prop :highlight, type: Playbook::Props::Boolean,
+                       default: false
       prop :target
       prop :text
       prop :type
@@ -63,9 +66,14 @@ module Playbook
         link ? "a" : "button"
       end
 
+      def valid_emoji(icon)
+        emoji_regex = /\p{Emoji}/
+        emoji_regex.match?(icon)
+      end
+
       def classname
         button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class
+        button_class + size_class + default_reaction_class + highlight_active
       end
 
     private
@@ -85,6 +93,14 @@ module Playbook
       def size_class
         size ? " size_#{size}" : ""
       end
+
+      def default_reaction_class
+        variant === "reaction" && !object.valid_emoji(object.icon) ? " reaction_default" : ""
+      end
+
+      def highlight_active
+        variant === "reaction" && object.highlight ? " active" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
+
+
+<script>
+    function renderButtonReaction() {
+
+        let highlightActive = false;
+
+        function toggleHighlight() {
+        let reactionCount = 153;
+        console.log("toggleHighlight", highlightActive)
+        highlightActive = !highlightActive;
+        const innerCountElement = document.querySelector(".count .pb_caption_kit_xs.pl_xxs")
+        const firstButton = document.getElementById("reaction-button-highlight")
+        firstButton.classList.add(highlightActive && "active")
+        firstButton.classList.remove(!highlightActive && "active")
+        innerCountElement.innerHTML = highlightActive ? reactionCount + 1 : reactionCount;
+        console.log("element", innerCountElement)
+        }
+        
+        const button1 = document.getElementById("reaction-button-highlight")
+        button1.addEventListener("click", toggleHighlight);
+
+    }
+    renderButtonReaction();
+</script>
+

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -0,0 +1,47 @@
+import React, {useState} from "react"
+import { Button } from "../../"
+
+const ButtonReaction = (props) => {
+
+const [highlightActive, setHighlightActive] =useState(false)
+const reactionCount = 153
+
+return (
+  <div>
+    <Button
+        count={highlightActive ? (reactionCount + 1) : reactionCount}
+        highlight = {highlightActive}
+        icon="&#127881;"
+        onClick={()=> setHighlightActive(!highlightActive)}
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        count={5}
+        icon="😍"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        icon="user"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+
+
+    </div>
+)
+}
+
+export default ButtonReaction

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md

@@ -0,0 +1,3 @@
+The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
+
+Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -13,6 +14,7 @@ examples:
   
   react:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

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

@@ -8,4 +8,5 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
-export { default as ButtonHover } from './_button_hover.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'
+export {default as ButtonReaction } from './_button_reaction.jsx'

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -7,18 +7,17 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
-import { IconSizes } from "../pb_icon/_icon"
+import IconSizes from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: JSX.Element | [] | any,
+  children?: JSX.Element | [],
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
   data?: object,
-  icon?: Object,
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
-  iconSize?: IconSizes
+  iconSize?: typeof IconSizes
   id?: string,
   padding?: string,
 }
@@ -38,7 +37,6 @@ const Collapsible = ({
   children = [],
   collapsed = true,
   data = {},
-  icon,
   iconColor = 'default',
   iconSize,
   id,
@@ -66,7 +64,7 @@ const Collapsible = ({
   )
 
   return (
-    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, iconSize, iconColor }}>
       <div
           {...ariaProps}
           {...dataProps}

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames'
-import React, { useContext, useRef, useEffect } from 'react'
+import React, { useContext } from 'react'
+import AnimateHeight from 'react-animate-height'
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
-import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
 
@@ -21,25 +21,17 @@ const CollapsibleContent = ({
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props, { padding })
-  const contentRef = useRef(null);
-
-  useEffect(() => {
-    // Use the showElement and hideElement functions based on the context value
-    if (contentRef.current) {
-      if (context.collapsed) {
-        hideElement(contentRef.current);
-      } else {
-        showElement(contentRef.current);
-      }
-    }
-  }, [context.collapsed]);
 
   return (
-    <div ref={contentRef}
-      data-collapsible-content="true" 
-      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
-      {children}
-    </div>
+    <AnimateHeight
+        duration={400}
+        height={context.collapsed ? 0 : 'auto'}
+        id="bottom-section"
+    >
+      <div className={classnames(contentCSS, className, contentSpacing)}>
+        {children}
+      </div>
+    </AnimateHeight>
   )
 }
 

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,7 +7,6 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Icon, { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
 
 
@@ -40,35 +39,24 @@ type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success
 
 type IconProps = {
   collapsed: boolean | (()=> void)
-  icon?: string[] | string
   iconColor?: IconColors
-  iconSize?: IconSizes
+  iconSize?: string | (() => void)
 }
 
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
+const Icon = ({ collapsed, iconSize, iconColor }: IconProps) => {
+  const direction = collapsed ? 'down' : 'up'
+  const size = iconSize
   const color = colorMap[iconColor]
 
   return (
-    <>
-      {collapsed ? (
-        <div
-          className="icon_wrapper"
-          key="chevron-down"
-          style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? icon[0] : "chevron-down"} size={iconSize} />
-        </div>
-      ) : (
-        <div
-          className="icon_wrapper"
-          key="chevron-up"
-          style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? icon[1] : "chevron-up"} size={iconSize} />
-        </div>
-      )}
-    </>
-  );
+    <div
+        className="icon_wrapper"
+        key={direction}
+        style={{ verticalAlign: 'middle', color: color }}
+    >
+      <i className={`far fa-chevron-${direction} fa-fw ${size && `fa-${size}`}`} />
+    </div>
+  )
 }
 
 const CollapsibleMain = ({
@@ -91,11 +79,10 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <ToggleIcon
+            <Icon
                 collapsed={context.collapsed as () => void}
                 iconColor={context.iconColor as IconColors}
-                iconSize={context.iconSize as IconSizes}
-                icon={context.icon as string[] | string}
+                iconSize={context.iconSize}
             />
             </FlexItem>
         </Flex>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -10,13 +10,8 @@
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
         <div style="color: <%= object.icon_color %>">
-        <% if object.icon.present? %>
-          <%= pb_rails("icon", props: { icon: "#{icon[0]}", id:"collapsible_open_icon", size: object.size }) %>
-          <%= pb_rails("icon", props: { icon: "#{icon[1]}", id:"collapsible_close_icon", size: object.size }) %>
-        <% else %>
-          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
-          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
-        <% end %>
+          <i class="far fa-chevron-down <%= object.icon_size %>"></i>
+          <i class="far fa-chevron-up <%= object.icon_size %>"></i>
         </div>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb

@@ -6,8 +6,6 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: %w[default light lighter link success error],
                    default: "default"
-      prop :icon, type: Playbook::Props::Array,
-                  default: []
       prop :size, type: Playbook::Props::Enum,
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
@@ -19,6 +17,13 @@ module Playbook
         generate_classname("pb_collapsible_main_kit", padding, separator: " ")
       end
 
+      def icon_size
+        return "" if size.nil?
+
+        size_object = { 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" }
+        size_object[size.to_sym]
+      end
+
       def icon_color
         return "" if color.nil?
 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md

@@ -1,4 +1,4 @@
 ##### Prop
-This kit uses `icon` sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:
+This kit uses `icon` sizes. If you don't give it a size, it will default to medium. You can be replaced with the sizes below:
 
 * `lg` `xs` `sm` `1x` `2x` `3x` `4x` `5x` `6x` `7x` `8x` `9x` `10x`

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

@@ -4,10 +4,8 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
-  - collapsible_color: Color
-  - collapsible_icons: Custom Icons
+  - collapsible_color: Color

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

@@ -1,4 +1,3 @@
 export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
-export { default as CollapsibleIcons } from './_collapsible_icons.jsx'

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -2,8 +2,8 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const MAIN_SELECTOR = '[data-collapsible-main]'
 const CONTENT_SELECTOR = '[data-collapsible-content]'
-const DOWN_ARROW_SELECTOR = '#collapsible_open_icon'
-const UP_ARROW_SELECTOR = '#collapsible_close_icon'
+const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
+const UP_ARROW_SELECTOR = '.fa-chevron-up'
 
 export default class PbCollapsible extends PbEnhancedElement {
   static get selector() {
@@ -75,5 +75,5 @@ export default class PbCollapsible extends PbEnhancedElement {
   displayUpArrow() {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
-   }
+  }
 }

data/app/pb_kits/playbook/pb_collapsible/types.d.ts

@@ -0,0 +1 @@
+declare module 'react-animate-height'

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

@@ -6,3 +6,7 @@ svg.pb_custom_icon {
     fill: currentColor;
   }
 }
+
+.pb_icon_kit_emoji {
+  font-family: monospace;
+}