playbook_ui 12.33.1.pre.alpha.PLAY933navkitcollapsible994 → 12.34.0.pre.alpha.fixdialogcloseevents1003

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.scss +32 -0
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +78 -26
  4. data/app/pb_kits/playbook/pb_button/button.html.erb +17 -0
  5. data/app/pb_kits/playbook/pb_button/button.rb +18 -2
  6. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb +30 -0
  7. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +47 -0
  8. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md +3 -0
  9. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_button/docs/index.js +2 -1
  11. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +4 -6
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +11 -19
  13. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +14 -27
  14. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -7
  15. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +7 -2
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +1 -1
  17. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +1 -3
  18. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +0 -1
  19. data/app/pb_kits/playbook/pb_collapsible/index.js +3 -3
  20. data/app/pb_kits/playbook/pb_collapsible/types.d.ts +1 -0
  21. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +7 -4
  22. data/app/pb_kits/playbook/pb_icon/_icon.scss +4 -0
  23. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -2
  24. data/app/pb_kits/playbook/pb_icon/icon.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_nav/_item.tsx +49 -98
  26. data/app/pb_kits/playbook/pb_nav/_nav.scss +0 -1
  27. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +11 -9
  28. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -3
  29. data/app/pb_kits/playbook/pb_nav/docs/index.js +0 -2
  30. data/app/pb_kits/playbook/pb_nav/item.html.erb +12 -34
  31. data/app/pb_kits/playbook/pb_nav/item.rb +0 -5
  32. data/dist/playbook-rails.js +6 -6
  33. data/lib/playbook/version.rb +2 -2
  34. metadata +6 -10
  35. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +0 -25
  36. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.html.erb +0 -10
  37. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +0 -19
  38. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +0 -2
  39. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +0 -6
  40. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +0 -24
  41. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +0 -83
  42. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +0 -86
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 33130ba9d6074894b7db63e664ca3a35730c9ac366285de0bcfb7bc78fbb88a9
4
- data.tar.gz: e2b5fe4b62c4117d14b09cdd7e9ec93de3678c54b8575b4c1e6ccf26edac759f
3
+ metadata.gz: 73dae18aff8f323e035348eead47c0a135a2e639eff5ef2d915e0f43ede1e5ed
4
+ data.tar.gz: b5db0c63a610c78a17762f84420fef70c1362bf29246a475a1283b509a14f4d8
5
5
  SHA512:
6
- metadata.gz: 1ec5221a8aa347f88b9483e371eefafae1fbdd9e340e7b8029fa077eac7f03c3ef5536564b677367698b58489dee4415b77298de4efa5ac62d08078eb8dde54e
7
- data.tar.gz: e95ca7bbcba72fbc6fc2309a09aec09f4b9ae3ab616837192a520c1b337b221a2656062f9ebbb27ae4832df39b592453d56cc39c436f533e8f32490e0ca586a3
6
+ metadata.gz: 3532bdf137816d68b2f4a09ceab812d18b976e86584caf5e9ed1e24de762efd4c058c61803db2eb87afb9b89afeb0a6b2c038aa9640f88855761fe941ab85ab8
7
+ data.tar.gz: dbb59a43fe72b66d70d82baaacc07296b61b50ef66dcea38b6cc1544f42040453c3d43c96b41cddedf849cefc9b8cf4b3dd0afc6b76e4ace1025f6ab7f61f5ee
@@ -1,5 +1,9 @@
1
1
  @import "./button_mixins";
2
2
  @import "../tokens/colors";
3
+ @import "../tokens/border_radius";
4
+ @import "../tokens/colors";
5
+ @import "../tokens/spacing";
6
+ @import "../tokens/typography";
3
7
 
