playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +14 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/index.js +78 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -2
  11. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +44 -0
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +86 -21
  13. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +26 -3
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +41 -0
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  16. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  18. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  19. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  20. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  25. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  26. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  27. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  28. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  29. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  30. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  31. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  32. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  34. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  35. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  36. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  40. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  41. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  42. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  43. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  44. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +102 -35
  45. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +95 -26
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +4 -22
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -4
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +6 -9
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +16 -2
  74. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
  75. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +26 -0
  76. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -0
  77. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
  78. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +21 -0
  79. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
  80. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +27 -0
  81. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
  82. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
  84. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  85. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +14 -9
  86. data/app/pb_kits/playbook/pb_dropdown/index.js +153 -0
  87. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
  88. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  89. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +22 -8
  90. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +60 -31
  91. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +130 -68
  92. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  93. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  94. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
  95. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  96. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  98. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  99. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  100. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  101. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  102. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  103. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
  104. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
  105. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  106. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  107. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  108. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  109. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  110. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  111. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  112. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  113. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  114. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  115. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  116. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  117. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  118. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  119. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  120. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  121. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  122. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  123. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  124. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  125. data/app/pb_kits/playbook/playbook-rails.js +6 -0
  126. data/dist/menu.yml +1 -1
  127. data/dist/playbook-rails.js +6 -6
  128. data/lib/playbook/version.rb +2 -2
  129. metadata +65 -8
  130. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 43e4654a79f1b227d4fc17c495d5d1785f3553e75740825132f6d9f84646e530
4
- data.tar.gz: 7a974ccebc66cbd36728788f35e62adc026479a3aed4332769b131e3c88d0b4b
3
+ metadata.gz: 3ab433810efaff6299ca09b9cf731921b9a9aca68d2ab575159a56497644bf26
4
+ data.tar.gz: 22b9138457e97bcd31cbf25686ea142168d4ec2387d5b7589e191aa87a313f6a
5
5
  SHA512:
6
- metadata.gz: f9010c49c2dc56a6e85dd22dce2bfa753231a202f7517174742d6f2f9b4ff7244b226bd5f6275981801fb44c12dcc2f0e6a6c68d7e679504e44ecf18a2dd8526
7
- data.tar.gz: b5bd3da670d8307017824b24f39d9ad7e5953935b52857a8bc3af58c1feee7e827713769b4c93c84635ebdc4cc8015f92d0b495a49ffdc53c674e027887705d4
6
+ metadata.gz: ef47c745c2acf150536ad0348a2fba10ac43151d7f5b57e8e082d69f0f8fdb292825723d8f339942f36e8f9110cc54778f6590f9cd300fca5ac62bfb8d1f5a5b
7
+ data.tar.gz: 8894df86dea2d93291c622a47f0bd918ab3243b4144341239462078c5c83bf8a8f04f7722224c96cd579c8db5e720845bbc29b6a1df954d721549eb6d645bc5a
@@ -133,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
133
133
  //Theming
134
134
  export {default as mapTheme} from './pb_map/pbMapTheme'
135
135
  export {default as useCollapsible} from './pb_collapsible/useCollapsible'
136
+ export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
136
137
 
137
138
  // CSS Tokens
138
139
  export { default as borderRadius } from './tokens/exports/_border_radius.scss'
@@ -94,6 +94,20 @@
94
94
  position: relative;
95
95
  }
96
96
 
