playbook_ui 3.1.0 → 3.2.0

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

@@ -0,0 +1,7 @@
+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_multiple_users_stacked/multiple_users_stacked.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMultipleUsersStacked
+    class MultipleUsersStacked
+      include Playbook::Props
+
+      partial "pb_multiple_users_stacked/multiple_users_stacked"
+
+      prop :users, type: Playbook::Props::HashArray, required: true
+
+      def more_than_two
+        users.count > 2
+      end
+
+      def only_one
+        users.count == 1
+      end
+
+      def display_count
+        more_than_two ? 1 : users.count
+      end
+
+      def classname
+        generate_classname("pb_multiple_users_stacked_kit", single_class)
+      end
+
+    private
+
+      def single_class
+        only_one ? "single" : nil
+      end
+    end
+  end
+end

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

@@ -1,4 +1,6 @@
-import React, { Component } from 'react';
+/* @flow */
+
+import React from 'react'
 
 type NavItemProps = {
   text: String,
@@ -7,25 +9,22 @@ type NavItemProps = {
   children: React.Node,
 }
 
-const NavItem = (props: NavItemProps) => {
-  const { 
-    text = '', 
-    link = '', 
-    active = false, 
-    children
-  } = props;
-
-  const active_class = active === true ? '_active' : ''
-
-  return (
-    <li className={`pb_nav_list_border_item${active_class}`}>
-      <a className='pb_nav_list_item_link' href={link}>
-        <span className='pb_nav_list_item_text'>
-          { text || children }
-        </span>
-      </a>
-    </li>
-  );
-}
+const NavItem = ({
+  text = '',
+  link = '',
+  active = false,
+  children,
+}: NavItemProps) => (
+  <li className={`pb_nav_list_border_item${active ? '_active' : ''}`}>
+    <a
+        className="pb_nav_list_item_link"
+        href={link}
+    >
+      <span className="pb_nav_list_item_text">
+        {text || children}
+      </span>
+    </a>
+  </li>
+)
 
-export default NavItem;
+export default NavItem

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

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { Caption } from '../'
 
@@ -8,23 +10,22 @@ type NavProps = {
   children?: React.Node,
 }
 
-const Nav = (props: NavProps) => {
-  const {
-    title = '',
-    orientation = 'vertical',
-    children
-  } = props;
-
-  return (
-    <div className={`pb_nav_list_${orientation}`}>
-      <div className={`pb_nav_list_title`}>
-        <a className='pb_nav_list_item_link_text'>
-          <Caption size='md' text={`${title}`} />
-        </a>
-      </div>
-      <ul>{children}</ul>
+const Nav = ({
+  title = '',
+  orientation = 'vertical',
+  children,
+}: NavProps) => (
+  <div className={`pb_nav_list_${orientation}`}>
+    <div className="pb_nav_list_title">
+      <a className="pb_nav_list_item_link_text">
+        <Caption
+            size="md"
+            text={`${title}`}
+        />
+      </a>
     </div>
-  )
-}
+    <ul>{children}</ul>
+  </div>
+)
 
 export default Nav

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

@@ -1,15 +1,24 @@
 import React from 'react'
-import {Nav} from '../../'
+import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-function BlockNav() {
+const BlockNav = () => {
   return (
-    <Nav title='Title example' link='#' orientation='vertical'>
-        <NavItem link='#' active={true}>{`Active Nav Item using text prop`}</NavItem>
-        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
-        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
+    <Nav
+        link="#"
+        orientation="vertical"
+        title="Title example"
+    >
+      <NavItem
+          active
+          link="#"
+      >
+        {'Active Nav Item using text prop'}
+      </NavItem>
+      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
+      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
     </Nav>
   )
 }
 
-export default BlockNav;
+export default BlockNav

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

@@ -1,15 +1,23 @@
 import React from 'react'
-import {Nav} from '../../'
+import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-function BlockNoTitleNav() {
+const BlockNoTitleNav = () => {
   return (
-    <Nav link='#' orientation='vertical'>
-        <NavItem link='#' active={true}>{`Active Nav Item using text prop`}</NavItem>
-        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
-        <NavItem link='#'>{`Nav Item using text prop`}</NavItem>
+    <Nav
+        link="#"
+        orientation="vertical"
+    >
+      <NavItem
+          active
+          link="#"
+      >
+        {'Active Nav Item using text prop'}
+      </NavItem>
+      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
+      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
     </Nav>
   )
 }
 
-export default BlockNoTitleNav;
+export default BlockNoTitleNav

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

@@ -1,15 +1,27 @@
 import React from 'react'
-import {Nav} from '../../'
+import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-function DefaultNav() {
-  return (
-    <Nav title='Title example' link='#' orientation='vertical'>
-        <NavItem text='Active Nav Item using text prop' link='#' active={true}/>
-        <NavItem text='Nav Item using text prop' link='#' />
-        <NavItem text='Nav Item using text prop' link='#' />
-    </Nav>
-  )
-}
+const DefaultNav = () => (
+  <Nav
+      link="#"
+      orientation="vertical"
+      title="Title example"
+  >
+    <NavItem
+        active
+        link="#"
+        text="Active Nav Item using text prop"
+    />
+    <NavItem
+        link="#"
+        text="Nav Item using text prop"
+    />
+    <NavItem
+        link="#"
+        text="Nav Item using text prop"
+    />
+  </Nav>
+)
 
-export default DefaultNav;
+export default DefaultNav

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

@@ -1,15 +1,29 @@
 import React from 'react'
-import {Nav} from '../../'
+import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-function HorizontalNav() {
+const HorizontalNav = () => {
   return (
-    <Nav title='Title example' link='#' orientation='horizontal'>
-        <NavItem text='Active Nav Item using text prop' link='#' active={true}/>
-        <NavItem text='Nav Item using text prop' link='#' />
-        <NavItem text='Nav Item using text prop' link='#' />
+    <Nav
+        link="#"
+        orientation="horizontal"
+        title="Title example"
+    >
+      <NavItem
+          active
+          link="#"
+          text="Active Nav Item using text prop"
+      />
+      <NavItem
+          link="#"
+          text="Nav Item using text prop"
+      />
+      <NavItem
+          link="#"
+          text="Nav Item using text prop"
+      />
     </Nav>
   )
 }
 
-export default HorizontalNav;
+export default HorizontalNav

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

@@ -1,4 +1,4 @@
-export {default as DefaultNav} from './_default_nav.jsx';
-export {default as HorizontalNav} from './_horizontal_nav.jsx';
-export {default as BlockNav} from './_block_nav.jsx';
-export {default as BlockNoTitleNav} from './_block_no_title_nav.jsx';
+export { default as DefaultNav } from './_default_nav.jsx'
+export { default as HorizontalNav } from './_horizontal_nav.jsx'
+export { default as BlockNav } from './_block_nav.jsx'
+export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
-};
+  id: PropTypes.string,
+}
 
 class OnlineStatus extends React.Component {
   render() {
     return (
       <div className="pb_online_status">
-        <span>ONLINE STATUS CONTENT</span>
+        <span>{'ONLINE STATUS CONTENT'}</span>
       </div>
     )
   }
 }
 
-OnlineStatus.propTypes = propTypes;
+OnlineStatus.propTypes = propTypes
 
-export default OnlineStatus;
+export default OnlineStatus

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -1,9 +1,8 @@
-import React from "react"
-import {OnlineStatus} from "../../"
+import React from 'react'
 
-function OnlineStatusDefault() {
+const OnlineStatusDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 

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

@@ -1 +1 @@
-export {default as OnlineStatusDefault} from './_online_status_default.jsx';
+export { default as OnlineStatusDefault } from './_online_status_default.jsx'

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -1,5 +1,4 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
@@ -18,17 +17,25 @@ type PersonProps = {
 
 const Person = ({
   className,
-  dark=false,
+  dark = false,
   firstName,
   lastName,
 }: PersonProps) => {
-
   return (
     <div className={classnames('pb_person_kit', className)}>
-      <Body tag="span" dark={dark} className="pb_person_first">
-        {`${firstName}`}
+      <Body
+          className="pb_person_first"
+          dark={dark}
+          tag="span"
+      >
+        {firstName}
       </Body>
-      <Title text={` ${lastName}`} dark={dark} size={4} className="pb_person_first" />
+      <Title
+          className="pb_person_first"
+          dark={dark}
+          size={4}
+          text={` ${lastName}`}
+      />
     </div>
   )
 }

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

@@ -1,13 +1,13 @@
-import React from "react"
-import {Person} from "../../"
+import React from 'react'
+import { Person } from '../../'
 
-function PersonDefault() {
+const PersonDefault = () => {
   return (
     <Person
-      firstName="Kyle"
-      lastName="Fadigan"
+        firstName="Kyle"
+        lastName="Fadigan"
     />
   )
 }
 
-export default PersonDefault;
+export default PersonDefault

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

@@ -1 +1 @@
-export {default as PersonDefault} from './_person_default.jsx';
+export { default as PersonDefault } from './_person_default.jsx'

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -1,54 +1,44 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
+import { Contact, Person } from '../'
 
-
-import {
-  Person,
-  Body,
-  Contact,
-} from '../'
+type ContactItem = {
+  contactType: String,
+  contactValue: String,
+  contactDetail: String,
+}
 
 type PersonContactProps = {
   className?: String | Array<String>,
   dark?: Boolean,
   firstName: String,
   lastName: String,
-  contacts?: Array<{contactType: String, contactValue: String, contactDetail: String}>,
-}
-
-const contactsArray = ({contacts=[]}: PersonContactProps) => {
-  return contacts.map((contactObject, index) => {
-    return (
-      <Contact
-        contactType={contactObject.contactType}
-        contactValue={contactObject.contactValue}
-        contactDetail={contactObject.contactDetail}
-      />
-    );
-  })
+  contacts?: Array<ContactItem>,
 }
 
-
 const PersonContact = ({
   className,
-  dark=false,
   firstName,
   lastName,
   contacts,
-}: PersonContactProps) => {
-
-  const contactKits = contactsArray({contacts})
-
-  return (
-    <div className={classnames('pb_person_contact_kit', className)}>
-      <Person firstName={firstName} lastName={lastName} />
-      {contactKits}
-    </div>
-  )
-}
+}: PersonContactProps) => (
+  <div className={classnames('pb_person_contact_kit', className)}>
+    <Person
+        firstName={firstName}
+        lastName={lastName}
+    />
+    {contacts.map((contactObject, index) => (
+      <Contact
+          contactDetail={contactObject.contactDetail}
+          contactType={contactObject.contactType}
+          contactValue={contactObject.contactValue}
+          key={index}
+      />
+    ))}
+  </div>
+)
 
 export default PersonContact