playbook_ui_docs 14.13.0.pre.rc.6 → 14.13.0.pre.rc.8

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.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
  4. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
  5. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
  6. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
  7. data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
  8. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
  9. data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
  10. data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
  11. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
  12. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
  13. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
  14. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
  16. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
  17. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
  18. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  19. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  20. data/dist/playbook-doc.js +1 -1
  21. metadata +9 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6779ed94ba3c4c709776ccfc734a8dd9bc577054f2470f1d8fd462bc11e989cb
4
- data.tar.gz: 425067fcf4814285d4c2cd863e27ad9da5bd2df1f33f493c7f95fc9ad9162ecc
3
+ metadata.gz: b5c5f40b551348072c53c3a2dbec9efdd2a05c40fe6e694598da9c5475a2911d
4
+ data.tar.gz: 00a6a60ce073511fc161449fbcc43059025ef7e03f690cffe025935c777098c8
5
5
  SHA512:
6
- metadata.gz: da79f8f9fca0ea7574c74dd9f2c3fb0fcda40bb02bd230309363bc413a6b44368669ea9d591804754646bcf1b005a2217b1ed7365a10401ba98cb305557433ff
7
- data.tar.gz: 64b4e5bf2af287f06f15232cf507d8e22ac3e44b5e2c4a6a2cfd40e6f5b4af78a878dd81cd8c01d73548b29409eba57daa65c259c44ac545c5f200355f3583e7
6
+ metadata.gz: db613afb6017a76793070384d9841baefae077c7cd42f3ae20797a401acae7f872257a478aae4c6ff4ef180993b51960c64a52bfeb3ab9a486b7618e7636edf6
7
+ data.tar.gz: f57c7821855d7a764f284b5f65f08866d9c853ed7c06f6d13dcec25d0a9b49b0896579296564a57e505f1fe5ed94fcb85e971924f05250b175cd30e1be1b4327
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx CHANGED
@@ -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
  }
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx CHANGED
@@ -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_copy_button/docs/_copy_button_default.html.erb ADDED
@@ -0,0 +1,2 @@
1
+ <%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
2
+ <%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
2
+ <%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
3
+ <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
4
+ <%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
5
+ <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
data/app/pb_kits/playbook/pb_copy_button/docs/example.yml CHANGED
@@ -1,8 +1,8 @@
1
1
  examples:
2
-
2
+ rails:
3
+ - copy_button_default: Default
4
+ - copy_button_from: Copy From
3
5
 
4
6
  react:
5
7
  - copy_button_default: Default
6
8
  - copy_button_from: Copy From
7
-
8
-
data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb ADDED
@@ -0,0 +1,15 @@
1
+ <div>
2
+ <%= pb_rails("link", props: {
3
+ href: "http://google.com",
4
+ target: "blank",
5
+ text: "Open In New Window"
6
+ }) %>
7
+ </div>
8
+
9
+ <div>
10
+ <%= pb_rails("link", props: {
11
+ href: "https://playbook.powerapp.cloud/",
12
+ target: "child",
13
+ text: "Open In Child Tab",
14
+ }) %>
15
+ </div>
data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkTarget = (props) => (
5
+ <div>
6
+ <div>
7
+ <Link
8
+ aria={{ label: 'Link to Google in new window' }}
9
+ href="https://google.com"
10
+ tabIndex={0}
11
+ target='blank'
12
+ text="Open In New Window"
13
+ {...props}
14
+ />
15
+ </div>
16
+ <div>
17
+ <Link
18
+ aria={{ label: 'Link to Playbook in a child tab' }}
19
+ href="https://playbook.powerapp.cloud/"
20
+ tabIndex={0}
21
+ target='child'
22
+ text="Open In Child Tab"
23
+ {...props}
24
+ />
25
+ </div>
26
+ </div>
27
+ )
28
+
29
+ export default LinkTarget
data/app/pb_kits/playbook/pb_link/docs/example.yml CHANGED
@@ -1,16 +1,18 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - link_color: Color
5
5
  - link_underline: Underline
6
6
  - link_icon: Icon
7
7
  - link_disabled: Disabled
8
8
  - link_tag: Tag
9
-
10
-
9
+ - link_target: Target
10
+
11
+
11
12
  react:
12
13
  - link_color: Color
13
14
  - link_underline: Underline
14
15
  - link_icon: Icon
15
16
  - link_disabled: Disabled
16
17
  - link_tag: Tag
18
+ - link_target: Target
data/app/pb_kits/playbook/pb_link/docs/index.js CHANGED
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
2
2
  export { default as LinkUnderline } from './_link_underline.jsx'
3
3
  export { default as LinkIcon } from './_link_icon.jsx'
4
4
  export { default as LinkDisabled } from './_link_disabled.jsx'
5
- export { default as LinkTag } from './_link_tag.jsx'
5
+ export { default as LinkTag } from './_link_tag.jsx'
6
+ export { default as LinkTarget } from './_link_target.jsx'
data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb CHANGED
@@ -2,7 +2,7 @@
2
2
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
3
3
  step 1
4
4
  <% end %>
5
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
5
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
6
6
  step 2
7
7
  <% end %>
8
8
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
11
11
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
12
12
  step 4
13
13
  <% end %>
14
- <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
14
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
15
15
  step 5
16
16
  <% end %>
17
17
  <% end %>
@@ -19,7 +19,7 @@
19
19
  <br /><br />
20
20
 
21
21
  <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
22
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
22
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
23
23
  <% end %>
24
24
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
25
25
  <% end %>
@@ -31,10 +31,10 @@
31
31
 
32
32
  <br /><br>
33
33
  <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
34
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
34
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
35
35
  <%= pb_rails("caption", props:{text: "Ordered"})%>
36
36
  <% end %>
37
- <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
37
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
38
38
  <%= pb_rails("caption", props:{text: "Shipped"})%>
39
39
  <% end %>
40
40
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
50
50
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
51
51
  <%= pb_rails("caption", props:{text: "Shipped"})%>
52
52
  <% end %>
53
- <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
53
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
54
54
  <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
55
55
  <% end %>
56
56
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb CHANGED
@@ -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: "card_light", tag: "col" }) %>
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
- <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
50
- <tr>
51
- <th>Column 1</th>
52
- <th>Column 2</th>
53
- <th>Column 3</th>
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>
data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx CHANGED
@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
68
68
  tag='col'
69
69
  />
70
70
  <Background
71
- backgroundColor="card_light"
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
- <Background
80
- backgroundColor="card_light"
81
- tag='thead'
82
- >
79
+ <thead>
83
80
  <tr>
84
- <th>{'Column 1'}</th>
85
- <th>{'Column 2'}</th>
86
- <th>{'Column 3'}</th>
81
+ <th>{'Column 1'}</th>
82
+ <th>{'Column 2'}</th>
83
+ <th>{'Column 3'}</th>
87
84
  </tr>
88
- </Background>
85
+ </thead>
89
86
  <tbody>
90
87
  <tr>
91
88
  <td>{'Value 1'}</td>
data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb CHANGED
@@ -43,4 +43,4 @@
43
43
  Whoa. I'm a tooltip.
44
44
  <% end %>
45
45
  <% end %>
46
- <% end %>
46
+ <% end %>
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb ADDED
@@ -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>
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md ADDED
@@ -0,0 +1,2 @@
1
+ ##### Prop
2
+ 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 CHANGED
@@ -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
data/app/pb_kits/playbook/pb_user/docs/index.js CHANGED
@@ -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'