playbook_ui 7.9.0 → 7.12.0

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from '../../'
 
-const MessageDefault = () => {
+const MessageDefault = (props) => {
   return (
     <div>
       <Message
@@ -11,6 +11,7 @@ const MessageDefault = () => {
           label="Message"
           message="How can we assist you today?"
           timestamp="20 seconds ago"
+          {...props}
       />
 
       <br />
@@ -22,6 +23,7 @@ const MessageDefault = () => {
           label="Support"
           message="We will escalate this issue to a Senior Support agent."
           timestamp="9 minutes ago"
+          {...props}
       />
 
       <br />
@@ -32,6 +34,7 @@ const MessageDefault = () => {
           avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
           message="To process your order, I will need your full name."
           timestamp="4 hours ago"
+          {...props}
       />
 
       <br />
@@ -43,6 +46,7 @@ const MessageDefault = () => {
           label="Application"
           message="Application for Kate Smith is waiting for your approval"
           timestamp="2 days ago"
+          {...props}
       />
 
       <br />
@@ -53,6 +57,7 @@ const MessageDefault = () => {
           label="Complaint"
           message="We are so sorry you had a bad experience!"
           timestamp="2 days ago"
+          {...props}
       />
 
       <br />
@@ -62,6 +67,7 @@ const MessageDefault = () => {
           label="Support"
           message="Please hold for one moment, I will check with my manager."
           timestamp="2 days ago"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MultipleUsers } from '../../'
 
-const MultipleUsersDefault = () => {
+const MultipleUsersDefault = (props) => {
   return (
     <div>
       <MultipleUsers
@@ -27,6 +27,7 @@ const MultipleUsersDefault = () => {
           imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
         },
       ]}
+          {...props}
       />
 
       <br />
@@ -42,6 +43,7 @@ const MultipleUsersDefault = () => {
           name: 'Andrew Murray Cooper Craig',
         },
       ]}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MultipleUsers } from '../../'
 
-const MultipleUsersReverse = () => {
+const MultipleUsersReverse = (props) => {
   return (
     <div>
       <MultipleUsers
@@ -28,6 +28,7 @@ const MultipleUsersReverse = () => {
             imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
           },
         ]}
+          {...props}
       />
 
       <br />
@@ -44,6 +45,7 @@ const MultipleUsersReverse = () => {
             name: 'Andrew Murray',
           },
         ]}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MultipleUsersStacked } from '../../'
 
-const MultipleUsersStackedDefault = () => {
+const MultipleUsersStackedDefault = (props) => {
   return (
     <div>
       <MultipleUsersStacked
@@ -11,6 +11,7 @@ const MultipleUsersStackedDefault = () => {
           imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
         },
       ]}
+          {...props}
       />
       <br />
       <br />
@@ -25,6 +26,7 @@ const MultipleUsersStackedDefault = () => {
           imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
         },
       ]}
+          {...props}
       />
       <br />
       <br />
@@ -51,6 +53,7 @@ const MultipleUsersStackedDefault = () => {
           imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
         },
       ]}
+          {...props}
       />
     </div>
   )

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

@@ -2,6 +2,7 @@
 @import "../tokens/colors";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -71,6 +72,27 @@ $selector: ".pb_nav_list";
       }
     }
   }
