playbook_ui 6.1.0 → 6.4.0

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -10,10 +10,10 @@ import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
-  id?: String,
+  id?: string,
   data?: object,
-  className?: String,
-  text?: String,
+  className?: string,
+  text?: string,
 }
 
 const Timestamp = (props: TimestampProps) => {

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -7,14 +7,14 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
-  text?: String,
-  variant?: null | "primary",
+  text?: string,
+  variant?: null | "link",
 }
 
 const Title = (props: TitleProps) => {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -16,14 +16,14 @@
 
   &[class*=_4] {
     @include pb_title_4;
+
+    &[class*=_link]  {
+      color: $primary;
+    }
+
   }
 
   &.dark {
     @include pb_title_dark;
   }
-
-  &[class*=_link]  {
-    color: $primary;
-  }
-
 }

data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Title 4 (link)", tag: "h4", size: 4, variant: "link" }) %> 

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Title } from '../../'
+
+const TitleVariants = () => {
+  return (
+    <div>
+      <Title
+          size={4}
+          tag="h4"
+          text="Title 4 (link)"
+          variant="link"
+      />
+    </div>
+  )
+}
+
+export default TitleVariants

data/app/pb_kits/playbook/pb_title/docs/_title_variants.md

@@ -0,0 +1,3 @@
+Wrap anchor tags around the kit to make it clickable.
+
+Link variant can only be applied to size `4`.

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

@@ -1,7 +1,9 @@
 examples:
   rails:
   - title_light: Light UI
+  - title_variants: Variants
   - title_dark: Dark UI
   react:
   - title_light: Light UI
+  - title_variants: Variants
   - title_dark: Dark UI

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

@@ -1,2 +1,3 @@
 export { default as TitleLight } from './_title_light.jsx'
 export { default as TitleDark } from './_title_dark.jsx'
+export { default as TitleVariants } from './_title_variants.jsx'

data/app/pb_kits/playbook/pb_title_count/_title_count.html.erb

@@ -1,10 +1,12 @@
 <%= 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: {
+    dark: object.dark,
     size: object.title_size,
     text: object.title,
     classname: "pb_title_count_text" }) if object.title %>
-  <%= pb_rails("body", props: { color: "light" }) { object.format_count } if object.count %>
+  <%= pb_rails("body", props: { color: "light", dark: object.dark }) { object.format_count } if object.count %>
 <% end %>

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -11,11 +11,12 @@ import { globalProps } from '../utilities/globalProps.js'
 type TitleCountProps = {
   align: "center" | "left" | "right",
   aria?: object,
-  className?: String,
+  className?: string,
   count?: Numeric,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  title?: String,
+  id?: string,
+  title?: string,
   size?: "lg" | "sm",
 };
 
@@ -24,6 +25,7 @@ const TitleCount = (props: TitleCountProps) => {
     align = 'left',
     aria = {},
     className,
+    dark = false,
     data = {},
     count,
     id,
@@ -45,11 +47,15 @@ const TitleCount = (props: TitleCountProps) => {
     >
       <Title
           className={title !== undefined ? 'pb_title_count_text' : ''}
+          dark={dark}
           size={size === 'lg' ? 3 : 4}
           text={title}
       />
 
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <If condition={count}>{formatCount}</If>
       </Body>
 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountAlignDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+    </>
+  )
+}
+
+export default TitleCountAlignDark

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 35.78,
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg",
+  dark: true
+}) %>

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

@@ -25,8 +25,10 @@
   .pb_item_kit {
     padding: ($space_xs + 2) 0;
 
-    &:hover {
-      background-color: $bg_light;
+    @media (hover:hover) {
+      &:hover {
+        background-color: $bg_light;
+      }
     }
   }
   
@@ -79,7 +81,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