playbook_ui 12.34.0 → 12.35.0.pre.alpha.iconpocwebfonts1023

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_card/_card.scss +3 -0
  4. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -6
  5. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -3
  6. data/app/pb_kits/playbook/pb_card/card.rb +0 -96
  7. data/app/pb_kits/playbook/pb_card/card_body.rb +93 -1
  8. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +11 -0
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +7 -7
  10. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +25 -0
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +20 -14
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +35 -17
  13. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -2
  14. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +8 -5
  15. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.html.erb +10 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +19 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +2 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +1 -1
  20. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +3 -1
  21. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_collapsible/index.js +3 -3
  23. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +14 -2
  24. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
  25. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +1 -2
  27. data/app/pb_kits/playbook/pb_highlight/_highlight.scss +4 -3
  28. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +6 -16
  29. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx +2 -2
  30. data/app/pb_kits/playbook/pb_highlight/docs/example.yml +0 -2
  31. data/app/pb_kits/playbook/pb_icon/docs/_icon_font.html.erb +11 -0
  32. data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -0
  33. data/app/pb_kits/playbook/pb_icon/icon.html.erb +15 -1
  34. data/app/pb_kits/playbook/pb_icon/icon.rb +24 -2
  35. data/app/pb_kits/playbook/pb_message/_message.scss +18 -0
  36. data/app/pb_kits/playbook/pb_message/_message.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +44 -0
  38. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.html.erb +24 -0
  39. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.jsx +31 -0
  40. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.md +1 -0
  41. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -2
  42. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -1
  43. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +7 -0
  44. data/app/pb_kits/playbook/pb_message/message_mention.rb +15 -0
  45. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -0
  46. data/app/pb_kits/playbook/pb_nav/_item.tsx +98 -49
  47. data/app/pb_kits/playbook/pb_nav/_nav.scss +1 -0
  48. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  49. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +24 -0
  50. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +83 -0
  51. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +86 -0
  52. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -0
  53. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
  54. data/app/pb_kits/playbook/pb_nav/item.html.erb +34 -12
  55. data/app/pb_kits/playbook/pb_nav/item.rb +5 -0
  56. data/dist/playbook-rails.js +6 -6
  57. data/lib/playbook/version.rb +2 -2
  58. metadata +22 -8
  59. data/app/pb_kits/playbook/pb_collapsible/types.d.ts +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f2849c0a1962557e91163c1111e59d583658a23463c747fa5416e5f57a9a8fdb
4
- data.tar.gz: 529c7267dde24349b1fe48203b2c631faeb186a74dd83021979929607b2dec51
3
+ metadata.gz: f37e0af8c1e76bc928e58612e41499b306f81bbde1935ff1175750d099e17d9c
4
+ data.tar.gz: 8e71ee2f5da0e0c3656d4da4577a5d1252941192902587d416afc3610b37c225
5
5
  SHA512:
6
- metadata.gz: 8d88ffe25dba254906c2e9c1fe43d0f34f8fc88d7176a6f22ba50f96798aa23acb2e71dc37feb8c2d24aabd2283603987c29813473b7fcce218d6d5f137ecbd5
7
- data.tar.gz: 3079579c4f39e39ba29596493995fd21eb33722368106f82fdc8e81ac0c374217a5c81823d8f8dd29d85abf70bef8adefb1efddc132e920997166615c98c77b8
6
+ metadata.gz: 3198daf878227a793bbee0e9c41e1a3451e5d9e9cdc25c9f5cd78d81aaa0135b314d54c020fcbfbb6ff6296331e31c12e1618ec4b432d36e505c7823aef6e1b2
7
+ data.tar.gz: afb451764ee139fd5b42152d275d689fc26cc0d158f49ef123cd8f42c99f1cccabbf63271cc8b9b0f1a117fb3a25088f5b83ccd95e53d4dc374534920f2d91cb
@@ -114,3 +114,5 @@
114
114
  @import './utilities/hover';
115
115
 
116
116
  @import 'pb_multi_level_select/multi_level_select';
117
+
118
+
@@ -3,6 +3,7 @@
3
3
 
