RubyGems - playbook_ui - Versions diffs - 3.1.0 → 3.2.0 - Mend

playbook_ui 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (322) hide show

data/app/pb_kits/playbook/pb_list/_list_item.jsx CHANGED Viewed

@@ -1,26 +1,26 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 const propTypes = {
   children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
 class ListItem extends Component {
   render() {
     const {
-      children
-    } = this.props;
+      children,
+    } = this.props
     return (
-      <li>
+      <li className="pb_item_kit">
         {children}
       </li>
-    );
+    )
   }
 }
-ListItem.propTypes = propTypes;
+ListItem.propTypes = propTypes
-export default ListItem;
+export default ListItem

data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React from 'react'
+import { List, ListItem } from '../../'
+const ListDark = () => {
+  return (
+    <>
+      <List
+          borderless
+          dark
+          layout="right"
+          ordered
+          size="large"
+          xpadding
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+      </List>
+    </>
+  )
+}
+export default ListDark

data/app/pb_kits/playbook/pb_list/docs/_list_default.jsx CHANGED Viewed

@@ -1,14 +1,17 @@
-import React from "react"
-import {
-  ListItem,
-  List,
-} from "../../"
+import React from 'react'
+import { List, ListItem } from '../../'
-function ListDefault() {
+const ListDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <>
+      <List>
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+      </List>
+    </>
   )
 }
-export default ListDefault;
+export default ListDefault

data/app/pb_kits/playbook/pb_list/docs/example.yml CHANGED Viewed

@@ -12,3 +12,4 @@ examples:
   - list_dark_xpadding: Dark Horizontal Padding
   react:
   - list_default: Default
+  - list_dark: Dark

data/app/pb_kits/playbook/pb_list/docs/index.js CHANGED Viewed

@@ -1 +1,2 @@
-export {default as ListDefault} from './_list_default.jsx';
+export { default as ListDefault } from './_list_default.jsx'
+export { default as ListDark } from './_list_dark.jsx'

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx CHANGED Viewed

@@ -1,5 +1,4 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 import React from 'react'
@@ -17,16 +16,16 @@ type LoadingInlineProps = {
 }
 const LoadingInline = ({
-  align='left',
-  className,
-  dark=false,
-  data,
-  id
+  align = 'left',
 }: LoadingInlineProps) => (
   <div className={`pb_loading_inline_kit_${align}`}>
     <Body color="light">
-      <Icon fixedWidth pulse icon="spinner" />&nbsp;
-      {`Loading`}
+      <Icon
+          fixedWidth
+          icon="spinner"
+          pulse
+      />
+      {' Loading'}
     </Body>
   </div>
 )

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_dark.jsx CHANGED Viewed

