playbook_ui 14.12.0.pre.alpha.play1828updateviteversion5680 → 14.12.0.pre.alpha.play1849cssbargraph5901

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -32,6 +32,7 @@ type TooltipProps = {
   position?: "absolute" | "fixed";
   text: string,
   showTooltip?: boolean,
+  forceOpenTooltip?: boolean,
 } & GlobalProps
 
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -49,6 +50,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     text,
     showTooltip = true,
     zIndex,
+    forceOpenTooltip = false,
     ...rest
   } = props
 
@@ -135,7 +137,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       >
         {children}
       </div>
-      {open && (
+      {(open || forceOpenTooltip) && (
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -1,5 +1,4 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-
 import {
   createPopperLite as createPopper,
   flip,
@@ -17,27 +16,34 @@ export default class PbTooltip extends PbEnhancedElement {
 
   connect() {
     this.triggerElements.forEach((trigger) => {
-      trigger.addEventListener('mouseenter', () => {
-        this.mouseenterTimeout = setTimeout(() => {
-          this.showTooltip(trigger)
-          this.checkCloseTooltip(trigger)
-        }, TOOLTIP_TIMEOUT)
+      const method = this.triggerMethod
 
-        trigger.addEventListener('mouseleave', () => {
+      if (method === 'click') {
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
+        })
+      } else {
+        trigger.addEventListener('mouseenter', () => {
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            this.checkCloseTooltip(trigger)
+          }, TOOLTIP_TIMEOUT)
+
+          trigger.addEventListener('mouseleave', () => {
+            clearTimeout(this.mouseenterTimeout)
+            setTimeout(() => {
+              this.hideTooltip()
+            }, 0)
+          }, { once: true })
+        })
+
+        this.tooltip.addEventListener('mouseenter', () => {
           clearTimeout(this.mouseenterTimeout)
-
-          setTimeout(() => {
-            this.hideTooltip()
-          }, 0)
-        }, { once: true })
-      })
-    })
-
-    this.tooltip.addEventListener('mouseenter', () => {
-      clearTimeout(this.mouseenterTimeout)
-    })
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.hideTooltip()
+        })
+        this.tooltip.addEventListener('mouseleave', () => {
+          this.hideTooltip()
+        })
+      }
     })
   }
 
@@ -54,7 +60,7 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === "false") return
+    if (this.shouldShowTooltip === 'false') return
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
@@ -78,6 +84,13 @@ export default class PbTooltip extends PbEnhancedElement {
       ],
     })
     this.tooltip.classList.add('show')
+
+    if (this.triggerMethod === 'click') {
+      clearTimeout(this.autoHideTimeout)
+      this.autoHideTimeout = setTimeout(() => {
+        this.hideTooltip()
+      }, 1000)
+    }
   }
 
   hideTooltip() {
@@ -94,25 +107,26 @@ export default class PbTooltip extends PbEnhancedElement {
     let triggerEl
 
     if (this.triggerElementId) {
-      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
+      triggerEl = document.querySelector(`#${this.triggerElementId}`)
     } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
-      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
-        document.querySelectorAll(`${this.triggerElementSelector}`)
+      triggerEl = selectorIsId
+        ? document.querySelector(`${this.triggerElementSelector}`)
+        : document.querySelectorAll(`${this.triggerElementSelector}`)
     }
 
     if (!triggerEl) {
-      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
       console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
 
     if (!triggerEl.length) triggerEl = [triggerEl]
-    return this._triggerElements = (this._triggerElements || triggerEl)
+    return (this._triggerElements = this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return (this._tooltip =
+      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -134,4 +148,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get shouldShowTooltip() {
     return this.element.dataset.pbTooltipShowTooltip
   }
+
+  get triggerMethod() {
+    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
+  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -9,6 +9,9 @@ module Playbook
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :trigger_method, type: Playbook::Props::Enum,
+                            values: %w[hover click],
+                            default: "hover"
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -21,7 +24,8 @@ module Playbook
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
-          pb_tooltip_show_tooltip: true
+          pb_tooltip_show_tooltip: true,
+          pb_tooltip_trigger_method: trigger_method
         )
       end
 

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

@@ -13,6 +13,7 @@ type UserProps = {
   aria?: {[key: string]: string},
   avatar?: boolean,
   avatarUrl?: string,
+  bold?: boolean,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
@@ -32,6 +33,7 @@ const User = (props: UserProps): React.ReactElement => {
     aria = {},
     avatar = false,
     avatarUrl,
+    bold = true,
     className,
     dark = false,
     data = {},
@@ -75,6 +77,7 @@ const User = (props: UserProps): React.ReactElement => {
       }
       <div className="content_wrapper">
         <Title
+            bold={bold}
             dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb

@@ -0,0 +1,42 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+
+     <br>
+
+     <%= pb_rails("user", props: {
+       name: "Anna Black",
+       orientation: "horizontal",
+       align: "left",
+       avatar: true,
+       bold: false
+     }) %>
+  </div>
+</div>

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

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

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md

@@ -0,0 +1,2 @@
+##### Prop
+Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -11,6 +12,7 @@ examples:
 
   react:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,4 +1,5 @@
 export { default as UserDefault } from './_user_default.jsx'
+export { default as UserLightWeight } from './_user_light_weight.jsx'
 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'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,7 +12,7 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,

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

@@ -9,6 +9,7 @@ module Playbook
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
       prop :avatar_url
+      prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -26,3 +26,17 @@ test('subtitle prop accepts a node', () => {
 
   expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
 })
+
+test('bold prop applies correct styling when false', () => {
+  render(
+    <User
+        bold={false}
+        data={{ testid: 'test-bold-false' }}
+        name="Anna Black"
+    />
+  )
+  const titleElement = screen.getByText("Anna Black")
+  expect(titleElement).toBeInTheDocument()
+
+  expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
+})