4
4
  [class^=pb_card_kit] {
5
5
  @include pb_card;
6
+ padding: $space_md;
6
7
 
7
8
  &[class*=_selected] {
8
9
  @include pb_card_selected;
@@ -25,6 +26,7 @@
25
26
  flex-shrink: 0;
26
27
  flex-basis: auto;
27
28
  min-height: 1px;
29
+ padding: $space_sm;
28
30
  border: 0;
29
31
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
30
32
  @each $color_name, $color_value in $pb_card_header_colors {
@@ -57,6 +59,7 @@
57
59
  flex-basis: auto;
58
60
  min-height: 1px;
59
61
  border: 0;
62
+ padding: $space_md;
60
63
  }
61
64
 
62
65
  &[class*=_highlight] {
@@ -42,10 +42,10 @@ type CardBodyProps = {
42
42
 
43
43
  // Header component
44
44
  const Header = (props: CardHeaderProps) => {
45
- const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
45
+ const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
46
46
  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
47
47
 
48
- const headerSpacing = globalProps(props, { padding })
48
+ const headerSpacing = globalProps(props)
49
49
 
50
50
  return (
51
51
  <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
57
57
 
58
58
  // Body component
59
59
  const Body = (props: CardBodyProps) => {
60
- const { children, padding = 'md', className } = props
60
+ const { children, className } = props
61
61
  const bodyCSS = buildCss('pb_card_body_kit')
62
- const bodySpacing = globalProps(props, { padding })
62
+ const bodySpacing = globalProps(props)
63
63
 
64
64
  return (
65
65
  <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,7 +80,6 @@ const Card = (props: CardPropTypes) => {
80
80
  highlight = {},
81
81
  selected = false,
82
82
  tag = 'div',
83
- padding = 'md',
84
83
  } = props
85
84
  const borderCSS = borderNone == true ? 'border_none' : ''
86
85
  const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -114,7 +113,7 @@ const Card = (props: CardPropTypes) => {
114
113
  <Tag
115
114
  {...ariaProps}
116
115
  {...dataProps}
117
- className={classnames(cardCss, globalProps(props, { padding }), className)}
116
+ className={classnames(cardCss, globalProps(props), className)}
118
117
  >
119
118
  {subComponentTags('Header')}
120
119
  {nonHeaderChildren}
@@ -4,9 +4,7 @@
4
4
  class: object.classname,
5
5
  aria: object.aria,
6
6
  dark: object.dark) do %>
7
- <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
8
- <%= content %>
9
- <% end if content.present? %>
7
+ <%= content.presence %>
10
8
  <% end %>
11
9
 
12
10
 
@@ -28,102 +28,6 @@ module Playbook
28
28
  highlight_color_class)
29
29
  end
30
30
 
31
- def body_padding
32
- if padding.present?
33
- ""
34
- else
35
- "p_md"
36
- end
37
- end
38
-
39
- def body_flex_direction
40
- if flex_direction.present?
41
- "flex_direction_#{flex_direction}"
42
- else
43
- ""
44
- end
45
- end
46
-
47
- def body_flex_wrap
48
- if flex_wrap.present?
49
- "flex_wrap_#{flex_wrap}"
50
- else
51
- ""
52
- end
53
- end
54
-
55
- def body_justify_content
56
- if justify_content.present?
57
- "justify_content_#{justify_content}"
58
- else
59
- ""
60
- end
61
- end
62
-
63
- def body_justify_self
64
- if justify_self.present?
65
- "justify_self_#{justify_self}"
66
- else
67
- ""
68
- end
69
- end
70
-
71
- def body_align_items
72
- if align_items.present?
73
- "align_items_#{align_items}"
74
- else
75
- ""
76
- end
77
- end
78
-
79
- def body_align_content
80
- if align_content.present?
81
- "align_content_#{align_content}"
82
- else
83
- ""
84
- end
85
- end
86
-
87
- def body_align_self
88
- if align_self.present?
89
- "align_self_#{align_self}"
90
- else
91
- ""
92
- end
93
- end
94
-
95
- def body_flex
96
- if flex.present?
97
- "flex_#{flex}"
98
- else
99
- ""
100
- end
101
- end
102
-
103
- def body_flex_grow
104
- if flex_grow.present?
105
- "flex_grow_#{flex_grow}"
106
- else
107
- ""
108
- end
109
- end
110
-
111
- def body_flex_shrink
112
- if flex_shrink.present?
113
- "flex_shrink_#{flex_shrink}"
114
- else
115
- ""
116
- end
117
- end
118
-
119
- def body_order
120
- if order.present?
121
- "order_#{order}"
122
- else
123
- ""
124
- end
125
- end
126
-
127
31
  private
128
32
 
129
33
  def selected_class
@@ -4,7 +4,99 @@ module Playbook
4
4
  module PbCard
5
5
  class CardBody < Playbook::KitBase
6
6
  def classname
7
- generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
7
+ generate_classname("pb_card_body_kit", flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
8
+ end
9
+
10
+ def body_padding
11
+ "" if padding.present?
12
+ end
13
+
14
+ def body_flex_direction
15
+ if flex_direction.present?
16
+ "flex_direction_#{flex_direction}"
17
+ else
18
+ ""
19
+ end
20
+ end
21
+
22
+ def body_flex_wrap
23
+ if flex_wrap.present?
24
+ "flex_wrap_#{flex_wrap}"
25
+ else
26
+ ""
27
+ end
28
+ end
29
+
30
+ def body_justify_content
31
+ if justify_content.present?
32
+ "justify_content_#{justify_content}"
33
+ else
34
+ ""
35
+ end
36
+ end
37
+
38
+ def body_justify_self
39
+ if justify_self.present?
40
+ "justify_self_#{justify_self}"
41
+ else
42
+ ""
43
+ end
44
+ end
45
+
46
+ def body_align_items
47
+ if align_items.present?
48
+ "align_items_#{align_items}"
49
+ else
50
+ ""
51
+ end
52
+ end
53
+
54
+ def body_align_content
55
+ if align_content.present?
56
+ "align_content_#{align_content}"
57
+ else
58
+ ""
59
+ end
60
+ end
61
+
62
+ def body_align_self
63
+ if align_self.present?
64
+ "align_self_#{align_self}"
65
+ else
66
+ ""
67
+ end
68
+ end
69
+
70
+ def body_flex
71
+ if flex.present?
72
+ "flex_#{flex}"
73
+ else
74
+ ""
75
+ end
76
+ end
77
+
78
+ def body_flex_grow
79
+ if flex_grow.present?
80
+ "flex_grow_#{flex_grow}"
81
+ else
82
+ ""
83
+ end
84
+ end
85
+
86
+ def body_flex_shrink
87
+ if flex_shrink.present?
88
+ "flex_shrink_#{flex_shrink}"
89
+ else
90
+ ""
91
+ end
92
+ end
93
+
94
+ def body_order
95
+ if order.present?
96
+ "order_#{order}"
97
+ else
98
+ ""
99
+ end
8
100
  end
9
101
  end
10
102
  end
@@ -1,6 +1,9 @@
1
1
  @import "./tokens/colors";
2
+ @import "./tokens/spacing";
2
3
 
3
4
  [class^=pb_collapsible_kit] {
5
+ padding: $space_md;
6
+
4
7
  .toggle-content {
5
8
  display: none;
6
9
  height: 0;
@@ -18,3 +21,11 @@
18
21
  color: $primary
19
22
  }
20
23
  }
24
+
25
+ [class^=pb_collapsible_main_kit] {
26
+ padding: $space_md;
27
+ }
28
+
29
+ [class^=pb_collapsible_content_kit] {
30
+ padding: $space_md;
31
+ }
@@ -7,19 +7,19 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
7
  import CollapsibleContent from './child_kits/CollapsibleContent'
8
8
  import CollapsibleMain from './child_kits/CollapsibleMain'
9
9
  import CollapsibleContext from './context'
10
- import IconSizes from "../pb_icon/_icon"
10
+ import { IconSizes } from "../pb_icon/_icon"
11
11
 
12
12
 
13
13
  type CollapsibleProps = {
14
- children?: JSX.Element | [],
14
+ children?: JSX.Element | [] | any,
15
15
  aria?: {[key: string]: string},
16
16
  className?: string,
17
17
  collapsed?: boolean,
18
18
  data?: object,
19
+ icon?: string | string[]
19
20
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
20
- iconSize?: typeof IconSizes
21
+ iconSize?: IconSizes
21
22
  id?: string,
22
- padding?: string,
23
23
  }
24
24
 
25
25
  const useCollapsible = (initial = false) => {
@@ -37,10 +37,10 @@ const Collapsible = ({
37
37
  children = [],
38
38
  collapsed = true,
39
39
  data = {},
40
+ icon,
40
41
  iconColor = 'default',
41
42
  iconSize,
42
43
  id,
43
- padding = 'md',
44
44
  ...props
45
45
  }: CollapsibleProps) => {
46
46
  const [isCollapsed, collapse] = useCollapsible(collapsed)
@@ -59,12 +59,12 @@ const Collapsible = ({
59
59
  const dataProps = buildDataProps(data)
60
60
  const classes = classnames(
61
61
  buildCss('pb_collapsible_kit'),
62
- globalProps(props, { padding }),
62
+ globalProps(props),
63
63
  className
64
64
  )
65
65
 
66
66
  return (
67
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, iconSize, iconColor }}>
67
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
68
68
  <div
69
69
  {...ariaProps}
70
70
  {...dataProps}
@@ -0,0 +1,25 @@
1
+ export const showElement = (elem: any) => {
2
+ elem.style.display = 'block';
3
+ const height = elem.scrollHeight + 'px'; // Get its height
4
+ elem.style.height = height; // Update the max-height
5
+ elem.classList.add('is-visible')
6
+ // Once the transition is complete, remove the inline max-height so the content can scale responsively
7
+ window.setTimeout(() => {
8
+ elem.style.height = '';
9
+ }, 300);
10
+ };
11
+
12
+ export const hideElement = (elem:any) => {
13
+ elem.style.height = elem.scrollHeight + 'px';
14
+
15
+ window.setTimeout(() => {
16
+ elem.style.height = '0';
17
+ elem.style.paddingTop = '0';
18
+ elem.style.paddingBottom = '0';
19
+ }, 1);
20
+
21
+ // When the transition is complete, hide it
22
+ window.setTimeout(() => {
23
+ elem.classList.remove('is-visible');
24
+ }, 300);
25
+ };
@@ -1,37 +1,43 @@
1
1
  import classnames from 'classnames'
2
- import React, { useContext } from 'react'
3
- import AnimateHeight from 'react-animate-height'
2
+ import React, { useContext, useRef, useEffect } from 'react'
4
3
  import { buildCss } from '../../utilities/props'
5
4
  import { globalProps } from '../../utilities/globalProps'
5
+ import { hideElement, showElement } from '../_helper_functions'
6
6
 
7
7
  import CollapsibleContext from '../context'
8
8
 
9
9
  export type CollapsibleContentProps = {
10
10
  children?: React.ReactNode[] | React.ReactNode | string,
11
11
  className?: string,
12
- padding?: string,
13
12
  }
14
13
 
15
14
  const CollapsibleContent = ({
16
15
  children,
17
16
  className,
18
- padding = 'md',
19
17
  ...props
20
18
  }: CollapsibleContentProps) => {
21
19
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
22
20
  const contentCSS = buildCss('pb_collapsible_content_kit')
23
- const contentSpacing = globalProps(props, { padding })
21
+ const contentSpacing = globalProps(props)
22
+ const contentRef = useRef(null);
23
+
24
+ useEffect(() => {
25
+ // Use the showElement and hideElement functions based on the context value
26
+ if (contentRef.current) {
27
+ if (context.collapsed) {
28
+ hideElement(contentRef.current);
29
+ } else {
30
+ showElement(contentRef.current);
31
+ }
32
+ }
33
+ }, [context.collapsed]);
24
34
 
25
35
  return (
26
- <AnimateHeight
27
- duration={400}
28
- height={context.collapsed ? 0 : 'auto'}
29
- id="bottom-section"
30
- >
31
- <div className={classnames(contentCSS, className, contentSpacing)}>
32
- {children}
33
- </div>
34
- </AnimateHeight>
36
+ <div ref={contentRef}
37
+ data-collapsible-content="true"
38
+ className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
39
+ {children}
40
+ </div>
35
41
  )
36
42
  }
37
43
 
@@ -7,6 +7,7 @@ import { globalProps } from '../../utilities/globalProps'
7
7
 
8
8
  import Flex from '../../pb_flex/_flex'
9
9
  import FlexItem from '../../pb_flex/_flex_item'
10
+ import Icon, { IconSizes } from "../../pb_icon/_icon"
10
11
  import CollapsibleContext from '../context'
11
12
 
12
13
 
@@ -31,7 +32,6 @@ const colorMap = {
31
32
  type CollapsibleMainProps = {
32
33
  children: React.ReactNode[] | React.ReactNode,
33
34
  className?: string,
34
- padding?: string,
35
35
  cursor?: string,
36
36
 
37
37
  }
@@ -39,36 +39,53 @@ type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success
39
39
 
40
40
  type IconProps = {
41
41
  collapsed: boolean | (()=> void)
42
+ icon?: string[] | string
42
43
  iconColor?: IconColors
43
- iconSize?: string | (() => void)
44
+ iconSize?: IconSizes
44
45
  }
45
46
 
46
- const Icon = ({ collapsed, iconSize, iconColor }: IconProps) => {
47
- const direction = collapsed ? 'down' : 'up'
48
- const size = iconSize
47
+ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
49
48
  const color = colorMap[iconColor]
50
49
 
50
+ const showIcon = (icon: string |string[]) => {
51
+ if (typeof icon === "string") {
52
+ return [icon, icon]
53
+ }
54
+ return icon
55
+ }
56
+
51
57
  return (
52
- <div
53
- className="icon_wrapper"
54
- key={direction}
55
- style={{ verticalAlign: 'middle', color: color }}
56
- >
57
- <i className={`far fa-chevron-${direction} fa-fw ${size && `fa-${size}`}`} />
58
- </div>
59
- )
58
+ <>
59
+ {collapsed ? (
60
+ <div
61
+ className="icon_wrapper"
62
+ key={icon ? showIcon(icon)[0] : "chevron-down"}
63
+ style={{ verticalAlign: "middle", color: color }}
64
+ >
65
+ <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
66
+ </div>
67
+ ) : (
68
+ <div
69
+ className="icon_wrapper"
70
+ key={icon ? showIcon(icon)[1] : "chevron-up"}
71
+ style={{ verticalAlign: "middle", color: color }}
72
+ >
73
+ <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
74
+ </div>
75
+ )}
76
+ </>
77
+ );
60
78
  }
61
79
 
62
80
  const CollapsibleMain = ({
63
81
  children,
64
82
  className,
65
83
  cursor = 'pointer',
66
- padding = 'md',
67
84
  ...props
68
85
  }: CollapsibleMainProps): React.ReactElement=> {
69
86
  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
70
87
  const mainCSS = buildCss('pb_collapsible_main_kit')
71
- const mainSpacing = globalProps(props, { cursor, padding })
88
+ const mainSpacing = globalProps(props, { cursor })
72
89
 
73
90
  return (
74
91
  <div className={classnames(mainCSS, className, mainSpacing)}>
@@ -79,10 +96,11 @@ const CollapsibleMain = ({
79
96
  >
80
97
  <FlexItem>{children}</FlexItem>
81
98
  <FlexItem>
82
- <Icon
99
+ <ToggleIcon
83
100
  collapsed={context.collapsed as () => void}
84
101
  iconColor={context.iconColor as IconColors}
85
- iconSize={context.iconSize}
102
+ iconSize={context.iconSize as IconSizes}
103
+ icon={context.icon as string[] | string}
86
104
  />
87
105
  </FlexItem>
88
106
  </Flex>
@@ -10,8 +10,13 @@
10
10
  <% end %>
11
11
  <%= pb_rails("flex/flex_item") do %>
12
12
  <div style="color: <%= object.icon_color %>">
13
- <i class="far fa-chevron-down <%= object.icon_size %>"></i>
14
- <i class="far fa-chevron-up <%= object.icon_size %>"></i>
13
+ <% if object.icon.present? %>
14
+ <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
15
+ <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
16
+ <% else %>
17
+ <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
18
+ <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
19
+ <% end %>
15
20
  </div>
16
21
  <% end %>
17
22
  <% end %>
@@ -6,6 +6,7 @@ module Playbook
6
6
  prop :color, type: Playbook::Props::Enum,
7
7
  values: %w[default light lighter link success error],
8
8
  default: "default"
9
+ prop :icon
9
10
  prop :size, type: Playbook::Props::Enum,
10
11
  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
11
12
  default: nil
@@ -17,11 +18,13 @@ module Playbook
17
18
  generate_classname("pb_collapsible_main_kit", padding, separator: " ")
18
19
  end
19
20
 
20
- def icon_size
21
- return "" if size.nil?
22
-
23
- size_object = { lg: "fa-lg", xs: "fa-xs", sm: "fa-sm", "1x": "fa-1x", "2x": "fa-2x", "3x": "fa-3x", "4x": "fa-4x", "5x": "fa-5x", "6x": "fa-6x", "7x": "fa-7x", "8x": "fa-8x", "9x": "fa-9x", "10x": "fa-10x" }
24
- size_object[size.to_sym]
21
+ def show_icon(icon)
22
+ case icon
23
+ when ::String
24
+ [icon, icon]
25
+ when ::Array
26
+ icon
27
+ end
25
28
  end
26
29
 
27
30
  def icon_color
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
4
  const CollapsibleDefault = () => (
5
- <Collapsible>
5
+ <Collapsible >
6
6
  <Collapsible.Main>
7
7
  <div>{'Main Section'}</div>
8
8
  </Collapsible.Main>
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("collapsible", props: { name: "custom-icons-example" }) do %>
2
+ <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "custom-icons-main", icon: ["plus", "minus"]}) do %>
3
+ <%= pb_rails("body", props: { text: "Main Section"}) %>
4
+ <% end %>
5
+ <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>
6
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
7
+ <br><br>
8
+ Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
9
+ <% end %>
10
+ <% end %>
@@ -0,0 +1,19 @@
1
+ import React from 'react'
2
+ import { Collapsible } from '../..'
3
+
4
+ const CollapsibleIcons = () => (
5
+ <Collapsible icon={['plus','minus']}>
6
+ <Collapsible.Main>
7
+ <div>{'Main Section'}</div>
8
+ </Collapsible.Main>
9
+ <Collapsible.Content>
10
+ <div>
11
+ {
12
+ '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. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
13
+ }
14
+ </div>
15
+ </Collapsible.Content>
16
+ </Collapsible>
17
+ )
18
+
19
+ export default CollapsibleIcons
@@ -0,0 +1,2 @@
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']`
@@ -1,4 +1,4 @@
1
1
  ##### Prop
2
- This kit uses `icon` sizes. If you don't give it a size, it will default to medium. You can be replaced with the sizes below:
2
+ This kit uses `icon` sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:
3
3
 
4
4
  * `lg` `xs` `sm` `1x` `2x` `3x` `4x` `5x` `6x` `7x` `8x` `9x` `10x`
@@ -4,8 +4,10 @@ examples:
4
4
  - collapsible_default: Default
5
5
  - collapsible_size: Size
6
6
  - collapsible_color: Color
7
+ # - collapsible_icons: Custom Icons
7
8
 
8
9
  react:
9
10
  - collapsible_default: Default
10
11
  - collapsible_size: Size
11
- - collapsible_color: Color
12
+ - collapsible_color: Color
13
+ # - collapsible_icons: Custom Icons
@@ -1,3 +1,4 @@
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'