playbook_ui 9.18.0 → 10.0.1

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("message", props: {
+  label: "Anna Black",
+  message: "Hover over me to check out the real time I was made!",
+  timestamp: "4 hours ago",
+  timestamp_object: DateTime.current,
+  avatar_name: "Lisa Thompson",
+  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
+}) %>
+<br><br>
+<%= pb_rails("message", props: {
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  timestamp: "12.20p",
+  align_timestamp: "left",
+  timestamp_object: DateTime.current,
+  avatar_name: "Lisa Thompson",
+  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
+}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Message } from '../../'
+
+const MessageTimestamp = (props) => {
+  return (
+    <>
+      <Message
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Anna Black"
+          message="We will escalate this issue to a Senior Support agent."
+          timestamp="9 minutes ago"
+          timestampObject={new Date}
+          {...props}
+      />
+      <br />
+      <br />
+      <Message
+          alignTimestamp="left"
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Becca Jacobs"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="12.20p"
+          timestampObject={new Date}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default MessageTimestamp

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

@@ -1,9 +1,11 @@
 examples:
-  
+
   rails:
   - message_default: Default
-  
-  
+  - message_timestamp: With Timestamp Hover
+
+
   react:
   - message_default: Default
-  
+  - message_timestamp: With Timestamp Hover
+

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

@@ -1 +1,2 @@
 export { default as MessageDefault } from './_message_default.jsx'
+export { default as MessageTimestamp } from './_message_timestamp.jsx'

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -6,20 +6,40 @@
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,
-        size: "sm",
+        size: "xs",
         image_url: object.avatar_url,
         status: object.avatar_status
       }) %>
     <% end %>
     <div class="content_wrapper">
-      <%= pb_rails("caption", props: {
-        text: object.label
-      }) %>
-      <%= pb_rails("body", props: {
-        text: object.message
-      }) %>
-      <%= pb_rails("timestamp", props: {
-        text: object.timestamp
-      }) %>
+      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between" }) do %>
+        <% if object.label.present? %>
+          <%= pb_rails("title", props: {
+            size: 4,
+            text: object.label,
+            classname: "message_title"
+          }) %>
+        <% end %>
+
+        <%= pb_rails("timestamp", props: {
+          text: object.timestamp,
+          classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
+        }) %>
+        <% if object.timestamp_object.present? %>
+          <%= pb_rails("timestamp", props: {
+            timestamp: object.timestamp_object,
+            classname: "pull-#{object.align_timestamp} message_timestamp"
+          }) %>
+        <% end %>
+      <% end %>
+      <% if content.present? %>
+        <%= content %>
+      <% end %>
+      <% if object.message.present? %>
+        <%= pb_rails("body", props: {
+          text: object.message,
+          classname: "pb_message_body"
+        }) %>
+      <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_message/message.rb

@@ -9,6 +9,8 @@ module Playbook
       prop :label
       prop :message
       prop :timestamp
+      prop :timestamp_object
+      prop :align_timestamp, type: Playbook::Props::Enum, values: %w[left right], default: "right"
 
       def classname
         generate_classname("pb_message_kit", avatar_class)

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

@@ -2,10 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Avatar } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
+import Avatar from '../pb_avatar/_avatar'
+
 type MultipleUsersProps = {
   aria?: object,
   className?: string,
@@ -14,6 +16,7 @@ type MultipleUsersProps = {
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
+  size?: string,
   users: array<object>,
 }
 
@@ -26,6 +29,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
     id,
     maxDisplayedUsers = 4,
     reverse = false,
+    size = 'xs',
     users,
   } = props
 
@@ -34,6 +38,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const usersToDisplay = users.slice(0, displayCount)
 
   const reverseClass = reverse === true ? 'reverse' : ''
+  const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -42,6 +47,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
     className
   )
 
+  const itemClasses = classnames(
+    'pb_multiple_users_item',
+    buildCss('multiple_users_badge', avatarSizeClass)
+  )
+
   return (
     <div
         {...ariaProps}
@@ -55,12 +65,12 @@ const MultipleUsers = (props: MultipleUsersProps) => {
             className="pb_multiple_users_item"
             dark={dark}
             key={index}
-            size="xs"
+            size={size}
         />
       ))}
 
       <If condition={users.length > maxDisplayedUsers}>
-        <div className="pb_multiple_users_item multiple_users_badge">
+        <div className={itemClasses}>
           {`+${users.length - 3}`}
         </div>
       </If>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -6,11 +6,13 @@
 $pb_multiple_users_overlap: -9px;
 $pb_multiple_users_border_size: 1px;
 $pb_multiple_users_size: map-get($avatar-sizes, "xs");
+$pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
 
 [class^=pb_multiple_users_kit] {
   display: inline-flex;
 
-  .multiple_users_badge {
+  .multiple_users_badge_xs,
+  .multiple_users_badge_xxs {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,6 +26,11 @@ $pb_multiple_users_size: map-get($avatar-sizes, "xs");
     font-size: $font_smallest - 1;
   }
 
+  .multiple_users_badge_xxs {
+    width: $pb_multiple_users_size_xxs;
+    height: $pb_multiple_users_size_xxs;
+  }
+
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersSize = (props) => {
+  return (
+    <div>
+      <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 />
+      <br />
+
+      <MultipleUsers
+          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

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

@@ -8,3 +8,4 @@ examples:
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_size: Size

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

@@ -1,2 +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/multiple_users.html.erb

@@ -8,7 +8,7 @@
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge">
+      <div class="pb_multiple_users_item multiple_users_badge_xs">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx

@@ -3,11 +3,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
-import { Avatar, Badge } from '../'
 
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
+import Avatar from '../pb_avatar/_avatar'
+import Badge from '../pb_badge/_badge'
+
 type MultipleUsersStackedProps = {
   aria?: object,
   className?: string,

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { MultipleUsersStacked } from '../../'
+
+import MultipleUsersStacked from '../_multiple_users_stacked'
 
 const MultipleUsersStackedDefault = (props) => {
   return (

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

@@ -2,9 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon, Image } from '../'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+import Image from '../pb_image/_image'
 
 type NavItemProps = {
   active?: boolean,

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

@@ -2,9 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Caption from '../pb_caption/_caption'
 
 type NavProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -3,8 +3,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
+@import "../tokens/titles";
 @import "../pb_body/body_mixins";
-@import "../pb_title/title_mixin";
 @import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
       border-bottom: 0;
     }
   }
-  
+
 }
 
 //Image Wrapper

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

@@ -1,6 +1,8 @@
 import React from 'react'
-import { Nav, User } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import User from '../../pb_user/_user'
 
 const BlockNav = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
 
 const BlockNoTitleNav = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
 
 const BorderlessNav = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
 
 const DefaultNav = (props) => (
   <Nav

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
 
 const HorizontalNav = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
 
 const NewTab = (props) => (
   <Nav