RubyGems - playbook_ui - Versions diffs - 9.19.0 → 10.0.0.pre.alphafonts - Mend

playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

Files changed (333) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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