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

data/app/pb_kits/playbook/pb_layout/docs/_layout_content.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Layout } from '../../'
+
+import Layout from '../_layout'
+
+import Card from '../../pb_card/_card'
 
 const LayoutContent = () => {
   return (

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import {
-  Avatar,
-  Caption,
-  Card,
-  Flex,
-  FlexItem,
-  Icon,
-  Layout,
-  MultipleUsers,
-  Timestamp,
-  Title,
-} from '../../'
+
+import Avatar from '../../pb_avatar/_avatar'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Layout from '../../pb_layout/_layout'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+import Timestamp from '../../pb_timestamp/_timestamp'
+import Title from '../../pb_title/_title'
 
 const LayoutKanban = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Caption, Card, Layout } from '../../'
+
+import Layout from '../_layout'
+
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
 
 const LayoutKanbanResponsive = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Image, Layout } from '../../'
+
+import Layout from '../_layout'
+
+import Image from '../../pb_image/_image'
 
 const LayoutMasonry = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Layout } from '../../'
+
+import Layout from '../_layout'
 
 const LayoutSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Layout } from '../../'
+
+import Layout from '../_layout'
 
 const LayoutTransparent = (props) => {
   return (

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -2,10 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
-import { Body, Title } from '../'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type LegendProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Legend } from '../../'
+
+import Legend from '../_legend'
 
 const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
 

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -2,8 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { globalProps } from '../utilities/globalProps.js'
-import { pbChart } from '../'
+import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
   axisTitle?: string,

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { LineGraph } from '../../'
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from '../../'
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Number of Installations',

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,10 +1,16 @@
 /* @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,
@@ -17,6 +23,8 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
+  timestampObject?: string,
+  alignTimestamp?: string,
 }
 
 const Message = (props: MessageProps) => {
@@ -31,6 +39,8 @@ const Message = (props: MessageProps) => {
     label,
     message,
     timestamp,
+    timestampObject,
+    alignTimestamp = 'right',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -56,18 +66,37 @@ 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>
-        </If>
-        <Body>{message}</Body>
-        <If condition={timestamp}>
-          <Caption size="xs">{timestamp}</Caption>
-        </If>
+        <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>
+        <Body
+            className="pb_message_body"
+            text={message}
+        />
       </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,27 +10,20 @@
 <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.",
-  timestamp: "4 hours ago",
-  avatar_name: "Lisa Thompson",
-  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
-}) %>
-
-<br><br>
-
-<%= pb_rails("message", props: {
-  label: "Application",
+  label: "Lucille Sanchez",
   message: "Application for Kate Smith is waiting for your approval",
+  timestamp: "4 hours ago",
   avatar_name: "Becca Jacobs",
   avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
 }) %>
@@ -38,7 +31,7 @@
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Complaint",
+  label: "Beverly Reyes",
   message: "We're so sorry you had a bad experience!",
   timestamp: "2 days ago",
   avatar_name: "Tim Wenhold"
@@ -47,7 +40,16 @@
 <br><br>
 
 <%= pb_rails("message", props: {
-  label: "Support",
+  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: "",
+  message: "We're so sorry you had a bad experience!",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) %>