playbook_ui 11.10.0 → 11.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0cae07073769e635a2939918a0073c3b64119f9ded3a1390688945395ecbd9df
4
- data.tar.gz: 38d8898737006ea27c5bcf4c2b65734dd1df5ef004a351638dc00015ca6bcbaa
3
+ metadata.gz: 01a1e3109de5059d750e0f17e5f9ead0781c6b6ad6c3729186b9c31eb3ff9a90
4
+ data.tar.gz: a6daa201b636522e49e95279007ccded48567c7e1b2c8c4994f595b0b2ff1656
5
5
  SHA512:
6
- metadata.gz: 787832d4132fb8a9373f06a684645f0945998476c5d5b2ab44718b0078eae552995cfe1d550a758a57f79d9a03267ffafee6882a5330fdf016d5c3a16f6a6ae2
7
- data.tar.gz: a675526b2eec32a03c1f2409919a30deba79dfcd8bf3c06970c7153d35e4d37db4f665b0d66e05dc117e1937b2cbbb7a68b17b1e67f8555b7926c4c4c7cc7107
6
+ metadata.gz: 3a8decc17e61b0c22c47d0e0248418490270c9c313768b2da5c757e74997646644f089abbc8b696ad61983befb3d1836cf675868b33e6cdc730c2f31e60f6587
7
+ data.tar.gz: 634d88b0f381e09676cff75ef918f4269dcdb1d0537b95fb02e8142ee7c9dace945a7825f8d6795785ad819a6f115c75f665660a8c5df99bd4e605e5b0611402
@@ -1,4 +1,3 @@
1
-
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
 
@@ -21,6 +20,7 @@ type UserProps = {
21
20
  name?: string,
22
21
  orientation?: "horiztonal" | "vertical",
23
22
  size?: "sm" | "md" | "lg",
23
+ subtitle?: string | Array<Node> | Node,
24
24
  territory?: string,
25
25
  title?: string,
26
26
  } & GlobalProps
@@ -38,6 +38,7 @@ const User = (props: UserProps) => {
38
38
  name,
39
39
  orientation = 'horizontal',
40
40
  size = 'sm',
41
+ subtitle,
41
42
  territory = '',
42
43
  title = '',
43
44
  } = props
@@ -81,6 +82,19 @@ const User = (props: UserProps) => {
81
82
  >
82
83
  {territory === '' ? title : `${territory} • ${title}`}
83
84
  </Body>
85
+ { typeof(subtitle) === 'string' &&
86
+ <Body
87
+ color="light"
88
+ dark={dark}
89
+ text={subtitle}
90
+ variant={null}
91
+ />
92
+ }
93
+ { typeof(subtitle) !== 'string' &&
94
+ <>
95
+ {subtitle}
96
+ </>
97
+ }
84
98
  </div>
85
99
  </div>
86
100
  )
