playbook_ui 13.1.0 → 13.2.0

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

@@ -11,71 +11,61 @@
 
 $selector: ".pb_nav_list";
 
-[class^=pb_nav_list][class*=_vertical] {
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  [class*=pb_nav_list_title] {
+[class^="pb_nav_list"][class*="_vertical"] {
+  [class*="pb_nav_list_title"] {
     padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant
-  &[class*=_normal]  {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
+  &[class*="_normal"] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       border-bottom: 1px solid $border_light;
-      &[class*=_active] {
-        [class*=_link] {
-          border-color: $primary;
-          [class*=_item_icon] {
-            color: $primary;
-          }
-          [class*=_item_text] {
-            color: $primary;
-            font-weight: $bold;
-          }
+      &[class*="_active"] {
+        border-left-color: $primary !important;
+        [class*="_item_icon"] {
+          color: $primary !important;
+        }
+        [class*="_item_text"] {
+          color: $primary !important;
+          font-weight: $bold;
         }
       }
-      [class*=_link] {
+      &[class*="_link"] {
         text-decoration: none;
         display: flex;
         align-items: center;
         padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
-        border: 0 solid transparent;
-        border-width: 0 0 0 3px;
+        border-left: 0 solid transparent;
+        border-left-width: 3px;
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        @media (hover:hover) {
+        @media (hover: hover) {
           &:hover {
             background-color: rgba($primary, 0.03);
-            [class*=_icon] {
+            [class*="_icon"] {
               color: $primary;
             }
-            [class*=_text] {
+            [class*="_text"] {
               color: $primary !important;
             }
           }
         }
-        [class*=_icon_left] {
+        [class*="_icon_left"] {
           font-size: $font_large;
           margin-right: $space_xs;
           color: $text_lt_lighter;
         }
-        [class*=_icon_right] {
+        [class*="_icon_right"] {
           font-size: $font_large;
           margin-left: $space_sm;
           color: $text_lt_default;
         }
-        [class*=_text] {
-          font-size: $font_base;
+        [class*="_text"] {
           color: $text_lt_default;
           flex: 1;
         }
-        [class*=_img_left] {
+        [class*="_img_left"] {
           margin-right: $space_xs;
           height: 20px;
           width: 25px;
@@ -85,49 +75,51 @@ $selector: ".pb_nav_list";
         border-bottom: 0;
       }
     }
-
   }
 
   // Subtle Variant
-  &[class*=_subtle] {
+  &[class*="_subtle"] {
     @include subtle;
   }
 
   // Bold Variant
-  &[class*=_bold] {
+  &[class*="_bold"] {
     @include bold;
   }
 
   // Show Highlight
-  &[class*=_highlight] {
-    [class*=_active] {
+  &[class*="_highlight"] {
+    [class*="_active"] {
       background-color: $active_light;
     }
-    &[class*=dark]{
-      [class*=_active] {
-      background-color: rgba($white, $opacity_1);
-    }
+    &[class*="dark"] {
+      [class*="_active"] {
+        background-color: rgba($white, $opacity_1);
+      }
     }
   }
 
-  &[class*=dark]{
-    background: tint($bg_dark,10%);
-    [class*=pb_nav_list_kit_item]{
+  &[class*="dark"] {
+    background: tint($bg_dark, 10%);
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       border-color: rgba($white, $opacity_1);
-      &[class*=_active] [class*=_link]{
-        border-color: $white;
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_default;
+      &[class*="_active"] {
+        border-left-color: $white !important;
+        [class*="_item_text"],
+        [class*="_item_icon"] {
+          color: $text_dk_default !important;
         }
       }
-      [class*=_link] {
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_lighter;
-        }
-        &:hover{
+      [class*="_item_text"],
+      [class*="_item_icon"] {
+        color: $text_dk_lighter !important;
+      }
+      &[class*="_link"] {
+        &:hover {
           background-color: rgba($white, $opacity_1);
-          [class*=_icon],[class*=_text] {
-            color: $white;
+          [class*="_icon"],
+          [class*="_text"] {
+            color: $white !important;
           }
         }
       }
@@ -135,13 +127,12 @@ $selector: ".pb_nav_list";
   }
 
   //Borderless
-  &[class*=_borderless] {
-    [class*=pb_nav_list_kit_item] {
+  &[class*="_borderless"] {
+    [class*="pb_nav_list_kit_item"] {
       list-style: none;
-      border-bottom: 0;
+      border-bottom: 0 !important;
     }
   }
-
 }
 
 //Image Wrapper

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

@@ -5,7 +5,7 @@ import NavItem from '../_item'
 
 const BlockNoTitleNav = (props) => {
   return (
-    <Nav>
+    <Nav {...props}>
       <NavItem
           iconLeft="newspaper"
           link="#"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const BorderlessNav = (props) => {
   return (
-    <Nav borderless>
+    <Nav 
+        borderless
+        {...props}
+    >
       <NavItem
           active
           link="#"

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

@@ -1,20 +1,20 @@
-<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
     <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) 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: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) 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: "#", collapsible: true, icon_left: "city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) 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: "#" }) %>

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

@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav>
+    <Nav 
+        variant="bold"
+        {...props}
+    >
       <NavItem
           active
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,10 +33,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -59,10 +56,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -1 +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. 
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

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

@@ -18,7 +18,10 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav variant='bold'>
+      <Nav 
+          variant="bold" 
+          {...props}
+      >
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (
@@ -26,8 +29,10 @@ const CollapsibleNavCustom = (props) => {
                 collapsed={collapsed}
                 collapsible
                 collapsibleTrail
+                fontSize="small"
                 fontWeight="bolder"
                 iconLeft="chevron-down"
+                iconRight={["plus", "minus"]}
                 id={`collapsible-nav-item-${index + 1}`}
                 key={index}
                 link="#"

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

@@ -1,87 +1,88 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavEmphasize = (props) => {
+const CollapsibleNavItemSpacing = (props) => {
   return (
-    <Nav variant="bold">
+    <Nav 
+        itemSpacing={{padding: "xs", marginY: "none"}}
+        variant="bold"
+        {...props}
+    >
       <NavItem
-          active 
-          collapsible
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
+          active
+          collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
       >
         <NavItem
             link="#" 
+            paddingY="none"
             text="City"
             {...props}
         />
         <NavItem
             link="#"
+            paddingY="none"
             text="People"
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Business" 
             {...props}
         />
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
       >
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Entertainment" 
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Food" 
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Style" 
             {...props}
         />
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
       >
         <NavItem 
             link="#" 
+            paddingY="none"
             text="City"
             {...props} 
         />
         <NavItem
             link="#"
+            paddingY="none"
             text="People"
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Business" 
             {...props}
         />
@@ -90,4 +91,4 @@ const CollapsibleNavEmphasize = (props) => {
   );
 };
 
-export default CollapsibleNavEmphasize;
+export default CollapsibleNavItemSpacing

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

@@ -0,0 +1 @@
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

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

@@ -0,0 +1,23 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+  <% end %>

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

@@ -0,0 +1,55 @@
+import React from "react"
+import { Nav, NavItem } from "../.."
+
+const CollapsibleNavWithAllOptions = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+
+  return (
+    <>
+      <Nav 
+          variant="bold" 
+          {...props}
+      >
+        {navItems.map((text, index) => {
+          return (
+            <NavItem
+                collapsible
+                collapsibleTrail
+                fontWeight="bolder"
+                iconLeft="city"
+                iconRight={["plus", "minus"]}
+                key={index}
+                link="#"
+                text={text}
+                {...props}
+            >
+              <NavItem 
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem 
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavWithAllOptions

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

@@ -0,0 +1,4 @@
+Collapsible Navs optionally accept the following props:
+
+- `collapsibleTrail` / `collapsible_trail`, enables a vertical guideline to the left of the collapsible nav's children
+- `iconRight` optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "About", link: "#", font_weight:"bolder", font_size:"small" }) %>
+    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, font_weight:"bolder", font_size:"small"  }) %>
+    <%= pb_rails("nav/item", props: { text: "Service", link: "#", font_weight:"bolder", font_size:"small" }) %>
+    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", font_weight:"bolder", font_size:"small" }) %>
+  <% end %>

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Nav, NavItem } from '../..'
+
+const NavWithFontControl = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...props}
+    >
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder"            
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+    </Nav>
+
+  );
+};
+
+export default NavWithFontControl;

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

@@ -0,0 +1,4 @@
+All Nav variants' navItems accept the following props for customizing font:
+
+- `fontSize` / `font_size` defaults to `normal`, also accepts `small`
+- `fontWeight` / `font_weight` defaults to `regular`, also accepts `bold` and `bolder`

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "About", link: "#", padding_y:"xxs", margin:"none" }) %>
+    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, padding_y:"xxs", margin:"none"  }) %>
+    <%= pb_rails("nav/item", props: { text: "Service", link: "#", padding_y:"xxs", margin:"none" }) %>
+    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", padding_y:"xxs", margin:"none" }) %>
+  <% end %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const NavWithSpacingControl = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default NavWithSpacingControl

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

@@ -0,0 +1 @@
+All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const NoHighlightNav = (props) => {
   return (
-    <Nav highlight={false}>
+    <Nav 
+        highlight={false}
+        {...props}
+    >
       <NavItem
           active
           link="#"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           link="#"
           text="Overview"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleWithIconsNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           iconLeft="city"
           link="#"