playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

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

@@ -3,7 +3,15 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { Contact, Person } from '../'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+import { spacing } from '../utilities/spacing.js'
+
+import { Caption, Contact, Person } from '../'
 
 type ContactItem = {
   contactType: String,
@@ -12,33 +20,77 @@ 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 = ({
-  className,
-  firstName,
-  lastName,
-  contacts,
-}: PersonContactProps) => (
-  <div className={classnames('pb_person_contact_kit', className)}>
-    <Person
-        firstName={firstName}
-        lastName={lastName}
-    />
-    {contacts.map((contactObject, index) => (
-      <Contact
-          contactDetail={contactObject.contactDetail}
-          contactType={contactObject.contactType}
-          contactValue={contactObject.contactValue}
-          key={index}
+const PersonContact = (props: PersonContactProps) => {
+  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
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Person
+          firstName={firstName}
+          lastName={lastName}
       />
-    ))}
-  </div>
-)
+      {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>
+  )
+}
 
 export default PersonContact

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_pill/_pill.jsx

@@ -4,23 +4,18 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
+import { spacing } from '../utilities/spacing.js'
 
 type PillProps = {
   className?: String,
   id?: String,
   text: String,
-  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
+  variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 
-const Pill = ({
-  className,
-  text,
-  variant = 'neutral',
-}: PillProps) => {
-  const css = classnames([
-    `pb_pill_kit_${variant}`,
-    className,
-  ])
+const Pill = (props: PillProps) => {
+  const { className, text, variant = 'neutral' } = props
+  const css = classnames([`pb_pill_kit_${variant}`, className], spacing(props))
 
   return (
     <div className={css}>

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

@@ -10,76 +10,92 @@ import {
   Reference as PopperReference,
 } from 'react-popper'
 
-import {
-  buildCss,
-  noop,
-} from '../utilities/props'
+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',
+  closeOnClick?: "outside" | "inside",
   offset?: Boolean,
   reference: PopperReference,
   show?: Boolean,
   shouldClosePopover?: () => Boolean,
 } & PopperProps
 
-const POPOVER_OFFSET_Y = {
+// Prop enabled default modifiers here
+// https://popper.js.org/docs/v2/modifiers
+
+const POPOVER_MODIFIERS = {
   offset: {
-    offset: '0, 8',
+    //https://popper.js.org/docs/v2/modifiers/offset/
+    enabled: true,
+    name: 'offset',
+    options: {
+      offset: [0, 8],
+    },
+    phase: 'main',
   },
 }
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? { ...modifiers, ...POPOVER_OFFSET_Y } : modifiers
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
 }
 
-const Popover = ({
-  children,
-  className,
-  modifiers,
-  offset,
-  placement,
-  referenceElement,
-  show,
-}: PbPopoverProps) => (
-  <Popper
-      modifiers={popoverModifiers({ modifiers, offset })}
-      placement={placement}
-      referenceElement={referenceElement}
-  >
-    {({ placement, ref, scheduleUpdate, style }) => {
-      scheduleUpdate()
-      return (
-        <div
-            className={buildCss('pb_popover_kit', className)}
-            data-placement={placement}
-            ref={ref}
-            style={style}
-        >
-          <div className={buildCss('popover_tooltip', show ? 'show' : '')}>
-            <Card shadow="deeper">
-              { children }
-            </Card>
+const Popover = (props: PbPopoverProps) => {
+  const {
+    children,
+    className,
+    modifiers,
+    offset,
+    placement,
+    referenceElement,
+  } = props
+  return (
+    <Popper
+        modifiers={popoverModifiers({ modifiers, offset })}
+        placement={placement}
+        referenceElement={referenceElement}
+    >
+      {({ placement, ref, style }) => {
+        return (
+          <div
+              className={`${buildCss('pb_popover_kit')} ${className}`}
+              data-placement={placement}
+              ref={ref}
+              style={style}
+          >
+            <div
+                className={classnames(
+                `${buildCss('popover_tooltip')} show`
+              )}
+            >
+              <Card
+                  className={spacing(props)}
+                  shadow="deeper"
+              >
+                {children}
+              </Card>
+            </div>
           </div>
-        </div>
         )
-      }
-    }
-  </Popper>
-)
+      }}
+    </Popper>
+  )
+}
 
 export default class PbReactPopover extends React.Component<PbPopoverProps> {
   static defaultProps = {
-    modifiers: {},
+    modifiers: [],
     offset: false,
     placement: 'left',
     portal: 'body',
     show: false,
     shouldClosePopover: noop,
-    usePortal: false,
+    usePortal: true,
   }
 
   componentDidMount() {
@@ -88,8 +104,10 @@ export default class PbReactPopover extends React.Component {
     if (!closeOnClick) return
 
     document.body.addEventListener('click', ({ target }) => {
-      const targetIsPopover = target.closest('[class^=popover_tooltip]') !== null
-      const targetIsReference = target.closest('.pb_popover_reference_wrapper') !== null
+      const targetIsPopover =
+        target.closest('[class^=popover_tooltip]') !== null
+      const targetIsReference =
+        target.closest('.pb_popover_reference_wrapper') !== null
 
       if (targetIsReference) return
 
@@ -129,12 +147,12 @@ export default class PbReactPopover extends React.Component {
 
     const popoverComponent = (
       <Popover
+          {...this.props}
           className={className}
           modifiers={modifiers}
           offset={offset}
           placement={placement}
           referenceElement={referenceElement}
-          show={show}
       >
         {children}
       </Popover>
@@ -149,20 +167,20 @@ export default class PbReactPopover extends React.Component {
                   className="pb_popover_reference_wrapper"
                   ref={ref}
               >
-                <reference.type
-                    {...reference.props}
-                />
+                <reference.type {...reference.props} />
               </span>
             )}
           </PopperReference>
         </If>
-        <If condition={usePortal}>
-          {ReactDOM.createPortal(
-            popoverComponent,
-            document.querySelector(portal)
-          )}
-          <Else />
-          {popoverComponent}
+        <If condition={show}>
+          <If condition={usePortal}>
+            {ReactDOM.createPortal(
+              popoverComponent,
+              document.querySelector(portal)
+            )}
+            <Else />
+            {popoverComponent}
+          </If>
         </If>
       </PopperManager>
     )

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

@@ -1,7 +1,6 @@
 examples:
   rails:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
@@ -9,9 +8,7 @@ examples:
 
   react:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
-    - popover_portal: Use with `portal` option
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
     - popover_click_any: Close on click anywhere

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

@@ -1,7 +1,5 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
-export { default as PopoverWithButton } from './_popover_with_button.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
-export { default as PopoverPortal } from './_popover_portal.jsx'
 export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
 export { default as PopoverClickInside } from './_popover_click_inside.jsx'
 export { default as PopoverClickAny } from './_popover_click_any.jsx'

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.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_progress_pills/_progress_pills.jsx

@@ -2,14 +2,26 @@
 
 import React from 'react'
 import { Body, Title } from '../'
+import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressPillsProps = {
   active?: Number,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
   steps?: Number,
   title?: String,
   value?: String,
   dark?: Boolean,
-
 }
 
 const showSteps = (steps, active, dark) => {
@@ -22,22 +34,41 @@ const showSteps = (steps, active, dark) => {
   return items
 }
 
-const ProgressPill = ({
-  active,
-  dark,
-  step,
-}: ProgressPillProps) => (
+const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? '_dark' : null}`}
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
+      dark ? '_dark' : ''
+    }`}
       key={step}
   />
 )
 
-const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark = false }: ProgressPillsProps) => {
+const ProgressPills = (props: ProgressPillsProps) => {
+  const {
+    active = 0,
+    aria = {},
+    className,
+    data = {},
+    id,
+    steps = 3,
+    title,
+    value,
+    dark = false,
+  } = props
   const darkClass = dark ? '_dark' : ''
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, spacing(props))
+
   return (
-    <div className={`pb_progress_pills_kit${darkClass}`}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+
       <If condition={title}>
         <div className="progress_pills_status">
           <Title
@@ -53,10 +84,7 @@ const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark
           />
         </div>
       </If>
-
-      <div className="progress_pills">
-        {showSteps(steps, active, dark)}
-      </div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }