playbook_ui 4.17.0 → 4.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c60678bea5dfbd0876ea029d5ee3ee8acddec0ffb70c76dbdf98834c2502af5
-  data.tar.gz: 96100434503a2403c3fcf50dea881b520a2d3ff14f93afd5542e7f149f9a31cf
+  metadata.gz: be9bba608156b09d59f0fce484b089d45895fbc8d8c899f002de676cbe8754fa
+  data.tar.gz: f356fb9ccc68b15659839bd865d9e603d7df902e4bbbbda1a219900d389a73b7
 SHA512:
-  metadata.gz: 473b7c3b876ca669ab9a2ce799c661af6fd4689843548535d62cf16ff88e699e9330076d0dd3c35b9d935ac6a71f926572d43426a2c17f6dca34c3b3f2feb7b7
-  data.tar.gz: 9892a24ec8caa7570080db1cb329a83440a18c8a557e27df14c0421afd07ce9a1490af3aa10fd2ad2fccfb6573f3310145359248a6897da1c946253b1086d3f4
+  metadata.gz: caf7accc56bc9ad9bd611ab68315ea0386b85673a7143cfdb546aa0c15fc8f62d58ce76832fa0ffc1766f07fc1254b160709563450a3b4a1ea78d8eb5237763f
+  data.tar.gz: d599aeacd3127cdaaa8aca96cfe98216d75528b3ff8fe8cb4ecd0e43db8772c53097fb4039687827c8305032b4cf789ef0ca80bf091e3b980896c965f0578284

data/app/pb_kits/playbook/_playbook.scss

@@ -67,6 +67,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
 @import 'pb_title_count/title_count';

data/app/pb_kits/playbook/data/menu.yml

@@ -1,6 +1,6 @@
 samples:
   - dashboards
-  - something
+  - registration
 kits:
   - avatar
   - avatar_action_button
@@ -57,6 +57,7 @@ kits:
   - star_rating
   - stat_change
   - table
+  - timeline
   - tooltip
   - typography:
     - body

data/app/pb_kits/playbook/index.js

@@ -70,6 +70,7 @@ export TableRow from './pb_table/_table_row.jsx'
 export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -79,6 +79,7 @@ import * as Table from 'pb_table/docs'
 import * as Textarea from 'pb_textarea/docs'
 import * as TextInput from 'pb_text_input/docs'
 import * as Time from 'pb_time/docs'
+import * as Timeline from 'pb_timeline/docs'
 import * as TimeStacked from 'pb_time_stacked/docs'
 import * as Timestamp from 'pb_timestamp/docs'
 import * as TimeRangeInline from 'pb_time_range_inline/docs'
@@ -157,6 +158,7 @@ WebpackerReact.setup({
   ...Textarea,
   ...TextInput,
   ...Time,
+  ...Timeline,
   ...TimeStacked,
   ...Timestamp,
   ...TimeRangeInline,

data/app/pb_kits/playbook/packs/samples.js

@@ -11,5 +11,7 @@ import WebpackerReact from 'webpacker-react'
 // Generated file from kit generator.
 
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
+import Registration from '../../../views/playbook/samples/registration/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
+WebpackerReact.setup({ Registration })

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.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_avatar_action_button/_avatar_action_button.jsx

@@ -15,6 +15,7 @@ type AvatarActionButtonProps = {
   aria: Object,
   className?: String,
   data?: Object,
+  id?: String,
   imageUrl?: String,
   linkUrl?: String,
   name?: String,
@@ -28,6 +29,7 @@ const AvatarActionButton = ({
   aria = {},
   className,
   data = {},
+  id,
   imageUrl,
   linkUrl,
   name,
@@ -55,6 +57,7 @@ const AvatarActionButton = ({
         {...ariaProps}
         {...dataProps}
         className={classnames(css, className)}
+        id={id}
     >
       <a
           href={linkUrl}

data/app/pb_kits/playbook/pb_label_value/_label_value.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_label_value/_label_value.jsx

@@ -2,18 +2,32 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { Body, Caption } from '../'
 import { spacing } from '../utilities/spacing.js'
 
 type LabelValueProps = {
+  aria?: object,
   className?: String,
+  dark?: Boolean,
+  data?: object,
+  id?: String,
   label: String,
   value: String,
-  dark?: Boolean,
 }
 
 const LabelValue = (props: LabelValueProps) => {
-  const { className, label, value, dark = false } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    label,
+    value } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
@@ -21,7 +35,12 @@ const LabelValue = (props: LabelValueProps) => {
   )
 
   return (
-    <div className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
       <Caption text={label} />
       <Body text={value} />
     </div>

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -33,15 +33,17 @@ type LayoutBodyProps = {
 }
 
 // Side component
-const Side = ({ children, className }: LayoutSideProps) => {
+const Side = (props: LayoutSideProps) => {
+  const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className)}>{children}</div>
+    <div className={classnames('layout_sidebar', className, spacing(props))}>{children}</div>
   )
 }
 
 // Body component
-const Body = ({ children, className }: LayoutBodyProps) => {
-  return <div className={classnames('layout_body', className)}>{children}</div>
+const Body = (props: LayoutBodyProps) => {
+  const { children, className } = props
+  return <div className={classnames('layout_body', className, spacing(props))}>{children}</div>
 }
 
 // Main componenet

data/app/pb_kits/playbook/pb_logistic/_logistic.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_logistic/_logistic.jsx

@@ -3,6 +3,7 @@
 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 { spacing } from '../utilities/spacing.js'
 
@@ -14,19 +15,40 @@ const dateString = (value: DateTime) => {
 }
 
 type LogisticProps = {
+  aria?: object,
+  className?: String,
   dark?: Boolean,
+  data?: object,
   date: String,
+  id?: String,
   link?: String,
-  projectName: String,
-  projectNumber: Number,
+  projectName?: String,
+  projectNumber?: Number,
 }
 
 const Logistic = (props: LogisticProps) => {
-  const { dark = false, date, link, projectName, projectNumber } = props
+  const { aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    id,
+    link,
+    projectName,
+    projectNumber } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
+  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, spacing(props))
 
   return (
-    <div className={classnames('pb_logistic_kit', spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Body color="light">
         <Caption text="Project" />
         <Icon

data/app/pb_kits/playbook/pb_message/_message.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_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>
   )
 }