playbook_ui 12.36.0 → 12.37.0.pre.alpha.PLAY951collapsiblenav31062

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -1
  3. data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md +33 -0
  4. data/app/pb_kits/playbook/pb_badge/docs/_badge_default_swift.md +9 -0
  5. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification_swift.md +9 -0
  6. data/app/pb_kits/playbook/pb_badge/docs/_badge_props_swift.md +6 -0
  7. data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded_swift.md +9 -0
  8. data/app/pb_kits/playbook/pb_badge/docs/example.yml +7 -0
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  10. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +15 -13
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +25 -8
  12. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  15. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +11 -4
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  21. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  22. data/app/pb_kits/playbook/pb_collapsible/useCollapsible.tsx +14 -0
  23. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +149 -3
  24. data/app/pb_kits/playbook/pb_nav/_item.tsx +45 -10
  25. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -6
  26. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +5 -4
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +57 -0
  29. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  30. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  31. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +9 -9
  32. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  33. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  34. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  35. data/app/pb_kits/playbook/pb_nav/item.html.erb +5 -4
  36. data/app/pb_kits/playbook/pb_nav/item.rb +21 -2
  37. data/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md +5 -0
  38. data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md +5 -0
  39. data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md +10 -0
  40. data/app/pb_kits/playbook/pb_pill/docs/example.yml +5 -0
  41. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md +16 -0
  42. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md +18 -0
  43. data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md +15 -0
  44. data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md +14 -0
  45. data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md +15 -0
  46. data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md +31 -0
  47. data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md +10 -0
  48. data/app/pb_kits/playbook/pb_radio/docs/_radio_spacing_swift.md +36 -0
  49. data/app/pb_kits/playbook/pb_radio/docs/_radio_subtitle_swift.md +13 -0
  50. data/app/pb_kits/playbook/pb_radio/docs/example.yml +11 -0
  51. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb +12 -0
  52. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  53. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -1
  54. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md +45 -0
  55. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md +26 -0
  56. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md +25 -0
  57. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md +10 -0
  58. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md +67 -0
  59. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md +19 -0
  60. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +8 -0
  61. data/dist/playbook-rails.js +7 -7
  62. data/lib/playbook/version.rb +2 -2
  63. metadata +40 -8
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c0a98a2809eb8f345dd7c46ebb952d03d2e5fdc357804e70e344546ab013b8a0
4
- data.tar.gz: e72f1812fd7f819375cc1788d6eabb2a280bd392a3fb46e2af4b1d8ce022fbd7
3
+ metadata.gz: 9285fc7f8a5cbbb075de7237ed92122dafbc6edf55281c2d6b95992a7b693a64
4
+ data.tar.gz: 2219ddec9c8fd3b0481727aef59bbd729bcc5312ac2b529cde1530c7a6d7cc84
5
5
  SHA512:
6
- metadata.gz: ce9e6790efcab2fce2080635bdd3331f7a9ae8af497756d5a2c6111a57ac859ce4a73d567f0c51123dcc271ee46f1b2ebc2e02e1af28bed233f860c93850a973
7
- data.tar.gz: d6d7bcb5b2684b64a05806680f5c9129082888394d2036ef53866121a68622d3a0a01803287b08881836186983fe9f5e4641225333a36bcfbb69fad597829683
6
+ metadata.gz: 7f9a4389f9097f76c67178b17b8198154c3357a52ba5b15e219bd661ba411f136d8eb5e6a0c6787c342b6224b1200789b945c34476f7b36c043b7a19e2556f17
7
+ data.tar.gz: ad198b06d6282ef56baae64a8333b856ddf246c091bc65766bf2fe90b86a55c4d6adc151c2b7d2e35184ef7a6824686ad2e8bb123a61f21d2778726b89e34e11
@@ -129,4 +129,5 @@ export { default as PbTypeahead } from './pb_typeahead'
129
129
  export { default as dialogHelper } from './pb_dialog/dialogHelper'
130
130
 
131
131
  //Theming
