playbook_ui 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085 → 13.16.0.pre.alpha.PLAY11641991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +12 -14
  3. data/app/pb_kits/playbook/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  6. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  7. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  8. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  9. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  10. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  11. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
  13. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
  14. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
  19. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  21. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  22. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  24. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  25. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
  26. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
  27. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  28. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  29. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
  30. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  31. data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
  32. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  33. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  34. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
  36. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  37. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  38. data/dist/menu.yml +3 -105
  39. data/dist/playbook-rails.js +6 -14
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +2 -29
  42. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
  43. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -62
  44. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
  45. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
  46. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
  47. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
  48. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
  49. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
  50. data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -288
  51. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
  52. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
  53. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
  54. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
  55. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
  56. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
  57. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
  58. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
  59. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
  60. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
  62. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +0 -57
  63. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
  64. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
  65. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
  66. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  67. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
  68. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1fd075f10326a40519c20d95bdda522fd5ffb01c0f8b43cc8daf0c65659df31e
4
- data.tar.gz: 668009edc5596c3c139578bbbbb0b9df5aa385a91f00f2ceab250b4ea811f13e
3
+ metadata.gz: 57fca63de92f445e74e488eda8d295b1479dbe313650e923fee16c785cf6b45e
4
+ data.tar.gz: c560bc551c9ae918623a7162cdba1697c84abaad1734945179fc8f308d0d9291
5
5
  SHA512:
6
- metadata.gz: 2a42c6d61a727c8db17a7b65458dea7e4cd05575b138a95050b05fecf936a9cba041381ab7d19c33f8e4241ee6aa586b66cce9cc8e170f70d39b9616f64702f3
7
- data.tar.gz: f4ec5842c6736935bf03372ce6efa4806038c16cc0621c55d8e363ba71da75e7d3c1c47838e03f941e3821c351650a7fa41a70d69439466f8993a9cdf1bda589
6
+ metadata.gz: 4e4515916b811c21fcb4a83494c1da95070ab28eed128ec2c9fb39b468a85c1328afe2f129edfd9076ac87bab0229c1c83947b9d883997e536799b7fd6b4360c
7
+ data.tar.gz: 6140438567931eff178736f0264a9ead96dfbf29854b2ab0c373521168befbee0650d98bbb2d14771ecd455f5cbf0de1de288ca7f9b8d5e61a045707d39f087c
@@ -1,17 +1,16 @@
1
-
2
-
3
- @import 'pb_advanced_table/advanced_table';
4
- @import 'pb_avatar/avatar';
5
- @import 'pb_avatar_action_button/avatar_action_button';
6
1
  @import 'pb_background/background';
7
- @import 'pb_badge/badge';
8
- @import 'pb_bar_graph/bar_graph';
9
2
  @import 'pb_body/body';
10
3
  @import 'pb_bread_crumbs/bread_crumbs';
11
4
  @import 'pb_button/button';
12
5
  @import 'pb_button_toolbar/button_toolbar';
13
6
  @import 'pb_caption/caption';
14
7
  @import 'pb_card/card';
8
+ @import 'pb_detail/detail';
9
+ @import 'pb_title/title';
10
+ @import 'pb_avatar/avatar';
11
+ @import 'pb_avatar_action_button/avatar_action_button';
12
+ @import 'pb_badge/badge';
13
+ @import 'pb_bar_graph/bar_graph';
15
14
  @import 'pb_checkbox/checkbox';
16
15
  @import 'pb_circle_chart/circle_chart';
17
16
  @import 'pb_circle_icon_button/circle_icon_button';
@@ -21,22 +20,21 @@
21
20
  @import 'pb_dashboard_value/dashboard_value';
22
21
  @import 'pb_date/date';
23
22
  @import 'pb_date_picker/date_picker';
23
+ @import 'pb_date_time/date_time';
24
24
  @import 'pb_date_range_inline/date_range_inline';
25
25
  @import 'pb_date_range_stacked/date_range_stacked';
26
26
  @import 'pb_date_stacked/date_stacked';
