playbook_ui 12.36.0.pre.alpha.svgiconmethods1059 → 12.37.0.pre.alpha.PLAY951collapsiblenav31062

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

@@ -11,43 +11,71 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
+  bold?: boolean,
+  emphasized?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
   data?: object,
+  dark?: boolean,
   iconLeft?: string,
   iconRight?: string | string[],
+  onIconRightClick?: () => void,
+  onIconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
+  collapsibleTrail?: boolean,
+  collapsed?: boolean
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
+    bold,
+    emphasized,
     children,
     className,
     collapsible,
     data = {},
+    dark = false,
     iconLeft,
     iconRight,
+    onIconRightClick,
+    onIconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
+    collapsibleTrail,
+    collapsed
   } = props
 
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
+  const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
+  const boldClass = collapsible && bold ? 'bold' : ''
+  const emphasizedClass = collapsible && emphasized ? 'emphasized' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 
+                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass, boldClass, emphasizedClass) : '', 
+                  globalProps(props), 
+                  className)
+
+
+  const handleIconClick = (e:any) => {
+    if (onIconLeftClick) {
+    e.stopPropagation();
+    onIconLeftClick()
+    }
+  }
 
   return (
     <li
@@ -58,18 +86,24 @@ const NavItem = (props: NavItemProps) => {
     >
       {
         collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
-          <Collapsible.Main>
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
+            iconSize="xs" 
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
+          >
+          <Collapsible.Main dark={dark}>
           <Tag
-          className="pb_nav_list_item_link"
+          className="pb_nav_list_item_link_collapsible"
           href={link}
-          onClick={onClick}
           target={target}
         >
           {imageUrl &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={imageUrl}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Image
                 className="pb_nav_img_wrapper"
@@ -80,17 +114,18 @@ const NavItem = (props: NavItemProps) => {
   
           {iconLeft &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={iconLeft}
+              onClick={(e)=>handleIconClick(e)}
             >
               <Icon
-                className="pb_nav_list_item_icon_left"
+                className="pb_nav_list_item_icon_left_collapsible"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
           }
-           <span className="pb_nav_list_item_text">
+           <span className="pb_nav_list_item_text_collapsible">
             {text}
           </span>
         </Tag>

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

@@ -29,12 +29,6 @@
         flex: 1;
         font-weight: $regular;
       }
-    }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
-      color: $primary;
-      letter-spacing: normal;
-    }
       &:hover {
         background-color: rgba($primary, 0.03);
         [class*=_icon] {
@@ -44,5 +38,11 @@
           color: $primary;
         }
       }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+      letter-spacing: normal;
+    }
   }
 }

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

@@ -1,7 +1,5 @@
 import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
@@ -9,6 +7,7 @@ const CollapsibleNav = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,6 +32,7 @@ const CollapsibleNav = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -56,6 +56,7 @@ const CollapsibleNav = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
@@ -80,4 +81,4 @@ const CollapsibleNav = (props) => {
   );
 };
 
-export default CollapsibleNav;
+export default CollapsibleNav

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

@@ -0,0 +1 @@
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 

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

@@ -0,0 +1,57 @@
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
+
+const CollapsibleNavCustom = (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)
+      }
+    })
+  }
+
+  return (
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsed={collapsed}
+                collapsible
+                emphasized
+                iconLeft="chevron-down"
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                onClick={() => handleMainClick(index)}
+                text={text}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavCustom

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md

@@ -0,0 +1 @@
+The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx}

@@ -1,15 +1,14 @@
 import React from "react";
+import { Nav, NavItem } from '../..'
 
-import Nav from "../_nav";
-import NavItem from "../_item";
-
-const CollapsibleNavCustomIcons = (props) => {
+const CollapsibleNavEmphasize = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           collapsible 
+          emphasized
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -31,10 +30,10 @@ const CollapsibleNavCustomIcons = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          emphasized
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -57,8 +56,9 @@ const CollapsibleNavCustomIcons = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          emphasized
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
@@ -83,4 +83,4 @@ const CollapsibleNavCustomIcons = (props) => {
   );
 };
 
-export default CollapsibleNavCustomIcons;
+export default CollapsibleNavEmphasize;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -0,0 +1 @@
+The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.

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

@@ -7,7 +7,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -25,8 +26,9 @@ 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)
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - 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

@@ -14,4 +14,5 @@ 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'
+export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
+export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"

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

@@ -2,19 +2,20 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
+  dark: object.dark,
   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 %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) 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" }) %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
           <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
           <% end %>
-          <span class="pb_nav_list_item_text">
+          <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
         <% end %>    

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

@@ -4,9 +4,12 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :bold, type: Playbook::Props::Boolean, default: false
       prop :collapsible, type: Playbook::Props::Boolean, default: false
+      prop :emphasized, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
+      prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
       prop :icon_left
       prop :icon_right
       prop :image_url
@@ -14,7 +17,11 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        generate_classname("pb_nav_list_kit_item", active_class)
+        if collapsible
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
+        else
+          generate_classname("pb_nav_list_kit_item", active_class)
+        end
       end
 
       def tag
@@ -23,7 +30,7 @@ module Playbook
 
       def options
         {
-          class: "pb_nav_list_item_link",
+          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
         }.compact
       end
 
@@ -43,6 +50,18 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
+
+      def bold_class
+        bold ? "bold" : nil
+      end
+
+      def collapsible_trail_class
+        collapsible_trail ? "collapsible_trail" : nil
+      end
+
+      def emphasized_class
+        emphasized ? "emphasized" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("text_input", props: {
+  placeholder: "Placeholder", 
+  input_options: {
+    id: "testing-one-time-code",
+    autocomplete: "one-time-code",
+    name:"auth-token",
+    inputmode:"numeric",
+    pattern:"[0-9]*",
+    type: "text"
+  }
+}) %>
+

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

@@ -7,6 +7,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_options: Input Options
   react:
   - text_input_default: Default
   - text_input_error: With Error

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -60,7 +60,7 @@ module Playbook
           required: required,
           type: type,
           value: value,
-        }
+        }.merge(input_options)
       end
 
       def validation_message