132
- export {default as mapTheme} from './pb_map/pbMapTheme'
132
+ export {default as mapTheme} from './pb_map/pbMapTheme'
133
+ export {default as useCollapsible} from './pb_collapsible/useCollapsible'
@@ -0,0 +1,33 @@
1
+ ![badge-colors](https://github.com/powerhome/playbook/assets/92755007/52ce34ef-eb0d-48c0-9232-89edfff60cef)
2
+
3
+ ```swift
4
+ HStack {
5
+ PBBadge(text: "1", rounded: true, variant: .chat)
6
+ PBBadge(text: "4", variant: .chat)
7
+ PBBadge(text: "1000", variant: .chat)
8
+
9
+ PBBadge(text: "1", rounded: true, variant: .error)
10
+ PBBadge(text: "4", variant: .error)
11
+ PBBadge(text: "1000", variant: .error)
12
+
13
+ PBBadge(text: "1", rounded: true, variant: .info)
14
+ PBBadge(text: "4", variant: .info)
15
+ PBBadge(text: "1000", variant: .info)
16
+
17
+ PBBadge(text: "1", rounded: true, variant: .neutral)
18
+ PBBadge(text: "4", variant: .neutral)
19
+ PBBadge(text: "1000", variant: .neutral)
20
+
21
+ PBBadge(text: "1", rounded: true, variant: .primary)
22
+ PBBadge(text: "4", variant: .primary)
23
+ PBBadge(text: "1000", variant: .primary)
24
+
25
+ PBBadge(text: "1", rounded: true, variant: .success)
26
+ PBBadge(text: "4", variant: .success)
27
+ PBBadge(text: "1000", variant: .success)
28
+
29
+ PBBadge(text: "1", rounded: true, variant: .warning)
30
+ PBBadge(text: "4", variant: .warning)
31
+ PBBadge(text: "1000", variant: .warning)
32
+ }
33
+ ```
@@ -0,0 +1,9 @@
1
+ ![badge-rectangle](https://github.com/powerhome/playbook/assets/92755007/04188c68-84f0-475b-9764-7b9a325f73da)
2
+
3
+ ```swift
4
+ HStack {
5
+ PBBadge(text: "+1", variant: .primary)
6
+ PBBadge(text: "+4", variant: .primary)
7
+ PBBadge(text: "+1000", variant: .primary)
8
+ }
9
+ ```
@@ -0,0 +1,9 @@
1
+ ![badge-chat-notification](https://github.com/powerhome/playbook/assets/92755007/f769c3bc-6a63-465d-8538-3efb5f3ec0d3)
2
+
3
+ ```swift
4
+ HStack {
5
+ PBBadge(text: "1", rounded: true, variant: .chat)
6
+ PBBadge(text: "4", variant: .chat)
7
+ PBBadge(text: "1000", variant: .chat)
8
+ }
9
+ ```
@@ -0,0 +1,6 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **text** | `String` | Specifies the value of the Badge | | |
5
+ | **rounded** | `Bool` | Displays the rounded variant | `false` | |
6
+ | **variant** | `Variant` | Changes the color of the Badge | `.primary` | `.chat` `.error` `.info` `.neutral` `.primary` `.success` `.warning` |
@@ -0,0 +1,9 @@
1
+ ![badge-rounded](https://github.com/powerhome/playbook/assets/92755007/775a906f-0108-4ee1-a277-e7b9f2715a2b)
2
+
3
+ ```swift
4
+ HStack {
5
+ PBBadge(text: "+1", rounded: true, variant: .primary)
6
+ PBBadge(text: "+4", rounded: true, variant: .primary)
7
+ PBBadge(text: "+1000", rounded: true, variant: .primary)
8
+ }
9
+ ```
@@ -10,3 +10,10 @@ examples:
10
10
  - badge_rounded: Rounded
11
11
  - badge_colors: Colors
12
12
  - badge_notification: Notification
13
+
14
+ swift:
15
+ - badge_default_swift: Rectangle
16
+ - badge_rounded_swift: Rounded
17
+ - badge_colors_swift: Colors
18
+ - badge_notification_swift: Notification
19
+ - badge_props_swift: ""
@@ -20,6 +20,12 @@
20
20
  .icon_wrapper:hover {
21
21
  color: $primary
22
22
  }
23
+
24
+ .dark {
25
+ .pb_icon_kit {
26
+ color: $white;
27
+ }
28
+ }
23
29
  }
24
30
 
25
31
  [class^=pb_collapsible_main_kit] {
@@ -1,5 +1,6 @@
1
- import React, { useState } from 'react'
1
+ import React, { useEffect } from 'react'
2
2
  import classnames from 'classnames'
3
+ import useCollapsible from './useCollapsible'
3
4
 
4
5
  import { globalProps } from '../utilities/globalProps'
5
6
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -16,20 +17,15 @@ type CollapsibleProps = {
16
17
  className?: string,
17
18
  collapsed?: boolean,
18
19
  data?: object,
19
- icon?: string | string[]
20
+ icon?: string | string[],
20
21
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
21
- iconSize?: IconSizes
22
+ iconSize?: IconSizes,
23
+ onIconClick?: ()=> void,
24
+ onClick?: ()=> void,
22
25
  id?: string,
23
26
  }
24
27
 
25
- const useCollapsible = (initial = false) => {
26
- const [collapsed, setCollapsed] = useState(initial)
27
28
 
28
- return [
29
- collapsed,
30
- () => setCollapsed((t) => !t),
31
- ]
32
- }
33
29
 
34
30
  const Collapsible = ({
35
31
  aria = {},
@@ -40,10 +36,17 @@ const Collapsible = ({
40
36
  icon,
41
37
  iconColor = 'default',
42
38
  iconSize,
39
+ onIconClick,
40
+ onClick,
43
41
  id,
44
42
  ...props
45
43
  }: CollapsibleProps) => {
46
- const [isCollapsed, collapse] = useCollapsible(collapsed)
44
+ const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
45
+
46
+ useEffect(()=> {
47
+ setIsCollapsed(collapsed)
48
+ },[collapsed])
49
+
47
50
  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
48
51
 
49
52
  if (CollapsibleParent.length !== 2) {
@@ -62,9 +65,8 @@ const Collapsible = ({
62
65
  globalProps(props),
63
66
  className
64
67
  )
65
-
66
68
  return (
67
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
69
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
68
70
  <div
69
71
  {...ariaProps}
70
72
  {...dataProps}
@@ -33,7 +33,8 @@ type CollapsibleMainProps = {
33
33
  children: React.ReactNode[] | React.ReactNode,
34
34
  className?: string,
35
35
  cursor?: string,
36
-
36
+ dark?: boolean,
37
+ onClick?: ()=> void
37
38
  }
38
39
  type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
39
40
 
@@ -42,9 +43,10 @@ type IconProps = {
42
43
  icon?: string[] | string
43
44
  iconColor?: IconColors
44
45
  iconSize?: IconSizes
46
+ onIconClick?: ()=> void
45
47
  }
46
48
 
47
- const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
49
+ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
48
50
  const color = colorMap[iconColor]
49
51
 
50
52
  const showIcon = (icon: string |string[]) => {
@@ -54,6 +56,13 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
54
56
  return icon
55
57
  }
56
58
 
59
+ const handleIconClick = (e:any) => {
60
+ if (onIconClick) {
61
+ e.stopPropagation();
62
+ onIconClick()
63
+ }
64
+ }
65
+
57
66
  return (
58
67
  <>
59
68
  {collapsed ? (
@@ -61,6 +70,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
61
70
  className="icon_wrapper"
62
71
  key={icon ? showIcon(icon)[0] : "chevron-down"}
63
72
  style={{ verticalAlign: "middle", color: color }}
73
+ onClick={(e)=> handleIconClick(e)}
64
74
  >
65
75
  <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
66
76
  </div>
@@ -69,6 +79,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
69
79
  className="icon_wrapper"
70
80
  key={icon ? showIcon(icon)[1] : "chevron-up"}
71
81
  style={{ verticalAlign: "middle", color: color }}
82
+ onClick={(e)=> handleIconClick(e)}
72
83
  >
73
84
  <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
74
85
  </div>
@@ -83,13 +94,18 @@ const CollapsibleMain = ({
83
94
  cursor = 'pointer',
84
95
  ...props
85
96
  }: CollapsibleMainProps): React.ReactElement=> {
86
- const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
97
+ const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
87
98
  const mainCSS = buildCss('pb_collapsible_main_kit')
88
99
  const mainSpacing = globalProps(props, { cursor })
89
100
 
101
+ const handleCollapsibleClick = () => {
102
+ toggle();
103
+ onClick && onClick()
104
+ }
105
+
90
106
  return (
91
107
  <div className={classnames(mainCSS, className, mainSpacing)}>
92
- <div onClick={context.collapse as (() => void)}>
108
+ <div onClick={handleCollapsibleClick}>
93
109
  <Flex
94
110
  spacing="between"
95
111
  vertical="center"
@@ -97,10 +113,11 @@ const CollapsibleMain = ({
97
113
  <FlexItem>{children}</FlexItem>
98
114
  <FlexItem>
99
115
  <ToggleIcon
100
- collapsed={context.collapsed as () => void}
101
- iconColor={context.iconColor as IconColors}
102
- iconSize={context.iconSize as IconSizes}
103
- icon={context.icon as string[] | string}
116
+ collapsed={collapsed as () => void}
117
+ iconColor={iconColor as IconColors}
118
+ iconSize={iconSize as IconSizes}
119
+ icon={icon as string[] | string}
120
+ onIconClick={onIconClick}
104
121
  />
105
122
  </FlexItem>
106
123
  </Flex>
@@ -9,7 +9,7 @@
9
9
  <%= content.presence %>
10
10
  <% end %>
11
11
  <%= pb_rails("flex/flex_item") do %>
12
- <div style="color: <%= object.icon_color %>">
12
+ <div style="color: <%= object.icon_color %>" class="icon_wrapper" >
13
13
  <% if object.icon.present? %>
14
14
  <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
15
15
  <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
@@ -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,9 +1,14 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleIcons = () => (
5
- <Collapsible icon={['plus','minus']}>
6
- <Collapsible.Main>
4
+ const CollapsibleIcons = (props) => {
5
+
6
+ return (
7
+ <>
8
+ <Collapsible
9
+ icon={['plus','minus']}
10
+ >
11
+ <Collapsible.Main {...props}>
7
12
  <div>{'Main Section'}</div>
8
13
  </Collapsible.Main>
9
14
  <Collapsible.Content>
@@ -14,6 +19,8 @@ const CollapsibleIcons = () => (
14
19
  </div>
15
20
  </Collapsible.Content>
16
21
  </Collapsible>
17
- )
22
+ </>
23
+ )
24
+ }
18
25
 
19
26
  export default CollapsibleIcons
@@ -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'
@@ -0,0 +1,14 @@
1
+ import {useState} from 'react';
2
+
3
+ const useCollapsible = (initial= true) => {
4
+ const [collapsed, setCollapsed] = useState(initial)
5
+
6
+ const toggle = () => setCollapsed((prev) => !prev)
7
+ return [
8
+ collapsed,
9
+ toggle,
10
+ setCollapsed as any,
11
+ ]
12
+ }
13
+
14
+ export default useCollapsible
@@ -1,6 +1,152 @@
1
+ @import "../tokens/spacing";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/border_radius";
4
+ @import "../tokens/titles";
5
+ @import "../tokens/typography";
6
+
1
7
  [class^="pb_nav_list"] {
2
- .pb_collapsible_main_kit,
3
- .pb_collapsible_content_kit {
4
- padding: 0 !important;
8
+ [class*="pb_collapsible_nav_item"] {
9
+ @mixin collapsible_trail_class {
10
+ .pb_collapsible_content_kit {
11
+ margin-left: $space_md - 2 !important;
12
+ border-left: 2px solid $border_light;
13
+ }
14
+ }
15
+
16
+ @mixin bold_class {
17
+ .pb_collapsible_main_kit {
18
+ .pb_nav_list_item_text_collapsible {
19
+ @include pb_title_4;
20
+ font-weight: $bolder !important;
21
+ }
22
+ }
23
+ }
24
+
25
+ &[class*="_active"] {
26
+ background-color: unset !important;
27
+ .pb_nav_list_item_link {
28
+ color: unset !important;
29
+ }
30
+ .pb_collapsible_main_kit {
31
+ background-color: $primary !important;
32
+ border-radius: $border_rad_heavier;
33
+ .pb_nav_list_item_text_collapsible,
34
+ .pb_nav_list_item_icon_collapsible,
35
+ .icon_wrapper,
36
+ .pb_icon_kit {
37
+ color: $white !important;
38
+ }
39
+ }
40
+
41
+ &:hover {
42
+ background-color: unset;
43
+ }
44
+ .pb_collapsible_main_kit:hover {
45
+ .pb_nav_list_item_text_collapsible {
46
+ color: $white !important;
47
+ }
48
+ }
49
+
50
+ .icon_wrapper {
51
+ &:hover {
52
+ background-color: mix($primary, $card_light, 40%);
53
+ .pb_icon_kit {
54
+ color: $primary !important;
55
+ }
56
+ }
57
+ }
58
+ }
59
+
60
+ &:hover {
61
+ .pb_nav_list_item_link_collapsible {
62
+ background-color: unset !important;
63
+ }
64
+ }
65
+
66
+ .pb_collapsible_main_kit:hover {
67
+ border-radius: $border_rad_heavier;
68
+ background-color: mix($primary, $card_light, 10%);
69
+ .pb_nav_list_item_text_collapsible,
70
+ svg {
71
+ color: $primary !important;
72
+ }
73
+ }
74
+
75
+ .pb_collapsible_main_kit,
76
+ .pb_collapsible_content_kit,
77
+ .pb_collapsible_kit {
78
+ padding: 0 !important;
79
+ }
80
+
81
+ &[class*="_collapsible_trail"] {
82
+ @include collapsible_trail_class;
83
+ }
84
+
85
+ &[class*="_bold_text"] {
86
+ @include bold_class;
87
+ }
88
+
89
+ &[class*="_emphasized"] {
90
+ @include collapsible_trail_class;
91
+ @include bold_class;
92
+ }
93
+
94
+ .icon_wrapper {
95
+ border-radius: $border_radius_rounded;
96
+ width: $space_sm + 3;
97
+ height: $space_sm + 3;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ margin-right: $space_xs;
102
+ &:hover {
103
+ background-color: mix($primary, $card_light, 40%);
104
+ }
105
+ }
106
+
107
+ &.dark {
108
+ &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
109
+ .pb_nav_list_item_text {
110
+ color: $white !important;
111
+ }
112
+ }
113
+
114
+ .pb_nav_list_item_text_collapsible {
115
+ color: $white !important;
116
+ }
117
+ .pb_nav_list_item_text {
118
+ color: $text_dk_light;
119
+ }
120
+ .pb_nav_list_kit_item:hover {
121
+ background-color: #ffffff33;
122
+ color: $white;
123
+ }
124
+ .pb_icon_kit {
125
+ color: $text_dk_light;
126
+ }
127
+
128
+ .pb_collapsible_main_kit:hover {
129
+ background-color: mix($white, $card_dark, 20%);
130
+ .pb_nav_list_item_text_collapsible,
131
+ svg {
132
+ color: $white !important;
133
+ }
134
+ }
135
+ .icon_wrapper:hover {
136
+ background-color: mix($white, $card_dark, 40%);
137
+ }
138
+ &[class*="_active"] {
139
+ .icon_wrapper:hover {
140
+ background-color: mix($primary, $card_light, 40%);
141
+ }
142
+ }
143
+
144
+ &[class*="pb_collapsible_nav_item"][class*="_emphasized"],
145
+ &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
146
+ .pb_collapsible_content_kit {
147
+ border-color: $border_dark;
148
+ }
149
+ }
150
+ }
5
151
  }
6
152
  }