playbook_ui 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +9 -4
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +17 -11
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +31 -5
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +20 -4
  9. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -4
  10. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +30 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +24 -11
  12. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +84 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  24. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +6 -1
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +3 -1
  31. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +3 -1
  32. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -2
  33. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +1 -1
  34. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
  36. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  39. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -1
  40. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +4 -0
  41. data/app/pb_kits/playbook/pb_form_group/form_group.rb +5 -1
  42. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  43. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  44. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  45. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  46. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  47. data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
  48. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  49. data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
  50. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  51. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  52. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  53. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  54. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  55. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  56. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  57. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  58. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  59. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  60. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  61. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  62. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  63. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  64. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  65. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  66. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  67. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  68. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  69. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
  70. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  71. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  72. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  73. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  74. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  75. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  76. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  77. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  78. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  79. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  80. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  81. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  82. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  83. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  84. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  85. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  86. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  87. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  88. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  89. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  90. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  91. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  92. data/dist/menu.yml +1 -1
  93. data/dist/playbook-rails.js +4 -4
  94. data/lib/playbook/version.rb +2 -2
  95. metadata +23 -2
@@ -70,13 +70,13 @@
70
70
  <% end %>
71
71
 
72
72
  <% if object.template != "sort_only"%>
73
- <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
73
+ <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
74
74
  <%= content %>
75
75
  <% end %>
76
76
  <%end%>
77
77
 
78
78
  <% if object.template != "filter_only"%>
79
- <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
79
+ <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
80
80
  <%= pb_rails("list") do %>
81
81
  <% object.sort_menu.each do |item| %>
82
82
  <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
@@ -10,6 +10,7 @@ module Playbook
10
10
  values: %w[default single filter_only sort_only],
11
11
  default: "default"
12
12
  prop :background, type: Playbook::Props::Boolean, default: true
13
+ prop :max_height
13
14
  prop :min_width, default: "auto"
14
15
  prop :placement, type: Playbook::Props::Enum,
15
16
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
31
32
  end
32
33
 
33
34
  def wrapper(&block)
34
- if object.background
35
+ if background
35
36
  pb_rails("card", props: { padding: "none" }, &block)
36
37
  else
37
38
  capture(&block)
@@ -57,6 +57,10 @@
57
57
  margin-bottom: 16px;
58
58
  }
59
59
 
