playbook_ui 14.12.0 → 14.13.0.pre.alpha.PBNTR5596029

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')
+})