playbook_ui 3.1.0 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27957803c8ed8eef88b068c7c764988e33a4da8e557d94b266fbeee57df8a62b
-  data.tar.gz: f346c938f2fc9b4f379437e155d1f20d6deae59536379b920c48a4efaf05b865
+  metadata.gz: '091fb82d4b72e38e904355eedf2f54d2f61a9dab454b1f8351fb8a393f7c0e34'
+  data.tar.gz: 1bf6b5a09020e9af107074ca3cdfef7f9703e7775e02b9299f98a0482a5d62b2
 SHA512:
-  metadata.gz: a6dd18559eb00332bf7ee3cf86b6b57f275822708c19cada433f3c06eba0a409ade40393e3f8e6bb2087663d1679988379ac27c1d82e48dcc5f67559db309ce2
-  data.tar.gz: ac2687652c44f311891aea746712be2cbaeeaf88c1e38ef1d8df85eb261a521726345eedb43cfada9416e1447f44d8911019dc8823940d0d5cf056ae24cf08d9
+  metadata.gz: e895bb02b0fb481de91c732593fe5d76e3fa9d05cca4a323a3c91a87599a8ad9ac1111602caa3bd87eae1220ebdb1af874179281ced73daaa525254c7f222a98
+  data.tar.gz: 05f3ede8352b44a1abd8804a550e7372b87f29a8363e28f25481bc9ff329dde2d56737ce05042b5c36ade529967da431bd8e30054460e19313e2add378252183

data/app/pb_kits/playbook/_playbook.scss

@@ -32,7 +32,7 @@
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
-@import 'pb_multiple_users/multiple_users';
+@import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
 @import 'pb_person/person';

data/app/pb_kits/playbook/index.js

@@ -13,6 +13,7 @@ export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
+export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
@@ -31,7 +32,9 @@ export ListItem from './pb_list/_list_item.jsx'
 export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
 export Message from './pb_message/_message.jsx'
 export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
+export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
 export Nav from './pb_nav/_nav.jsx'
+export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'

data/app/pb_kits/playbook/kits/pb_multiple_users_stacked.js

@@ -0,0 +1,4 @@
+import MultipleUsersStacked from '../pb_multiple_users_stacked/_multiple_users_stacked.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ MultipleUsersStacked })

data/app/pb_kits/playbook/packs/examples.js

@@ -44,6 +44,7 @@ import * as list from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
+import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
 import * as Person from 'pb_person/docs'
@@ -102,6 +103,7 @@ WebpackerReact.setup(list)
 WebpackerReact.setup(LoadingInline)
 WebpackerReact.setup(Message)
 WebpackerReact.setup(MultipleUsers)
+WebpackerReact.setup(MultipleUsersStacked)
 WebpackerReact.setup(Nav)
 WebpackerReact.setup(OnlineStatus)
 WebpackerReact.setup(Person)

data/app/pb_kits/playbook/packs/kits.js

@@ -29,6 +29,7 @@ import '../kits/pb_line_graph.js'
 import '../kits/pb_loading_inline.js'
 import '../kits/pb_message.js'
 import '../kits/pb_multiple_users.js'
+import '../kits/pb_multiple_users_stacked.js'
 import '../kits/pb_nav.js'
 import '../kits/pb_online_status.js'
 import '../kits/pb_person.js'

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -1,11 +1,10 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
-
 import classnames from 'classnames'
 import { map } from 'lodash'