27
- @import 'pb_date_time/date_time';
28
27
  @import 'pb_date_time_stacked/date_time_stacked';
29
28
  @import 'pb_date_year_stacked/date_year_stacked';
30
- @import 'pb_detail/detail';
31
29
  @import 'pb_dialog/dialog';
32
30
  @import 'pb_distribution_bar/distribution_bar';
33
31
  @import 'pb_file_upload/file_upload';
34
32
  @import 'pb_filter/filter';
35
33
  @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
36
- @import 'pb_flex/flex';
37
34
  @import 'pb_form/form';
38
35
  @import 'pb_form_group/form_group';
39
36
  @import 'pb_form_pill/form_pill';
37
+ @import 'pb_flex/flex';
40
38
  @import 'pb_gauge/gauge';
41
39
  @import 'pb_hashtag/hashtag';
42
40
  @import 'pb_highlight/highlight';
@@ -57,7 +55,6 @@
57
55
  @import 'pb_map/map';
58
56
  @import 'pb_map/pb_map_button_mixin';
59
57
  @import 'pb_message/message';
60
- @import 'pb_multi_level_select/multi_level_select';
61
58
  @import 'pb_multiple_users/multiple_users';
62
59
  @import 'pb_multiple_users_stacked/multiple_users_stacked';
63
60
  @import 'pb_nav/nav';
@@ -88,11 +85,9 @@
88
85
  @import 'pb_text_input/text_input';
89
86
  @import 'pb_textarea/textarea';
90
87
  @import 'pb_time/time';
91
- @import 'pb_time_range_inline/time_range_inline';
92
- @import 'pb_time_stacked/time_stacked';
93
88
  @import 'pb_timeline/timeline';
89
+ @import 'pb_time_range_inline/time_range_inline';
94
90
  @import 'pb_timestamp/timestamp';
95
- @import 'pb_title/title';
96
91
  @import 'pb_title_count/title_count';
97
92
  @import 'pb_title_detail/title_detail';
98
93
  @import 'pb_toggle/toggle';
@@ -101,6 +96,7 @@
101
96
  @import 'pb_typeahead/typeahead';
102
97
  @import 'pb_user/user';
103
98
  @import 'pb_user_badge/user_badge';
99
+ @import 'pb_time_stacked/time_stacked';
104
100
  @import 'pb_walkthrough/walkthrough';
105
101
  @import 'pb_weekday_stacked/weekday_stacked';
106
102
  @import './utilities/mixins';
@@ -119,3 +115,5 @@
119
115
  @import './utilities/text_align';
120
116
  @import './utilities/overflow';
121
117
  @import './utilities/truncate';
118
+
119
+ @import 'pb_multi_level_select/multi_level_select';
@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
4
4
  import 'lazysizes'
5
5
 
6
6
  // vvv React Component JSX Imports from the React Kits vvv
7
- export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
8
7
  export { default as Avatar } from './pb_avatar/_avatar'
9
8
  export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
10
9
  export { default as Background } from './pb_background/_background'
@@ -60,8 +59,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
60
59
  export { default as List } from './pb_list/_list'
61
60
  export { default as ListItem } from './pb_list/_list_item'
62
61
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
63
- export { default as MapCustomButton } from './pb_map/_map_custom_button'
64
62
  export { default as Map} from './pb_map/_map'
63
+ export { default as MapCustomButton } from './pb_map/_map_custom_button'
65
64
  export { default as Message } from './pb_message/_message'
66
65
  export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
67
66
  export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
