playbook_ui 9.19.0.pre.alphafonts → 10.0.1.alpha.rtflexfix

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,16 +1,23 @@
 /* @flow */
 
 import React from 'react'
-import { Avatar, Body, Flex, Timestamp, Title } 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,
@@ -27,6 +34,7 @@ const Message = (props: MessageProps) => {
     avatarName,
     avatarStatus = null,
     avatarUrl,
+    children,
     className,
     data = {},
     id,
@@ -87,10 +95,15 @@ const Message = (props: MessageProps) => {
             />
           </If>
         </Flex>
-        <Body
-            className="pb_message_body"
-            text={message}
-        />
+        <If condition={message}>
+          <Body
+              className="pb_message_body"
+              text={message}
+          />
+        </If>
+        <If condition={children}>
+          { children }
+        </If>
       </div>
     </div>
   )

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

@@ -53,3 +53,24 @@
   timestamp: "2 days ago",
   avatar_name: "Tim Wenhold"
 }) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  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",
+  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 (
@@ -60,6 +62,37 @@ const MessageDefault = (props) => {
           {...props}
       />
 
+      <br />
+      <br />
+
+      <Message
+          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>
   )
 }

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

@@ -32,9 +32,14 @@
           }) %>
         <% end %>
       <% end %>
-      <%= pb_rails("body", props: {
-        text: object.message,
-        classname: "pb_message_body"
-      }) %>
+      <% 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_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.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("body", props: {
+  text: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("body", props: {
+  text: "xxs",
+  margin_top: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  size: "xxs",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xxs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>