60
+ &[class*=rails] > [class^=pb_date_picker_kit] {
61
+ margin-bottom: 0px;
62
+ }
63
+
60
64
  & > [class^=pb_date_picker_kit]:not(:last-child) {
61
65
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
62
66
  border-bottom-right-radius: 0;
@@ -7,7 +7,7 @@ module Playbook
7
7
  default: false
8
8
 
9
9
  def classname
10
- generate_classname("pb_form_group_kit", full_width_class)
10
+ generate_classname("pb_form_group_kit", full_width_class) + form_group_rails
11
11
  end
12
12
 
13
13
  private
@@ -15,6 +15,10 @@ module Playbook
15
15
  def full_width_class
16
16
  full_width ? "full" : nil
17
17
  end
18
+
19
+ def form_group_rails
20
+ " rails"
21
+ end
18
22
  end
19
23
  end
20
24
  end
@@ -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,
@@ -47,6 +47,11 @@ const flipMap = {
47
47
  none: ""
48
48
  }
49
49
 
50
+ declare global {
51
+ // eslint-disable-next-line no-var
52
+ var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
53
+ }
54
+
50
55
  const Icon = (props: IconProps) => {
51
56
  const {
52
57
  aria = {},
@@ -57,7 +62,7 @@ const Icon = (props: IconProps) => {
57
62
  fixedWidth = true,
58
63
  flip = "none",
59
64
  htmlOptions = {},
60
- icon,
65
+ icon = "",
61
66
  id,
62
67
  inverse = false,
63
68
  listItem = false,
@@ -69,6 +74,8 @@ const Icon = (props: IconProps) => {
69
74
  spin = false,
70
75
  } = props
71
76
 
77
+ let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
78
+
72
79
  const faClasses = {
73
80
  'fa-border': border,
74
81
  'fa-fw': fixedWidth,
@@ -79,19 +86,23 @@ const Icon = (props: IconProps) => {
79
86
  [`fa-${size}`]: size,
80
87
  [`fa-pull-${pull}`]: pull,
81
88
  [`fa-rotate-${rotation}`]: rotation,
89
+ }
90
+
91
+ if (!customIcon && !iconElement) {
92
+ const PowerIcon: React.FunctionComponent<any> | undefined =
93
+ window.PB_ICONS ? window.PB_ICONS[icon as string] : null
82
94
 
95
+ if (PowerIcon) {
96
+ iconElement = <PowerIcon /> as ReactSVGElement
97
+ } else {
98
+ faClasses[`fa-${icon}`] = icon as string
99
+ }
83
100
  }
84
101
 
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
-
91
102
  const classes = classnames(
92
103
  flipMap[flip],
93
- 'pb_icon_kit',
94
- customIcon ? '' : fontStyle,
104
+ (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
105
+ (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
95
106
  faClasses,
96
107
  globalProps(props),
97
108
  className
@@ -110,20 +121,22 @@ const Icon = (props: IconProps) => {
110
121
 
111
122
  // Add a conditional here to show only the SVG if custom
112
123
  const displaySVG = (customIcon: any) => {
113
- if (customIcon)
124
+ if (iconElement || customIcon)
114
125
  return (
115
126
  <>
116
127
  {
117
- React.cloneElement(customIcon, {
128
+ React.cloneElement(iconElement || customIcon, {
118
129
  ...dataProps,
119
130
  ...htmlProps,
120
131
  className: classes,
121
132
  id,
133
+ width: 'auto',
134
+ height: 'auto',
122
135
  })
123
136
  }
124
137
  </>
125
138
  )
126
- else if (isValidEmoji(icon))
139
+ else if (isValidEmoji(icon as string))
127
140
  return (
128
141
  <>
129
142
  <span
@@ -136,7 +149,6 @@ const Icon = (props: IconProps) => {
136
149
  </span>
137
150
  </>
138
151
  )
139
-
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
 
@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
4
4
 
5
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
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.
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
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__!
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
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
- ### React
14
-
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.
11
+ You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
16
12
 
17
13
  ### Rails
18
14
 
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.
15
+ 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,19 +79,36 @@ 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 asset_path
83
+ return unless Rails.application.config.respond_to?(:icon_path)
84
+ return unless Dir.entries(Rails.application.config.icon_path).include? "#{icon}.svg"
85
+
86
+ Rails.root.join(Rails.application.config.icon_path, "#{icon}.svg")
87
+ end
88
+
89
+ def render_svg
90
+ doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
91
+ svg = doc.at_css "svg"
92
+ svg["class"] = "pb_custom_icon " + object.custom_icon_classname
93
+ svg["id"] = object.id
94
+ svg["data"] = object.data
95
+ svg["aria"] = object.aria
96
+ svg["height"] = "auto"
97
+ svg["width"] = "auto"
98
+ doc.at_css("path")["fill"] = "currentColor"
99
+ raw doc
100
+ end
101
+
102
+ def is_svg?
103
+ (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
91
104
  end
92
105
 
93
106
  private
94
107
 
108
+ def svg_size
109
+ size.nil? ? "1x" : size
110
+ end
111
+
95
112
  def border_class
96
113
  border ? "fa-border" : nil
97
114
  end
@@ -40,6 +40,10 @@
40
40
  &[class*="_active"] {
41
41
  color: $primary;
42
42
  letter-spacing: normal;
43
+
44
+ [class*="_icon_right"] {
45
+ color: $white;
46
+ }
43
47
  }
44
48
  &[class*="dark"] {
45
49
  [class*="_item_text"],
@@ -5,67 +5,60 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
 
7
7
  type TableProps = {
8
- aria?: { [key: string]: string },
9
- children: React.ReactNode[] | React.ReactNode,
10
- className: string,
11
- collapse?: "sm" | "md" | "lg",
12
- container?: boolean,
13
- dark?: boolean,
14
- data?: { [key: string]: string },
15
- dataTable: boolean,
16
- disableHover?: boolean,
17
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
- id?: string,
19
- responsive?: "collapse" | "scroll" | "none",
20
- singleLine?: boolean,
21
- size?: "sm" | "md" | "lg",
22
- sticky?: boolean,
23
- striped?: boolean,
24
- verticalBorder?: boolean,
8
+ aria?: { [key: string]: string },
9
+ children: React.ReactNode[] | React.ReactNode,
10
+ className: string,
11
+ collapse?: "sm" | "md" | "lg",
12
+ container?: boolean,
13
+ dark?: boolean,
14
+ data?: { [key: string]: string },
15
+ dataTable: boolean,
16
+ disableHover?: boolean,
17
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
18
+ id?: string,
19
+ responsive?: "collapse" | "scroll" | "none",
20
+ singleLine?: boolean,
21
+ size?: "sm" | "md" | "lg",
22
+ sticky?: boolean,
23
+ striped?: boolean,
24
+ tag?: "table" | "div",
25
+ verticalBorder?: boolean,
25
26
  } & GlobalProps
26
27
 
27
28
  const Table = (props: TableProps) => {
28
- const {
29
- aria = {},
30
- children,
31
- className,
32
- collapse = 'sm',
33
- container = true,
34
- dark,
35
- data = {},
36
- dataTable = false,
37
- disableHover = false,
38
- htmlOptions = {},
39
- id,
40
- responsive = 'collapse',
41
- singleLine = false,
42
- size = 'sm',
43
- sticky = false,
44
- striped = false,
45
- verticalBorder = false,
46
- } = props
29
+ const {
30
+ aria = {},
31
+ children,
32
+ className,
33
+ collapse = 'sm',
34
+ container = true,
35
+ dark,
36
+ data = {},
37
+ dataTable = false,
38
+ disableHover = false,
39
+ htmlOptions = {},
40
+ id,
41
+ responsive = 'collapse',
42
+ singleLine = false,
43
+ size = 'sm',
44
+ sticky = false,
45
+ striped = false,
46
+ tag = 'table',
47
+ verticalBorder = false,
48
+ } = props
47
49
 
48
- const ariaProps = buildAriaProps(aria)
49
- const dataProps = buildDataProps(data)
50
- const htmlProps = buildHtmlProps(htmlOptions)
51
- const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
52
- const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
50
+ const ariaProps = buildAriaProps(aria)
51
+ const dataProps = buildDataProps(data)
52
+ const htmlProps = buildHtmlProps(htmlOptions)
53
+ const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
54
+ const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
55
+ const isTableTag = tag === 'table'
53
56
 
54
- useEffect(() => {
55
- const instance = new PbTable()
56
- instance.connect()
57
- }, [])
58
-
59
- return (
60
- <table
61
- {...ariaProps}
62
- {...dataProps}
63
- {...htmlProps}
64
- className={classnames(
65
- 'pb_table',
66
- `table-${size}`,
67
- `table-responsive-${responsive}`,
68
- {
57
+ const classNames = classnames(
58
+ 'pb_table',
59
+ `table-${size}`,
60
+ `table-responsive-${responsive}`,
61
+ {
69
62
  'table-card': container,
70
63
  'table-dark': dark,
71
64
  'data_table': dataTable,
@@ -73,17 +66,43 @@ const Table = (props: TableProps) => {
73
66
  'no-hover': disableHover,
74
67
  'sticky-header': sticky,
75
68
  'striped': striped,
76
- },
77
- globalProps(props),
78
- tableCollapseCss,
79
- verticalBorderCss,
80
- className
81
- )}
82
- id={id}
83
- >
84
- {children}
85
- </table>
86
- )
69
+ },
70
+ globalProps(props),
71
+ tableCollapseCss,
72
+ verticalBorderCss,
73
+ className
74
+ )
75
+
76
+ useEffect(() => {
77
+ const instance = new PbTable()
78
+ instance.connect()
79
+ }, [])
80
+
81
+ return (
82
+ <>
83
+ {isTableTag ? (
84
+ <table
85
+ {...ariaProps}
86
+ {...dataProps}
87
+ {...htmlProps}
88
+ className={classNames}
89
+ id={id}
90
+ >
91
+ {children}
92
+ </table>
93
+ ) : (
94
+ <div
95
+ {...ariaProps}
96
+ {...dataProps}
97
+ {...htmlProps}
98
+ className={classNames}
99
+ id={id}
100
+ >
101
+ {children}
102
+ </div>
103
+ )}
104
+ </>
105
+ )
87
106
  }
88
107
 
89
108
  export default Table
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
+ <div class="pb_table_thead">
3
+ <div class="pb_table_tr">
4
+ <div class="pb_table_th">Column 1</div>
5
+ <div class="pb_table_th">Column 2</div>
6
+ <div class="pb_table_th">Column 3</div>
7
+ <div class="pb_table_th">Column 4</div>
8
+ <div class="pb_table_th">Column 5</div>
9
+ </div>
10
+ </div>
11
+ <div class="pb_table_tbody">
12
+ <div class="pb_table_tr">
13
+ <div class="pb_table_td">Value 1</div>
14
+ <div class="pb_table_td">Value 2</div>
15
+ <div class="pb_table_td">Value 3</div>
16
+ <div class="pb_table_td">Value 4</div>
17
+ <div class="pb_table_td">Value 5</div>
18
+ </div>
19
+ <div class="pb_table_tr">
20
+ <div class="pb_table_td">Value 1</div>
21
+ <div class="pb_table_td">Value 2</div>
22
+ <div class="pb_table_td">Value 3</div>
23
+ <div class="pb_table_td">Value 4</div>
24
+ <div class="pb_table_td">Value 5</div>
25
+ </div>
26
+ <div class="pb_table_tr">
27
+ <div class="pb_table_td">Value 1</div>
28
+ <div class="pb_table_td">Value 2</div>
29
+ <div class="pb_table_td">Value 3</div>
30
+ <div class="pb_table_td">Value 4</div>
31
+ <div class="pb_table_td">Value 5</div>
32
+ </div>
33
+ </div>
34
+ <% end %>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableDiv = (props) => {
5
+ return (
6
+ <Table
7
+ size="sm"
8
+ tag="div"
9
+ {...props}
10
+ >
11
+ <div className="pb_table_thead">
12
+ <div className="pb_table_tr">
13
+ <div className="pb_table_th">{'Column 1'}</div>
14
+ <div className="pb_table_th">{'Column 2'}</div>
15
+ <div className="pb_table_th">{'Column 3'}</div>
16
+ <div className="pb_table_th">{'Column 4'}</div>
17
+ <div className="pb_table_th">{'Column 5'}</div>
18
+ </div>
19
+ </div>
20
+ <div className="pb_table_tbody">
21
+ <div className="pb_table_tr">
22
+ <div className="pb_table_td">{'Value 1'}</div>
23
+ <div className="pb_table_td">{'Value 2'}</div>
24
+ <div className="pb_table_td">{'Value 3'}</div>
25
+ <div className="pb_table_td">{'Value 4'}</div>
26
+ <div className="pb_table_td">{'Value 5'}</div>
27
+ </div>
28
+ <div className="pb_table_tr">
29
+ <div className="pb_table_td">{'Value 1'}</div>
30
+ <div className="pb_table_td">{'Value 2'}</div>
31
+ <div className="pb_table_td">{'Value 3'}</div>
32
+ <div className="pb_table_td">{'Value 4'}</div>
33
+ <div className="pb_table_td">{'Value 5'}</div>
34
+ </div>
35
+ <div className="pb_table_tr">
36
+ <div className="pb_table_td">{'Value 1'}</div>
37
+ <div className="pb_table_td">{'Value 2'}</div>
38
+ <div className="pb_table_td">{'Value 3'}</div>
39
+ <div className="pb_table_td">{'Value 4'}</div>
40
+ <div className="pb_table_td">{'Value 5'}</div>
41
+ </div>
42
+ </div>
43
+ </Table>
44
+ )
45
+ }
46
+
47
+ export default TableDiv