playbook_ui 4.17.0 → 5.0.1.pre.beta

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

@@ -3,12 +3,17 @@
 import React from 'react'
 import { Avatar, Body, Caption } from '../'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type MessageProps = {
+  aria: object,
   avatarName?: String,
   avatarStatus?: String,
   avatarUrl?: String,
+  className?: String,
+  data?: object,
+  id?: String,
   label?: String,
   message: String,
   timestamp?: String,
@@ -16,20 +21,33 @@ type MessageProps = {
 
 const Message = (props: MessageProps) => {
   const {
-    avatarName = '',
-    avatarUrl = '',
-    label = '',
-    message = '',
-    timestamp = '',
+    aria = {},
+    avatarName,
     avatarStatus = null,
+    avatarUrl,
+    className,
+    data = {},
+    id,
+    label,
+    message,
+    timestamp,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const shouldDisplayAvatar = avatarUrl || avatarName
-  const classes = shouldDisplayAvatar
+  const baseClassName = shouldDisplayAvatar
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
 
+  const classes = classnames(buildCss(baseClassName), className, spacing(props))
+
   return (
-    <div className={classnames(classes, spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={shouldDisplayAvatar}>
         <Avatar
             imageUrl={avatarUrl}

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

@@ -4,7 +4,6 @@ import { Message } from '../../'
 const MessageDefault = () => {
   return (
     <div>
-
       <Message
           avatarName="Mike Bishop"
           avatarStatus="online"
@@ -31,7 +30,7 @@ const MessageDefault = () => {
       <Message
           avatarName="Lisa Thompson"
           avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
-          message="To processs your order, I will need your full name."
+          message="To process your order, I will need your full name."
           timestamp="4 hours ago"
       />
 

data/app/pb_kits/playbook/pb_message/message.rb

@@ -25,7 +25,7 @@ module Playbook
     private
 
       def avatar_class
-        avatar_name ? "avatar" : nil
+        valid? ? "avatar" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_person/_person.html.erb

@@ -1,7 +1,14 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-      <%= pb_rails("body", props: { tag: "span", classname: "pb_person_first", children: -> { object.first_name } }) %>
-      <%= pb_rails("title", props: { text: object.last_name, size: 4 }) if object.last_name %>
+      <%= pb_rails("body", props: { 
+        tag: "span", 
+        classname: "pb_person_first", 
+        children: -> { object.first_name 
+      } }) %>
+      <%= pb_rails("title", props: { 
+        text: object.last_name, 
+        size: 4 }) if object.last_name %>
 <% end %>

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -4,32 +4,56 @@ import React from 'react'
 import classnames from 'classnames'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 import { Body, Title } from '../'
 
 type PersonProps = {
+  aria?: object,
   className?: String | Array<String>,
-  dark?: Boolean,
+  data?: object,
   firstName: String,
+  id?: String,
   lastName: String,
 }
 
 const Person = (props: PersonProps) => {
-  const { className, dark = false, firstName, lastName } = props
+  const {
+    aria = {},
+    className,
+    data = {},
+    firstName,
+    id,
+    lastName } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_person_kit'), className, spacing(props))
+
   return (
-    <div className={classnames('pb_person_kit', className, spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Body
           className="pb_person_first"
-          dark={dark}
           tag="span"
       >
         {firstName}
       </Body>
-      <Title
-          className="pb_person_first"
-          dark={dark}
-          size={4}
-          text={` ${lastName}`}
-      />
+      <If condition={lastName}>
+        <Title
+            className="pb_person_first"
+            size={4}
+            text={` ${lastName}`}
+        />
+      </If>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person/docs/_person_default.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("person", props: { first_name: "Kyle", last_name: "Fadigan" }) %>
+<%= pb_rails("person", 
+    props: { 
+      first_name: "Kyle", 
+      last_name: "Fadigan" 
+      }) %>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+  aria: object.aria,
   id: object.id,
   data: object.data,
   class: object.classname) do %>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -2,9 +2,16 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 import { spacing } from '../utilities/spacing.js'
 
-import { Contact, Person } from '../'
+import { Caption, Contact, Person } from '../'
 
 type ContactItem = {
   contactType: String,
@@ -13,30 +20,75 @@ type ContactItem = {
 }
 
 type PersonContactProps = {
+  aria?: object,
   className?: String | Array<String>,
   dark?: Boolean,
+  data?: object,
   firstName: String,
+  id?: String,
   lastName: String,
   contacts?: Array<ContactItem>,
 }
 
 const PersonContact = (props: PersonContactProps) => {
-  const { className, firstName, lastName, contacts } = props
+  const {
+    aria = {},
+    className,
+    contacts = [],
+    data = {},
+    firstName,
+    id,
+    lastName,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_person_contact_kit'), className, spacing(props))
+
+  const wrongContacts = () => (
+    contacts.filter((contactObject) => (
+      contactObject.contactType === 'wrong-phone'
+    ))
+  )
+
+  const validContacts = () => (
+    contacts.filter((contactObject) => (
+      contactObject.contactType !== 'wrong-phone'
+    ))
+  )
 
   return (
-    <div className={classnames('pb_person_contact_kit', className, spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Person
           firstName={firstName}
           lastName={lastName}
       />
-      {contacts.map((contactObject, index) => (
+      {validContacts().map((contactObject, index) => (
         <Contact
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
             key={index}
         />
-      ))}
+            ))}
+      {wrongContacts().map((contactObject, index) => (
+        <>
+          <Caption
+              className="wrong_numbers"
+              text="wrong number"
+          />
+          <Contact
+              contactType={contactObject.contactType}
+              contactValue={contactObject.contactValue}
+              key={index}
+          />
+        </>
+          ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { PersonContact } from '../../'
+
+const PersonContactWithWrongNumbers = () => {
+  return (
+    <>
+      <PersonContact
+          contacts={[
+            {
+              contactType: 'email',
+              contactValue: 'email@example.com',
+            },
+            {
+              contactValue: '5555555555',
+            },
+            {
+              contactType: 'wrong-phone',
+              contactValue: '3245627482',
+            },
+            {
+              contactType: 'phone',
+              contactValue: '3048615385',
+            },
+          ]}
+          firstName="Pauline"
+          lastName="Smith"
+      />
+    </>
+  )
+}
+
+export default PersonContactWithWrongNumbers

data/app/pb_kits/playbook/pb_person_contact/docs/example.yml

@@ -10,3 +10,5 @@ examples:
   - person_contact_default: Default
   - person_contact_multiple: Multiple People
   - person_contact_with_detail: With Detail
+  - person_contact_with_wrong_numbers: With Wrong Numbers
+

data/app/pb_kits/playbook/pb_person_contact/docs/index.js

@@ -1,3 +1,4 @@
 export { default as PersonContactDefault } from './_person_contact_default.jsx'
 export { default as PersonContactMultiple } from './_person_contact_multiple.jsx'
 export { default as PersonContactWithDetail } from './_person_contact_with_detail.jsx'
+export { default as PersonContactWithWrongNumbers } from './_person_contact_with_wrong_numbers.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -2,9 +2,9 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-    <div class="popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
-      <%= pb_rails("card", props: {shadow: "deeper"}) do %>
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
-      <% end %>
+      </div>
     </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -15,8 +15,6 @@ import { buildCss, noop } from '../utilities/props'
 import classnames from 'classnames'
 import { spacing } from '../utilities/spacing.js'
 
-import { Card } from '../'
-
 type PbPopoverProps = {
   className?: String,
   closeOnClick?: "outside" | "inside",
@@ -35,7 +33,7 @@ const POPOVER_MODIFIERS = {
     enabled: true,
     name: 'offset',
     options: {
-      offset: [0, 8],
+      offset: [0, 20],
     },
     phase: 'main',
   },
@@ -53,7 +51,25 @@ const Popover = (props: PbPopoverProps) => {
     offset,
     placement,
     referenceElement,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
   } = props
+
+  const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
+  const widthHeightStyles = () => {
+    return Object.assign(
+      {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {}
+    )
+  }
+
   return (
     <Popper
         modifiers={popoverModifiers({ modifiers, offset })}
@@ -66,19 +82,26 @@ const Popover = (props: PbPopoverProps) => {
               className={`${buildCss('pb_popover_kit')} ${className}`}
               data-placement={placement}
               ref={ref}
-              style={style}
+              style={Object.assign(
+                {},
+                style,
+                zIndexStyle
+              )}
           >
             <div
                 className={classnames(
                 `${buildCss('popover_tooltip')} show`
               )}
             >
-              <Card
-                  className={spacing(props)}
-                  shadow="deeper"
+              <div
+                  className={classnames(
+                  'popover_body',
+                  popoverSpacing
+                )}
+                  style={widthHeightStyles()}
               >
                 {children}
-              </Card>
+              </div>
             </div>
           </div>
         )
@@ -143,16 +166,26 @@ export default class PbReactPopover extends React.Component {
       referenceElement,
       show,
       usePortal,
+      zIndex,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
     } = this.props
 
     const popoverComponent = (
       <Popover
           {...this.props}
           className={className}
+          maxHeight={maxHeight}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          minWidth={minWidth}
           modifiers={modifiers}
           offset={offset}
           placement={placement}
           referenceElement={referenceElement}
+          zIndex={zIndex}
       >
         {children}
       </Popover>

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -1,15 +1,52 @@
 @import "../tokens/positioning";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
 
-[class^="pb_popover_kit"] {
-  .popover_tooltip {
-    display: none;
-    &.show {
-      display: block;
-      z-index: $z_9;
-    }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
   }
 }
 
+.pb_popover_tooltip {
+  opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+  pointer-events: none;
+  &.show {
+    animation-name: fadeIn;
+    animation-duration: 150ms;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    visibility: visible;
+    pointer-events: initial;
+    z-index: $z_9;
+  }
+}
+.pb_popover_body {
+  @include pb_card;
+  border: 0;
+  box-shadow: $shadow_deeper;
+  overflow: auto;
+}
+
+
 .pb_popover_reference_wrapper {
   display: inline-block;
 }