+
+  // Subtle Variant
+  &[class*=_subtle] {
+    @include subtle;
+    // Horizontal Overrides
+    [class*=pb_nav_list_kit_item] {
+      margin: 0;
+    }
+    [class*=_active] {
+      background-color: $active_light;
+      &[class*=dark] {
+        background-color: rgba($white, $opacity_1);
+      }
+      [class*=_item_link] {
+        [class*=_item_text]{
+          color: $primary;
+        }
+      }
+    }
+  }
+  
   &[class*=dark]{
     [class*=pb_nav_list_kit_item]{
       [class*=_link]{

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

@@ -18,6 +18,7 @@ type NavItemProps = {
   imageUrl: String,
   link: string,
   onClick?: EventHandler,
+  target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
 }
 
@@ -34,6 +35,7 @@ const NavItem = (props: NavItemProps) => {
     imageUrl,
     link,
     onClick = () => {},
+    target = '_self',
     text = '',
   } = props
   const Tag = link ? 'a' : 'div'
@@ -54,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
           className="pb_nav_list_item_link"
           href={link}
           onClick={onClick}
+          target={target}
       >
         <If condition={imageUrl}>
           <div

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

@@ -0,0 +1,47 @@
+@mixin subtle {
+  [class*=pb_nav_list_kit_item] {
+    list-style: none;
+    border-radius: $border_rad_heavier;
+    border-bottom: 0;
+    margin: $space_xs ($space_sm - 2px);
+    [class*=_link] {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      border: none;
+      padding: $space_xs ($space_sm - 2px);
+      transition-property: color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: $bezier;
+      border-radius: $border_rad_heavier;
+      @include pb_body($text_lt_default);
+      [class*=_icon_left] {
+        margin-right: ($space_xs + 2px);
+        color: $text_lt_lighter;
+      }
+      [class*=_icon_right] {
+        margin-left: ($space_xs + 2px);
+        color: $text_lt_default;
+      }
+      [class*=_text] {
+        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;
+    }
+  }
+}

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

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../pb_body/body_mixins";
 @import "../pb_title/title_mixin";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -85,54 +86,9 @@ $selector: ".pb_nav_list";
 
   }
 
-
   // Subtle Variant
   &[class*=_subtle]  {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
-      border-radius: $border_rad_heavier;
-      border-bottom: 0;
-      margin: $space_xs ($space_sm - 2px);
-      [class*=_link] {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        border: none;
-        padding: $space_xs ($space_sm - 2px);
-        transition-property: color, background-color;
-        transition-duration: 0.15s;
-        transition-timing-function: $bezier;
-        border-radius: $border_rad_heavier;
-        @include pb_body($text_lt_default);
-        [class*=_icon_left] {
-          margin-right: ($space_xs + 2px);
-          color: $text_lt_lighter;
-        }
-        [class*=_icon_right] {
-          margin-left: ($space_xs + 2px);
-          color: $text_lt_default;
-        }
-        [class*=_text] {
-          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;
-      }
-    }
+    @include subtle;
   }
 
   // Show Highlight

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

@@ -2,15 +2,17 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const BlockNav = () => {
+const BlockNav = (props) => {
   return (
     <Nav
         link="#"
         title="Menu"
+        {...props}
     >
       <NavItem
           active
           link="#"
+          {...props}
       >
         {'Photos'}
       </NavItem>

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

@@ -2,37 +2,42 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const BlockNoTitleNav = () => {
+const BlockNoTitleNav = (props) => {
   return (
     <Nav>
       <NavItem
           iconLeft="newspaper"
           link="#"
           text="News Feed"
+          {...props}
       />
       <NavItem
           active
           iconLeft="comments-alt"
           link="#"
           text="Messages"
+          {...props}
       />
       <NavItem
           iconLeft="calendar-check"
           iconRight="angle-down"
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           iconLeft="calendar-check"
           iconRight="angle-down"
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           iconLeft="users-class"
           iconRight="angle-down"
           link="#"
           text="Groups"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,25 +2,29 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const BorderlessNav = () => {
+const BorderlessNav = (props) => {
   return (
     <Nav borderless>
       <NavItem
           active
           link="#"
           text="All Categories"
+          {...props}
       />
       <NavItem
           link="#"
           text="Food"
+          {...props}
       />
       <NavItem
           link="#"
           text="Digital"
+          {...props}
       />
       <NavItem
           link="#"
           text="Design Art"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,28 +2,33 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const DefaultNav = () => (
+const DefaultNav = (props) => (
   <Nav
       link="#"
       orientation="vertical"
       title="Menu"
+      {...props}
   >
     <NavItem
         link="#"
         text="Photos"
+        {...props}
     />
     <NavItem
         link="#"
         text="Music"
+        {...props}
     />
     <NavItem
         active
         link="#"
         text="Video"
+        {...props}
     />
     <NavItem
         link="#"
         text="Files"
+        {...props}
     />
   </Nav>
 )

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

@@ -2,28 +2,33 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const HorizontalNav = () => {
+const HorizontalNav = (props) => {
   return (
     <Nav
         link="#"
         orientation="horizontal"
+        {...props}
     >
       <NavItem
           link="#"
           text="About"
+          {...props}
       />
       <NavItem
           active
           link="#"
           text="Case Studies"
+          {...props}
       />
       <NavItem
           link="#"
           text="Service"
+          {...props}
       />
       <NavItem
           link="#"
           text="Contacts"
+          {...props}
       />
     </Nav>
   )