playbook_ui_docs 12.38.0.pre.alpha.playbook123801077 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) 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_default.jsx +2 -2
  4. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  9. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  10. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  11. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
  12. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  13. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
  14. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  15. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  16. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  18. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  19. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  20. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
  21. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
  22. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
  23. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
  24. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
  25. data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
  26. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  27. data/dist/playbook-doc.js +5 -5
  28. metadata +15 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a2c8fbd639d3ce366bfecfe62f7cd3a0b80a3e3f9e06e1495ceb869278310da0
4
- data.tar.gz: 5d921f57b11cf58260faadaa2e6dbb7ffbba3b935d293112f49a013b343ac829
3
+ metadata.gz: e7ffba77eefbd74f12d5c7d51764bc19b58a02397569ebdb08fca68d28e03bf1
4
+ data.tar.gz: d85d18236c0f75fa69c16a1d1c64b122cd1750d489337cdd67f1999c00e96ddc
5
5
  SHA512:
6
- metadata.gz: 693593648e49f2a4daf283b24702ac352940af4abb38891e7c5049eacc159b64e58fa1b40585b2877fef9b2156608c9d6d6672ee1f22b8e82a0ab9de42d8f6b8
7
- data.tar.gz: 4bd206415ae30ae2b74c2e8d1ca075ad97fe919263ecf3e0445ec22f266d5f39d63e89e57fb19acd79b6f1159d1baa71980d65cb320f341b7128a7ab063b0ffe
6
+ metadata.gz: 4ecbc5042b55acf8ab4b98e84ce5473f3f969803e0dd0f69e53291099187b3cda3cdefc45984fb8bb46c97de35e37c59e8790c712dde5ded2a2b43cb8bd59180
7
+ data.tar.gz: b1ffb406c5986a737fce2db8b3de7a84b163417372f4208a6fb416450aeb438fe8e1bd58c6b0a55a8f4241276e0228b3467124b532a8081005b6d4c9dc0fcfad
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleColor = () => (
4
+ const CollapsibleColor = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconColor='default'
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Default Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleDefault = () => (
4
+ const CollapsibleDefault = (props) => (
5
5
  <Collapsible >
6
- <Collapsible.Main>
6
+ <Collapsible.Main {...props}>
7
7
  <div>{'Main Section'}</div>
8
8
  </Collapsible.Main>
9
9
  <Collapsible.Content>
@@ -1,18 +1,14 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Button } from '../..'
2
+ import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleIcons = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
4
+ const CollapsibleIcons = (props) => {
6
5
 
7
6
  return (
8
7
  <>
9
- <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
10
- {isCollapsed ? "Expand" : "Collapse"}
11
- </Button>
12
- <Collapsible collapsed={isCollapsed}
8
+ <Collapsible
13
9
  icon={['plus','minus']}
14
10
  >
15
- <Collapsible.Main>
11
+ <Collapsible.Main {...props}>
16
12
  <div>{'Main Section'}</div>
17
13
  </Collapsible.Main>
18
14
  <Collapsible.Content>
@@ -1,2 +1,2 @@
1
1
  ##### Prop
2
- This kit uses 'chevron-up' and 'chevron-down' icons as default for the toggle icons. To customize these icons, use the `icon` prop to pass in an array of two icons, the first will render when the collapisble is closed and the second will render when the collapsible is open. In this example, we are using `icon: ['plus','minus']`
2
+ The `icon` prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). `icon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleSize = () => (
4
+ const CollapsibleSize = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconSize="xs"
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Extra Small Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -22,7 +22,7 @@ const CollapsibleSize = () => (
22
22
  iconSize="sm"
23
23
  marginBottom="xs"
24
24
  >
25
- <Collapsible.Main>
25
+ <Collapsible.Main {...props}>
26
26
  <div>{'Small Section'}</div>
27
27
  </Collapsible.Main>
28
28
  <Collapsible.Content>
@@ -36,7 +36,7 @@ const CollapsibleSize = () => (
36
36
  <Collapsible
37
37
  marginBottom="xs"
38
38
  >
39
- <Collapsible.Main>
39
+ <Collapsible.Main {...props}>
40
40
  <div>{'Default Section'}</div>
41
41
  </Collapsible.Main>
42
42
  <Collapsible.Content>
@@ -51,7 +51,7 @@ const CollapsibleSize = () => (
51
51
  iconSize="lg"
52
52
  marginBottom="xs"
53
53
  >
54
- <Collapsible.Main>
54
+ <Collapsible.Main {...props}>
55
55
  <div>{'Large Section'}</div>
56
56
  </Collapsible.Main>
57
57
  <Collapsible.Content>
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import { Collapsible, useCollapsible, Button } from '../..'
3
+
4
+ const CollapsibleState = (props) => {
5
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
+
7
+ return (
8
+ <>
9
+ <Button
10
+ onClick={() => setIsCollapsed(!isCollapsed)}
11
+ padding="none"
12
+ variant="link"
13
+ >
14
+ {isCollapsed ? "Expand All" : "Collapse All"}
15
+ </Button>
16
+
17
+ <Collapsible
18
+ collapsed={isCollapsed}
19
+ icon={["plus", "minus"]}
20
+ padding="none"
21
+ >
22
+ <Collapsible.Main padding="sm"
23
+ {...props}
24
+ >
25
+ <div>{"Main Section"}</div>
26
+ </Collapsible.Main>
27
+ <Collapsible.Content>
28
+ <div>
29
+ {
30
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
31
+ }
32
+ </div>
33
+ </Collapsible.Content>
34
+ </Collapsible>
35
+ <Collapsible
36
+ collapsed={isCollapsed}
37
+ icon={["plus", "minus"]}
38
+ padding="none"
39
+ >
40
+ <Collapsible.Main padding="sm"
41
+ {...props}
42
+ >
43
+ <div>{"Main Section"}</div>
44
+ </Collapsible.Main>
45
+ <Collapsible.Content>
46
+ <div>
47
+ {
48
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
49
+ }
50
+ </div>
51
+ </Collapsible.Content>
52
+ </Collapsible>
53
+ <Collapsible
54
+ collapsed={isCollapsed}
55
+ icon={["plus", "minus"]}
56
+ padding="none"
57
+ >
58
+ <Collapsible.Main padding="sm"
59
+ {...props}
60
+ >
61
+ <div>{"Main Section"}</div>
62
+ </Collapsible.Main>
63
+ <Collapsible.Content>
64
+ <div>
65
+ {
66
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
67
+ }
68
+ </div>
69
+ </Collapsible.Content>
70
+ </Collapsible>
71
+ </>
72
+ )
73
+ }
74
+
75
+ export default CollapsibleState
@@ -0,0 +1,3 @@
1
+ The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
2
+
3
+ NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.
@@ -2,12 +2,13 @@ examples:
2
2
 
3
3
  rails:
4
4
  - collapsible_default: Default
5
- - collapsible_size: Size
6
- - collapsible_color: Color
7
- # - collapsible_icons: Custom Icons
5
+ - collapsible_size: Icon Size
6
+ - collapsible_color: Icon Color
7
+ - collapsible_icons: Custom Icons
8
8
 
9
9
  react:
10
10
  - collapsible_default: Default
11
- - collapsible_size: Size
12
- - collapsible_color: Color
13
- # - collapsible_icons: Custom Icons
11
+ - collapsible_size: Icon Size
12
+ - collapsible_color: Icon Color
13
+ - collapsible_icons: Custom Icons
14
+ - collapsible_state: useCollapsible Hook
@@ -1,4 +1,5 @@
1
1
  export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
- export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
4
+ export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
5
+ export {default as CollapsibleState } from './_collapsible_state.jsx'
@@ -1,63 +1,90 @@
1
- import React from "react"
2
- import { Nav, NavItem, useCollapsible } from "../.."
1
+ import React from "react";
2
+ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNav = (props) => {
5
- const navItems = ["Overview", "Albums", "Similar Artists"]
6
- // eslint-disable-next-line react-hooks/rules-of-hooks
7
- const collapsibles = navItems.map(() => useCollapsible(true))
8
-
9
- const handleMainClick = (index) => {
10
- collapsibles.forEach(([, , setCollapsed], idx) => {
11
- if (idx === index) {
12
- setCollapsed(false)
13
- } else {
14
- setCollapsed(true)
15
- }
16
- })
17
- }
18
-
19
-
20
- const handleIconRightClick = (index) => {
21
- const [isCollapsed, setCollapsed] = collapsibles[index]
22
- setCollapsed(!isCollapsed)
23
- }
24
-
25
5
  return (
26
- <>
27
- <Nav variant='subtle'>
28
- {navItems.map((text, index) => {
29
- const [collapsed] = collapsibles[index]
30
- return (
31
- <NavItem
32
- collapsible
33
- collapsibleClick={() => handleMainClick(index)}
34
- iconLeft="chevron-down"
35
- iconRightClick={() => handleIconRightClick(index)}
36
- id={`collapsible-nav-item-${index + 1}`}
37
- key={index}
38
- link="#"
39
- text={text}
40
- toggleCollapsed={collapsed}
41
- {...props}
42
- >
43
- <NavItem link="#"
44
- text="City"
45
- {...props}
46
- />
47
- <NavItem link="#"
48
- text="People"
49
- {...props}
50
- />
51
- <NavItem link="#"
52
- text="Business"
53
- {...props}
54
- />
55
- </NavItem>
56
- );
57
- })}
58
- </Nav>
59
- </>
60
- )
61
- }
6
+ <Nav variant="bold">
7
+ <NavItem
8
+ active
9
+ collapsible
10
+ collapsibleTrail
11
+ fontWeight="bolder"
12
+ iconLeft="city"
13
+ iconRight={["plus", "minus"]}
14
+ link="#"
15
+ text="Overview"
16
+ {...props}
17
+ >
18
+ <NavItem
19
+ link="#"
20
+ text="City"
21
+ {...props}
22
+ />
23
+ <NavItem
24
+ link="#"
25
+ text="People"
26
+ {...props}
27
+ />
28
+ <NavItem
29
+ link="#"
30
+ text="Business"
31
+ {...props}
32
+ />
33
+ </NavItem>
34
+ <NavItem
35
+ collapsible
36
+ collapsibleTrail
37
+ fontWeight="bolder"
38
+ iconLeft="theater-masks"
39
+ iconRight={["plus", "minus"]}
40
+ link="#"
41
+ text="Albums"
42
+ {...props}
43
+ >
44
+ <NavItem
45
+ link="#"
46
+ text="Entertainment"
47
+ {...props}
48
+ />
49
+ <NavItem
50
+ link="#"
51
+ text="Food"
52
+ {...props}
53
+ />
54
+ <NavItem
55
+ link="#"
56
+ text="Style"
57
+ {...props}
58
+ />
59
+ </NavItem>
60
+ <NavItem
61
+ collapsible
62
+ collapsibleTrail
63
+ fontWeight="bolder"
64
+ iconLeft="city"
65
+ iconRight={["plus", "minus"]}
66
+ link="#"
67
+ text="Similar Artists"
68
+ {...props}
69
+ >
70
+ <NavItem
71
+ link="#"
72
+ text="City"
73
+ {...props}
74
+ />
75
+ <NavItem
76
+ link="#"
77
+ text="People"
78
+ {...props}
79
+ />
80
+ <NavItem
81
+ link="#"
82
+ text="Business"
83
+ {...props}
84
+ />
85
+ </NavItem>
86
+ </Nav>
87
+ );
88
+ };
62
89
 
63
90
  export default CollapsibleNav
@@ -0,0 +1 @@
1
+ The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action.
@@ -0,0 +1,58 @@
1
+ import React from "react"
2
+ import { Nav, NavItem, useCollapsible } from "../.."
3
+
4
+ const CollapsibleNavCustom = (props) => {
5
+ const navItems = ["Overview", "Albums", "Similar Artists"]
6
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7
+ const collapsibles = navItems.map(() => useCollapsible(true))
8
+
9
+ const handleMainClick = (index) => {
10
+ collapsibles.forEach(([, , setCollapsed], idx) => {
11
+ if (idx === index) {
12
+ setCollapsed(false)
13
+ } else {
14
+ setCollapsed(true)
15
+ }
16
+ })
17
+ }
18
+
19
+ return (
20
+ <>
21
+ <Nav variant='subtle'>
22
+ {navItems.map((text, index) => {
23
+ const [collapsed] = collapsibles[index]
24
+ return (
25
+ <NavItem
26
+ collapsed={collapsed}
27
+ collapsible
28
+ collapsibleTrail
29
+ fontWeight="bolder"
30
+ iconLeft="chevron-down"
31
+ id={`collapsible-nav-item-${index + 1}`}
32
+ key={index}
33
+ link="#"
34
+ onClick={() => handleMainClick(index)}
35
+ text={text}
36
+ {...props}
37
+ >
38
+ <NavItem link="#"
39
+ text="City"
40
+ {...props}
41
+ />
42
+ <NavItem link="#"
43
+ text="People"
44
+ {...props}
45
+ />
46
+ <NavItem link="#"
47
+ text="Business"
48
+ {...props}
49
+ />
50
+ </NavItem>
51
+ );
52
+ })}
53
+ </Nav>
54
+ </>
55
+ )
56
+ }
57
+
58
+ export default CollapsibleNavCustom
@@ -0,0 +1 @@
1
+ The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done.
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
3
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
+ <% end %>
8
+ <% end %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
10
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
+ <% end %>
15
+ <% end %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
17
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
@@ -1,11 +1,15 @@
1
1
  import React from "react";
2
2
  import { Nav, NavItem } from '../..'
3
3
 
4
- const CollapsibleNavCustomIcons = (props) => {
4
+ const CollapsibleNavEmphasize = (props) => {
5
5
  return (
6
- <Nav variant="subtle">
6
+ <Nav variant="bold">
7
7
  <NavItem
8
- collapsible
8
+ active
9
+ collapsible
10
+ collapsibleTrail
11
+ fontSize="small"
12
+ fontWeight="bolder"
9
13
  iconLeft="city"
10
14
  iconRight={["plus", "minus"]}
11
15
  link="#"
@@ -29,8 +33,10 @@ const CollapsibleNavCustomIcons = (props) => {
29
33
  />
30
34
  </NavItem>
31
35
  <NavItem
32
- active
33
36
  collapsible
37
+ collapsibleTrail
38
+ fontSize="small"
39
+ fontWeight="bolder"
34
40
  iconLeft="theater-masks"
35
41
  iconRight={["plus", "minus"]}
36
42
  link="#"
@@ -55,6 +61,9 @@ const CollapsibleNavCustomIcons = (props) => {
55
61
  </NavItem>
56
62
  <NavItem
57
63
  collapsible
64
+ collapsibleTrail
65
+ fontSize="small"
66
+ fontWeight="bolder"
58
67
  iconLeft="city"
59
68
  iconRight={["plus", "minus"]}
60
69
  link="#"
@@ -81,4 +90,4 @@ const CollapsibleNavCustomIcons = (props) => {
81
90
  );
82
91
  };
83
92
 
84
- export default CollapsibleNavCustomIcons;
93
+ export default CollapsibleNavEmphasize;
@@ -0,0 +1 @@
1
+ The ` navBold` prop can be passed to NavItem
@@ -7,7 +7,8 @@ examples:
7
7
  - borderless_nav: No Borders
8
8
  - subtle_nav: Subtle Variant
9
9
  - subtle_with_icons_nav: Subtle With Icons
10
- # - collapsible_nav: Subtle With Collapsible
10
+ - collapsible_nav: Collapsible Nav
11
+ - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
11
12
  - subtle_no_highlight_nav: Subtle No Highlight
12
13
  - bold_vertical_nav: Bold Variant
13
14
  - horizontal_nav: Horizontal Nav
@@ -25,8 +26,9 @@ examples:
25
26
  - borderless_nav: No Borders
26
27
  - subtle_nav: Subtle Variant
27
28
  - subtle_with_icons_nav: Subtle With Icons
28
- # - collapsible_nav: Subtle With Collapsible
29
- # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
29
+ - collapsible_nav: Collapsible Nav
30
+ - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
31
+ - collapsible_nav_custom: Collapsible Nav With Custom Toggling
30
32
  - subtle_no_highlight_nav: Subtle No Highlight
31
33
  - bold_vertical_nav: Bold Variant
32
34
  - horizontal_nav: Horizontal Nav
@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
14
14
  export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
15
15
  export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
16
16
  export { default as CollapsibleNav } from './_collapsible_nav.jsx'
17
- export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
17
+ export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
18
+ export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
@@ -0,0 +1,26 @@
1
+ <%= pb_rails("select", props: {
2
+ attributes: {
3
+ data: { options: "data_attribute" },
4
+ },
5
+ label: "Favorite Food",
6
+ name: "food",
7
+ options: [
8
+ {
9
+ value: "1",
10
+ value_text: "Burgers",
11
+ },
12
+ {
13
+ value: "2",
14
+ selected: true,
15
+ value_text: "Pizza",
16
+ },
17
+ {
18
+ value: "3",
19
+ value_text: "Tacos",
20
+ },
21
+ {
22
+ value: "4",
23
+ value_text: "BBQ",
24
+ },
25
+ ]
26
+ }) %>
@@ -0,0 +1 @@
1
+ Inspect the element and notice the data-attribute being added to the `<select>` element
@@ -0,0 +1,36 @@
1
+ <%= pb_rails("select", props: {
2
+ label: "Favorite Food",
3
+ name: "food",
4
+ multiple: true,
5
+ options: [
6
+ {
7
+ value: "1",
8
+ value_text: "Burgers",
9
+ },
10
+ {
11
+ value: "2",
12
+ selected: true,
13
+ value_text: "Pizza",
14
+ },
15
+ {
16
+ value: "3",
17
+ value_text: "Tacos",
18
+ },
19
+ {
20
+ value: "4",
21
+ value_text: "BBQ",
22
+ },
23
+ {
24
+ value: "4",
25
+ value_text: "Sushi",
26
+ },
27
+ {
28
+ value: "4",
29
+ value_text: "Chinese",
30
+ },
31
+ {
32
+ value: "4",
33
+ value_text: "Hot Dogs",
34
+ },
35
+ ]
36
+ }) %>
@@ -0,0 +1,50 @@
1
+ import React from 'react'
2
+
3
+ import Select from '../_select'
4
+
5
+ const SelectMultiple = (props) => {
6
+ const options = [
7
+ {
8
+ value: '1',
9
+ text: 'Burgers',
10
+ },
11
+ {
12
+ value: '2',
13
+ text: 'Pizza',
14
+ },
15
+ {
16
+ value: '3',
17
+ text: 'Tacos',
18
+ },
19
+ {
20
+ value: '3',
21
+ text: 'BBQ',
22
+ },
23
+ {
24
+ value: '3',
25
+ text: 'Sushi',
26
+ },
27
+ {
28
+ value: '3',
29
+ text: 'Chinese',
30
+ },
31
+ {
32
+ value: '3',
33
+ text: 'Hot Dogs',
34
+ },
35
+ ]
36
+
37
+ return (
38
+ <div>
39
+ <Select
40
+ label="Favorite Food"
41
+ multiple
42
+ name="food"
43
+ options={options}
44
+ {...props}
45
+ />
46
+ </div>
47
+ )
48
+ }
49
+
50
+ export default SelectMultiple
@@ -0,0 +1 @@
1
+ We recommend using a typeahead for better UX