@@ -0,0 +1,36 @@
1
+ <div class="pb--doc-demo-row">
2
+ <%= pb_rails("user", props: {
3
+ align: "left",
4
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
5
+ name: "Anna Black",
6
+ orientation: "horizontal",
7
+ size: "md",
8
+ territory: "PHL",
9
+ title: "Remodeling Consultant"
10
+ }) do %>
11
+ <%= pb_rails("flex", props: { align: "center" }) do %>
12
+ <%= pb_rails("icon", props: { icon: "users" }) %>
13
+ <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
14
+ <% end %>
15
+ <% end %>
16
+
17
+ <%= pb_rails("user", props: {
18
+ align: "left",
19
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
20
+ name: "Anna Black",
21
+ orientation: "horizontal",
22
+ size: "md",
23
+ }) do %>
24
+ <%= pb_rails("contact", props: {
25
+ contact_type: "cell",
26
+ contact_value: "349-185-9988"
27
+ }) %>
28
+ <%= pb_rails("contact", props: {
29
+ contact_value: 5555555555
30
+ }) %>
31
+ <%= pb_rails("contact", props: {
32
+ contact_type: "email",
33
+ contact_value: "email@example.com"
34
+ }) %>
35
+ <% end %>
36
+ </div>
@@ -0,0 +1 @@
1
+ The kit accepts block content and whatever is passed as block content will display in the subtitle section.
@@ -0,0 +1,56 @@
1
+ import React from "react"
2
+ import { Caption, Contact, Flex, Icon, User } from "../.."
3
+
4
+ const MentorSubtitle = (
5
+ <Flex>
6
+ <Icon icon="users" />
7
+ <Caption
8
+ paddingLeft="xs"
9
+ text="Admin"
10
+ />
11
+ </Flex>
12
+ )
13
+
14
+ const ContactSubtitle = (
15
+ <>
16
+ <Contact
17
+ contactType="cell"
18
+ contactValue="349-185-9988"
19
+ />
20
+ <Contact
21
+ contactValue="5555555555"
22
+ />
23
+ <Contact
24
+ contactType="email"
25
+ contactValue="email@example.com"
26
+ />
27
+ </>
28
+ )
29
+
30
+ const UserBlockContentSubtitleReact = (props) => {
31
+ return (
32
+ <div className="pb--doc-demo-row">
33
+ <User
34
+ align="left"
35
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
36
+ name="Anna Black"
37
+ orientation="horizontal"
38
+ subtitle={MentorSubtitle}
39
+ territory="PHL"
40
+ title="Remodeling Consultant"
41
+ {...props}
42
+ />
43
+
44
+ <User
45
+ align="left"
46
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
47
+ name="Anna Black"
48
+ orientation="horizontal"
49
+ subtitle={ContactSubtitle}
50
+ {...props}
51
+ />
52
+ </div>
53
+ )
54
+ }
55
+
56
+ export default UserBlockContentSubtitleReact
@@ -0,0 +1 @@
1
+ The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.
@@ -0,0 +1,23 @@
1
+ <div class="pb--doc-demo-row">
2
+ <%= pb_rails("user", props: {
3
+ align: "center",
4
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
5
+ name: "Anna Black",
6
+ orientation: "vertical",
7
+ size: "md",
8
+ subtitle: "User ID: 12345",
9
+ territory: "PHL",
10
+ title: "Remodeling Consultant"
11
+ }) %>
12
+
13
+ <%= pb_rails("user", props: {
14
+ align: "left",
15
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
16
+ name: "Anna Black",
17
+ orientation: "horizontal",
18
+ size: "md",
19
+ subtitle: "User ID: 12345",
20
+ territory: "PHL",
21
+ title: "Remodeling Consultant"
22
+ }) %>
23
+ </div>
@@ -0,0 +1,33 @@
1
+ import React from "react"
2
+ import { User } from "../../"
3
+
4
+ const UserSubtitle = (props) => {
5
+ return (
6
+ <div className="pb--doc-demo-row">
7
+ <User
8
+ align="center"
9
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
10
+ name="Anna Black"
11
+ orientation="vertical"
12
+ size="lg"
13
+ subtitle="User ID: 12345"
14
+ territory="PHL"
15
+ title="Remodeling Consultant"
16
+ {...props}
17
+ />
18
+
19
+ <User
20
+ align="left"
21
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
22
+ name="Anna Black"
23
+ orientation="horizontal"
24
+ subtitle="User ID: 12345"
25
+ territory="PHL"
26
+ title="Remodeling Consultant"
27
+ {...props}
28
+ />
29
+ </div>
30
+ )
31
+ }
32
+
33
+ export default UserSubtitle
@@ -6,9 +6,8 @@ examples:
6
6
  - user_text_only: Text Only
7
7
  - user_size: Horizontal Size
8
8
  - user_vertical_size: Vertical Size
9
-
10
-
11
-
9
+ - user_subtitle: Subtitle
10
+ - user_block_content_subtitle_rails: Block Content Subtitle
12
11
 
13
12
  react:
14
13
  - user_default: Default
