playbook_ui 9.18.0 → 10.0.1

data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { List, ListItem } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
 
 const ListBorderless = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { List, ListItem } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
 
 const ListDefault = () => {
   return (

data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
-import { Currency, List, ListItem, Title } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
 
 const ListLayoutLeft = (props) => {
   return (

data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx

@@ -1,6 +1,10 @@
 import React from 'react'
 
-import { Currency, List, ListItem, Title } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
+
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
 
 const ListLayoutRight = (props) => {
   return (

data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { List, ListItem } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
 
 const ListLg = (props) => {
   return (

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { List, ListItem } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
 
 const ListOrdered = (props) => {
   return (

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { List, ListItem } from '../../'
+import List from '../_list'
+import ListItem from '../_list_item'
 
 const ListXpadding = (props) => {
   return (

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

@@ -2,10 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Body, Icon } from '../'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
 type LoadingInlineProps = {
   align?: "left" | "center" | "right",
   className?: string,

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { LoadingInline } from '../../'
+
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -2,10 +2,15 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Body, Caption, Icon, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
 
 const dateString = (value: DateTime) => {
   const month = value.toMonthNum()

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

@@ -1,22 +1,31 @@
 /* @flow */
 
 import React from 'react'
-import { Avatar, Body, Caption } from '../'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Avatar from '../pb_avatar/_avatar'
+import Body from '../pb_body/_body'
+import Flex from '../pb_flex/_flex'
+import Timestamp from '../pb_timestamp/_timestamp'
+import Title from '../pb_title/_title'
 
 type MessageProps = {
   aria: object,
   avatarName?: string,
   avatarStatus?: string,
   avatarUrl?: string,
+  children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   data?: object,
   id?: string,
   label?: string,
   message: string,
   timestamp?: string,
+  timestampObject?: string,
+  alignTimestamp?: string,
 }
 
 const Message = (props: MessageProps) => {
@@ -25,12 +34,15 @@ const Message = (props: MessageProps) => {
     avatarName,
     avatarStatus = null,
     avatarUrl,
+    children,
     className,
     data = {},
     id,
     label,
     message,
     timestamp,
+    timestampObject,
+    alignTimestamp = 'right',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -56,17 +68,41 @@ const Message = (props: MessageProps) => {
         <Avatar
             imageUrl={avatarUrl}
             name={avatarName}
-            size="sm"
+            size="xs"
             status={avatarStatus}
         />
       </If>
       <div className="content_wrapper">
-        <If condition={label}>
-          <Caption>{label}</Caption>
+        <Flex
+            justify={alignTimestamp === 'left' ? 'none' : 'between'}
+            orientation="row"
+        >
+          <If condition={label}>
+            <Title
+                className="message_title"
+                size={4}
+                text={label}
+            />
+          </If>
+          <Timestamp
+              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+              text={timestamp}
+          />
+          <If condition={timestampObject}>
+            <Timestamp
+                className={`pull-${alignTimestamp} message_timestamp`}
+                timestamp={timestampObject}
+            />
+          </If>
+        </Flex>
+        <If condition={message}>
+          <Body
+              className="pb_message_body"
+              text={message}
+          />
         </If>
-        <Body>{message}</Body>
-        <If condition={timestamp}>
-          <Caption size="xs">{timestamp}</Caption>
+        <If condition={children}>
+          { children }
         </If>
       </div>
     </div>

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -3,22 +3,48 @@
 @mixin pb_message {
   display: flex;
   justify-content: flex-start;
-  align-items: center;
 
   .content_wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
+    width: 100%;
+
+    .pull-left {
+      margin-left: $space-xs;
+    }
+
+    [class^=pb_flex_] {
+      width: 100%;
+    }
 
     .message_text {
       margin: 0 0 $space-xs/2;
     }
+
+    .message_title {
+      font-size: $font_small;
+    }
   }
 
-  &[class*=_avatar]  {
+  &[class*=_avatar] {
     .content_wrapper {
-      margin-left: $space-sm;
+      margin-left: $space-xs;
+    }
+  }
+
+  .pb_message_body {
+    font-size: 15px;
+  }
+
+  .message_timestamp {
+    display: none;
+  }
+
+  &:hover {
+    .message_timestamp {
+      display: block;
+    }
+
+    .message_humanized_time {
+      display: none;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <%= pb_rails("message", props: {
-  label: "Message",
+  label: "Anna Black",
   message: "How can we assist you today?",
   timestamp: "20 seconds ago",
   avatar_name: "Mike Bishop",
@@ -10,35 +10,45 @@
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Support",
+  label: "Patrick Welch",
   message: "We'll escalate this issue to a Senior Support agent.",
   timestamp: "9 minutes ago",
-  avatar_name:"Wade Winningham",
-  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg"
+  avatar_name: "Wade Winningham",
+  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
+  align_timestamp: "left"
 }) %>
 
 <br><br>
 
 <%= pb_rails("message", props: {
-  message: "To processs your order, I'll need your full name.",
+  label: "Lucille Sanchez",
+  message: "Application for Kate Smith is waiting for your approval",
   timestamp: "4 hours ago",
-  avatar_name: "Lisa Thompson",
-  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
+  avatar_name: "Becca Jacobs",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
 }) %>
 
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Application",
-  message: "Application for Kate Smith is waiting for your approval",
-  avatar_name: "Becca Jacobs",
-  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
+  label: "Beverly Reyes",
+  message: "We're so sorry you had a bad experience!",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "Keith Craig",
+  message: "Please hold for one moment, I'll check with my manager.",
+  timestamp: "2 days ago"
 }) %>
 
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Complaint",
+  label: "",
   message: "We're so sorry you had a bad experience!",
   timestamp: "2 days ago",
   avatar_name: "Tim Wenhold"
@@ -47,7 +57,20 @@
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Support",
+  label: "",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "",
   message: "Please hold for one moment, I'll check with my manager.",
-  timestamp: "2 days ago"
-}) %>
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Message } from '../../'
+
+import Message from '../_message'
+import Image from '../../pb_image/_image'
 
 const MessageDefault = (props) => {
   return (
@@ -8,7 +10,7 @@ const MessageDefault = (props) => {
           avatarName="Mike Bishop"
           avatarStatus="online"
           avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
-          label="Message"
+          label="Anna Black"
           message="How can we assist you today?"
           timestamp="20 seconds ago"
           {...props}
@@ -18,9 +20,10 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
+          alignTimestamp="left"
           avatarName="Wade Winningham"
           avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
-          label="Support"
+          label="Patrick Welch"
           message="We will escalate this issue to a Senior Support agent."
           timestamp="9 minutes ago"
           {...props}
@@ -30,10 +33,11 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName="Lisa Thompson"
-          avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
-          message="To process your order, I will need your full name."
-          timestamp="4 hours ago"
+          avatarName="Becca Jacobs"
+          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+          label="Lucille Sanchez"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="2 days ago"
           {...props}
       />
 
@@ -41,10 +45,9 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName="Becca Jacobs"
-          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
-          label="Application"
-          message="Application for Kate Smith is waiting for your approval"
+          avatarName="Timothy Wenhold"
+          label="Beverly Reyes"
+          message="We are so sorry you had a bad experience!"
           timestamp="2 days ago"
           {...props}
       />
@@ -53,9 +56,8 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName="Timothy Wenhold"
-          label="Complaint"
-          message="We are so sorry you had a bad experience!"
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
           timestamp="2 days ago"
           {...props}
       />
@@ -64,11 +66,32 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Support"
+          label="Keith Craig"
+          timestamp="2 days ago"
+          {...props}
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
+
+      <br />
+      <br />
+
+      <Message
+          label="Keith Craig"
           message="Please hold for one moment, I will check with my manager."
           timestamp="2 days ago"
           {...props}
-      />
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
 
     </div>
   )