playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

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 = {
+  aria?: object,
   className?: string,
-  id?: string,
+  dark?: boolean,
   data?: object,
-  aria?: 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",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { MultipleUsersStacked } from '../../'
+
+const MultipleUsersStackedDark = () => {
+  return (
+    <div>
+      <MultipleUsersStacked
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          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',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          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',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersStackedDark

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

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
+  - multiple_users_stacked_dark: Dark
 
   react:
   - multiple_users_stacked_default: Default
+  - multiple_users_stacked_dark: Dark

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

@@ -1 +1,2 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
+export { default as MultipleUsersStackedDark } from './_multiple_users_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_nav/_item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:li,
-  id: object.id,
+  aria: object.aria,
+  class: object.classname,
   data: object.data,
-  class: object.classname) do %>
+  id: object.id) do %>
   <%= content_tag(object.tag,
     object.link ? object.link_options : object.options) do %>
     <% if object.icon_left %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -1,31 +1,53 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { Icon } from '../'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
 
 type NavItemProps = {
-  text: string,
-  link: string,
-  iconLeft: string,
-  iconRight: string,
   active?: boolean,
+  aria?: object,
   children: React.Node,
+  className?: string,
+  data?: object,
+  iconLeft: string,
+  iconRight: string,
+  id?: string,
+  link: string,
   onClick?: EventHandler,
+  text: string,
 }
 
-const NavItem = ({
-  text = '',
-  link,
-  active = false,
-  iconLeft,
-  iconRight,
-  children,
-  onClick = () => {},
-}: NavItemProps) => {
+const NavItem = (props: NavItemProps) => {
+  const {
+    active = false,
+    aria = {},
+    children,
+    className,
+    data = {},
+    iconLeft,
+    iconRight,
+    id,
+    link,
+    onClick = () => {},
+    text = '',
+  } = props
   const Tag = link ? 'a' : 'div'
 
+  const activeClass = active === true ? 'active' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
+
   return (
-    <li className={`pb_nav_list_kit_item${active ? '_active' : ''}`}>
+    <li
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Tag
           className="pb_nav_list_item_link"
           href={link}

data/app/pb_kits/playbook/pb_nav/_nav.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>

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

@@ -2,36 +2,50 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Caption } from '../'
-import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type NavProps = {
-  title: string,
-  orientation?: "vertical" | "horizontal",
-  link: string,
+  aria?: object,
   children?: React.Node,
   className?: string | array<string>,
+  data?: object,
   highlight?: boolean,
-  variant?: "normal" | "subtle",
+  id?: string,
   onClick?: EventHandler,
+  orientation?: "vertical" | "horizontal",
+  link: SVGFESpecularLightingElement,
+  title: string,
+  variant?: "normal" | "subtle",
 }
 const Nav = (props: NavProps) => {
   const {
-    title = '',
-    orientation = 'vertical',
-    link = '',
+    aria = {},
     children,
     className,
+    data = {},
     highlight = true,
-    variant = 'normal',
+    id,
+    link = '#',
     onClick = () => {},
+    orientation = 'vertical',
+    title = '',
+    variant = 'normal',
   } = props
-  const cardCss = buildCss('pb_nav_list', variant, orientation, className, {
-    highlight: highlight,
-  })
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const cardCss = classnames(buildCss('pb_nav_list', variant, orientation, {
+    highlight: highlight }, className, globalProps(props)))
+
   return (
-    <div className={classnames(cardCss, globalProps(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={cardCss}
+        id={id}
+    >
       <If condition={title}>
         <div className="pb_nav_list_title">
           <a

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

@@ -9,6 +9,7 @@ examples:
   - horizontal_nav: Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
+
   react:
   - default_nav: Default
   - with_icons_nav: With Icons

data/app/pb_kits/playbook/pb_online_status/_online_status.html.erb

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

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

@@ -4,9 +4,10 @@ import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
+  aria?: object,
   className?: string,
   data?: object,
   id?: string,
@@ -14,14 +15,23 @@ type OnlineStatusProps = {
 }
 
 const OnlineStatus = (props: OnlineStatusProps) => {
-  const { id, data = {}, className, status = 'offline' } = props
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    status = 'offline',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames([`pb_online_status_kit_${status}`, className], globalProps(props))
+  const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
 
   return (
     <div
+        {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classes}
         id={id}
     />
   )