@@ -16,3 +15,5 @@ examples:
16
15
  - user_text_only: Text Only
17
16
  - user_size: Horizontal Size
18
17
  - user_vertical_size: Vertical Size
18
+ - user_subtitle: Subtitle
19
+ - user_block_content_subtitle_react: Block Content Subtitle
@@ -3,3 +3,5 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
3
3
  export { default as UserTextOnly } from './_user_text_only.jsx'
4
4
  export { default as UserSize } from './_user_size.jsx'
5
5
  export { default as UserVerticalSize } from './_user_vertical_size.jsx'
6
+ export { default as UserSubtitle } from './_user_subtitle.jsx'
7
+ export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
@@ -10,13 +10,21 @@
10
10
  image_url: object.avatar_url
11
11
  }) %>
12
12
  <% end %>
13
- <%= content_tag(:div,
14
- class: "content_wrapper") do %>
13
+ <%= content_tag(:div, class: "content_wrapper") do %>
15
14
  <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
16
15
  <%= pb_rails("body", props: {
17
16
  text: "#{object.details}",
18
17
  dark: object.dark,
19
18
  color: "light"
20
19
  }) %>
20
+ <% if content %>
21
+ <%= content.presence %>
22
+ <% else %>
23
+ <%= pb_rails("body", props: {
24
+ text: "#{object.subtitle}",
25
+ dark: object.dark,
26
+ color: "light"
27
+ }) %>
28
+ <% end %>
21
29
  <% end %>
22
30
  <% end %>
@@ -16,6 +16,7 @@ module Playbook
16
16
  prop :size, type: Playbook::Props::Enum,
17
17
  values: %w[lg md sm],
18
18
  default: "sm"
19
+ prop :subtitle
19
20
  prop :title
20
21
  prop :territory
21
22
 
@@ -0,0 +1,28 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import User from './_user'
4
+ import Caption from "../pb_caption/_caption"
5
+
6
+ test('subtitle prop adds subtitle text', () => {
7
+ render(
8
+ <User
9
+ data={{ testid: 'test-subtitle' }}
10
+ subtitle='test subtitle'
11
+ />
12
+ )
13
+
14
+ expect(screen.getByTestId('test-subtitle')).toHaveTextContent('test subtitle')
15
+ })
16
+
17
+ test('subtitle prop accepts a node', () => {
18
+ const TestCaption = <Caption text='test caption' />
19
+
20
+ render(
21
+ <User
22
+ data={{ testid: 'test-subtitle-block' }}
23
+ subtitle={TestCaption}
24
+ />
25
+ )
26
+
27
+ expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
28
+ })
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.9.0"
5
- VERSION = "11.10.0"
4
+ PREVIOUS_VERSION = "11.10.0"
5
+ VERSION = "11.11.0"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.10.0
4
+ version: 11.11.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-10-25 00:00:00.000000000 Z
12
+ date: 2022-10-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -2130,10 +2130,16 @@ files:
2130
2130
  - app/pb_kits/playbook/pb_user/_user.tsx
2131
2131
  - app/pb_kits/playbook/pb_user/docs/_description.md
2132
2132
  - app/pb_kits/playbook/pb_user/docs/_footer.md
2133
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb
2134
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md
2135
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx
2136
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
2133
2137
  - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
2134
2138
  - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
2135
2139
  - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
2136
2140
  - app/pb_kits/playbook/pb_user/docs/_user_size.jsx
2141
+ - app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
2142
+ - app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
2137
2143
  - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
2138
2144
  - app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
2139
2145
  - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
@@ -2144,6 +2150,7 @@ files:
2144
2150
  - app/pb_kits/playbook/pb_user/docs/index.js
2145
2151
  - app/pb_kits/playbook/pb_user/user.html.erb
2146
2152
  - app/pb_kits/playbook/pb_user/user.rb
2153
+ - app/pb_kits/playbook/pb_user/user.test.js
2147
2154
  - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
2148
2155
  - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
2149
2156
  - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg