playbook_ui 7.9.0 → 7.12.0

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
+<% end %>

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const NewTab = (props) => (
+  <Nav
+      link="#"
+      orientation="vertical"
+      title="Popular Websites"
+      {...props}
+  >
+    <NavItem
+        link="https://www.google.com/"
+        target="_blank"
+        text="Google"
+        {...props}
+    />
+    <NavItem
+        link="https://www.youtube.com/"
+        target="_blank"
+        text="YouTube"
+        {...props}
+    />
+    <NavItem
+        link="https://www.facebook.com/"
+        target="_blank"
+        text="Facebook"
+        {...props}
+    />
+    <NavItem
+        link="https://www.amazon.com/"
+        target="_blank"
+        text="Amazon"
+        {...props}
+    />
+  </Nav>
+)
+
+export default NewTab

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

@@ -2,25 +2,29 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const NoHighlightNav = () => {
+const NoHighlightNav = (props) => {
   return (
     <Nav highlight={false}>
       <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/_subtle_horizontal_nav.html.erb

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

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const SubtleHorizontalNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="horizontal"
+        variant="subtle"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default SubtleHorizontalNav

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

@@ -2,33 +2,39 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const SubtleNav = () => {
+const SubtleNav = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           link="#"
           text="Overview"
+          {...props}
       />
       <NavItem
           active
           link="#"
           text="Albums"
+          {...props}
       />
       <NavItem
           link="#"
           text="Similar Artists"
+          {...props}
       />
       <NavItem
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           link="#"
           text="Discography"
+          {...props}
       />
       <NavItem
           link="#"
           text="Listeners"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,24 +2,28 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const SubtleNoHighlightNav = () => {
+const SubtleNoHighlightNav = (props) => {
   return (
     <Nav
         highlight={false}
         variant="subtle"
+        {...props}
     >
       <NavItem
           link="#"
           text="Dashboard"
+          {...props}
       />
       <NavItem
           active
           link="#"
           text="Statistics"
+          {...props}
       />
       <NavItem
           link="#"
           text="Pages"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,46 +2,53 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const SubtleWithIconsNav = () => {
+const SubtleWithIconsNav = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           iconLeft="city"
           link="#"
           text="City"
+          {...props}
       />
       <NavItem
           iconLeft="user-friends"
           iconRight="angle-down"
           link="#"
           text="People"
+          {...props}
       />
       <NavItem
           active
           iconLeft="user-tie"
           link="#"
           text="Business"
+          {...props}
       />
       <NavItem
           iconLeft="theater-masks"
           link="#"
           text="Entertainment"
+          {...props}
       />
       <NavItem
           iconLeft="salad"
           iconRight="angle-down"
           link="#"
           text="Food"
+          {...props}
       />
       <NavItem
           iconLeft="sunglasses"
           link="#"
           text="Style"
+          {...props}
       />
       <NavItem
           iconLeft="child"
           link="#"
           text="Childern"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,38 +2,44 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const WithIconsNav = () => {
+const WithIconsNav = (props) => {
   return (
     <Nav
         link="#"
         title="Browse"
+        {...props}
     >
       <NavItem
           iconLeft="newspaper"
           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="users"
           link="#"
           text="Friends"
+          {...props}
       />
       <NavItem
           iconLeft="users-class"
           iconRight="angle-down"
           link="#"
           text="Groups"
+          {...props}
       />
     </Nav>
   )

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

@@ -2,38 +2,44 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const WithImageNav = () => {
+const WithImageNav = (props) => {
   return (
     <Nav
         link="#"
         title="Browse"
+        {...props}
     >
       <NavItem
           imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
           text="News Feed"
+          {...props}
       />
       <NavItem
           active
           imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
           link="#"
           text="Messages"
+          {...props}
       />
       <NavItem
           iconRight="angle-down"
           imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
           link="#"
           text="Friends"
+          {...props}
       />
       <NavItem
           iconRight="angle-down"
           imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
           link="#"
           text="Groups"
+          {...props}
       />
     </Nav>
   )

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

@@ -9,8 +9,10 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
+  - new_tab: Open in a New Tab
 
   react:
   - default_nav: Default
@@ -22,6 +24,7 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
-
+  - new_tab: Open in a New Tab

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -1,5 +1,6 @@
 export { default as DefaultNav } from './_default_nav.jsx'
 export { default as HorizontalNav } from './_horizontal_nav.jsx'
+export { default as SubtleHorizontalNav } from './_subtle_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
 export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
@@ -9,3 +10,4 @@ export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
 export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
 export { default as WithImgNav } from './_with_img_nav.jsx'
+export { default as NewTab } from './_new_tab.jsx'

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

@@ -13,7 +13,9 @@ module Playbook
       prop :icon_left
       prop :icon_right
       prop :image_url
-
+      prop :target, type: Playbook::Props::Enum,
+                    values: %w[_blank _self _parent _top],
+                    default: "_self"
       def classname
         generate_classname("pb_nav_list_kit_item", active_class)
       end
@@ -30,7 +32,8 @@ module Playbook
 
       def link_options
         options.merge(
-          href: link
+          href: link,
+          target: target
         )
       end
 

data/app/pb_kits/playbook/pb_person/docs/_person_default.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Person } from '../../'
 
-const PersonDefault = () => {
+const PersonDefault = (props) => {
   return (
     <Person
         firstName="Kyle"
         lastName="Fadigan"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactDefault = () => {
+const PersonContactDefault = (props) => {
   return (
     <div>
       <PersonContact
@@ -20,6 +20,7 @@ const PersonContactDefault = () => {
         ]}
           firstName="Pauline"
           lastName="Smith"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactMultiple = () => {
+const PersonContactMultiple = (props) => {
   return (
     <div>
       <PersonContact
@@ -20,6 +20,7 @@ const PersonContactMultiple = () => {
         ]}
           firstName="Harvey"
           lastName="Walters"
+          {...props}
       />
       <PersonContact
           contacts={[
@@ -29,6 +30,7 @@ const PersonContactMultiple = () => {
         ]}
           firstName="Brenda"
           lastName="Walters"
+          {...props}
       />
     </div>
   )