playbook_ui 6.1.0 → 7.0.0.pre.alpha2

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={35.78}
+          dark
+          title="Appointments"
+      />
+
+      <br />
+
+      <TitleCount
+          count={7399}
+          dark
+          size="lg"
+          title="Appointments"
+      />
+
+      <br />
+
+      <TitleCount
+          count={-379503.372}
+          dark
+          size="lg"
+          title="Appointments"
+      />
+    </>
+  )
+}
+
+export default TitleCountDark

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

@@ -2,7 +2,11 @@ examples:
   rails:
     - title_count_default: Default
     - title_count_align: Align
+    - title_count_dark: Dark
+    - title_count_align_dark: Dark
 
   react:
     - title_count_default: Default
     - title_count_align: Align
+    - title_count_dark: Dark
+    - title_count_align_dark: Dark

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

@@ -1,2 +1,4 @@
 export { default as TitleCountDefault } from './_title_count_default.jsx'
 export { default as TitleCountAlign } from './_title_count_align.jsx'
+export { default as TitleCountDark } from './_title_count_dark.jsx'
+export { default as TitleCountAlignDark } from './_title_count_align_dark.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: String,
+  className?: string,
   data?: object,
-  detail: String,
-  id?: String,
-  title: String,
+  detail: string,
+  id?: string,
+  title: string,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "center"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { TitleDetail } from '../../'
+
+const TitleDetailDark = () => (
+  <div>
+    <TitleDetail
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="center"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="right"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+  </div>
+)
+
+export default TitleDetailDark

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -14,15 +14,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type Props = {
   aria?: object,
-  checked?: Boolean,
+  checked?: boolean,
   children?: React.Node,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  name?: String,
+  id?: string,
+  name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
-  value?: String,
+  value?: string,
 }
 
 const Toggle = ({

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -37,7 +37,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
       this.triggerElement.addEventListener('mouseleave', (event) => {
         clearTimeout(this.mouseenterTimeout)
-        if (event.toElement.closest(`#${this.tooltipId}`) !== this.tooltip) {
+        if (event.target.closest(`#${this.tooltipId}`) !== this.tooltip) {
           setTimeout(() => {
             this.hideTooltip()
           }, 0)

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -11,10 +11,9 @@
       label: object.label,
       name: object.name,
       value: object.value,
-      placeholder: object.placeholder,
-      dark: object.dark
+      placeholder: object.placeholder
     }) %>
-    <%= pb_rails("list", props: { ordered: false, dark: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+    <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
     <% end %>
   </div>
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -79,7 +79,7 @@
     }
   }
 
-  &[class*=_dark] {
+  .dark {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
     }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb

@@ -16,7 +16,6 @@
 
 <br><br><br>
 
-
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
     if (!event.target.dataset.typeaheadExample2) return;

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -11,13 +11,11 @@ module Playbook
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
 
       partial "pb_typeahead/typeahead"
 
       def classname
-        generate_classname("pb_typeahead_kit", dark_class)
+        generate_classname("pb_typeahead_kit")
       end
 
       def data
@@ -27,12 +25,6 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
-
-    private
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_user/_user.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.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -2,50 +2,84 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Avatar, Body, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type UserProps = {
+  align?: "left" | "center" | "right",
+  aria?: object,
+  avatar?: Boolean,
+  avatarUrl?: String,
   className?: String,
+  dark?: boolean,
+  data?: object,
   id?: String,
-  name: String,
+  name?: String,
+  orientation?: "horiztonal" | "vertical",
+  size?: "sm" | "md" | "lg",
   territory?: String,
   title?: String,
-  size?: "sm" | "md" | "lg",
-  align?: "left" | "center" | "right",
-  orientation?: "horiztonal" | "vertical",
-  avatar?: Boolean,
-  avatarUrl?: String,
 }
 
 const User = (props: UserProps) => {
   const {
-    name = '',
-    territory = '',
-    title = '',
     align = 'left',
-    orientation = 'horizontal',
-    size = 'sm',
+    aria = {},
     avatar = false,
     avatarUrl,
+    className,
+    dark = false,
+    data = {},
+    id,
+    name,
+    orientation = 'horizontal',
+    size = 'sm',
+    territory = '',
+    title = '',
   } = props
+
+  const avatarSizeMap = {
+    lg: 'xl',
+    md: 'md',
+    sm: 'sm',
+  }
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const classes = classnames(
+    buildCss('pb_user_kit', align, orientation, size),
+    globalProps(props),
+    className,
+  )
+
   return (
-    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, globalProps(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={avatar || avatarUrl}>
         <Avatar
             imageUrl={avatarUrl}
             name={name}
-            size={size}
+            size={avatarSizeMap[size]}
         />
       </If>
 
       <div className="content_wrapper">
         <Title
+            dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}
         />
-        <Body color="light">
-          {territory == '' ? title : `${territory} • ${title}`}
+        <Body
+            color="light"
+            dark={dark}
+        >
+          {territory === '' ? title : `${territory} • ${title}`}
         </Body>
       </div>
     </div>

data/app/pb_kits/playbook/pb_user/docs/_user_dark.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserDark = () => {
+  return (
+    <div className="pb--doc-demo-row">
+
+      <div>
+        <User
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            title="Remodeling Consultant"
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+        />
+
+        <br />
+
+        <User
+            align="left"
+            avatar
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+        />
+      </div>
+
+    </div>
+  )
+}
+
+export default UserDark

data/app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserTextOnlyDark = () => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          dark
+          name="Anna Black"
+          orientation="horizontal"
+          size="lg"
+          title="Remodeling Consultant"
+      />
+      <User
+          align="left"
+          dark
+          name="Anna Black"
+          orientation="horizontal"
+          title="Remodeling Consultant"
+      />
+    </div>
+  )
+}
+
+export default UserTextOnlyDark

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

@@ -17,3 +17,5 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_dark: Dark
+  - user_text_only_dark: Text Only

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

@@ -3,4 +3,6 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
+export { default as UserDark } from './_user_dark.jsx'
+export { default as UserTextOnlyDark } from './_user_text_only_dark.jsx'
 

data/app/pb_kits/playbook/pb_user/user.rb

@@ -21,12 +21,10 @@ module Playbook
                   values: %w[lg md sm],
                   default: "sm"
       prop :title
-      prop :dark, type: Playbook::Props::Boolean,
-                          default: false
       prop :territory
 
       def classname
-        generate_classname("pb_user_kit", align, orientation, size, dark_class)
+        generate_classname("pb_user_kit", align, orientation, size)
       end
 
       def avatar_size
@@ -40,10 +38,6 @@ module Playbook
         end
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def title_size
         size == "lg" ? 3 : 4
       end