playbook_ui 9.17.0.pre.decouple.website2 → 9.19.0.pre.alpha.pre.fonts2

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Message } from '../../'
+
+import Message from '../_message'
 
 const MessageDefault = (props) => {
   return (
@@ -8,7 +9,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 +19,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}
@@ -29,21 +31,10 @@ const MessageDefault = (props) => {
       <br />
       <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"
-          {...props}
-      />
-
-      <br />
-      <br />
-
       <Message
           avatarName="Becca Jacobs"
           avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
-          label="Application"
+          label="Lucille Sanchez"
           message="Application for Kate Smith is waiting for your approval"
           timestamp="2 days ago"
           {...props}
@@ -54,7 +45,7 @@ const MessageDefault = (props) => {
 
       <Message
           avatarName="Timothy Wenhold"
-          label="Complaint"
+          label="Beverly Reyes"
           message="We are so sorry you had a bad experience!"
           timestamp="2 days ago"
           {...props}
@@ -64,7 +55,7 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Support"
+          label="Keith Craig"
           message="Please hold for one moment, I will check with my manager."
           timestamp="2 days ago"
           {...props}

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,35 @@
     <% 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("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 %>
       <%= pb_rails("body", props: {
-        text: object.message
-      }) %>
-      <%= pb_rails("timestamp", props: {
-        text: object.timestamp
+        text: object.message,
+        classname: "pb_message_body"
       }) %>
     </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,

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/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

data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_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 NoHighlightNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_subtle_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 SubtleHorizontalNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_subtle_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 SubtleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_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 SubtleNoHighlightNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_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 SubtleWithIconsNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_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 WithIconsNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_with_img_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 WithImageNav = (props) => {
   return (

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { OnlineStatus } from '../../'
+
+import OnlineStatus from '../_online_status'
 
 const OnlineStatusDefault = (props) => (
   <>

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -1,13 +1,22 @@
-
 /* @flow */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
+
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'
-import { Body, Caption, CircleIconButton, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
+import Flex from '../pb_flex/_flex'
+import Icon from '../pb_icon/_icon'
+import PbReactPopover from '../pb_popover/_popover'
+import ProgressSimple from '../pb_progress_simple/_progress_simple'
+import TextInput from '../pb_text_input/_text_input'
 
 type PassphraseProps = {
   aria?: object,
@@ -74,7 +83,10 @@ const Passphrase = (props: PassphraseProps) => {
   }
 
   const [showPassphrase, setShowPassphrase] = useState(false)
-  const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
+  const toggleShowPassphrase = (e) => {
+    e.preventDefault()
+    setShowPassphrase(!showPassphrase)
+  }
 
   const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)