playbook_ui 6.2.1 → 6.4.2

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/_horizontal_nav.scss

@@ -45,11 +45,13 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
 
-      &:hover {
-        color: $primary;
-        #{$selector}_item_icon,
-        #{$selector}_item_text {
+      @media (hover:hover) {
+        &:hover {
           color: $primary;
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
         }
       }
     }

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,55 @@
 
 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/_vertical_nav.scss

@@ -46,13 +46,15 @@ $selector: ".pb_nav_list";
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
         [class*=_icon_left] {
@@ -110,13 +112,15 @@ $selector: ".pb_nav_list";
           flex: 1;
           font-weight: $regular;
         }
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
       }

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'

data/app/pb_kits/playbook/pb_pill/_pill.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= pb_rails("title", props: { text: object.display_text, size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -4,21 +4,39 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PillProps = {
+  aria?: object,
   className?: string,
+  data?: object,
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 
 const Pill = (props: PillProps) => {
-  const { className, text, variant = 'neutral' } = props
-  const css = classnames([`pb_pill_kit_${variant}`, className], globalProps(props))
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    text,
+    variant = 'neutral',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_pill_kit', variant), globalProps(props), className)
 
   return (
-    <div className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Title
           className="pb_pill_text"
           size={4}