playbook_ui 6.2.1 → 6.3.0

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}
     />
   )

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -9,14 +9,17 @@ $pb_online_status_statuses: (
   offline: $neutral,
 );
 
-@mixin pb_online_status($background: $neutral, $bordercolor: $white) {
+@mixin pb_online_status($background: $neutral) {
+  &.dark {
+    border-color: $bg_dark;
+  }
   width: $pb_online_status_size;
   height: $pb_online_status_size;
   flex-basis: $pb_online_status_size;
   flex-grow: 0;
   flex-shrink: 0;
   border-width: $pb_online_status_border;
-  border-color: $bordercolor;
+  border-color: $white;
   border-style: solid;
   border-radius: 50%;
   background: $background;

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("online_status", props: { dark: true, status: "offline" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { dark: true, status: "online" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { dark: true, status: "away" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.jsx

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

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

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - online_status_default: Default
+  - online_status_dark: Dark
 
   react:
   - online_status_default: Default
+  - online_status_dark: Dark

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

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