playbook_ui_docs 14.12.0.pre.alpha.play1752updatecontenttag5801 → 14.12.0.pre.alpha.play1753updatepbcontenttags5889
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_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- 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: ec2fefa434e3513f725e27308fdaa61fdddcce29cc591a09b375072208fbb4d8
|
4
|
+
data.tar.gz: bbf3fea108eb9daf7c36cf44250429e03d0a837c8f16fc64917c31bccbbdd8ec
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: afbbec2398ffb44184d6ed76d0cd0a3bb6e643b2b0d551710d27586fc049d4775541ccc06d47c6fee5d6d33e4ad09f40db6ca415688cfd5d658189a9070cd178
|
7
|
+
data.tar.gz: 8081c871bf0fe252252770b8b8ea1b1440538cab802decfa085283b95247bd5f05c04080944fdbfc3e6b5335b0ea6d026968ec7187aad46e17fa579f24816dc6
|
@@ -1,18 +1,19 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Avatar } from 'playbook-ui'
|
3
3
|
|
4
|
-
const AvatarBadgeComponentOverlay = () => {
|
4
|
+
const AvatarBadgeComponentOverlay = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Avatar
|
8
8
|
componentOverlay={{
|
9
9
|
component: "badge",
|
10
10
|
placement: "bottom-right",
|
11
|
-
text: "12"
|
11
|
+
text: "12",
|
12
12
|
}}
|
13
13
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
14
14
|
marginBottom="sm"
|
15
15
|
size="sm"
|
16
|
+
{...props}
|
16
17
|
/>
|
17
18
|
|
18
19
|
<Avatar
|
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
24
25
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
25
26
|
marginBottom="sm"
|
26
27
|
size="md"
|
28
|
+
{...props}
|
29
|
+
|
27
30
|
/>
|
28
31
|
|
29
32
|
<Avatar
|
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
36
39
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
37
40
|
marginBottom="sm"
|
38
41
|
size="lg"
|
42
|
+
{...props}
|
43
|
+
|
39
44
|
/>
|
40
45
|
|
41
46
|
<Avatar
|
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
48
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
49
54
|
marginBottom="sm"
|
50
55
|
size="xl"
|
51
|
-
|
56
|
+
{...props}
|
57
|
+
/>
|
52
58
|
</div>
|
53
59
|
)
|
54
60
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Avatar } from 'playbook-ui'
|
3
3
|
|
4
|
-
const AvatarCircleIconComponentOverlay = () => {
|
4
|
+
const AvatarCircleIconComponentOverlay = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Avatar
|
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
14
14
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
15
15
|
marginBottom="sm"
|
16
16
|
size="sm"
|
17
|
+
{...props}
|
17
18
|
/>
|
18
19
|
|
19
20
|
<Avatar
|
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
26
27
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
27
28
|
marginBottom="sm"
|
28
29
|
size="md"
|
30
|
+
{...props}
|
29
31
|
/>
|
30
32
|
|
31
33
|
<Avatar
|
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
38
40
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
39
41
|
marginBottom="sm"
|
40
42
|
size="lg"
|
43
|
+
{...props}
|
41
44
|
/>
|
42
45
|
|
43
46
|
<Avatar
|
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
50
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
51
54
|
marginBottom="sm"
|
52
55
|
size="xl"
|
53
|
-
|
56
|
+
{...props}
|
57
|
+
/>
|
54
58
|
</div>
|
55
59
|
)
|
56
60
|
}
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("home_address_street", props: {
|
2
|
+
address: "70 pRoSpEcT ave",
|
3
|
+
address_cont: "Apt M18",
|
4
|
+
city: "West Chester",
|
5
|
+
home_id: 8250263,
|
6
|
+
home_url: "https://powerhrg.com/",
|
7
|
+
preserve_case: true,
|
8
|
+
state: "pa",
|
9
|
+
zipcode: "19382",
|
10
|
+
territory: "PHL",
|
11
|
+
}) %>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import HomeAddressStreet from '../_home_address_street'
|
4
|
+
|
5
|
+
const HomeAddressStreetFormatting = (props) => {
|
6
|
+
return (
|
7
|
+
<HomeAddressStreet
|
8
|
+
address="70 pRoSpEcT ave"
|
9
|
+
addressCont="Apt M18"
|
10
|
+
city="West Chester"
|
11
|
+
homeId="8250263"
|
12
|
+
homeUrl="https://powerhrg.com/"
|
13
|
+
preserveCase
|
14
|
+
state="pa"
|
15
|
+
territory="PHL"
|
16
|
+
zipcode="19382"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default HomeAddressStreetFormatting
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
@@ -5,12 +5,14 @@ examples:
|
|
5
5
|
- home_address_street_emphasis: Emphasis
|
6
6
|
- home_address_street_modified: Modified
|
7
7
|
- home_address_street_link: Link
|
8
|
+
- home_address_street_formatting: Formatting
|
8
9
|
|
9
10
|
react:
|
10
11
|
- home_address_street_default: Default
|
11
12
|
- home_address_street_emphasis: Emphasis
|
12
13
|
- home_address_street_modified: Modified
|
13
14
|
- home_address_street_link: Link
|
15
|
+
- home_address_street_formatting: Formatting
|
14
16
|
|
15
17
|
swift:
|
16
18
|
- home_address_street_default_swift: Default
|
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
|
|
2
2
|
export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
|
3
3
|
export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
|
4
4
|
export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
|
5
|
+
export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
|
@@ -39,20 +39,17 @@
|
|
39
39
|
</tr>
|
40
40
|
</tbody>
|
41
41
|
<% end %>
|
42
|
-
|
43
42
|
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
|
44
43
|
<colgroup>
|
45
44
|
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
|
46
|
-
<%= pb_rails("background", props: { background_color: "
|
45
|
+
<%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
|
47
46
|
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
|
48
47
|
</colgroup>
|
49
|
-
|
50
|
-
<
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
</tr>
|
55
|
-
<% end %>
|
48
|
+
<thead>
|
49
|
+
<th>Column 1</th>
|
50
|
+
<th>Column 2</th>
|
51
|
+
<th>Column 3</th>
|
52
|
+
</thead>
|
56
53
|
<tbody>
|
57
54
|
<tr>
|
58
55
|
<td>Value 1</td>
|
@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
|
|
68
68
|
tag='col'
|
69
69
|
/>
|
70
70
|
<Background
|
71
|
-
backgroundColor="
|
71
|
+
backgroundColor="info_subtle"
|
72
72
|
tag='col'
|
73
73
|
/>
|
74
74
|
<Background
|
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
|
|
76
76
|
tag='col'
|
77
77
|
/>
|
78
78
|
</colgroup>
|
79
|
-
<
|
80
|
-
backgroundColor="card_light"
|
81
|
-
tag='thead'
|
82
|
-
>
|
79
|
+
<thead>
|
83
80
|
<tr>
|
84
|
-
|
85
|
-
|
86
|
-
|
81
|
+
<th>{'Column 1'}</th>
|
82
|
+
<th>{'Column 2'}</th>
|
83
|
+
<th>{'Column 3'}</th>
|
87
84
|
</tr>
|
88
|
-
</
|
85
|
+
</thead>
|
89
86
|
<tbody>
|
90
87
|
<tr>
|
91
88
|
<td>{'Value 1'}</td>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<div class="pb--doc-demo-row">
|
2
|
+
<div>
|
3
|
+
<%= pb_rails("user", props: {
|
4
|
+
name: "Anna Black",
|
5
|
+
title: "Remodeling Consultant",
|
6
|
+
orientation: "vertical",
|
7
|
+
align: "center",
|
8
|
+
size: "lg",
|
9
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
10
|
+
bold: false
|
11
|
+
}) %>
|
12
|
+
</div>
|
13
|
+
<div>
|
14
|
+
<%= pb_rails("user", props: {
|
15
|
+
name: "Anna Black",
|
16
|
+
title: "Remodeling Consultant",
|
17
|
+
orientation: "horizontal",
|
18
|
+
align: "left",
|
19
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
20
|
+
bold: false
|
21
|
+
}) %>
|
22
|
+
</div>
|
23
|
+
<div>
|
24
|
+
<%= pb_rails("user", props: {
|
25
|
+
name: "Anna Black",
|
26
|
+
orientation: "horizontal",
|
27
|
+
align: "left",
|
28
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
29
|
+
bold: false
|
30
|
+
}) %>
|
31
|
+
|
32
|
+
<br>
|
33
|
+
|
34
|
+
<%= pb_rails("user", props: {
|
35
|
+
name: "Anna Black",
|
36
|
+
orientation: "horizontal",
|
37
|
+
align: "left",
|
38
|
+
avatar: true,
|
39
|
+
bold: false
|
40
|
+
}) %>
|
41
|
+
</div>
|
42
|
+
</div>
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { User } from 'playbook-ui'
|
3
|
+
|
4
|
+
const UserLightWeight = (props) => {
|
5
|
+
return (
|
6
|
+
<div className="pb--doc-demo-row">
|
7
|
+
|
8
|
+
<div>
|
9
|
+
<User
|
10
|
+
align="center"
|
11
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
12
|
+
bold={false}
|
13
|
+
name="Anna Black"
|
14
|
+
orientation="vertical"
|
15
|
+
size="lg"
|
16
|
+
title="Remodeling Consultant"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<div>
|
22
|
+
<User
|
23
|
+
align="left"
|
24
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
25
|
+
bold={false}
|
26
|
+
name="Anna Black"
|
27
|
+
orientation="horizontal"
|
28
|
+
title="Remodeling Consultant"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<div>
|
34
|
+
<User
|
35
|
+
align="left"
|
36
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
37
|
+
bold={false}
|
38
|
+
name="Anna Black"
|
39
|
+
orientation="horizontal"
|
40
|
+
{...props}
|
41
|
+
/>
|
42
|
+
|
43
|
+
<br />
|
44
|
+
|
45
|
+
<User
|
46
|
+
align="left"
|
47
|
+
avatar
|
48
|
+
bold={false}
|
49
|
+
name="Anna Black"
|
50
|
+
orientation="horizontal"
|
51
|
+
{...props}
|
52
|
+
/>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
</div>
|
56
|
+
)
|
57
|
+
}
|
58
|
+
|
59
|
+
export default UserLightWeight
|
@@ -2,6 +2,7 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- user_default: Default
|
5
|
+
- user_light_weight: Light Weight
|
5
6
|
- user_with_territory: With Territory
|
6
7
|
- user_text_only: Text Only
|
7
8
|
- user_size: Horizontal Size
|
@@ -11,6 +12,7 @@ examples:
|
|
11
12
|
|
12
13
|
react:
|
13
14
|
- user_default: Default
|
15
|
+
- user_light_weight: Light Weight
|
14
16
|
- user_with_territory: With Territory
|
15
17
|
- user_text_only: Text Only
|
16
18
|
- user_size: Horizontal Size
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { default as UserDefault } from './_user_default.jsx'
|
2
|
+
export { default as UserLightWeight } from './_user_light_weight.jsx'
|
2
3
|
export { default as UserWithTerritory } from './_user_with_territory.jsx'
|
3
4
|
export { default as UserTextOnly } from './_user_text_only.jsx'
|
4
5
|
export { default as UserSize } from './_user_size.jsx'
|