playbook_ui_docs 13.33.1.pre.alpha.PLAY14143340 → 13.34.0.pre.alpha.PLAY14143357

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 (22) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  3. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +31 -32
  4. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +3 -2
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +33 -32
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +3 -7
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -0
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +9 -0
  9. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb +5 -0
  10. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx +19 -0
  11. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -1
  12. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -1
  13. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +5 -0
  14. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +34 -0
  15. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
  16. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +28 -33
  19. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx +14 -0
  20. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +2 -0
  21. data/dist/playbook-doc.js +1 -1
  22. metadata +8 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2b8f0b0dc58e459bc198e51dc977b93551ff2b1b05950cb6f7e218fec8355065
4
- data.tar.gz: f48734886c91157e7dd2fac0189e191bf733e8a3675e51a37065e6748d301564
3
+ metadata.gz: 20987ef4b4e2a8cfb7ae34d2496af7c93bf08d0a8a3a102d59f72518286f1142
4
+ data.tar.gz: 37a435348707084444119b8d50fe346dd361f1abf4688189712a7781015b22d0
5
5
  SHA512:
6
- metadata.gz: b0ab3b3fcb07d63d14bb777006661697d4ca7d13abfb2bb5cfcfd02db674ce1db959cb0d73b1bed9579a8c04d735530599b57c9c3c618629967c10b085250fcf
7
- data.tar.gz: ef14bf1135505e7e202def1d3ac516b24916b6e180e7b11ba92e478ebed7e9472475784a60b244fa23fc5995a86805e27df932eb480525ff11a3d5ec5a2d09bb
6
+ metadata.gz: b5449d62cabc44e7d927f196fddf3a6877dfabec6a7d7f1bf754376e61f1d72b351a211e2ebab3917b2c9ef5222d15f09170ee4eeb1c7775e574d97319dc1634
7
+ data.tar.gz: 3c826ee75a8a3cf5f875ed681369aab004114ac65331497d00381f144daeb1a8dcd1d07f3551f8ca9ab49173ff0da73bc8172127552ef4516cc817d1dd4da933
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx CHANGED
@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
19
19
  </Collapsible.Content>
20
20
  </Collapsible>
21
21
  <Collapsible
22
- iconColor='light'
22
+ iconColor='lighter'
23
23
  marginBottom="xs"
24
24
  >
25
25
  <Collapsible.Main>