4
8
  $pb_button_sizes: (
5
9
  "sm": 0.75rem,
@@ -30,6 +34,34 @@ $pb_button_sizes: (
30
34
  &[class*=_link] {
31
35
  @include pb_button_link;
32
36
  }
37
+ &[class*=_reaction] {
38
+ background-color: $card_light;
39
+ min-width: 40px;
40
+ border-radius: $border_radius_rounded;
41
+ border: 1px solid $border_light;
42
+ color: $text_lt_light;
43
+ padding: ($space_xxs - 2) $space_xs;
44
+ min-height: $space_md + 4;
45
+
46
+ .pb_icon_kit_emoji, .pb_icon_kit {
47
+ font-size: $font_base;
48
+ }
49
+ &:hover {
50
+ background-color: $bg_light;
51
+ }
52
+ &.active {
53
+ border-color:transparent;
54
+ box-shadow: 0px 0px 0 2px $primary_action;
55
+ &:hover {
56
+ background-color: rgba($primary, 0.03);
57
+ }
58
+ }
59
+ }
60
+
61
+ &.reaction_default {
62
+ padding: ($space_xxs + 1) ($space_sm - 4);
63
+ color: $text_lt_lighter;
64
+ }
33
65
 
34
66
  // Disabled =================
35
67
  &[class*=_disabled] {
@@ -4,6 +4,8 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
5
5
 
6
6
  import Icon from '../pb_icon/_icon'
7
+ import Caption from "../pb_caption/_caption"
8
+ import Flex from "../pb_flex/_flex"
7
9
 
8
10
  type EventHandler = (React.MouseEventHandler<HTMLElement>)
9
11
 
@@ -11,11 +13,13 @@ type ButtonPropTypes = {
11
13
  aria?: { [key: string]: string },
12
14
  children?: React.ReactChild[] | React.ReactChild,
13
15
  className?: string | string[],
16
+ count?: number,
14
17
  data?: { [key: string]: string },
15
18
  disabled?: boolean,
16
19
  fixedWidth?: boolean,
17
20
  form?: string,
18
21
  fullWidth?: boolean,
22
+ highlight?: boolean,
19
23
  icon?: string,
20
24
  iconRight?: boolean,
21
25
  id?: string,
@@ -30,14 +34,22 @@ type ButtonPropTypes = {
30
34
  type?: 'inline' | null,
31
35
  htmlType?: 'submit' | 'reset' | 'button' | undefined,
32
36
  value?: string | null,
33
- variant?: 'primary' | 'secondary' | 'link',
37
+ variant?: 'primary' | 'secondary' | 'link'| 'reaction',
34
38
  wrapperClass?: string,
35
39
  } & GlobalProps
36
40
 
41
+ const isValidEmoji = (emoji: string) => {
42
+ // Using regular expression to check if the string is a valid emoji/emoji Unicode
43
+ const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
44
+ return emojiRegex.test(emoji);
45
+ };
46
+
37
47
  const buttonClassName = (props: ButtonPropTypes) => {
38
48
  const {
39
49
  disabled = false,
40
50
  fullWidth = false,
51
+ highlight,
52
+ icon,
41
53
  loading = false,
42
54
  type = 'inline',
43
55
  variant = 'primary',
@@ -52,6 +64,8 @@ const buttonClassName = (props: ButtonPropTypes) => {
52
64
  className += disabled ? '_disabled' : '_enabled'
53
65
  className += loading ? '_loading' : ''
54
66
  className += `${size !== null ? ` size_${size}` : ''}`
67
+ className += `${variant === 'reaction' && !isValidEmoji(icon) ? ` reaction_default` : ''}`
68
+ className += `${variant === 'reaction' && highlight ? ` active` : ''}`
55
69
 
56
70
  return className
57
71
  }
@@ -61,6 +75,7 @@ const Button = (props: ButtonPropTypes) => {
61
75
  aria = {},
62
76
  children,
63
77
  className,
78
+ count,
64
79
  data = {},
65
80
  disabled,
66
81
  icon = null,
@@ -75,6 +90,7 @@ const Button = (props: ButtonPropTypes) => {
75
90
  text,
76
91
  htmlType = 'button',
77
92
  value,
93
+ variant,
78
94
  form = null
79
95
  } = props
80
96
 
@@ -131,41 +147,77 @@ const Button = (props: ButtonPropTypes) => {
131
147
  return null
132
148
  }
133
149
 
134
- const displayButton = () => {
135
- if (link)
150
+ const displayButton = () => {
151
+ if (link) {
136
152
  return (
137
153
  <a
138
- {...ariaProps}
139
- {...dataProps}
140
- className={css}
141
- href={link}
142
- id={id}
143
- rel={target !== 'child' ? 'noreferrer' : null}
144
- role="link"
145
- tabIndex={tabIndex}
146
- target={getTargetAttribute()}
154
+ {...ariaProps}
155
+ {...dataProps}
156
+ className={css}
157
+ href={link}
158
+ id={id}
159
+ rel={target !== "child" ? "noreferrer" : null}
160
+ role="link"
161
+ tabIndex={tabIndex}
162
+ target={getTargetAttribute()}
147
163
  >
148
164
  {ifLoading()}
149
165
  </a>
150
- )
151
- else
166
+ );
167
+ } else if (variant === "reaction") {
152
168
  return (
153
169
  <button
154
- {...ariaProps}
155
- {...dataProps}
156
- className={css}
157
- disabled={disabled}
158
- form={form}
159
- id={id}
160
- onClick={onClick}
161
- role="button"
162
- tabIndex={tabIndex}
163
- type={htmlType}
164
- value={value}
170
+ {...ariaProps}
171
+ {...dataProps}
172
+ className={css}
173
+ disabled={disabled}
174
+ form={form}
175
+ id={id}
176
+ onClick={onClick}
177
+ role="button"
178
+ tabIndex={tabIndex}
179
+ type={htmlType}
180
+ value={value}
181
+ >
182
+ {icon && isValidEmoji(icon) && (
183
+ <Flex align='center'>
184
+ <Icon icon={icon} />
185
+ {count && (
186
+ <Caption paddingLeft="xxs" size="xs">
187
+ {count}
188
+ </Caption>
189
+ )}
190
+ </Flex>
191
+ )
192
+ }
193
+ {
194
+ !isValidEmoji(icon) && (
195
+ <Icon icon={icon ? icon : "face-smile-plus"} />
196
+ )
197
+ }
198
+
199
+
200
+ </button>
201
+ );
202
+ } else {
203
+ return (
204
+ <button
205
+ {...ariaProps}
206
+ {...dataProps}
207
+ className={css}
208
+ disabled={disabled}
209
+ form={form}
210
+ id={id}
211
+ onClick={onClick}
212
+ role="button"
213
+ tabIndex={tabIndex}
214
+ type={htmlType}
215
+ value={value}
165
216
  >
166
217
  {ifLoading()}
167
218
  </button>
168
- )
219
+ );
220
+ }
169
221
  }
170
222
 
171
223
  return (
@@ -1,5 +1,21 @@
1
1
  <%= content_tag(object.tag,
2
2
  object.tag == "button" ? object.options : object.link_options) do %>
3
+ <% if object.variant === "reaction" %>
4
+ <% if icon && object.valid_emoji(object.icon) %>
5
+ <%= pb_rails("flex", props:{ align: "center" }) do %>
6
+ <%= pb_rails("icon", props: { icon: "#{icon}"}) %>
7
+ <% if object.count %>
8
+ <%= pb_rails("caption", props: { text: "#{count}", size: "xs", padding_left:"xxs" }) %>
9
+ <% end %>
10
+ <% end %>
11
+ <% elsif !object.valid_emoji(object.icon) %>
12
+ <% if object.icon %>
13
+ <%= pb_rails("icon", props: { icon: "#{icon}" }) %>
14
+ <% else %>
15
+ <%= pb_rails("icon", props: { icon: "face-smile-plus" }) %>
16
+ <% end %>
17
+ <% end %>
18
+ <% else %>
3
19
  <% if object.icon && !object.icon_right %>
4
20
  <span>
5
21
  <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
@@ -12,5 +28,6 @@
12
28
  <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
13
29
  </span>
14
30
  <% end %>
31
+ <% end %>
15
32
 
16
33
  <% end %>
@@ -16,8 +16,11 @@ module Playbook
16
16
  prop :new_window, type: Playbook::Props::Boolean,
17
17
  default: false
18
18
  prop :variant, type: Playbook::Props::Enum,
19
- values: %w[primary secondary link],
19
+ values: %w[primary secondary link reaction],
20
20
  default: "primary"
21
+ prop :count, type: Playbook::Props::Number
22
+ prop :highlight, type: Playbook::Props::Boolean,
23
+ default: false
21
24
  prop :target
22
25
  prop :text
23
26
  prop :type
@@ -63,9 +66,14 @@ module Playbook
63
66
  link ? "a" : "button"
64
67
  end
65
68
 
69
+ def valid_emoji(icon)
70
+ emoji_regex = /\p{Emoji}/
71
+ emoji_regex.match?(icon)
72
+ end
73
+
66
74
  def classname
67
75
  button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
68
- button_class + size_class
76
+ button_class + size_class + default_reaction_class + highlight_active
69
77
  end
70
78
 
71
79
  private
@@ -85,6 +93,14 @@ module Playbook
85
93
  def size_class
86
94
  size ? " size_#{size}" : ""
87
95
  end
96
+
97
+ def default_reaction_class
98
+ variant === "reaction" && !object.valid_emoji(object.icon) ? " reaction_default" : ""
99
+ end
100
+
101
+ def highlight_active
102
+ variant === "reaction" && object.highlight ? " active" : ""
103
+ end
88
104
  end
89
105
  end
90
106
  end
@@ -0,0 +1,30 @@
1
+ <%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
2
+ <%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
3
+ <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
4
+ <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
5
+
6
+
7
+ <script>
8
+ function renderButtonReaction() {
9
+
10
+ let highlightActive = false;
11
+
12
+ function toggleHighlight() {
13
+ let reactionCount = 153;
14
+ console.log("toggleHighlight", highlightActive)
15
+ highlightActive = !highlightActive;
16
+ const innerCountElement = document.querySelector(".count .pb_caption_kit_xs.pl_xxs")
17
+ const firstButton = document.getElementById("reaction-button-highlight")
18
+ firstButton.classList.add(highlightActive && "active")
19
+ firstButton.classList.remove(!highlightActive && "active")
20
+ innerCountElement.innerHTML = highlightActive ? reactionCount + 1 : reactionCount;
21
+ console.log("element", innerCountElement)
22
+ }
23
+
24
+ const button1 = document.getElementById("reaction-button-highlight")
25
+ button1.addEventListener("click", toggleHighlight);
26
+
27
+ }
28
+ renderButtonReaction();
29
+ </script>
30
+
@@ -0,0 +1,47 @@
1
+ import React, {useState} from "react"
2
+ import { Button } from "../../"
3
+
4
+ const ButtonReaction = (props) => {
5
+
6
+ const [highlightActive, setHighlightActive] =useState(false)
7
+ const reactionCount = 153
8
+
9
+ return (
10
+ <div>
11
+ <Button
12
+ count={highlightActive ? (reactionCount + 1) : reactionCount}
13
+ highlight = {highlightActive}
14
+ icon="&#127881;"
15
+ onClick={()=> setHighlightActive(!highlightActive)}
16
+ tabIndex={0}
17
+ variant="reaction"
18
+ {...props}
19
+ />
20
+ <Button
21
+ count={5}
22
+ icon="😍"
23
+ marginLeft='lg'
24
+ tabIndex={0}
25
+ variant="reaction"
26
+ {...props}
27
+ />
28
+ <Button
29
+ marginLeft='lg'
30
+ tabIndex={0}
31
+ variant="reaction"
32
+ {...props}
33
+ />
34
+ <Button
35
+ icon="user"
36
+ marginLeft='lg'
37
+ tabIndex={0}
38
+ variant="reaction"
39
+ {...props}
40
+ />
41
+
42
+
43
+ </div>
44
+ )
45
+ }
46
+
47
+ export default ButtonReaction
@@ -0,0 +1,3 @@
1
+ The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
2
+
3
+ Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!
@@ -1,6 +1,7 @@
1
1
  examples:
2
2
  rails:
3
3
  - button_default: Button Variants
4
+ - button_reaction: Reaction Button
4
5
  - button_full_width: Button Full Width
5
6
  - button_link: Button Links
6
7
  - button_loading: Button Loading
@@ -13,6 +14,7 @@ examples:
13
14
 
14
15
  react:
15
16
  - button_default: Button Variants
17
+ - button_reaction: Reaction Button
16
18
  - button_full_width: Button Full Width
17
19
  - button_link: Button Links
18
20
  - button_loading: Button Loading
@@ -8,4 +8,5 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
8
  export { default as ButtonOptions } from './_button_options.jsx'
9
9
  export { default as ButtonSize } from './_button_size.jsx'
10
10
  export { default as ButtonForm } from './_button_form.jsx'
11
- export { default as ButtonHover } from './_button_hover.jsx'
11
+ export { default as ButtonHover } from './_button_hover.jsx'
12
+ export {default as ButtonReaction } from './_button_reaction.jsx'
@@ -7,18 +7,17 @@ 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 | [] | any,
14
+ children?: JSX.Element | [],
15
15
  aria?: {[key: string]: string},
16
16
  className?: string,
17
17
  collapsed?: boolean,
18
18
  data?: object,
19
- icon?: Object,
20
19
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
21
- iconSize?: IconSizes
20
+ iconSize?: typeof IconSizes
22
21
  id?: string,
23
22
  padding?: string,
24
23
  }
@@ -38,7 +37,6 @@ const Collapsible = ({
38
37
  children = [],
39
38
  collapsed = true,
40
39
  data = {},
41
- icon,
42
40
  iconColor = 'default',
43
41
  iconSize,
44
42
  id,
@@ -66,7 +64,7 @@ const Collapsible = ({
66
64
  )
67
65
 
68
66
  return (
69
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
67
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, iconSize, iconColor }}>
70
68
  <div
71
69
  {...ariaProps}
72
70
  {...dataProps}
@@ -1,8 +1,8 @@
1
1
  import classnames from 'classnames'
2
- import React, { useContext, useRef, useEffect } from 'react'
2
+ import React, { useContext } from 'react'
3
+ import AnimateHeight from 'react-animate-height'
3
4
  import { buildCss } from '../../utilities/props'
4
5
  import { globalProps } from '../../utilities/globalProps'
5
- import { hideElement, showElement } from '../_helper_functions'
6
6
 
7
7
  import CollapsibleContext from '../context'
8
8
 
@@ -21,25 +21,17 @@ const CollapsibleContent = ({
21
21
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
22
22
  const contentCSS = buildCss('pb_collapsible_content_kit')
23
23
  const contentSpacing = globalProps(props, { padding })
24
- const contentRef = useRef(null);
25
-
26
- useEffect(() => {
27
- // Use the showElement and hideElement functions based on the context value
28
- if (contentRef.current) {
29
- if (context.collapsed) {
30
- hideElement(contentRef.current);
31
- } else {
32
- showElement(contentRef.current);
33
- }
34
- }
35
- }, [context.collapsed]);
36
24
 
37
25
  return (
38
- <div ref={contentRef}
39
- data-collapsible-content="true"
40
- className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
41
- {children}
42
- </div>
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>
43
35
  )
44
36
  }
45
37
 
@@ -7,7 +7,6 @@ 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"
11
10
  import CollapsibleContext from '../context'
12
11
 
13
12
 
@@ -40,35 +39,24 @@ type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success
40
39
 
41
40
  type IconProps = {
42
41
  collapsed: boolean | (()=> void)
43
- icon?: string[] | string
44
42
  iconColor?: IconColors
45
- iconSize?: IconSizes
43
+ iconSize?: string | (() => void)
46
44
  }
47
45
 
48
- const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
46
+ const Icon = ({ collapsed, iconSize, iconColor }: IconProps) => {
47
+ const direction = collapsed ? 'down' : 'up'
48
+ const size = iconSize
49
49
  const color = colorMap[iconColor]
50
50
 
51
51
  return (
52
- <>
53
- {collapsed ? (
54
- <div
55
- className="icon_wrapper"
56
- key="chevron-down"
57
- style={{ verticalAlign: "middle", color: color }}
58
- >
59
- <Icon icon={icon ? icon[0] : "chevron-down"} size={iconSize} />
60
- </div>
61
- ) : (
62
- <div
63
- className="icon_wrapper"
64
- key="chevron-up"
65
- style={{ verticalAlign: "middle", color: color }}
66
- >
67
- <Icon icon={icon ? icon[1] : "chevron-up"} size={iconSize} />
68
- </div>
69
- )}
70
- </>
71
- );
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
+ )
72
60
  }
73
61
 
74
62
  const CollapsibleMain = ({
@@ -91,11 +79,10 @@ const CollapsibleMain = ({
91
79
  >
92
80
  <FlexItem>{children}</FlexItem>
93
81
  <FlexItem>
94
- <ToggleIcon
82
+ <Icon
95
83
  collapsed={context.collapsed as () => void}
96
84
  iconColor={context.iconColor as IconColors}
97
- iconSize={context.iconSize as IconSizes}
98
- icon={context.icon as string[] | string}
85
+ iconSize={context.iconSize}
99
86
  />
100
87
  </FlexItem>
101
88
  </Flex>
@@ -10,13 +10,8 @@
10
10
  <% end %>
11
11
  <%= pb_rails("flex/flex_item") do %>
12
12
  <div style="color: <%= object.icon_color %>">
13
- <% if object.icon.present? %>
14
- <%= pb_rails("icon", props: { icon: "#{icon[0]}", id:"collapsible_open_icon", size: object.size }) %>
15
- <%= pb_rails("icon", props: { icon: "#{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 %>
13
+ <i class="far fa-chevron-down <%= object.icon_size %>"></i>
14
+ <i class="far fa-chevron-up <%= object.icon_size %>"></i>
20
15
  </div>
21
16
  <% end %>
22
17
  <% end %>
@@ -6,8 +6,6 @@ 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, type: Playbook::Props::Array,
10
- default: []
11
9
  prop :size, type: Playbook::Props::Enum,
12
10
  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
13
11
  default: nil
@@ -19,6 +17,13 @@ module Playbook
19
17
  generate_classname("pb_collapsible_main_kit", padding, separator: " ")
20
18
  end
21
19
 
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]
25
+ end
26
+
22
27
  def icon_color
23
28
  return "" if color.nil?
24
29
 
@@ -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. This 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. You 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,10 +4,8 @@ examples:
4
4
  - collapsible_default: Default
5
5
  - collapsible_size: Size
6
6
  - collapsible_color: Color
7
- - collapsible_icons: Custom Icons
8
7
 
9
8
  react:
10
9
  - collapsible_default: Default
11
10
  - collapsible_size: Size
12
- - collapsible_color: Color
13
- - collapsible_icons: Custom Icons
11
+ - collapsible_color: Color
@@ -1,4 +1,3 @@
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'
@@ -2,8 +2,8 @@ import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  const MAIN_SELECTOR = '[data-collapsible-main]'
4
4
  const CONTENT_SELECTOR = '[data-collapsible-content]'
5
- const DOWN_ARROW_SELECTOR = '#collapsible_open_icon'
6
- const UP_ARROW_SELECTOR = '#collapsible_close_icon'
5
+ const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
6
+ const UP_ARROW_SELECTOR = '.fa-chevron-up'
7
7
 
8
8
  export default class PbCollapsible extends PbEnhancedElement {
9
9
  static get selector() {
@@ -75,5 +75,5 @@ export default class PbCollapsible extends PbEnhancedElement {
75
75
  displayUpArrow() {
76
76
  this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
77
77
  this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
78
- }
78
+ }
79
79
  }
@@ -0,0 +1 @@
1
+ declare module 'react-animate-height'