-import { Image } from "../"
+
+import { Image } from '../'
 
 type AvatarProps = {
   className?: String,
@@ -15,64 +14,40 @@ type AvatarProps = {
   status: 'online' | 'away',
 }
 
-const initials = function(name) {
-  if (name) {
-    return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
-  }
-}
-
-const image = function(imageUrl, name) {
-  if (imageUrl) {
-    return (
-      <Image alt={name}
-          url={imageUrl}
-      />
-    )
-  }
-}
-
-const PbStatus = ({ size, status } : { size: String, status: String }) => (
-  <div className={`pb_online_status_kit_${status} size_${size}`}/>
+const firstTwoInitials = (name) => (
+  map(name.split(/\s/), (name) => name[0])
+    .join('')
+    .substring(0, 2)
 )
 
 const Avatar = ({
   className,
-  name=null,
+  name = null,
   imageUrl,
-  size='md',
-  status=null
+  size = 'md',
+  status = null,
 }: AvatarProps) => {
-
-  const statusDisplay = () => {
-    if(status !== null){
-      return (
-        <PbStatus
-            size={size}
-            status={status}
-        />
-      );
-    }
-  }
-
-  const css = classnames([
-    `pb_avatar_kit`,
-    `avatar_${size}`,
-    className,
-  ])
+  const classes = classnames(['pb_avatar_kit', `avatar_${size}`, className])
+  const initials = name && firstTwoInitials(name)
 
   return (
-    <div className={css}
-        data-initials={initials(name)}
-    >
+    <div className={classes}>
       <div
           className="avatar_wrapper"
-          data-initials={initials(name)}
+          data-initials={initials}
       >
-        {image(imageUrl, name)}
+        <If condition={imageUrl}>
+          <Image
+              alt={name}
+              url={imageUrl}
+          />
+        </If>
       </div>
-      {statusDisplay()}
+      <If condition={status}>
+        <div className={`pb_online_status_kit_${status} size_${size}`} />
+      </If>
     </div>
   )
 }
 
-export default Avatar
+export default Avatar

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import { Avatar } from "../../"
+import React from 'react'
+import { Avatar } from '../../'
 
-function AvatarDefault() {
+const AvatarDefault = () => {
   return (
     <div>
       <Avatar
@@ -10,28 +10,28 @@ function AvatarDefault() {
           size="xs"
           status="online"
       />
-      <br/>
+      <br />
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
           status="online"
       />
-      <br/>
+      <br />
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="md"
           status="away"
       />
-      <br/>
+      <br />
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="lg"
           status="offline"
       />
-      <br/>
+      <br />
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
@@ -42,4 +42,4 @@ function AvatarDefault() {
   )
 }
 
-export default AvatarDefault;
+export default AvatarDefault

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,16 +1,31 @@
-import React from "react"
-import { Avatar } from "../../"
+import React from 'react'
+import { Avatar } from '../../'
 
-function AvatarDefault() {
+const AvatarDefault = () => {
   return (
     <div>
-      <Avatar name="Terry Johnson" size="xs" />
-      <Avatar name="Terry Johnson" size="sm" />
-      <Avatar name="Terry Johnson" size="md" />
-      <Avatar name="Terry Johnson" size="lg" />
-      <Avatar name="Terry Johnson" size="xl" />
+      <Avatar
+          name="Terry Johnson"
+          size="xs"
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="sm"
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="md"
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="lg"
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="xl"
+      />
     </div>
   )
 }
 
-export default AvatarDefault;
+export default AvatarDefault

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

@@ -1,2 +1,2 @@
-export {default as AvatarDefault} from './_avatar_default.jsx';
-export {default as AvatarMonogram} from './_avatar_monogram.jsx';
+export { default as AvatarDefault } from './_avatar_default.jsx'
+export { default as AvatarMonogram } from './_avatar_monogram.jsx'

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -1,8 +1,8 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
 
 type BadgeProps = {
   className?: String,
@@ -18,18 +18,19 @@ const Badge = ({
   id,
   text,
   variant = 'neutral',
-  rounded = false
+  rounded = false,
 }: BadgeProps) => {
-  const roundedClass = rounded === true ? "rounded" : ""
-  const darkClass = dark === true ? "dark" : ""
-  const css = classnames([
-    `pb_badge_kit_${variant}_${roundedClass}_${darkClass}`,
-    className,
-  ])
+  const css = classnames(className, buildCss('pb_badge_kit', variant, {
+    'rounded': rounded,
+    'dark': dark,
+  }))
 
   return (
-    <div id={id} className={css}>
-        <span>{text}</span>
+    <div
+        className={css}
+        id={id}
+    >
+      <span>{text}</span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -1,82 +1,142 @@
-import React from "react"
-import Badge from "../_badge.jsx"
+import React from 'react'
+import Badge from '../_badge.jsx'
 
-function BadgeColors() {
+const BadgeColors = () => {
   return (
     <div>
       <div>
-        <Badge text="+1" variant="primary" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="primary"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="primary" />
+        <Badge
+            text="+4"
+            variant="primary"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="primary" />
+        <Badge
+            text="+1000"
+            variant="primary"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="success" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="success"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="success" />
+        <Badge
+            text="+4"
+            variant="success"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="success" />
+        <Badge
+            text="+1000"
+            variant="success"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="warning" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="warning"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="warning" />
+        <Badge
+            text="+4"
+            variant="warning"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="warning" />
+        <Badge
+            text="+1000"
+            variant="warning"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="error" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="error"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="error" />
+        <Badge
+            text="+4"
+            variant="error"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="error" />
+        <Badge
+            text="+1000"
+            variant="error"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="info" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="info"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="info" />
+        <Badge
+            text="+4"
+            variant="info"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="info" />
+        <Badge
+            text="+1000"
+            variant="info"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="neutral" rounded />
+        <Badge
+            rounded
+            text="+1"
+            variant="neutral"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="neutral" />
+        <Badge
+            text="+4"
+            variant="neutral"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="neutral" />
+        <Badge
+            text="+1000"
+            variant="neutral"
+        />
       </div>
     </div>
   )
 }
 
-export default BadgeColors;
+export default BadgeColors