playbook_ui 6.1.0 → 7.0.0.pre.alpha2

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

@@ -4,24 +4,34 @@ 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 = {
-  className?: String,
+  aria?: object,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   status?: "online" | "offline" | "away",
 }
 
 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_person/_person.jsx

@@ -14,11 +14,11 @@ import { Body, Title } from '../'
 
 type PersonProps = {
   aria?: object,
-  className?: String | Array<String>,
+  className?: string | array<string>,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
+  firstName: string,
+  id?: string,
+  lastName: string,
 }
 
 const Person = (props: PersonProps) => {

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -14,20 +14,20 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Caption, Contact, Person } from '../'
 
 type ContactItem = {
-  contactType: String,
-  contactValue: String,
-  contactDetail: String,
+  contactType: string,
+  contactValue: string,
+  contactDetail: string,
 }
 
 type PersonContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  dark?: Boolean,
+  className?: string | array<string>,
+  dark?: boolean,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
-  contacts?: Array<ContactItem>,
+  firstName: string,
+  id?: string,
+  lastName: string,
+  contacts?: array<ContactItem>,
 }
 
 const PersonContact = (props: PersonContactProps) => {
@@ -73,22 +73,23 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={index}
+            key={`valid-contact-${index}`}
         />
-            ))}
+      ))}
       {wrongContacts().map((contactObject, index) => (
-        <>
+        <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
               className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={index}
+              key={`wrong-contact-${index}`}
           />
-        </>
-          ))}
+        </div>
+      ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -5,6 +5,7 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
+          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

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 = {
-  className?: String,
-  id?: String,
-  text: String,
+  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}

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

@@ -15,7 +15,7 @@ $pb_pill_height: 22px;
 
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {
-      background: rgba($color_value, $opacity-1);
+        background: rgba($color_value, $opacity-1);
 
       .pb_pill_text {
         color: $color_value !important;

data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.html.erb

@@ -0,0 +1,52 @@
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "Default"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "success",
+  variant: "success"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "error",
+  variant: "error"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "warning",
+  variant: "warning"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "info",
+  variant: "info"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "neutral",
+  variant: "neutral"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  dark: true,
+  text: "primary",
+  variant: "primary"
+}) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Pill from '../_pill.jsx'
+
+const PillDark = () => {
+  return (
+    <div>
+      <Pill
+          dark
+          text="default"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="success"
+          variant="success"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="error"
+          variant="error"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="warning"
+          variant="warning"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="info"
+          variant="info"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="neutral"
+          variant="neutral"
+      />
+
+      <br />
+      <br />
+
+      <Pill
+          dark
+          text="primary"
+          variant="primary"
+      />
+    </div>
+  )
+}
+
+export default PillDark

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

@@ -2,8 +2,10 @@ examples:
   
   rails:
   - pill_default: Default
+  - pill_dark: Dark
   
   
   react:
   - pill_default: Default
-  
+  - pill_dark: Dark
+  

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

@@ -1 +1,2 @@
 export { default as PillDefault } from './_pill_default.jsx'
+export { default as PillDark } from './_pill_dark.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.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 %>
     <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
       <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -10,18 +10,21 @@ import {
   Reference as PopperReference,
 } from 'react-popper'
 
-import { buildCss, noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PbPopoverProps = {
-  className?: String,
+  aria?: object,
+  className?: string,
   closeOnClick?: "outside" | "inside",
-  offset?: Boolean,
+  data?: object,
+  id?: String,
+  offset?: boolean,
   reference: PopperReference,
-  show?: Boolean,
-  shouldClosePopover?: () => Boolean,
+  show?: boolean,
+  shouldClosePopover?: () => boolean,
 } & PopperProps
 
 // Prop enabled default modifiers here
@@ -45,8 +48,11 @@ const popoverModifiers = ({ modifiers, offset }) => {
 
 const Popover = (props: PbPopoverProps) => {
   const {
-    children,
+    aria = {},
     className,
+    children,
+    data = {},
+    id,
     modifiers,
     offset,
     placement,
@@ -58,7 +64,7 @@ const Popover = (props: PbPopoverProps) => {
     minWidth,
   } = props
 
-  const popoverSpacing = globalProps(props) ? globalProps(props) : 'p_sm'
+  const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
   const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
@@ -70,6 +76,9 @@ const Popover = (props: PbPopoverProps) => {
       minWidth ? { minWidth: minWidth } : {}
     )
   }
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_popover_kit'), className, globalProps(props))
 
   return (
     <Popper
@@ -80,8 +89,11 @@ const Popover = (props: PbPopoverProps) => {
       {({ placement, ref, style }) => {
         return (
           <div
-              className={`${buildCss('pb_popover_kit')} ${className}`}
+              {...ariaProps}
+              {...dataProps}
+              className={classes}
               data-placement={placement}
+              id={id}
               ref={ref}
               style={Object.assign(
                 {},