playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31073 → 12.37.0.pre.alpha.PLAY951collapsiblenav31074

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a614a1ec23f8a5684100225c2de79beb702f61989d5d0507cf334247e5dee619
-  data.tar.gz: 2426810438f198dd19fbbe01fbb08a8701b85d9abd987ae8a0b31e588f9e0764
+  metadata.gz: 046c4a6ee60d6233981489235626a06999ee1d17d015215491da83534e5ab9c3
+  data.tar.gz: 219acf93f0c0bc67e2040158b847a0e0ff9d943c4273de9b6cb72140f3ff5d32
 SHA512:
-  metadata.gz: 92ce569a84e8e191695ff8bb75735d698ee0ba5b1915a8a174951cca08f70b7f1236532ec565f37e63f5cf1b3a7b57945804a5b1d3dc4bec018d41fe0d5208c1
-  data.tar.gz: e8c89499abd48d531b224ebba171145fbc302ff66f513ee11fe2c52af599925dea9ecbb889a5798e0a3cb4196d1770710b5aaeb88e785a99b519615d0a802213
+  metadata.gz: 2f0d02eef6e5304bde87897db22ee87e304bb2f587da934329cd52066502873156c1a8eff67cbc107b8daa8995d3a5c3814374383e12050c5e80e6b45cc8d0ae
+  data.tar.gz: 9973aea22b8168fa03ccca233e7e051a927cef9b8fad2a7fc32c61d3e9907924c70389978797619a3a9515b4b1be3cab3f5f6562280066ea797c099d45248ba2

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

@@ -13,7 +13,7 @@
     }
   }
 
-  .font_bold {
+  .font_bolder {
     .pb_nav_list_item_text {
       @include pb_title_4;
     }
@@ -25,6 +25,18 @@
     }
   }
 
+  .font_bold {
+    .pb_nav_list_item_text {
+      font-weight: $bold;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        font-weight: $bold !important;
+      }
+    }
+  }
+
+
   .font_regular {
     .pb_nav_list_item_text {
       font-weight: $regular;

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

@@ -11,7 +11,7 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
-  fontWeight?: "regular" | "bold",
+  fontWeight?: "regular" | "bold" | "bolder",
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
@@ -61,7 +61,7 @@ const NavItem = (props: NavItemProps) => {
   const activeClass = active === true ? 'active' : ''
   const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
   const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
-  const fontWeightClass = fontWeight === 'bold' ? "font_bold" : "font_regular"
+  const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 

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

@@ -8,7 +8,7 @@ const CollapsibleNav = (props) => {
           active
           collapsible 
           collapsibleTrail
-          fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -34,7 +34,7 @@ const CollapsibleNav = (props) => {
       <NavItem 
           collapsible 
           collapsibleTrail
-          // fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -60,7 +60,7 @@ const CollapsibleNav = (props) => {
       <NavItem 
           collapsible 
           collapsibleTrail
-          // fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 

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

@@ -26,7 +26,7 @@ const CollapsibleNavCustom = (props) => {
                 collapsed={collapsed}
                 collapsible
                 collapsibleTrail
-                fontWeight="bold"
+                fontWeight="bolder"
                 iconLeft="chevron-down"
                 id={`collapsible-nav-item-${index + 1}`}
                 key={index}

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

@@ -1,19 +1,19 @@
 <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left:"city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) 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: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left: "theater-masks" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) 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: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left: "city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
         <%= pb_rails("nav", props: { variant: "subtle" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

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

@@ -9,7 +9,7 @@ const CollapsibleNavEmphasize = (props) => {
           collapsible
           collapsibleTrail
           fontSize="small"
-          fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -36,7 +36,7 @@ const CollapsibleNavEmphasize = (props) => {
           collapsible 
           collapsibleTrail
           fontSize="small"
-          fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -63,7 +63,7 @@ const CollapsibleNavEmphasize = (props) => {
           collapsible 
           collapsibleTrail
           fontSize="small"
-          fontWeight="bold"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 

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

@@ -8,7 +8,7 @@ module Playbook
                        values: %w[normal small],
                        default: "normal"
       prop :font_weight, type: Playbook::Props::Enum,
-                         values: %w[bold regular],
+                         values: %w[bold regular bolder],
                          default: "regular"
       prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
@@ -56,7 +56,14 @@ module Playbook
       end
 
       def font_weight_class
-        font_weight === "bold" ? "font_bold" : "font_regular"
+        case font_weight
+        when "bold"
+          "font_bold"
+        when "bolder"
+          "font_bolder"
+        else
+          "font_regular"
+        end
       end
 
       def collapsible_trail_class