@@ -1,14 +1,20 @@
-import React from "react"
-import {LoadingInline} from "../../"
+import React from 'react'
+import { LoadingInline } from '../../'
-function LoadingInlineDark() {
+const LoadingInlineDark = () => {
   return (
     <div>
       <LoadingInline dark />
-      <LoadingInline dark align="center" />
-      <LoadingInline dark align="right" />
+      <LoadingInline
+          align="center"
+          dark
+      />
+      <LoadingInline
+          align="right"
+          dark
+      />
     </div>
   )
 }
-export default LoadingInlineDark;
+export default LoadingInlineDark

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
-import React from "react"
-import {LoadingInline} from "../../"
+import React from 'react'
+import { LoadingInline } from '../../'
-function LoadingInlineLight() {
+const LoadingInlineLight = () => {
   return (
     <div>
       <LoadingInline />
@@ -11,4 +11,4 @@ function LoadingInlineLight() {
   )
 }
-export default LoadingInlineLight;
+export default LoadingInlineLight

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export {default as LoadingInlineLight} from './_loading_inline_light.jsx';
-export {default as LoadingInlineDark} from './_loading_inline_dark.jsx';
+export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
+export { default as LoadingInlineDark } from './_loading_inline_dark.jsx'

data/app/pb_kits/playbook/pb_message/_message.jsx CHANGED Viewed

@@ -1,10 +1,8 @@
-import React from 'react';
+/* @flow */
-import {
-  Body,
-  Caption,
-  Avatar,
-} from '../'
+import React from 'react'
+import { Avatar, Body, Caption } from '../'
 type MessageProps = {
   avatarName?: String,
@@ -15,64 +13,38 @@ type MessageProps = {
   timestamp?: String,
 }
-const print_label = (label) => {
-  if ( label != null ) {
-    return (
-      <Caption>{`${label}`}</Caption>
-    )
-  }
-}
-const print_timestamp = (timestamp) => {
-  if ( timestamp != null ) {
-    return(
-      <Caption size='xs'>{`${timestamp}`}</Caption>
-    )
-  }
-}
-const Message = (props: MessageProps) => {
-  const {
-    avatarName='',
-    avatarUrl='',
-    label='',
-    message='',
-    timestamp='',
-    avatarStatus=null
-  } = props
-  const print_avatar = (avatarName, avatarUrl, avatarStatus) => {
-    if ( avatarUrl !== '' && avatarName !== '' ) {
-      return (
-        <Avatar name={avatarName} size='sm' imageUrl={avatarUrl} status={avatarStatus}/>
-      )
-    }
-    if ( avatarUrl === '' && avatarName !== '' ) {
-      return (
-        <Avatar name={avatarName} size='sm' status={avatarStatus}/>
-      )
-    }
-  }
-  const messageCSS = ( avatarUrl, avatarName ) => {
-    if (avatarUrl != '' || avatarName != '') {
-      return 'pb_message_kit_avatar'
-    }
-    else {
-      return 'pb_message_kit'
-    }
-  }
+const Message = ({
+  avatarName = '',
+  avatarUrl = '',
+  label = '',
+  message = '',
+  timestamp = '',
+  avatarStatus = null,
+}: MessageProps) => {
+  const shouldDisplayAvatar = avatarUrl || avatarName
+  const classes = shouldDisplayAvatar ? 'pb_message_kit_avatar' : 'pb_message_kit'
   return (
-    <div className={messageCSS(avatarName, avatarUrl)}>
-      {print_avatar(avatarName, avatarUrl, avatarStatus)}
-      <div class="content_wrapper">
-        {print_label(label)}
+    <div className={classes}>
+      <If condition={shouldDisplayAvatar}>
+        <Avatar
+            imageUrl={avatarUrl}
+            name={avatarName}
+            size="sm"
+            status={avatarStatus}
+        />
+      </If>
+      <div className="content_wrapper">
+        <If condition={label}>
+          <Caption>{label}</Caption>
+        </If>
         <Body>{message}</Body>
-        {print_timestamp(timestamp)}
+        <If condition={timestamp}>
+          <Caption size="xs">{timestamp}</Caption>
+        </If>
       </div>
     </div>
   )
 }
-export default Message;
+export default Message

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

@@ -1,63 +1,68 @@
-import React from "react"
-import { Message } from "../../"
+import React from 'react'
+import { Message } from '../../'
-function MessageDefault() {
+const MessageDefault = () => {
   return (
     <div>
       <Message
-        label='Message'
-        avatarName='Mike Bishop'
-        message='How can we assist you today?'
-        timestamp='20 seconds ago'
-        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
-        avatarStatus="online"
+          avatarName="Mike Bishop"
+          avatarStatus="online"
+          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
+          label="Message"
+          message="How can we assist you today?"
+          timestamp="20 seconds ago"
       />
-      <br/><br/>
+      <br />
+      <br />
       <Message
-        label='Support'
-        avatarName='Wade Winningham'
-        message='We will escalate this issue to a Senior Support agent.'
-        timestamp='9 minutes ago'
-        avatarUrl='https://randomuser.me/api/portraits/men/14.jpg'
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Support"
+          message="We will escalate this issue to a Senior Support agent."
+          timestamp="9 minutes ago"
       />
-      <br/><br/>
+      <br />
+      <br />
       <Message
-        avatarName='Lisa Thompson'
-        message='To processs your order, I will need your full name.'
-        timestamp='4 hours ago'
-        avatarUrl='https://randomuser.me/api/portraits/women/39.jpg'
+          avatarName="Lisa Thompson"
+          avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
+          message="To processs your order, I will need your full name."
+          timestamp="4 hours ago"
       />
-      <br/><br/>
+      <br />
+      <br />
       <Message
-        avatarName='Becca Jacobs'
-        label='Application'
-        message='Application for Kate Smith is waiting for your approval'
-        timestamp='2 days ago'
-        avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+          avatarName="Becca Jacobs"
+          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+          label="Application"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="2 days ago"
       />
-      <br/><br/>
+      <br />
+      <br />
       <Message
-        avatarName='Timothy Wenhold'
-        label='Complaint'
-        message='We are so sorry you had a bad experience!'
-        timestamp='2 days ago'
+          avatarName="Timothy Wenhold"
+          label="Complaint"
+          message="We are so sorry you had a bad experience!"
+          timestamp="2 days ago"
       />
-      <br/><br/>
+      <br />
+      <br />
       <Message
-        label='Support'
-        message='Please hold for one moment, I will check with my manager.'
-        timestamp='2 days ago'
+          label="Support"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
       />
     </div>

data/app/pb_kits/playbook/pb_message/docs/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- export {default as MessageDefault} from './_message_default.jsx';
1	+ export { default as MessageDefault } from './_message_default.jsx'

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx CHANGED Viewed

@@ -1,67 +1,48 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 import React from 'react'
 import classnames from 'classnames'
-import {
-  Avatar
-} from '../'
+import { buildCss } from '../utilities/props'
+import { Avatar } from '../'
 type MultipleUsersProps = {
   className?: String,
   id?: String,
+  maxDisplayedUsers?: Number,
   reverse?: Boolean,
   users: Array<Object>,
 }
 const MultipleUsers = ({
-    className,
-    id,
-    reverse=false,
-    users
-  }: MultipleUsersProps) => {
+  className,
+  id,
+  maxDisplayedUsers = 4,
+  reverse = false,
+  users,
+}: MultipleUsersProps) => {
+  const displayCount = users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
+  const usersToDisplay = users.slice(0, displayCount)
-  const multipleUsersCss = () => {
-    let css = 'pb_multiple_users_kit'
-    css += reverse === true ? '_reverse' : ''
-    return css
-  }
-  const moreThanFour = () => {
-    return users.length > 4
-  }
-  const displayCount = () => {
-    return moreThanFour() ? 3 : users.length
-  }
-  const multipleUsers = () => {
-    return users.slice(0, displayCount()).map((userObject, index) => {
-      return (
+  return (
+    <div
+        className={classnames(className, buildCss('pb_multiple_users_kit', reverse && 'reverse'))}
+        id={id}
+    >
+      {usersToDisplay.map((avatarData, index) => (
         <Avatar
-          {...userObject}
-          key={index}
-          size="xs"
-          className="pb_multiple_users_item" />
-      )
-    })
-  }
-  const plusUsers = () => {
-    if( moreThanFour() === true ) {
-      return (
+            {...avatarData}
+            className="pb_multiple_users_item"
+            key={index}
+            size="xs"
+        />
+      ))}
+      <If condition={users.length > maxDisplayedUsers}>
         <div className="pb_multiple_users_item multiple_users_badge">
-          {`+${users.length - displayCount()}`}
+          {`+${users.length - 3}`}
         </div>
-      )
-    }
-  }
-  return (
-    <div id={id} className={classnames(multipleUsersCss(), className)}>
-      {multipleUsers()}
-      {plusUsers()}
+      </If>
     </div>
   )
 }