RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

Files changed (1479) hide show

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx ADDED Viewed

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Body, MultipleUsers } from '../../'
+const MultipleUsersSize = (props) => {
+  return (
+    <div>
+      <Body
+          color="light"
+          text="xs"
+      />
+      <MultipleUsers
+          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}
+      />
+      <br />
+      <MultipleUsers
+          marginTop="xs"
+          size="xs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+      <Body
+          color="light"
+          marginTop="xs"
+          text="xxs"
+      />
+      <MultipleUsers
+          size="xxs"
+          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}
+      />
+      <br />
+      <MultipleUsers
+          marginTop="xs"
+          size="xxs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+    </div>
+  )
+}
+export default MultipleUsersSize

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ User avatar default size is `xs` or `28px`, but you can pass in `xxs` to change avatar size to `20px`.

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml ADDED Viewed

@@ -0,0 +1,12 @@
+examples:
+  rails:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse
+  - multiple_users_size: Size
+  react:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse
+  - multiple_users_size: Size

data/app/pb_kits/playbook/pb_multiple_users/docs/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
+export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
+export { default as MultipleUsersSize } from './_multiple_users_size.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb ADDED Viewed

@@ -0,0 +1,50 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+<br/><br/>
+<%= pb_rails("multiple_users_stacked", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    }
+  ]
+}) %>
+<br/><br/>
+<%= pb_rails("multiple_users_stacked", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 %>