playbook_ui 6.1.0.pre.alpha5 → 6.3.1

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -7,11 +7,11 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ListItemProps = {
   aria?: object,
-  children: Array<Node> | Node,
-  className?: String,
+  children: array<Node> | Node,
+  className?: string,
   data?: object,
-  id?: String,
-  tabIndex?: String,
+  id?: string,
+  tabIndex?: string,
 }
 
 const ListItem = (props: ListItemProps) => {

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

@@ -8,10 +8,10 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type LoadingInlineProps = {
   align?: "left" | "center" | "right",
-  className?: String,
-  dark?: Boolean,
-  data?: String,
-  id?: String,
+  className?: string,
+  dark?: boolean,
+  data?: string,
+  id?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -16,14 +16,14 @@ const dateString = (value: DateTime) => {
 
 type LogisticProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  date: String,
-  id?: String,
-  link?: String,
-  projectName?: String,
-  projectNumber?: Number,
+  date: string,
+  id?: string,
+  link?: string,
+  projectName?: string,
+  projectNumber?: number,
 }
 
 const Logistic = (props: LogisticProps) => {

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

@@ -8,15 +8,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type MessageProps = {
   aria: object,
-  avatarName?: String,
-  avatarStatus?: String,
-  avatarUrl?: String,
-  className?: String,
+  avatarName?: string,
+  avatarStatus?: string,
+  avatarUrl?: string,
+  className?: string,
   data?: object,
-  id?: String,
-  label?: String,
-  message: String,
-  timestamp?: String,
+  id?: string,
+  label?: string,
+  message: string,
+  timestamp?: string,
 }
 
 const Message = (props: MessageProps) => {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.html.erb

@@ -1,9 +1,10 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
     <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item"}) ) %>
+      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>
 
     <% if object.more_than_four %>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -2,37 +2,55 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Avatar } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type MultipleUsersProps = {
-  className?: String,
-  id?: String,
-  maxDisplayedUsers?: Number,
-  reverse?: Boolean,
-  users: Array<Object>,
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  id?: string,
+  maxDisplayedUsers?: number,
+  reverse?: boolean,
+  users: array<object>,
 }
 
 const MultipleUsers = (props: MultipleUsersProps) => {
-  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    maxDisplayedUsers = 4,
+    reverse = false,
+    users,
+  } = props
+
   const displayCount =
     users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
 
+  const reverseClass = reverse === true ? 'reverse' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
+    className, globalProps(props))
+
   return (
     <div
-        className={classnames(
-        className,
-        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
-        globalProps(props)
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       {usersToDisplay.map((avatarData, index) => (
         <Avatar
             {...avatarData}
             className="pb_multiple_users_item"
+            dark={dark}
             key={index}
             size="xs"
         />

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -28,6 +28,12 @@ $pb_multiple_users_size: map-get($avatar-sizes, "xs");
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;
 
+    &.dark {
+      .avatar_wrapper {
+        border: $pb_multiple_users_border_size solid $bg_dark;
+      }
+    }
+
     .avatar_wrapper {
       border: $pb_multiple_users_border_size solid $white;
     }

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersDark = () => {
+  return (
+    <div>
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+      />
+
+      <br />
+      <br />
+
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Shawn Palmer',
+          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+        },
+        {
+          name: 'Andrew Murray Cooper Craig',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersDark

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

@@ -3,7 +3,9 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_dark: Dark
 
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_dark: Dark

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

@@ -1,2 +1,3 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
+export { default as MultipleUsersDark } from './_multiple_users_dark.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.html.erb

@@ -1,18 +1,20 @@
 <%= content_tag(:div,
-  id: object.id,
+  aria: object.aria,
+  class: object.classname,
   data: object.data,
-  class: object.classname) do %>
-  <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item"}) ) %>
+  id: object.id) do %>
+  <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two %>
       <%= pb_rails("badge", props: {
+        dark: object.dark,
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
         classname: "pb_multiple_users_stacked_item second_item" }) %>
     <% else %>
-      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item"}) ) %>
+      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
     <% end %>
   <% end %>
 

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

@@ -9,15 +9,24 @@ import { Avatar, Badge } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type MultipleUsersStackedProps = {
-  className?: String,
-  id?: String,
-  data?: object,
   aria?: object,
-  users: Array<Object>,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  id?: string,
+  users: array<object>,
 }
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
-  const { className, id, aria = {}, data = {}, users } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    users,
+  } = props
+
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const displayCount = () => {
@@ -25,10 +34,9 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = buildCss({
-    'pb_multiple_users_stacked_kit': true,
-    single: onlyOne,
-  })
+  const classes = classnames(buildCss(
+    'pb_multiple_users_stacked_kit',
+    { single: onlyOne }), globalProps(props), className)
 
   const firstUser = () => {
     return users.slice(0, 1).map((userObject, index) => {
@@ -36,6 +44,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         <Avatar
             {...userObject}
             className="pb_multiple_users_stacked_item"
+            dark={dark}
             key={index}
             size="xs"
         />
@@ -50,6 +59,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
           <Avatar
               {...userObject}
               className="pb_multiple_users_stacked_item second_item"
+              dark={dark}
               key={index}
               size="xs"
           />
@@ -63,6 +73,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return (
         <Badge
             className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
             rounded
             text={`+${users.length - displayCount()}`}
             variant="primary"
@@ -75,7 +86,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className, globalProps(props))}
+        className={classes}
         id={id}
     >
       {firstUser()}

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -19,15 +19,20 @@
   .pb_multiple_users_stacked_item {
     height: $stacked_size;
     width: $stacked_size;
-    .avatar_wrapper {
-      border: $border_size solid $white;
-      height: $stacked_size;
-      width: $stacked_size;
-      img {
-        z-index: 0;
+      &.dark {
+        .avatar_wrapper {
+          border: $pb_multiple_users_border_size solid $bg_dark;
+        }
+      }
+      .avatar_wrapper {
+        border: $border_size solid $white;
+        height: $stacked_size;
+        width: $stacked_size;
+        img {
+          z-index: 0;
+        }
       }
     }
-  }
   &[class*=_single] .pb_multiple_users_stacked_item {
     width: $container_size;
     height: $container_size;

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.html.erb

@@ -0,0 +1,53 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>