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

Sign up to get free protection for your applications and to get access to all the features.
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'