playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import MultipleUsersStacked from '../_multiple_users_stacked'
+
+const MultipleUsersStackedDefault = (props) => {
+  return (
+    <div>
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+      ]}
+          {...props}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+      ]}
+          {...props}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersStackedDefault

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

@@ -0,0 +1,8 @@
+examples:
+
+  rails:
+  - multiple_users_stacked_default: Default
+
+
+  react:
+  - multiple_users_stacked_default: Default

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

@@ -0,0 +1 @@
+export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'

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

@@ -0,0 +1,42 @@
+<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+    }) %>
+  <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Julie Hamilton",
+      territory: "PHL",
+      title: "Inside Sales Agent",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Dennis Wilks",
+      territory: "PHL",
+      title: "Senior Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Ronnie Martin",
+      territory: "PHL",
+      title: "Customer Development Representative",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
+      }) %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import User from '../../pb_user/_user'
+
+const BlockNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        title="Users"
+        {...props}
+    >
+      <NavItem
+          active
+          link="#"
+          {...props}
+      >
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  )
+}
+
+export default BlockNav

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

@@ -0,0 +1,7 @@
+<%= pb_rails("nav") do %>
+  <%= pb_rails("nav/item", props: { icon_left: "newspaper", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "comments-alt", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "calendar-check", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users-class", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+  )
+}
+
+export default BlockNoTitleNav

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) 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/_bold_horizontal_nav.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const BoldHorizontalNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="horizontal"
+        variant="bold"
+        {...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 BoldHorizontalNav

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "vertical", variant: "bold" }) 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/_bold_vertical_nav.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const BoldVerticalNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...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 BoldVerticalNav

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {borderless: true}) do %>
+  <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+  )
+}
+
+export default BorderlessNav

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+)
+
+export default DefaultNav

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

@@ -0,0 +1 @@
+The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal" }) 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/_horizontal_nav.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+  )
+}
+
+export default HorizontalNav

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,40 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { highlight: false }) do %>
+  <%= pb_rails("nav/item", props: { text: "All Categories", active: true, link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Digital", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Design Art", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+  )
+}
+
+export default NoHighlightNav

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,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "Overview", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true  }) %>
+  <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Events", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Discography", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Listeners", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+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>
+  )
+}
+
+export default SubtleNav