playbook_ui 12.36.0.pre.alpha.PLAY942collapsiblenav21035 → 12.36.0.pre.alpha.svgiconmethods1043

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6db34cdefea717b8e05435f34ffeca2768916aafc09c5fc75fe585cf29eeed83
-  data.tar.gz: '079ed7c7c64c2c7ee0825b84398cb909e08d08badd9cab8fb16870c4391210f0'
+  metadata.gz: a55076e0e8167e0db8cbbe9509bf5c99f10e376e0ac56a769c1cc5a5185178ba
+  data.tar.gz: 0e9efeea039a9149b34cfbc3d445845de2c937d892ce380a8af16f449f09e096
 SHA512:
-  metadata.gz: 96a3770480378c8930a578bf3c021aebcce6cf4dd8f45b9c6de753bfa67768334db24beede7c1f24d64b522cb4607c174bd7b120a4c24eada9d71c68427d70d0
-  data.tar.gz: 3708ce113f29d42deeaea57d6e166676fe51d9e9618a1d11383e82a2bf8658497b62dadd111ba2a2332ca5edf69f56cab283639da997399c07b3be04cda70093
+  metadata.gz: 2002845578b53dd39bb6f23d5a16de27bdc92618f22b31a8f9f0d4f9134418509b7c80f077112bbccb9b3fa1bf2a1a56376b9cc7d0626423406729e5bce37a5f
+  data.tar.gz: c61aed1e059b92f3fc5753f1ed723425f4bbe4265a1f2cc595f2f0d05ab439ebb17da6cab3251a19830b6a08d996c590a68ce15c889e15029d803c2d64391f11

data/app/pb_kits/playbook/index.js

@@ -129,5 +129,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
-export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as mapTheme} from './pb_map/pbMapTheme'

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

@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
-import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -17,15 +16,20 @@ type CollapsibleProps = {
   className?: string,
   collapsed?: boolean,
   data?: object,
-  icon?: string | string[],
+  icon?: string | string[]
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
-  iconSize?: IconSizes,
-  iconClick?: ()=> void,
-  onClick?: ()=> void,
+  iconSize?: IconSizes
   id?: string,
 }
 