97
+ .toggle-content {
98
+ display: none;
99
+ height: 0;
100
+ padding-bottom: 0 !important;
101
+ padding-top: 0 !important;
102
+ overflow: hidden;
103
+ transition: height 300ms, padding 300ms ease-in-out;
104
+ }
105
+
106
+ .toggle-content.is-visible {
107
+ display: contents;
108
+ height: auto;
109
+ }
110
+
97
111
  &.dark {
98
112
  .bg-white {
99
113
  background: $bg_dark_card;
@@ -0,0 +1,33 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
@@ -0,0 +1,24 @@
1
+ **BETA VERSION**
2
+ This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
3
+ <br />
4
+ <br />
5
+ <br />
6
+
7
+ The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
8
+
9
+ ### table_data
10
+
11
+ `table_data` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.
12
+
13
+ For a visual of the data structure needed for `table_data`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
14
+
15
+ ### column_definitions
16
+
17
+ Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `column_definitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
18
+
19
+ - `accessor`: this is the key from your data for the value you want rendered in that column
20
+ - `label`: this is what will be rendered as the column header label
21
+
22
+ There is also one optional item that is only required if the table has nested data:
23
+
24
+ - `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
@@ -1,3 +1,8 @@
1
+ **NOTE:** The Advanced Table kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
2
+ <br />
3
+ <br />
4
+ <br />
5
+
1
6
  The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
2
7
 
3
8
  ### tableData
@@ -1,6 +1,6 @@
1
1
  examples:
2
- # rails:
3
- # - advanced_table_default: Default (Required Props)
2
+ rails:
3
+ - advanced_table_beta: Default (Required Props)
4
4
  react:
5
5
  - advanced_table_default: Default (Required Props)
6
6
  - advanced_table_loading: Loading State
@@ -0,0 +1,78 @@
1
+ import PbEnhancedElement from '../pb_enhanced_element'
2
+
3
+ const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
4
+ const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
5
+ const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
6
+ const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
7
+
8
+ export default class PbAdvancedTable extends PbEnhancedElement {
9
+ static get selector() {
10
+ return ADVANCED_TABLE_SELECTOR
11
+ }
12
+
13
+ get target() {
14
+ return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
15
+ }
16
+
17
+ connect() {
18
+ this.element.addEventListener('click', () => {
19
+ this.toggleElement(this.target)
20
+ })
21
+ }
22
+
23
+ showElement(elem) {
24
+ const getHeight = () => {
25
+ elem.style.display = 'block'
26
+ const height = elem.scrollHeight + 'px'
27
+ elem.style.display = ''
28
+ return height
29
+ }
30
+
31
+ const height = getHeight()
32
+ elem.classList.add('is-visible')
33
+ elem.style.height = height
34
+ elem.style.overflow = "hidden"
35
+
36
+ window.setTimeout(() => {
37
+ elem.style.height = ''
38
+ elem.style.overflow = "visible"
39
+ }, 250)
40
+ }
41
+
42
+ hideElement(elem) {
43
+ elem.style.height = elem.scrollHeight + 'px'
44
+
45
+ window.setTimeout(() => {
46
+ elem.style.height = '0'
47
+ elem.style.paddingTop = '0'
48
+ elem.style.paddingBottom = '0'
49
+ elem.style.overflow = "hidden"
50
+ }, 1)
51
+
52
+ window.setTimeout(() => {
53
+ elem.classList.remove('is-visible')
54
+ elem.style.overflow = ""
55
+ }, 200)
56
+ }
57
+
58
+ toggleElement(elem) {
59
+ if (elem.classList.contains('is-visible')) {
60
+ this.hideElement(elem)
61
+ this.displayDownArrow()
62
+ return
63
+ }
64
+
65
+ this.showElement(elem)
66
+ this.displayUpArrow()
67
+ }
68
+
69
+ displayDownArrow() {
70
+ this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
71
+ this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
72
+ }
73
+
74
+ displayUpArrow() {
75
+ this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
76
+ this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
77
+ }
78
+ }
@@ -14,8 +14,10 @@ module Playbook
14
14
  output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
15
15
 
16
16
  if row[:children].present?
17
- row[:children].each do |child_row|
18
- output << render_row_and_children(child_row, column_definitions, current_depth + 1)
17
+ output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
18
+ row[:children].map do |child_row|
19
+ render_row_and_children(child_row, column_definitions, current_depth + 1)
20
+ end.join.html_safe
19
21
  end
20
22
  end
21
23
 
@@ -9,8 +9,9 @@
9
9
  <div style="padding-left: <%= depth * 1.25 %>em">
10
10
  <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
11
11
  <% if index.zero? && object.row[:children].present? %>
12
- <button class="gray-icon expand-toggle-icon">
13
- <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
12
+ <button id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
13
+ <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
14
+ <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
14
15
  </button>
15
16
  <% end %>
16
17
  <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
@@ -0,0 +1,44 @@
1
+ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs") => {
2
+ let placementMapping: { [key: string]: any } = {};
3
+
4
+ switch (size) {
5
+ case 'xxs':
6
+ case 'xs':
7
+ placementMapping = {
8
+ 'top-right': { top: 'xs', right: 'xs' },
9
+ 'bottom-left': { bottom: 'xs', left: 'xs' },
10
+ 'top-left': { top: 'xs', left: 'xs' },
11
+ 'bottom-right': { bottom: 'xs', right: 'xs' },
12
+ };
13
+ break;
14
+
15
+ case 'sm':
16
+ placementMapping = {
17
+ 'top-right': { top: '0', right: 'xs' },
18
+ 'bottom-left': { bottom: '0', left: 'xs' },
19
+ 'top-left': { top: '0', left: 'xs' },
20
+ 'bottom-right': { bottom: '0', right: 'xs' },
21
+ };
22
+ break;
23
+
24
+ case 'md':
25
+ case 'lg':
26
+ placementMapping = {
27
+ 'top-right': { top: '0', right: '0' },
28
+ 'bottom-left': { bottom: '0', left: '0' },
29
+ 'top-left': { top: '0', left: '0' },
30
+ 'bottom-right': { bottom: '0', right: '0' },
31
+ };
32
+ break;
33
+
34
+ case 'xl':
35
+ placementMapping = {
36
+ 'top-right': { top: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
37
+ 'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
38
+ 'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
39
+ 'bottom-right': { bottom: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
40
+ };
41
+ break;
42
+ }
43
+ return placementMapping[placement] || {};
44
+ };
@@ -3,13 +3,26 @@ import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import { globalProps, GlobalProps } from '../utilities/globalProps'
6
+ import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
6
7
 
7
- import Image from '../pb_image/_image'
8
- import OnlineStatus from '../pb_online_status/_online_status'
8
+ import Image from "../pb_image/_image";
9
+ import OnlineStatus from "../pb_online_status/_online_status";
10
+ import Flex from "../pb_flex/_flex";
11
+ import Badge from "../pb_badge/_badge";
12
+ import IconCircle from "../pb_icon_circle/_icon_circle";
13
+ import Card from "../pb_card/_card";
9
14
 
10
15
  export type AvatarProps = {
11
16
  aria?: {[key: string]: string},
12
17
  className?: string,
18
+ componentOverlay?: {
19
+ component: "badge" | "iconCircle",
20
+ placement: string,
21
+ size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
22
+ text?: string,
23
+ variant?: string,
24
+ icon?: string
25
+ },
13
26
  data?: {[key: string]: string},
14
27
  dark?: boolean,
15
28
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -19,7 +32,7 @@ export type AvatarProps = {
19
32
  name?: string,
20
33
  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
21
34
  status?: "away" | "offline" | "online",
22
- } & GlobalProps
35
+ } & GlobalProps
23
36
 
24
37
  const firstTwoInitials = (name: string) =>
25
38
  name.split(/\s/).map((name) => name[0])
@@ -33,6 +46,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
33
46
  data = {},
34
47
  htmlOptions = {},
35
48
  name = undefined,
49
+ componentOverlay,
36
50
  id = '',
37
51
  imageAlt = '',
38
52
  imageUrl,
@@ -65,24 +79,75 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
65
79
  className={classes}
66
80
  id={id}
67
81
  >
68
- <div
69
- className="avatar_wrapper"
70
- data-initials={initials}
71
- >
72
- { canShowImage && (
73
- <Image
74
- alt={imageAlt ? imageAlt : name}
75
- onError={handleError}
76
- url={imageUrl}
77
- />
78
- )}
79
- </div>
80
- {status && (
81
- <OnlineStatus
82
- className={`size_${size}`}
83
- dark={dark}
84
- status={status}
85
- />
82
+ {componentOverlay ? (
83
+ <Flex display="display_inline_block"
84
+ position="relative"
85
+ >
86
+ <div className="avatar_wrapper"
87
+ data-initials={initials}
88
+ >
89
+ {canShowImage && (
90
+ <Image
91
+ alt={imageAlt ? imageAlt : name}
92
+ onError={handleError}
93
+ url={imageUrl}
94
+ />
95
+ )}
96
+ </div>
97
+
98
+ {componentOverlay.component === "badge" && (
99
+ <Card
100
+ borderNone
101
+ borderRadius="rounded"
102
+ padding="none"
103
+ position="absolute"
104
+ {...getPlacementProps(componentOverlay.placement, size)}
105
+ >
106
+
107
+ <Badge
108
+ rounded
109
+ text={componentOverlay.text}
110
+ variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
111
+ />
112
+ </Card>
113
+ )}
114
+ {componentOverlay.component === "iconCircle" && (
115
+ <Card
116
+ borderNone
117
+ borderRadius="rounded"
118
+ htmlOptions={{style: {padding:"2px"}}}
119
+ position="absolute"
120
+ {...getPlacementProps(componentOverlay.placement, size)}
121
+ >
122
+ <IconCircle
123
+ icon={componentOverlay.icon}
124
+ size="xxs"
125
+ variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
126
+ />
127
+ </Card>
128
+ )}
129
+ </Flex>
130
+ ) : (
131
+ <>
132
+ <div className="avatar_wrapper"
133
+ data-initials={initials}
134
+ >
135
+ {canShowImage && (
136
+ <Image
137
+ alt={imageAlt ? imageAlt : name}
138
+ onError={handleError}
139
+ url={imageUrl}
140
+ />
141
+ )}
142
+ </div>
143
+ {status && (
144
+ <OnlineStatus
145
+ className={`size_${size}`}
146
+ dark={dark}
147
+ status={status}
148
+ />
149
+ )}
150
+ </>
86
151
  )}
87
152
  </div>
88
153
  )
@@ -1,6 +1,29 @@
1
+
1
2
  <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
2
- <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
3
- <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
3
+ <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
4
+ <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
5
+ <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
6
+ <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
7
+ <% end %>
8
+ <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
9
+
10
+ <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
11
+ <% end %>
12
+ <% end %>
13
+ <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
14
+ <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
15
+ <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
16
+ <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
17
+ <% end %>
18
+ <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
19
+ <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
20
+ <% end %>
21
+ <% end %>
22
+ <% else %>
23
+ <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
24
+ <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
25
+ <% end %>
26
+ <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
4
27
  <% end %>
5
- <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
6
28
  <% end %>
29
+
@@ -3,6 +3,7 @@
3
3
  module Playbook
4
4
  module PbAvatar
5
5
  class Avatar < Playbook::KitBase
6
+ prop :component_overlay
6
7
  prop :image_url, type: Playbook::Props::String
7
8
  prop :image_alt, type: Playbook::Props::String,
8
9
  default: ""
@@ -32,6 +33,46 @@ module Playbook
32
33
  def handle_img_error
33
34
  "this.style.display = 'none'"
34
35
  end
36
+
37
+ def overlay_component
38
+ component_overlay && component_overlay[:component]
39
+ end
40
+
41
+ def specific_placement_style
42
+ placement = component_overlay[:placement] if component_overlay
43
+ placement_mapping[size][placement]
44
+ end
45
+
46
+ private
47
+
48
+ def placement_mapping
49
+ xs_styles = placement_styles("xs")
50
+ {
51
+ "xxs" => xs_styles,
52
+ "xs" => xs_styles,
53
+ "sm" => placement_styles("xs"),
54
+ "md" => placement_styles("0"),
55
+ "lg" => placement_styles("0"),
56
+ "xl" => placement_styles({ value: "xxs", inset: true }),
57
+ }
58
+ end
59
+
60
+ def placement_styles(offset)
61
+ top_bottom_offset = if offset == "xs"
62
+ "xs"
63
+ elsif offset == { value: "xxs", inset: true }
64
+ { value: "xxs", inset: true }
65
+ else
66
+ "0"
67
+ end
68
+
69
+ {
70
+ "top-right" => { top: top_bottom_offset, right: offset },
71
+ "bottom-left" => { bottom: top_bottom_offset, left: offset },
72
+ "top-left" => { top: top_bottom_offset, left: offset },
73
+ "bottom-right" => { bottom: top_bottom_offset, right: offset },
74
+ }
75
+ end
35
76
  end
36
77
  end
37
78
  end
@@ -0,0 +1,71 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "badge",
4
+ text: "12",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
12
+
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "badge",
16
+ text: "12",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
24
+
25
+ <%= pb_rails("avatar", props: {
26
+ component_overlay: {
27
+ component: "badge",
28
+ text: "12",
29
+ placement: "bottom-right"
30
+ },
31
+ name: "Terry Johnson",
32
+ size: "sm",
33
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
+ margin_bottom: "sm"
35
+ }) %>
36
+
37
+ <%= pb_rails("avatar", props: {
38
+ component_overlay: {
39
+ component: "badge",
40
+ text: "12",
41
+ placement: "bottom-left"
42
+ },
43
+ name: "Terry Johnson",
44
+ size: "md",
45
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
+ margin_bottom: "sm"
47
+ }) %>
48
+
49
+ <%= pb_rails("avatar", props: {
50
+ component_overlay: {
51
+ component: "badge",
52
+ text: "12",
53
+ placement: "top-left"
54
+ },
55
+ name: "Terry Johnson",
56
+ size: "lg",
57
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
+ margin_bottom: "sm"
59
+ }) %>
60
+
61
+ <%= pb_rails("avatar", props: {
62
+ component_overlay: {
63
+ component: "badge",
64
+ text: "12",
65
+ placement: "top-right"
66
+ },
67
+ name: "Terry Johnson",
68
+ size: "xl",
69
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
+ margin_bottom: "sm"
71
+ }) %>
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Avatar } from '../..'
3
+
4
+ const AvatarBadgeComponentOverlay = () => {
5
+ return (
6
+ <div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "badge",
10
+ placement: "top-left",
11
+ text: "12"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "badge",
21
+ placement: "top-right",
22
+ text: "12"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
29
+ <Avatar
30
+ componentOverlay={{
31
+ component: "badge",
32
+ placement: "bottom-right",
33
+ text: "12"
34
+ }}
35
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
+ marginBottom="sm"
37
+ size="sm"
38
+ />
39
+
40
+ <Avatar
41
+ componentOverlay={{
42
+ component: "badge",
43
+ placement: "bottom-left",
44
+ text: "12"
45
+ }}
46
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
+ marginBottom="sm"
48
+ size="md"
49
+ />
50
+
51
+ <Avatar
52
+ componentOverlay={{
53
+ component: "badge",
54
+ placement: "top-left",
55
+ text: "12"
56
+ }}
57
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
+ marginBottom="sm"
59
+ size="lg"
60
+ />
61
+
62
+ <Avatar
63
+ componentOverlay={{
64
+ component: "badge",
65
+ placement: "top-right",
66
+ text: "12"
67
+ }}
68
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
+ marginBottom="sm"
70
+ size="xl"
71
+ />
72
+
73
+ </div>
74
+ )
75
+ }
76
+
77
+ export default AvatarBadgeComponentOverlay