@@ -34,7 +34,7 @@ const CollapsibleColor = (props) => (
34
34
  </Collapsible.Content>
35
35
  </Collapsible>
36
36
  <Collapsible
37
- iconColor='lighter'
37
+ iconColor='light'
38
38
  marginBottom="xs"
39
39
  >
40
40
  <Collapsible.Main>
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx CHANGED
@@ -1,72 +1,71 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from 'playbook-ui'
2
+ import PropTypes from 'prop-types'
3
+ import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
3
4
 
4
- const CollapsibleCustomMain = () => {
5
+ const CollapsibleCustomMain = (props) => {
5
6
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
7
 
7
8
  return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- </Flex>
29
- </Background>
30
- <Collapsible.Content padding="none">
9
+ <>
10
+ <Collapsible collapsed={isCollapsed}>
11
+ <Flex
12
+ align="center"
13
+ cursor="pointer"
14
+ gap="sm"
15
+ htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
+ justify="between"
17
+ position="sticky"
18
+ top="0"
19
+ >
20
+ <Title
21
+ dark={props.dark}
22
+ size={4}
23
+ text="Custom Main Section" />
24
+ </Flex>
25
+ <Collapsible.Content
26
+ padding="none">
31
27
  <div>
32
- <List>
28
+ <List>
33
29
  <ListItem
34
30
  align="stretch"
35
31
  flexDirection="column"
36
32
  >
37
- Checklist item
33
+ {"Checklist item"}
38
34
  </ListItem>
39
35
  <ListItem
40
36
  align="stretch"
41
37
  flexDirection="column"
42
38
  >
43
- Checklist item
39
+ {"Checklist item"}
44
40
  </ListItem>
45
41
  <ListItem
46
42
  align="stretch"
47
43
  flexDirection="column"
48
44
  >
49
- Checklist item
45
+ {"Checklist item"}
50
46
  </ListItem>
51
47
  <ListItem
52
48
  align="stretch"
53
49
  flexDirection="column"
54
50
  >
55
- Checklist item
51
+ {"Checklist item"}
56
52
  </ListItem>
57
53
  <ListItem
58
54
  align="stretch"
59
55
  flexDirection="column"
60
56
  >
61
- Checklist item
57
+ {"Checklist item"}
62
58
  </ListItem>
63
59
  </List>
64
60
  </div>
65
61
  </Collapsible.Content>
66
62
  </Collapsible>
67
-
68
63
  </>
69
64
  )
70
65
  }
71
66
 
67
+ CollapsibleCustomMain.propTypes = {
68
+ dark: PropTypes.bool,
69
+ }
70
+
72
71
  export default CollapsibleCustomMain
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
2
+ <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %>
3
3
  <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
4
  <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
5
  <% end %>
@@ -16,4 +16,5 @@
16
16
  <% end %>
17
17
  <% end %>
18
18
  <% end %>
19
-
19
+
20
+
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx CHANGED
@@ -1,73 +1,74 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from 'playbook-ui'
2
+ import PropTypes from 'prop-types'
3
+ import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
3
4
 
4
- const CollapsibleCustomMainWithIcon = () => {
5
+ const CollapsibleCustomMainWithIcon = (props) => {
5
6
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
7
 
7
8
  return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- <Collapsible.Icon collapsed={isCollapsed}/>
29
- </Flex>
30
- </Background>
31
- <Collapsible.Content padding="none">
9
+ <>
10
+ <Collapsible collapsed={isCollapsed}>
11
+ <Flex
12
+ align="center"
13
+ cursor="pointer"
14
+ gap="sm"
15
+ htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
+ justify="between"
17
+ position="sticky"
18
+ top="0"
19
+ >
20
+ <Title
21
+ dark={props.dark}
22
+ size={4}
23
+ text="Custom Main Section"
24
+ />
25
+ <Collapsible.Icon collapsed={isCollapsed} />
26
+ </Flex>
27
+ <Collapsible.Content
28
+ padding="none"
29
+ >
32
30
  <div>
33
31
  <List>
34
32
  <ListItem
35
33
  align="stretch"
36
34
  flexDirection="column"
37
35
  >
38
- Checklist item
36
+ {"Checklist item"}
39
37
  </ListItem>
40
38
  <ListItem
41
39
  align="stretch"
42
40
  flexDirection="column"
43
41
  >
44
- Checklist item
42
+ {"Checklist item"}
45
43
  </ListItem>
46
44
  <ListItem
47
45
  align="stretch"
48
46
  flexDirection="column"
49
47
  >
50
- Checklist item
48
+ {"Checklist item"}
51
49
  </ListItem>
52
50
  <ListItem
53
51
  align="stretch"
54
52
  flexDirection="column"
55
53
  >
56
- Checklist item
54
+ {"Checklist item"}
57
55
  </ListItem>
58
56
  <ListItem
59
57
  align="stretch"
60
58
  flexDirection="column"
61
59
  >
62
- Checklist item
60
+ {"Checklist item"}
63
61
  </ListItem>
64
62
  </List>
65
63
  </div>
66
64
  </Collapsible.Content>
67
65
  </Collapsible>
68
-
69
66
  </>
70
67
  )
71
68
  }
72
69
 
70
+ CollapsibleCustomMainWithIcon.propTypes = {
71
+ dark: PropTypes.bool,
72
+ }
73
+
73
74
  export default CollapsibleCustomMainWithIcon
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb CHANGED
@@ -1,12 +1,8 @@
1
1
  <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
- <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
- <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
2
+ <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true" }, align: "center", gap: "sm", justify: "between" }) do %>
3
+ <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
4
  <%= pb_rails("collapsible/collapsible_icon") %>
6
- <% end %>
7
- <% end %>
8
- <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
9
- <% end %>
5
+ <% end %>
10
6
  <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
11
7
  <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
12
8
  <%= pb_rails("list/item") do %> Checklist Item <% end %>
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED
@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
7
7
  <>
8
8
  <Collapsible
9
9
  icon={['plus','minus']}
10
+ iconColor='white'
10
11
  >
11
12
  <Collapsible.Main {...props}>
12
13
  <div>{'Main Section'}</div>
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react'
2
+ import PropTypes from 'prop-types';
2
3
  import { Collapsible, useCollapsible, Button } from 'playbook-ui'
3
4
 
4
5
  const CollapsibleState = (props) => {
@@ -7,6 +8,7 @@ const CollapsibleState = (props) => {
7
8
  return (
8
9
  <>
9
10
  <Button
11
+ dark={props.dark}
10
12
  onClick={() => setIsCollapsed(!isCollapsed)}
11
13
  padding="none"
12
14
  variant="link"
@@ -17,6 +19,7 @@ const CollapsibleState = (props) => {
17
19
  <Collapsible
18
20
  collapsed={isCollapsed}
19
21
  icon={["plus", "minus"]}
22
+ iconColor='white'
20
23
  padding="none"
21
24
  >
22
25
  <Collapsible.Main padding="sm"
@@ -35,6 +38,7 @@ const CollapsibleState = (props) => {
35
38
  <Collapsible
36
39
  collapsed={isCollapsed}
37
40
  icon={["plus", "minus"]}
41
+ iconColor='white'
38
42
  padding="none"
39
43
  >
40
44
  <Collapsible.Main padding="sm"
@@ -53,6 +57,7 @@ const CollapsibleState = (props) => {
53
57
  <Collapsible
54
58
  collapsed={isCollapsed}
55
59
  icon={["plus", "minus"]}
60
+ iconColor='white'
56
61
  padding="none"
57
62
  >
58
63
  <Collapsible.Main padding="sm"
@@ -72,4 +77,8 @@ const CollapsibleState = (props) => {
72
77
  )
73
78
  }
74
79
 
80
+ CollapsibleState.propTypes = {
81
+ dark: PropTypes.bool,
82
+ }
83
+
75
84
  export default CollapsibleState
data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("form_pill", props: {
2
+ icon: "badge-check",
3
+ text: "icon and tag",
4
+ tabindex: 0,
5
+ }) %>
data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx ADDED
@@ -0,0 +1,19 @@
1
+ import React from 'react'
2
+ import FormPill from '../_form_pill'
3
+
4
+ const FormPillIcon = (props) => {
5
+ return (
6
+ <div>
7
+ <FormPill
8
+ icon="badge-check"
9
+ onClick={() => {
10
+ alert('Click!')
11
+ }}
12
+ tabIndex={0}
13
+ text="icon and tag"
14
+ {...props}
15
+ />
16
+ </div>
17
+ )
18
+ }
19
+ export default FormPillIcon
data/app/pb_kits/playbook/pb_form_pill/docs/example.yml CHANGED
@@ -5,10 +5,11 @@ examples:
5
5
  - form_pill_size: Form Pill Size
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
-
8
+ # - form_pill_icon: Form Pill Icon
9
9
 
10
10
  react:
11
11
  - form_pill_user: Form Pill User
12
12
  - form_pill_size: Form Pill Size
13
13
  - form_pill_tag: Form Pill Tag
14
14
  - form_pill_example: Example
15
+ # - form_pill_icon: Form Pill Icon
data/app/pb_kits/playbook/pb_form_pill/docs/index.js CHANGED
@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
2
2
  export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
-
5
+ export { default as FormPillIcon } from './_form_pill_icon.jsx'
data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("flex", props: {orientation: "column"}) do %>
2
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
3
+ <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
4
+ <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
5
+ <% end %>
data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx ADDED
@@ -0,0 +1,34 @@
1
+ import React from "react"
2
+ import Icon from "../_icon"
3
+
4
+ const IconDefault = (props) => {
5
+ return (
6
+ <div style={{ display: "flex", flexDirection: "column"}}>
7
+ <Icon
8
+ color="primary"
9
+ fixedWidth
10
+ icon="user"
11
+ paddingBottom="sm"
12
+ size="2x"
13
+ {...props}
14
+ />
15
+ <Icon
16
+ color="data_4"
17
+ fixedWidth
18
+ icon="recycle"
19
+ paddingBottom="sm"
20
+ size="2x"
21
+ {...props}
22
+ />
23
+ <Icon
24
+ color="product_5_background"
25
+ fixedWidth
26
+ icon="product-roofing"
27
+ size="2x"
28
+ {...props}
29
+ />
30
+ </div>
31
+ )
32
+ }
33
+
34
+ export default IconDefault
data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md ADDED
@@ -0,0 +1 @@
1
+ Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color.
data/app/pb_kits/playbook/pb_icon/docs/example.yml CHANGED
@@ -9,6 +9,7 @@ examples:
9
9
  - icon_sizes: Icon Sizes
10
10
  - icon_custom: Icon Custom
11
11
  - icon_fa_kit: Icon with FontAwesome Kit
12
+ - icon_color: Icon Color
12
13
 
13
14
  react:
14
15
  - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
20
21
  - icon_sizes: Icon Sizes
21
22
  - icon_custom: Icon Custom
22
23
  - icon_fa_kit: Icon with FontAwesome Kit
24
+ - icon_color: Icon Color
23
25
 
24
26
  swift:
25
27
  - icon_default_swift: Icon Default
data/app/pb_kits/playbook/pb_icon/docs/index.js CHANGED
@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
7
7
  export { default as IconSizes } from './_icon_sizes.jsx'
8
8
  export { default as IconCustom } from './_icon_custom.jsx'
9
9
  export { default as IconFaKit} from './_icon_fa_kit.jsx'
10
+ export { default as IconColor } from './_icon_color.jsx'
data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx CHANGED
@@ -1,40 +1,35 @@
1
1
  import React from 'react'
2
-
3
2
  import StarRating from '../_star_rating'
4
3
 
5
4
  const StarRatingHide = (props) => (
6
- <>
7
-
8
- <StarRating
9
- paddingBottom="xs"
10
- rating={3}
11
- {...props}
12
- />
13
-
14
-
15
- <StarRating
16
- layoutOption={"number"}
17
- paddingBottom="xs"
18
- rating={2.8}
19
- {...props}
20
- />
21
-
22
-
23
- <StarRating
24
- layoutOption={"number"}
25
- paddingBottom="xs"
26
- rating={3}
27
- {...props}
28
- />
29
-
30
- <StarRating
31
- layoutOption={"onestar"}
32
- paddingBottom="xs"
33
- rating={3}
34
- {...props}
35
- />
36
-
37
- </>
5
+ <>
6
+ <StarRating
7
+ paddingBottom="xs"
8
+ rating={3}
9
+ {...props}
10
+ />
11
+
12
+ <StarRating
13
+ layoutOption={"number"}
14
+ paddingBottom="xs"
15
+ rating={2.8}
16
+ {...props}
17
+ />
18
+
19
+ <StarRating
20
+ layoutOption={"number"}
21
+ paddingBottom="xs"
22
+ rating={3}
23
+ {...props}
24
+ />
25
+
26
+ <StarRating
27
+ layoutOption={"onestar"}
28
+ paddingBottom="xs"
29
+ rating={1}
30
+ {...props}
31
+ />
32
+ </>
38
33
  )
39
34
 
40
35
  export default StarRatingHide
data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import StarRating from '../_star_rating'
3
+
4
+ const StarRatingInteractive = (props) => (
5
+ <>
6
+ <StarRating
7
+ paddingBottom="xs"
8
+ variant="interactive"
9
+ {...props}
10
+ />
11
+ </>
12
+ )
13
+
14
+ export default StarRatingInteractive
data/app/pb_kits/playbook/pb_star_rating/docs/index.js CHANGED
@@ -9,3 +9,5 @@ export { default as StarRatingHide } from './_star_rating_hide.jsx'
9
9
  export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
10
10
 
11
11
  export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'
12
+
13
+ export { default as StarRatingInteractive } from './_star_rating_interactive.jsx'