playbook_ui 12.33.1.pre.alpha.PLAY933navkitcollapsible994 → 12.33.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33130ba9d6074894b7db63e664ca3a35730c9ac366285de0bcfb7bc78fbb88a9
-  data.tar.gz: e2b5fe4b62c4117d14b09cdd7e9ec93de3678c54b8575b4c1e6ccf26edac759f
+  metadata.gz: f1468abb19e4ac525eed445f416c38c07658000bf453c5a0b874be54c64ecdb3
+  data.tar.gz: b74c0cb81586fcb391013b1f6d46414a36dc98196fbec2d933359b978fee1483
 SHA512:
-  metadata.gz: 1ec5221a8aa347f88b9483e371eefafae1fbdd9e340e7b8029fa077eac7f03c3ef5536564b677367698b58489dee4415b77298de4efa5ac62d08078eb8dde54e
-  data.tar.gz: e95ca7bbcba72fbc6fc2309a09aec09f4b9ae3ab616837192a520c1b337b221a2656062f9ebbb27ae4832df39b592453d56cc39c436f533e8f32490e0ca586a3
+  metadata.gz: 4e2bb9dad3c8d08921eea44a7e9a3d8ec5832bbcce47f81b75c65fc0bd7eda0218ce328b9820f4bd530a2fb28233816bfdf404762700cb48ab98aee2c16d4308
+  data.tar.gz: 2c4fb8680f9f5e13e9462bc1ec206edf07a773739c7c282b32d7ed1c279ac3ab0ed42d4da46829328010f4e33159823325188e99941e8d144807384be861f794

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_nav/_item.tsx

@@ -6,17 +6,15 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
-import Collapsible from '../pb_collapsible/_collapsible'
 
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
-  collapsible?: boolean,
   data?: object,
   iconLeft?: string,
-  iconRight?: string | string[],
+  iconRight?: string,
   id?: string,
   imageUrl?: string,
   link?: string,
@@ -31,7 +29,6 @@ const NavItem = (props: NavItemProps) => {
     aria = {},
     children,
     className,
-    collapsible,
     data = {},
     iconLeft,
     iconRight,
@@ -56,100 +53,54 @@ const NavItem = (props: NavItemProps) => {
       className={classes}
       id={id}
     >
-      {
-        collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs" padding="none">
-          <Collapsible.Main>
-          <Tag
-          className="pb_nav_list_item_link"
-          href={link}
-          onClick={onClick}
-          target={target}
-        >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
-            </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
-              />
-            </div>
-          }
-           <span className="pb_nav_list_item_text">
-            {text}
-          </span>
-        </Tag>
-        </Collapsible.Main>
-        <Collapsible.Content>
-        {children}
-        </Collapsible.Content>
-        </Collapsible>
-        ) : (
-        <Tag
-          className="pb_nav_list_item_link"
-          href={link}
-          onClick={onClick}
-          target={target}
-        >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
-            </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
-              />
-            </div>
-          }
-  
-          <span className="pb_nav_list_item_text">
-            {text || children}
-          </span>
-  
-          {iconRight &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconRight as string}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_right"
-                fixedWidth
-                icon={iconRight as string}
-              />
-            </div>
-          }
-        </Tag>
-        )
-      }
+      <Tag
+        className="pb_nav_list_item_link"
+        href={link}
+        onClick={onClick}
+        target={target}
+      >
+        {imageUrl &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={imageUrl}
+          >
+            <Image
+              className="pb_nav_img_wrapper"
+              url={imageUrl}
+            />
+          </div>
+        }
+
+        {iconLeft &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={iconLeft}
+          >
+            <Icon
+              className="pb_nav_list_item_icon_left"
+              fixedWidth
+              icon={iconLeft}
+            />
+          </div>
+        }
+
+        <span className="pb_nav_list_item_text">
+          {text || children}
+        </span>
+
+        {iconRight &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={iconRight}
+          >
+            <Icon
+              className="pb_nav_list_item_icon_right"
+              fixedWidth
+              icon={iconRight}
+            />
+          </div>
+        }
+      </Tag>
     </li>
   )
 }

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -4,4 +4,3 @@
 @import "../tokens/colors";
 @import "./vertical_nav";
 @import "./horizontal_nav";
-@import "./collapsible_nav";

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -29,20 +29,22 @@
         flex: 1;
         font-weight: $regular;
       }
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
+          }
+        }
+      }
     }
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
-      &:hover {
-        background-color: rgba($primary, 0.03);
-        [class*=_icon] {
-          color: $primary;
-        }
-        [class*=_text] {
-          color: $primary;
-        }
-      }
   }
 }

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

@@ -7,7 +7,6 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -25,8 +24,6 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Subtle With Collapsible
-  - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -13,5 +13,3 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
-export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,41 +3,19 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <% if object.collapsible %>
-    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
-      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
-        <%= content_tag(object.tag,
-        object.link ? object.link_options : object.options) do %>
-          <% if object.image_url %>
-            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
-          <% end %>
-          <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
-          <% end %>
-          <span class="pb_nav_list_item_text">
-            <%= object.text %>
-          </span>
-        <% end %>    
-       <% end %>
-      <%= pb_rails("collapsible/collapsible_content") do %>
-        <%= content.presence %>
-      <% end %>
+  <%= content_tag(object.tag,
+    object.link ? object.link_options : object.options) do %>
+    <% if object.image_url %>
+      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
-  <% else %>
-    <%= content_tag(object.tag,
-      object.link ? object.link_options : object.options) do %>
-      <% if object.image_url %>
-        <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
-      <% end %>
-      <% if object.icon_left %>
-        <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
-      <% end %>
-      <span class="pb_nav_list_item_text">
-        <%= object.text %><%= content.presence %>
-      </span>
-      <% if object.icon_right %>
-        <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
-      <% end %>
+    <% if object.icon_left %>
+      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+    <% end %>
+    <span class="pb_nav_list_item_text">
+      <%= object.text %><%= content.presence %>
+    </span>
+    <% if object.icon_right %>
+      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,7 +4,6 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
       prop :icon_left
@@ -34,10 +33,6 @@ module Playbook
         )
       end
 
-      def collapsible_icons
-        icon_right.present? ? icon_right : %w[plus minus]
-      end
-
     private
 
       def active_class