@@ -10,7 +10,7 @@ type FlexProps = {
10
10
  data?: GenericObject,
11
11
  horizontal?: "left" | "center" | "right" | "stretch" | "none",
12
12
  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
13
- htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
13
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
14
14
  id?: string,
15
15
  inline?: boolean,
16
16
  orientation?: "row" | "column",
@@ -1,4 +1,4 @@
1
- import React from 'react'
1
+ import React, { ReactSVGElement } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -27,7 +27,7 @@ type IconProps = {
27
27
  data?: {[key: string]: string},
28
28
  fixedWidth?: boolean,
29
29
  flip?: "horizontal" | "vertical" | "both" | "none",
30
- icon: string,
30
+ icon: string | ReactSVGElement,
31
31
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
32
32
  id?: string,
33
33
  inverse?: boolean,
@@ -57,7 +57,7 @@ const Icon = (props: IconProps) => {
57
57
  fixedWidth = true,
58
58
  flip = "none",
59
59
  htmlOptions = {},
60
- icon,
60
+ icon = "",
61
61
  id,
62
62
  inverse = false,
63
63
  listItem = false,
@@ -79,19 +79,19 @@ const Icon = (props: IconProps) => {
79
79
  [`fa-${size}`]: size,
80
80
  [`fa-pull-${pull}`]: pull,
81
81
  [`fa-rotate-${rotation}`]: rotation,
82
-
83
82
  }
84
83
 
85
- // Lets check and see if the icon prop is referring to a custom Power icon...
86
- // If so, then set fa-icon to "custom"
87
- // this ensures the JS will not do any further operations
88
- // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
89
- if (!customIcon) faClasses[`fa-${icon}`] = icon
90
-
84
+ const iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
85
+ const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
86
+
87
+ const isFA = !iconElement && !customIcon && !iconURL
88
+
89
+ if (isFA) faClasses[`fa-${icon}`] = icon as string
90
+
91
91
  const classes = classnames(
92
92
  flipMap[flip],
93
93
  'pb_icon_kit',
94
- customIcon ? '' : fontStyle,
94
+ (iconElement || customIcon) ? '' : fontStyle,
95
95
  faClasses,
96
96
  globalProps(props),
97
97
  className
@@ -110,11 +110,11 @@ const Icon = (props: IconProps) => {
110
110
 
111
111
  // Add a conditional here to show only the SVG if custom
112
112
  const displaySVG = (customIcon: any) => {
113
- if (customIcon)
113
+ if (iconElement || customIcon)
114
114
  return (
115
115
  <>
116
116
  {
117
- React.cloneElement(customIcon, {
117
+ React.cloneElement(iconElement || customIcon, {
118
118
  ...dataProps,
119
119
  ...htmlProps,
120
120
  className: classes,
@@ -123,7 +123,7 @@ const Icon = (props: IconProps) => {
123
123
  }
124
124
  </>
125
125
  )
126
- else if (isValidEmoji(icon))
126
+ else if (isValidEmoji(icon as string))
127
127
  return (
128
128
  <>
129
129
  <span
@@ -136,7 +136,19 @@ const Icon = (props: IconProps) => {
136
136
  </span>
137
137
  </>
138
138
  )
139
-
139
+ else if (iconURL)
140
+ return (
141
+ <>
142
+ <span
143
+ {...dataProps}
144
+ {...htmlProps}
145
+ className={classesEmoji}
146
+ id={id}
147
+ >
148
+ <img src={iconURL} />
149
+ </span>
150
+ </>
151
+ )
140
152
  else
141
153
  return (
142
154
  <>
@@ -161,4 +173,4 @@ const Icon = (props: IconProps) => {
161
173
  )
162
174
  }
163
175
 
164
- export default Icon
176
+ export default Icon
@@ -2,15 +2,9 @@
2
2
  <div class="icon-wrapper">
3
3
 
4
4
  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
5
- <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
6
- <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
7
- <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
8
- <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
9
- <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
10
-
11
- <%= pb_rails("body", props: {
12
- text: "Custom icons are compatible with other icon props (size, rotation,
13
- spin, flip, etc). Their SVG fill colors will be inherited from
14
- parent element's css color properties."
15
- } ) %>
5
+ <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
6
+ <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
7
+ <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
8
+ <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
9
+ <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
16
10
  </div>
@@ -1,33 +1,59 @@
1
1
  import React from 'react'
2
2
  import { Icon } from '../../'
3
3
 
4
- // import Icons as config from 'power-icons'
5
4
  const config = {
6
- moon: (
7
- <svg
8
- ariaHidden="true"
9
- focusable="false"
10
- role="img"
11
- viewBox="0 0 512 512"
5
+ icon: (
6
+ <svg viewBox="0 -256 1792 1792"
12
7
  xmlns="http://www.w3.org/2000/svg"
13
8
  >
14
- <path
15
- d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
16
- fill="currentColor"
17
- />
9
+ <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
10
+ <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
11
+ </g>
18
12
  </svg>
19
13
  ),
20
14
  }
21
15
 
22
16
  const IconCustom = (props) => {
23
17
  return (
24
- <div>
25
- <Icon
26
- customIcon={config.moon}
27
- size="7x"
28
- {...props}
29
- />
30
- </div>
18
+ <React.Fragment>
19
+ <p>
20
+ <Icon
21
+ icon={config.icon}
22
+ {...props}
23
+ />
24
+ </p>
25
+ <p>
26
+ <Icon
27
+ icon={config.icon}
28
+ rotation={90}
29
+ size="2x"
30
+ {...props}
31
+ />
32
+ </p>
33
+ <p>
34
+ <Icon
35
+ icon={config.icon}
36
+ size="3x"
37
+ spin
38
+ {...props}
39
+ />
40
+ </p>
41
+ <p>
42
+ <Icon
43
+ icon={config.icon}
44
+ size="5x"
45
+ {...props}
46
+ />
47
+ </p>
48
+ <p>
49
+ <Icon
50
+ flip="horizontal"
51
+ icon={config.icon}
52
+ size="5x"
53
+ {...props}
54
+ />
55
+ </p>
56
+ </React.Fragment>
31
57
  )
32
58
  }
33
59
 
@@ -1,19 +1,14 @@
1
1
  # Tips for Custom Icons
2
2
 
3
- When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
4
-
5
- Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
6
-
7
- Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
8
-
9
- Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
10
-
11
- You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
12
-
13
3
  ### React
14
4
 
15
- So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
5
+ - Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.
6
+ - Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
7
+
8
+ ```html
9
+ <img src="host.com/my/path/to/icon.svg" />
10
+ ```
16
11
 
17
12
  ### Rails
18
13
 
19
- Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
14
+ Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
@@ -1,7 +1,9 @@
1
- <% if object.custom_icon %>
2
- <%= object.render_svg(object.custom_icon) %>
3
- <% elsif object.valid_emoji(object.icon) %>
4
- <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
1
+ <% if object.is_svg? %>
2
+ <%= object.render_svg %>
3
+ <% elsif object.valid_emoji? %>
4
+ <span class="pb_icon_kit_emoji">
5
+ <%= object.icon.html_safe %>
6
+ </span>
5
7
  <% else %>
6
8
  <%= content_tag(:i, nil,
7
9
  id: object.id,
@@ -38,7 +38,7 @@ module Playbook
38
38
  prop :spin, type: Playbook::Props::Boolean,
39
39
  default: false
40
40
 
41
- def valid_emoji(icon)
41
+ def valid_emoji?
42
42
  emoji_regex = /\p{Emoji}/
43
43
  emoji_regex.match?(icon)
44
44
  end
@@ -79,15 +79,15 @@ module Playbook
79
79
  )
80
80
  end
81
81
 
82
- def render_svg(path)
83
- if File.extname(path) == ".svg"
84
- doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
85
- svg = doc.at_css "svg"
86
- svg["class"] = "pb_custom_icon " + object.custom_icon_classname
87
- raw doc
88
- else
89
- raise("Custom icon must be an svg. Please check your path and file type.")
90
- end
82
+ def render_svg
83
+ doc = Nokogiri::XML(URI.open(icon || custom_icon)) # rubocop:disable Security/Open
84
+ svg = doc.at_css "svg"
85
+ svg["class"] = "pb_custom_icon " + object.custom_icon_classname
86
+ raw doc
87
+ end
88
+
89
+ def is_svg?
90
+ (icon || custom_icon).include?(".svg")
91
91
  end
92
92
 
93
93
  private
@@ -15,7 +15,7 @@ type LabelValueProps = {
15
15
  aria?: { [key: string]: string };
16
16
  className?: string;
17
17
  dark?: boolean;
18
- data?: Record<string, unknown>;
18
+ data?: object;
19
19
  date?: Date;
20
20
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
21
  id?: string;
@@ -10,7 +10,7 @@ type LayoutPropTypes = {
10
10
  className?: string,
11
11
  collapse?: "xs" | "sm" | "md" | "lg" | "xl",
12
12
  dark?: boolean,
13
- data?: Record<string, unknown>,
13
+ data?: object,
14
14
  full?: boolean,
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  position?: "left" | "right",
@@ -168,7 +168,6 @@ const Layout = (props: LayoutPropTypes) => {
168
168
  layoutCss,
169
169
  layoutCollapseCss,
170
170
  className,
171
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
172
171
  //@ts-ignore
173
172
  globalProps(filteredProps)
174
173
  )}
@@ -16,8 +16,7 @@ test("render all color variants", () => {
16
16
  testValues.forEach((variant) => {
17
17
  const { getByTestId } = render(
18
18
  <LayoutTest data={{ testid: `test-${variant}` }}
19
- variant={variant}
20
- />
19
+ variant={variant} />
21
20
  )
22
21
  expect(getByTestId(`test-${variant}`)).toHaveClass(
23
22
  `pb_layout_kit_sidebar_size_md_left_${
@@ -34,8 +33,7 @@ test("render transparent class", () => {
34
33
 
35
34
  const { getByTestId } = render(
36
35
  <LayoutTest data={{ testid: `test-${id}` }}
37
- variant={id}
38
- />
36
+ variant={id} />
39
37
  )
40
38
  expect(getByTestId(`test-${id}`)).toHaveClass(
41
39
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -49,8 +47,7 @@ test("render all sizes variants", () => {
49
47
  testValues.forEach((size) => {
50
48
  const { getByTestId } = render(
51
49
  <LayoutTest data={{ testid: `test-${size}` }}
52
- size={size}
53
- />
50
+ size={size} />
54
51
  )
55
52
  expect(getByTestId(`test-${size}`)).toHaveClass(
56
53
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -87,8 +84,7 @@ test("render all layout variants", () => {
87
84
  testValues.forEach(({ layout, expected }) => {
88
85
  const { getByTestId } = render(
89
86
  <Layout data={{ testid: `test-${layout}` }}
90
- layout={layout}
91
- >
87
+ layout={layout}>
92
88
  <Layout.Body>
93
89
  <Card>{"Card content"}</Card>
94
90
  </Layout.Body>
@@ -12,7 +12,7 @@ type LegendProps = {
12
12
  className?: string,
13
13
  color?: string,
14
14
  dark?: boolean,
15
- data?: Record<string, unknown>,
15
+ data?: object,
16
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
17
  id?: string,
18
18
  prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
64
64
  {
65
65
  prefixText && (
66
66
  <Title
67
- dark={dark}
68
- size={4}
69
- tag="span"
70
- text={` ${prefixText} `}
71
- />
67
+ dark={dark}
68
+ size={4}
69
+ tag="span"
70
+ text={` ${prefixText} `}
71
+ />
72
72
  )
73
73
  }
74
74
  {` ${text} `}
@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
56
56
  return (
57
57
  <div
58
58
  className="Slides"
59
- onTouchEnd={onTouchEnd}
59
+ onTouchStart={onTouchStart}
60
60
  onTouchMove={onTouchMove}
61
- onTouchStart={onTouchStart}
61
+ onTouchEnd={onTouchEnd}
62
62
  >
63
63
  {
64
64
  urls.length > 1 && (
65
65
  <CircleIconButton
66
66
  className='carousel-arrow-left'
67
- dark
67
+ dark={true}
68
68
  icon="chevron-left"
69
69
  onClick={arrowLeft}
70
70
  variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
81
81
  urls.length > 1 && (
82
82
  <CircleIconButton
83
83
  className='carousel-arrow-right'
84
- dark
84
+ dark={true}
85
85
  icon="chevron-right"
86
86
  onClick={arrowRight}
87
87
  variant="link"
@@ -16,7 +16,7 @@ export default function Thumbnail({
16
16
  alt,
17
17
  width,
18
18
  url,
19
- onClick,
19
+ onClick = ()=>{},
20
20
  buttonRef,
21
21
  }: ThumbnailType): React.ReactElement {
22
22
  const activeClasses = classnames('Thumbnail', { active })
@@ -20,8 +20,8 @@ type CarouselType = {
20
20
  export default function Carousel({
21
21
  currentIndex,
22
22
  photos,
23
- onClick,
24
- onChange = () => undefined,
23
+ onClick = ()=>{},
24
+ onChange = ()=>{},
25
25
  setIndex,
26
26
  }: CarouselType): React.ReactElement {
27
27
  useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
39
39
  return (
40
40
  <div className="Lightbox">
41
41
  <Slides
42
+ setIndex={setIndex}
42
43
  current={currentIndex}
43
44
  onChange={handleChange}
44
45
  onClick={onClick}
45
- setIndex={setIndex}
46
46
  urls={photos.map((photo) => photo.url)}
47
47
  />
48
48
  {photos.length > 1 ? (
@@ -61,31 +61,23 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
61
61
 
62
62
  const HeaderBody = () => (
63
63
  <React.Fragment>
64
- <FlexItem flex="1"
65
- marginLeft="sm"
66
- >
64
+ <FlexItem flex="1" marginLeft="sm">
67
65
  <CircleIconButton
68
- dark
69
- icon={icon}
70
- onClick={handleOnLightboxClose}
71
- variant="link"
66
+ onClick={handleOnLightboxClose}
67
+ dark={true}
68
+ variant="link"
69
+ icon={icon}
72
70
  />
73
71
  </FlexItem>
74
72
  {title && text && (
75
73
  <FlexItem flex="5">
76
74
  <Flex justify="center">
77
- <Flex align="center"
78
- orientation="column"
79
- >
75
+ <Flex align="center" orientation="column">
80
76
  {typeof title === "string" ? (
81
- <Title dark
82
- paddingBottom="xxs"
83
- size={4}
84
- text={title}
85
- />
77
+ <Title dark paddingBottom="xxs" size={4} text={title} />
86
78
  ) : (
87
- <Flex className="custom-header"
88
- justify="center"
79
+ <Flex justify="center"
80
+ className="custom-header"
89
81
  >
90
82
  {title}
91
83
  </Flex>
@@ -94,8 +86,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
94
86
  {typeof text === "string" ? (
95
87
  <Caption dark>{text}</Caption>
96
88
  ) : (
97
- <Flex className="custom-header"
98
- justify="center"
89
+ <Flex justify="center"
90
+ className="custom-header"
99
91
  >
100
92
  {text}
101
93
  </Flex>
@@ -107,12 +99,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
107
99
  <FlexItem flex="1">
108
100
  <Flex justify="end">
109
101
  <Button
110
- className="nav-right-btn"
111
- dark
112
- htmlType="button"
113
- onClick={onClickRight}
114
- text={navRight}
115
- variant="link"
102
+ className="nav-right-btn"
103
+ htmlType="button"
104
+ onClick={onClickRight}
105
+ dark
106
+ variant="link"
107
+ text={navRight}
116
108
  />
117
109
  </Flex>
118
110
  </FlexItem>
@@ -122,11 +114,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
122
114
  return (
123
115
  <div className="carousel-header">
124
116
  <Flex
125
- {...ariaProps}
126
- {...dataProps}
127
- {...htmlProps}
128
- className={classnames(headerCSS, headerSpacing, className)}
129
- spacing={spacing}
117
+ {...ariaProps}
118
+ {...dataProps}
119
+ {...htmlProps}
120
+ className={classnames(headerCSS, headerSpacing, className)}
121
+ spacing={spacing}
130
122
  >
131
123
  {closeable && <HeaderBody />}
132
124
  {children}