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 +4 -4
- data/app/pb_kits/playbook/pb_user/_user.tsx +15 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb +36 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +56 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb +23 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +33 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_user/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_user/user.html.erb +10 -2
- data/app/pb_kits/playbook/pb_user/user.rb +1 -0
- data/app/pb_kits/playbook/pb_user/user.test.js +28 -0
- data/lib/playbook/version.rb +2 -2
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 01a1e3109de5059d750e0f17e5f9ead0781c6b6ad6c3729186b9c31eb3ff9a90
|
|
4
|
+
data.tar.gz: a6daa201b636522e49e95279007ccded48567c7e1b2c8c4994f595b0b2ff1656
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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 %>
|
|
@@ -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
|
+
})
|
data/lib/playbook/version.rb
CHANGED
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.
|
|
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-
|
|
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
|