+const useCollapsible = (initial = false) => {
+  const [collapsed, setCollapsed] = useState(initial)
 
+  return [
+    collapsed,
+    () => setCollapsed((t) => !t),
+  ]
+}
 
 const Collapsible = ({
   aria = {},
@@ -36,17 +40,10 @@ const Collapsible = ({
   icon,
   iconColor = 'default',
   iconSize,
-  iconClick,
-  onClick,
   id,
   ...props
 }: CollapsibleProps) => {
-  const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
-
-  useEffect(()=> {
-   setIsCollapsed(collapsed)
-  },[collapsed])
-
+  const [isCollapsed, collapse] = useCollapsible(collapsed)
   const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
@@ -65,8 +62,9 @@ const Collapsible = ({
     globalProps(props),
     className
   )
+
   return (
-    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
       <div
           {...ariaProps}
           {...dataProps}

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

@@ -33,7 +33,7 @@ type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   cursor?: string,
-  onClick?: ()=> void
+
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
@@ -42,10 +42,9 @@ type IconProps = {
   icon?: string[] | string
   iconColor?: IconColors
   iconSize?: IconSizes
-  iconClick?: ()=> void
 }
 
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
+const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
   const color = colorMap[iconColor]
 
   const showIcon = (icon: string |string[]) => {
@@ -55,13 +54,6 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconPro
     return icon
   }
 
-  const handleIconClick = (e:any) => {
-    if (iconClick) {
-    e.stopPropagation();
-    iconClick()
-    }
-  }
-
   return (
     <>
       {collapsed ? (
@@ -69,7 +61,6 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconPro
           className="icon_wrapper"
           key={icon ? showIcon(icon)[0] : "chevron-down"}
           style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
         </div>
@@ -78,7 +69,6 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconPro
           className="icon_wrapper"
           key={icon ? showIcon(icon)[1] : "chevron-up"}
           style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
         </div>
@@ -93,18 +83,13 @@ const CollapsibleMain = ({
   cursor = 'pointer',
   ...props
 }: CollapsibleMainProps): React.ReactElement=> {
-  const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
+  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })
 
-  const handleCollapsibleClick = (e:any) => {
-    toggle();
-    onClick && onClick(e)
-  }
-
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>
-      <div onClick={(e)=>handleCollapsibleClick(e)}>
+      <div onClick={context.collapse as (() => void)}>
         <Flex
             spacing="between"
             vertical="center"
@@ -112,11 +97,10 @@ const CollapsibleMain = ({
           <FlexItem>{children}</FlexItem>
           <FlexItem>
             <ToggleIcon
-                collapsed={collapsed as () => void}
-                iconColor={iconColor as IconColors}
-                iconSize={iconSize as IconSizes}
-                icon={icon as string[] | string}
-                iconClick={iconClick}
+                collapsed={context.collapsed as () => void}
+                iconColor={context.iconColor as IconColors}
+                iconSize={context.iconSize as IconSizes}
+                icon={context.icon as string[] | string}
             />
             </FlexItem>
         </Flex>

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

@@ -9,7 +9,7 @@
         <%= content.presence %>
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
-        <div style="color: <%= object.icon_color %>" class="icon_wrapper" >
+        <div style="color: <%= object.icon_color %>">
         <% if object.icon.present? %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,17 +1,8 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Button } from '../..'
+import { Collapsible } from '../..'
 
-const CollapsibleIcons = () => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-
-  return (
-  <>
-  <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
-        {isCollapsed ? "Expand" : "Collapse"}
-  </Button>
-  <Collapsible collapsed={isCollapsed}
-      icon={['plus','minus']}
-  >
+const CollapsibleIcons = () => (
+  <Collapsible icon={['plus','minus']}>
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
@@ -23,8 +14,6 @@ const CollapsibleIcons = () => {
       </div>
     </Collapsible.Content>
   </Collapsible>
-  </>
-  )
-}
+)
 
 export default CollapsibleIcons

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

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -1,3 +1,4 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -14,3 +14,5 @@
     parent element's css color properties."
   } ) %>
 </div>
+
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "copilot", padding_left: "xl" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "squirrel" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "star" } ) %>
+

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

@@ -1,14 +1,15 @@
 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
+  # - 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
+  - icon_svg: Icon SVG
 
   react:
   - icon_default: Icon Default

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

@@ -1,15 +1,15 @@
 <% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
+  <%= object.embedded_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
+      class: object.classname,
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true
   ) %>
-<% end %>
+<% end %>

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

@@ -90,6 +90,23 @@ module Playbook
         end
       end
 
+      def embedded_svg(icon_name)
+        file = File.read(Rails.root.join("app", "javascript", "images", "#{icon_name}.svg"))
+        doc = Nokogiri::HTML::DocumentFragment.parse file
+        svg = doc.at_css "svg"
+
+        doc.to_html.html_safe
+
+        size_factor = size.to_i
+        if size_factor > 1
+          pixel_size = size_factor * 16
+          svg["width"] = pixel_size.to_s
+          svg["height"] = pixel_size.to_s
+        end
+
+        raw doc
+      end
+
     private
 
       def border_class

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

@@ -1,27 +1,6 @@
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/border_radius";
-
 [class^="pb_nav_list"] {
-  .pb_collapsible_nav_item {
   .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit,
-  .pb_collapsible_kit {
+  .pb_collapsible_content_kit {
     padding: 0 !important;
   }
-
-  .icon_wrapper {
-    border-radius: $border_radius_rounded;
-    width: 19px;
-    height: 19px;
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: $space_xs;
-    &:hover {
-      background-color: rgba($primary_action, $opacity_3);
-
-    }
-  }
-}
 }

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -14,19 +14,15 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
-  collapsibleClick?: () => void,
   data?: object,
   iconLeft?: string,
   iconRight?: string | string[],
-  iconRightClick?: () => void,
-  iconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-  toggleCollapsed?: any
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
@@ -36,34 +32,22 @@ const NavItem = (props: NavItemProps) => {
     children,
     className,
     collapsible,
-    collapsibleClick,
     data = {},
     iconLeft,
     iconRight,
-    iconRightClick,
-    iconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
-    toggleCollapsed
   } = props
 
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
-
-
-  const handleIconClick = (e:any) => {
-    if (iconLeftClick) {
-    e.stopPropagation();
-    iconLeftClick()
-    }
-  }
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
 
   return (
     <li
@@ -74,13 +58,7 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
-            iconSize="xs" 
-            id={id}
-            collapsed={toggleCollapsed}
-            iconClick={iconRightClick}
-            onClick={collapsibleClick}
-          >
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
           <Collapsible.Main>
           <Tag
           className="pb_nav_list_item_link"
@@ -92,7 +70,6 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={imageUrl}
-              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -105,7 +82,6 @@ const NavItem = (props: NavItemProps) => {
             <div
               className="pb_nav_list_item_icon_section"
               key={iconLeft}
-              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
                 className="pb_nav_list_item_icon_left"

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,63 +1,83 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
-
-const CollapsibleNav = (props) => {
-  const navItems = ["Overview", "Albums", "Similar Artists"]
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const collapsibles = navItems.map(() => useCollapsible(true))
-
-  const handleMainClick = (index) => {
-    collapsibles.forEach(([, , setCollapsed], idx) => {
-      if (idx === index) {
-        setCollapsed(false)
-      } else {
-        setCollapsed(true)
-      }
-    })
-  }
+import React from "react";
 
+import Nav from "../_nav";
+import NavItem from "../_item";
 
-  const handleIconRightClick = (index) => {
-    const [isCollapsed, setCollapsed] = collapsibles[index]
-    setCollapsed(!isCollapsed)
-  }
-
+const CollapsibleNav = (props) => {
   return (
-    <>
-      <Nav variant='subtle'>
-        {navItems.map((text, index) => {
-          const [collapsed] = collapsibles[index]
-          return (
-            <NavItem
-                collapsible
-                collapsibleClick={() => handleMainClick(index)}
-                iconLeft="chevron-down"
-                iconRightClick={() => handleIconRightClick(index)}
-                id={`collapsible-nav-item-${index + 1}`}
-                key={index}
-                link="#"
-                text={text}
-                toggleCollapsed={collapsed}
-                {...props}
-            >
-              <NavItem link="#" 
-                  text="City" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="People" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="Business" 
-                  {...props} 
-              />
-            </NavItem>
-          );
-        })}
-      </Nav>
-    </>
-  )
-}
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
 
-export default CollapsibleNav
+export default CollapsibleNav;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+
+import Nav from "../_nav";
+import NavItem from "../_item";
 
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -7,7 +9,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -32,7 +34,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -56,7 +58,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -25,8 +25,8 @@ 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 (No custom toggling)
+  # - 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/item.rb

@@ -14,11 +14,7 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
-        else
-          generate_classname("pb_nav_list_kit_item", active_class)
-        end
+        generate_classname("pb_nav_list_kit_item", active_class)
       end
 
       def tag