RubyGems - playbook_ui - Versions diffs - 14.12.0.pre.alpha.PBNTR720railscarddraggable5649 → 14.12.0.pre.alpha.PBNTR834advtablemaxHeightstickyheader5932 - Mend

playbook_ui 14.12.0.pre.alpha.PBNTR720railscarddraggable5649 → 14.12.0.pre.alpha.PBNTR834advtablemaxHeightstickyheader5932

Files changed (112) hide show

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx CHANGED Viewed

@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card
           borderNone
           borderRadius="none"
-          color="light"
+          color="light"
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm"
+         <Body paddingBottom="sm"
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
           </Flex>
       </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible
+        <Table.Row collapsible
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{
+          <Table.Cell textAlign="right">{
             <Icon
                 color="primary"
                 fixedWidth

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
+        <%= pb_rails("flex", props: { justify: "between" }) do %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+        <% end %>
+    <% end %>
+<% end %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md ADDED Viewed

File without changes

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("background", props: { tag: "tr" }) do %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+        <% end %>
+    <% end %>
+<% end %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `collapsible_content` can display any content, including nested Table Rows.
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb ADDED Viewed

@@ -0,0 +1,80 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { tag: "tr" }) do %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The `collapsible_content` can also be used to display nested Tables within each Row.

data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED Viewed

@@ -31,6 +31,9 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
+    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
+    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
   react:
     - table_sm: Small

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss CHANGED Viewed

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -81,6 +106,7 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
               &:after {
                 height: 0;
                 background-color: transparent;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss CHANGED Viewed

@@ -77,7 +77,6 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
-              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss CHANGED Viewed

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss CHANGED Viewed

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/table_row.rb CHANGED Viewed

@@ -12,7 +12,7 @@ module Playbook
                          default: false
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
-                                        default: false
+                                        default: true
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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