RubyGems - playbook_ui - Versions diffs - 4.15.1.alpha1 → 4.18.1.pre.alpha1 - Mend

playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

Files changed (406) hide show

data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb CHANGED

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

@@ -3,7 +3,9 @@
 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'
 const dateString = (value: DateTime) => {
   const month = value.toMonthNum()
@@ -13,25 +15,39 @@ 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 = ({
-  dark = false,
-  date,
-  link,
-  projectName,
-  projectNumber,
-}: LogisticProps) => {
+const Logistic = (props: LogisticProps) => {
+  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')}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <Body color="light">
         <Caption text="Project" />
@@ -85,7 +101,6 @@ const Logistic = ({
                 />
               </Otherwise>
             </Choose>
           </Otherwise>
         </Choose>
       </Body>

data/app/pb_kits/playbook/pb_message/_message.html.erb CHANGED

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

@@ -1,31 +1,53 @@
 /* @flow */
 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,
 }
-const Message = ({
-  avatarName = '',
-  avatarUrl = '',
-  label = '',
-  message = '',
-  timestamp = '',
-  avatarStatus = null,
-}: MessageProps) => {
+const Message = (props: MessageProps) => {
+  const {
+    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 ? 'pb_message_kit_avatar' : 'pb_message_kit'
+  const baseClassName = shouldDisplayAvatar
+    ? 'pb_message_kit_avatar'
+    : 'pb_message_kit'
+  const classes = classnames(buildCss(baseClassName), className, spacing(props))
   return (
-    <div className={classes}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={shouldDisplayAvatar}>
         <Avatar
             imageUrl={avatarUrl}

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

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

@@ -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_multiple_users/_multiple_users.jsx CHANGED

@@ -2,9 +2,9 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { Avatar } from '../'
+import { spacing } from '../utilities/spacing.js'
 type MultipleUsersProps = {
   className?: String,
@@ -14,19 +14,19 @@ type MultipleUsersProps = {
   users: Array<Object>,
 }
-const MultipleUsers = ({
-  className,
-  id,
-  maxDisplayedUsers = 4,
-  reverse = false,
-  users,
-}: MultipleUsersProps) => {
-  const displayCount = users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
+const MultipleUsers = (props: MultipleUsersProps) => {
+  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
+  const displayCount =
+    users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
   return (
     <div
-        className={classnames(className, buildCss('pb_multiple_users_kit', reverse && 'reverse'))}
+        className={classnames(
+        className,
+        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
+        spacing(props)
+      )}
         id={id}
     >
       {usersToDisplay.map((avatarData, index) => (

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx CHANGED

@@ -3,17 +3,10 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+import { Avatar, Badge } from '../'
-import {
-  Avatar,
-  Badge,
-} from '../'
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 type MultipleUsersStackedProps = {
   className?: String,
@@ -23,13 +16,8 @@ type MultipleUsersStackedProps = {
   users: Array<Object>,
 }
-const MultipleUsersStacked = ({
-  className,
-  id,
-  aria = {},
-  data = {},
-  users,
-}: MultipleUsersStackedProps) => {
+const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
+  const { className, id, aria = {}, data = {}, users } = props
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const displayCount = () => {
@@ -39,7 +27,7 @@ const MultipleUsersStacked = ({
   const dataProps = buildDataProps(data)
   const css = buildCss({
     'pb_multiple_users_stacked_kit': true,
-    'single': onlyOne,
+    single: onlyOne,
   })
   const firstUser = () => {
@@ -87,7 +75,7 @@ const MultipleUsersStacked = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classnames(css, className, spacing(props))}
         id={id}
     >
       {firstUser()}

data/app/pb_kits/playbook/pb_nav/_nav.jsx CHANGED

@@ -1,34 +1,37 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
 import { Caption } from '../'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type NavProps = {
   title: String,
-  orientation?: 'vertical' | 'horizontal',
+  orientation?: "vertical" | "horizontal",
   link: String,
   children?: React.Node,
   className?: String | Array<String>,
   highlight?: Boolean,
-  variant?: 'normal' | 'subtle',
+  variant?: "normal" | "subtle",
   onClick?: EventHandler,
 }
-const Nav = ({
-  title = '',
-  orientation = 'vertical',
-  link = '',
-  children,
-  className,
-  highlight = true,
-  variant = 'normal',
-  onClick = () => {},
-}: NavProps) => {
+const Nav = (props: NavProps) => {
+  const {
+    title = '',
+    orientation = 'vertical',
+    link = '',
+    children,
+    className,
+    highlight = true,
+    variant = 'normal',
+    onClick = () => {},
+  } = props
   const cardCss = buildCss('pb_nav_list', variant, orientation, className, {
-    'highlight': highlight,
+    highlight: highlight,
   })
   return (
-    <div className={cardCss}>
+    <div className={classnames(cardCss, spacing(props))}>
       <If condition={title}>
         <div className="pb_nav_list_title">
           <a

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx CHANGED

@@ -1,21 +1,30 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import { buildDataProps } from '../utilities/props'
-class OnlineStatus extends React.Component {
-  render() {
-    return (
-      <div className="pb_online_status">
-        <span>{'ONLINE STATUS CONTENT'}</span>
-      </div>
-    )
-  }
+type OnlineStatusProps = {
+  className?: String,
+  data?: object,
+  id?: String,
+  status?: "online" | "offline" | "away",
 }
-OnlineStatus.propTypes = propTypes
+const OnlineStatus = (props: OnlineStatusProps) => {
+  const { id, data = {}, className, status = 'offline' } = props
+  const dataProps = buildDataProps(data)
+  const css = classnames([`pb_online_status_kit_${status}`, className], spacing(props))
+  return (
+    <div
+        {...dataProps}
+        className={css}
+        id={id}
+    />
+  )
+}
 export default OnlineStatus

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx ADDED

@@ -0,0 +1,19 @@
+import React from 'react'
+import { OnlineStatus } from '../../'
+const OnlineStatusDefault = () => (
+  <>
+    <OnlineStatus status="offline" />
+    <br />
+    <OnlineStatus status="online" />
+    <br />
+    <OnlineStatus status="away" />
+  </>
+)
+export default OnlineStatusDefault

data/app/pb_kits/playbook/pb_online_status/docs/example.yml CHANGED

@@ -1,7 +1,7 @@
 examples:
   rails:
   - online_status_default: Default
   react:
+  - online_status_default: Default

data/app/pb_kits/playbook/pb_online_status/docs/index.js CHANGED

	@@ -0,0 +1 @@
1	+ export { default as OnlineStatusDefault } from './_online_status_default.jsx'

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

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

@@ -2,40 +2,58 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import {
-  Body,
-  Title,
-} from '../'
+  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 = ({
-  className,
-  dark = false,
-  firstName,
-  lastName,
-}: PersonProps) => {
+const Person = (props: PersonProps) => {
+  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)}>
+    <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>
   )
 }