playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +11 -9
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +20 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +25 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +36 -16
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +18 -5
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +37 -17
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +32 -7
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +91 -40
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts +15 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +68 -6
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +42 -18
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +105 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +36 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +77 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +63 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +60 -84
- data/app/pb_kits/playbook/pb_advanced_table/index.js +125 -213
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +33 -0
- data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +20 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +23 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +99 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx +49 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx +69 -0
- data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +13 -0
- data/app/pb_kits/playbook/pb_filter/_filter.scss +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
- data/dist/chunks/_typeahead-Do6525vz.js +22 -0
- data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-DYpq0k8j.js +29 -0
- data/dist/chunks/{pb_form_validation-DyvJ8iPe.js → pb_form_validation-BUOKwfvW.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -9
- data/dist/playbook-doc.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +48 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
- data/dist/chunks/_typeahead-BlPRej0F.js +0 -22
- data/dist/chunks/_weekday_stacked-CzxoxxCR.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-D4vXIZF5.js +0 -29
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -1,36 +1,37 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
|
-
|
3
|
-
import
|
2
|
+
import circleChartTheme from '../circleChartTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
4
5
|
import Button from '../../pb_button/_button'
|
5
6
|
|
6
7
|
const CircleChartLiveData = (props) => {
|
7
8
|
const [data, setData] = useState([
|
8
9
|
{
|
9
10
|
name: 'Waiting for Calls',
|
10
|
-
|
11
|
+
y: 41,
|
11
12
|
},
|
12
13
|
{
|
13
14
|
name: 'On Call',
|
14
|
-
|
15
|
+
y: 49,
|
15
16
|
},
|
16
17
|
{
|
17
18
|
name: 'After Call',
|
18
|
-
|
19
|
+
y: 10,
|
19
20
|
},
|
20
21
|
])
|
21
22
|
|
22
23
|
const data2 = [
|
23
24
|
{
|
24
25
|
name: 'Waiting for Calls',
|
25
|
-
|
26
|
+
y: 48,
|
26
27
|
},
|
27
28
|
{
|
28
29
|
name: 'On Call',
|
29
|
-
|
30
|
+
y: 12,
|
30
31
|
},
|
31
32
|
{
|
32
33
|
name: 'After Call',
|
33
|
-
|
34
|
+
y: 140,
|
34
35
|
},
|
35
36
|
]
|
36
37
|
|
@@ -38,6 +39,12 @@ const CircleChartLiveData = (props) => {
|
|
38
39
|
setData(data2)
|
39
40
|
}
|
40
41
|
|
42
|
+
const chartOptions = {
|
43
|
+
series: [{ data: data }],
|
44
|
+
}
|
45
|
+
|
46
|
+
const options = Highcharts.merge({}, circleChartTheme, chartOptions)
|
47
|
+
|
41
48
|
return (
|
42
49
|
<div>
|
43
50
|
<Button
|
@@ -45,13 +52,12 @@ const CircleChartLiveData = (props) => {
|
|
45
52
|
text="Update Value"
|
46
53
|
{...props}
|
47
54
|
/>
|
48
|
-
<
|
49
|
-
|
50
|
-
|
51
|
-
{...props}
|
55
|
+
<HighchartsReact
|
56
|
+
highcharts={Highcharts}
|
57
|
+
options={options}
|
52
58
|
/>
|
53
59
|
</div>
|
54
60
|
)
|
55
61
|
}
|
56
62
|
|
57
|
-
export default CircleChartLiveData
|
63
|
+
export default CircleChartLiveData
|
@@ -1,32 +1,45 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
|
3
|
-
import
|
2
|
+
import circleChartTheme from '../circleChartTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
4
5
|
|
5
6
|
const dataRounded = [
|
6
7
|
{
|
7
8
|
name: 'Waiting for Calls',
|
8
|
-
|
9
|
+
y: 41,
|
9
10
|
},
|
10
11
|
{
|
11
12
|
name: 'On Call',
|
12
|
-
|
13
|
+
y: 49,
|
13
14
|
},
|
14
15
|
{
|
15
16
|
name: 'After Call',
|
16
|
-
|
17
|
+
y: 10,
|
17
18
|
},
|
18
19
|
]
|
19
20
|
|
20
|
-
const CircleChartRounded = (
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
21
|
+
const CircleChartRounded = () => {
|
22
|
+
const chartOptions = {
|
23
|
+
series: [{ data: dataRounded }],
|
24
|
+
plotOptions: {
|
25
|
+
pie: {
|
26
|
+
borderColor: null,
|
27
|
+
borderWidth: 20,
|
28
|
+
innerSize: '100%',
|
29
|
+
},
|
30
|
+
},
|
31
|
+
}
|
32
|
+
|
33
|
+
const options = Highcharts.merge({}, circleChartTheme, chartOptions)
|
34
|
+
|
35
|
+
return (
|
36
|
+
<div>
|
37
|
+
<HighchartsReact
|
38
|
+
highcharts={Highcharts}
|
39
|
+
options={options}
|
40
|
+
/>
|
41
|
+
</div>
|
42
|
+
)
|
43
|
+
}
|
31
44
|
|
32
|
-
export default CircleChartRounded
|
45
|
+
export default CircleChartRounded
|
@@ -1,47 +1,61 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
|
3
|
-
import
|
2
|
+
import circleChartTheme from '../circleChartTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
4
5
|
|
5
6
|
const dataWithLabels = [
|
6
7
|
{
|
7
8
|
name: 'Facebook',
|
8
|
-
|
9
|
+
y: 2498,
|
9
10
|
},
|
10
11
|
{
|
11
12
|
name: 'YouTube',
|
12
|
-
|
13
|
+
y: 2000,
|
13
14
|
},
|
14
15
|
{
|
15
16
|
name: 'WhatsApp',
|
16
|
-
|
17
|
+
y: 2000,
|
17
18
|
},
|
18
19
|
{
|
19
20
|
name: 'Facebook Messenger',
|
20
|
-
|
21
|
+
y: 1300,
|
21
22
|
},
|
22
23
|
{
|
23
24
|
name: 'WeChat',
|
24
|
-
|
25
|
+
y: 1165,
|
25
26
|
},
|
26
27
|
{
|
27
28
|
name: 'Instagram',
|
28
|
-
|
29
|
+
y: 1000,
|
29
30
|
},
|
30
31
|
{
|
31
32
|
name: 'Tik Tok',
|
32
|
-
|
33
|
+
y: 800,
|
33
34
|
},
|
34
35
|
]
|
35
36
|
|
36
|
-
const CircleChartWithLabels = (
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
37
|
+
const CircleChartWithLabels = () => {
|
38
|
+
const chartOptions = {
|
39
|
+
series: [{ data: dataWithLabels }],
|
40
|
+
plotOptions: {
|
41
|
+
pie: {
|
42
|
+
dataLabels: {
|
43
|
+
enabled: true,
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
const options = Highcharts.merge({}, circleChartTheme, chartOptions)
|
50
|
+
|
51
|
+
return (
|
52
|
+
<div>
|
53
|
+
<HighchartsReact
|
54
|
+
highcharts={Highcharts}
|
55
|
+
options={options}
|
56
|
+
/>
|
57
|
+
</div>
|
58
|
+
)
|
59
|
+
}
|
46
60
|
|
47
|
-
export default CircleChartWithLabels
|
61
|
+
export default CircleChartWithLabels
|
@@ -1,32 +1,41 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
|
3
|
-
import
|
2
|
+
import circleChartTheme from '../circleChartTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
4
5
|
|
5
6
|
const dataWithLegend = [{
|
6
7
|
name: 'Bugs',
|
7
|
-
|
8
|
-
|
8
|
+
y: 8,
|
9
9
|
},
|
10
10
|
{
|
11
11
|
name: 'Chores',
|
12
|
-
|
13
|
-
|
12
|
+
y: 1,
|
14
13
|
},
|
15
14
|
{
|
16
15
|
name: 'Stories',
|
17
|
-
|
18
|
-
}
|
19
|
-
|
16
|
+
y: 12,
|
17
|
+
}]
|
18
|
+
|
19
|
+
const CircleChartWithLegendKit = () => {
|
20
|
+
const chartOptions = {
|
21
|
+
series: [{ data: dataWithLegend }],
|
22
|
+
plotOptions: {
|
23
|
+
pie: {
|
24
|
+
showInLegend: true
|
25
|
+
}
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
const options = Highcharts.merge({}, circleChartTheme, chartOptions)
|
20
30
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
)
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<HighchartsReact
|
34
|
+
highcharts={Highcharts}
|
35
|
+
options={options}
|
36
|
+
/>
|
37
|
+
</div>
|
38
|
+
)
|
39
|
+
}
|
31
40
|
|
32
|
-
export default CircleChartWithLegendKit
|
41
|
+
export default CircleChartWithLegendKit
|
@@ -1,47 +1,55 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
|
3
|
-
import
|
2
|
+
import circleChartTheme from '../circleChartTheme'
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
4
5
|
|
5
6
|
const dataWithTitle = [
|
6
7
|
{
|
7
8
|
name: 'Facebook',
|
8
|
-
|
9
|
+
y: 2498,
|
9
10
|
},
|
10
11
|
{
|
11
12
|
name: 'YouTube',
|
12
|
-
|
13
|
+
y: 2000,
|
13
14
|
},
|
14
15
|
{
|
15
16
|
name: 'WhatsApp',
|
16
|
-
|
17
|
+
y: 2000,
|
17
18
|
},
|
18
19
|
{
|
19
20
|
name: 'Facebook Messenger',
|
20
|
-
|
21
|
+
y: 1300,
|
21
22
|
},
|
22
23
|
{
|
23
24
|
name: 'WeChat',
|
24
|
-
|
25
|
+
y: 1165,
|
25
26
|
},
|
26
27
|
{
|
27
28
|
name: 'Instagram',
|
28
|
-
|
29
|
+
y: 1000,
|
29
30
|
},
|
30
31
|
{
|
31
32
|
name: 'Tik Tok',
|
32
|
-
|
33
|
+
y: 800,
|
33
34
|
},
|
34
35
|
]
|
35
36
|
|
36
|
-
const
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
37
|
+
const CircleChartWithTitle = () => {
|
38
|
+
const chartOptions = {
|
39
|
+
title: { text: "Active Users on Social Media" },
|
40
|
+
series: [{ data: dataWithTitle }],
|
41
|
+
}
|
42
|
+
|
43
|
+
const options = Highcharts.merge({}, circleChartTheme, chartOptions)
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div>
|
47
|
+
<HighchartsReact
|
48
|
+
highcharts={Highcharts}
|
49
|
+
options={options}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
46
54
|
|
47
|
-
export default
|
55
|
+
export default CircleChartWithTitle
|
@@ -0,0 +1 @@
|
|
1
|
+
**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
|
@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
|
|
9
9
|
export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
|
10
10
|
export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
|
11
11
|
export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
|
12
|
-
export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
|
@@ -77,12 +77,12 @@ test('returns correct icon', () => {
|
|
77
77
|
|
78
78
|
expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
79
79
|
expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
80
|
-
expect(screen.getByTestId('test-work').querySelector('.
|
80
|
+
expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
81
81
|
expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
82
82
|
expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
83
83
|
expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
84
84
|
expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
85
|
-
expect(screen.getByTestId('test-extension').querySelector('.
|
85
|
+
expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
86
86
|
expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
87
87
|
})
|
88
88
|
|
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
|
|
3
3
|
|
4
4
|
import { ThemeProps } from './themeTypes'
|
5
5
|
|
6
|
-
import { PlotTreemapOptions } from "highcharts";
|
7
|
-
|
8
6
|
const highchartsDarkTheme: ThemeProps = {
|
9
7
|
lang: {
|
10
8
|
thousandsSep: ',',
|
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
|
|
166
164
|
marker: {
|
167
165
|
lineColor: colors.border_dark,
|
168
166
|
},
|
169
|
-
}
|
170
|
-
|
171
|
-
//TREEMAP CHART STYLES
|
172
|
-
treemap: {
|
173
|
-
layoutAlgorithm: "squarified",
|
174
|
-
allowTraversingTree: false,
|
175
|
-
animationLimit: 1000,
|
176
|
-
colors: [
|
177
|
-
colors.data_1,
|
178
|
-
colors.data_2,
|
179
|
-
colors.data_3,
|
180
|
-
colors.data_4,
|
181
|
-
colors.data_5,
|
182
|
-
colors.data_6,
|
183
|
-
colors.data_7,
|
184
|
-
colors.data_8,
|
185
|
-
],
|
186
|
-
dataLabels: {
|
187
|
-
enabled: true,
|
188
|
-
style: {
|
189
|
-
fontFamily: typography.font_family_base,
|
190
|
-
fontWeight: typography.bold,
|
191
|
-
fontSize: typography.heading_4,
|
192
|
-
},
|
193
|
-
},
|
194
|
-
levels: [
|
195
|
-
{
|
196
|
-
level: 1,
|
197
|
-
dataLabels: {
|
198
|
-
enabled: false,
|
199
|
-
},
|
200
|
-
},
|
201
|
-
],
|
202
|
-
traverseUpButton: {
|
203
|
-
position: { y: -50 },
|
204
|
-
},
|
205
|
-
} as PlotTreemapOptions,
|
167
|
+
}
|
206
168
|
},
|
207
169
|
credits: {
|
208
170
|
enabled: false
|
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
|
|
3
3
|
|
4
4
|
import { ThemeProps } from './themeTypes'
|
5
5
|
|
6
|
-
import { PlotTreemapOptions } from "highcharts";
|
7
|
-
|
8
6
|
const highchartsTheme: ThemeProps = {
|
9
7
|
lang: {
|
10
8
|
thousandsSep: ',',
|
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
|
|
165
163
|
marker: {
|
166
164
|
lineColor: '#333',
|
167
165
|
},
|
168
|
-
}
|
169
|
-
|
170
|
-
//TREEMAP CHART STYLES
|
171
|
-
treemap: {
|
172
|
-
layoutAlgorithm: "squarified",
|
173
|
-
allowTraversingTree: false,
|
174
|
-
animationLimit: 1000,
|
175
|
-
colors: [
|
176
|
-
colors.data_1,
|
177
|
-
colors.data_2,
|
178
|
-
colors.data_3,
|
179
|
-
colors.data_4,
|
180
|
-
colors.data_5,
|
181
|
-
colors.data_6,
|
182
|
-
colors.data_7,
|
183
|
-
colors.data_8,
|
184
|
-
],
|
185
|
-
dataLabels: {
|
186
|
-
enabled: true,
|
187
|
-
style: {
|
188
|
-
fontFamily: typography.font_family_base,
|
189
|
-
fontWeight: typography.bold,
|
190
|
-
fontSize: typography.heading_4,
|
191
|
-
},
|
192
|
-
},
|
193
|
-
levels: [
|
194
|
-
{
|
195
|
-
level: 1,
|
196
|
-
dataLabels: {
|
197
|
-
enabled: false,
|
198
|
-
},
|
199
|
-
},
|
200
|
-
],
|
201
|
-
traverseUpButton: {
|
202
|
-
position: { y: -50 },
|
203
|
-
},
|
204
|
-
} as PlotTreemapOptions,
|
166
|
+
}
|
205
167
|
},
|
206
168
|
credits: {
|
207
169
|
enabled: false
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<%
|
2
2
|
options = [
|
3
|
-
{ label: 'United States', value: '
|
4
|
-
{ label: 'Canada', value: '
|
5
|
-
{ label: 'Pakistan', value: '
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
6
6
|
]
|
7
7
|
|
8
8
|
%>
|
@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
|
|
5
5
|
const options = [
|
6
6
|
{
|
7
7
|
label: "United States",
|
8
|
-
value: "
|
8
|
+
value: "unitedStates",
|
9
|
+
id: "us"
|
9
10
|
},
|
10
11
|
{
|
11
12
|
label: "Canada",
|
12
|
-
value: "
|
13
|
+
value: "canada",
|
14
|
+
id: "ca"
|
13
15
|
},
|
14
16
|
{
|
15
17
|
label: "Pakistan",
|
16
|
-
value: "
|
18
|
+
value: "pakistan",
|
19
|
+
id: "pk"
|
17
20
|
}
|
18
|
-
];
|
21
|
+
];
|
19
22
|
|
20
23
|
return (
|
21
24
|
<>
|
@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
|
|
6
6
|
const options = [
|
7
7
|
{
|
8
8
|
label: "United States",
|
9
|
-
value: "
|
9
|
+
value: "unitedStates",
|
10
|
+
id: "us"
|
10
11
|
},
|
11
12
|
{
|
12
13
|
label: "Canada",
|
13
|
-
value: "
|
14
|
+
value: "canada",
|
15
|
+
id: "ca"
|
14
16
|
},
|
15
17
|
{
|
16
18
|
label: "Pakistan",
|
17
|
-
value: "
|
19
|
+
value: "pakistan",
|
20
|
+
id: "pk"
|
18
21
|
}
|
19
22
|
]
|
20
23
|
|
@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
|
|
6
6
|
const options = [
|
7
7
|
{
|
8
8
|
label: "United States",
|
9
|
-
value: "
|
9
|
+
value: "unitedStates",
|
10
|
+
id: "us"
|
10
11
|
},
|
11
12
|
{
|
12
13
|
label: "Canada",
|
13
|
-
value: "
|
14
|
+
value: "canada",
|
15
|
+
id: "ca"
|
14
16
|
},
|
15
17
|
{
|
16
18
|
label: "Pakistan",
|
17
|
-
value: "
|
19
|
+
value: "pakistan",
|
20
|
+
id: "pk"
|
18
21
|
}
|
19
22
|
];
|
20
23
|
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<%
|
2
2
|
options = [
|
3
|
-
{ label: 'United States', value: '
|
4
|
-
{ label: 'Canada', value: '
|
5
|
-
{ label: 'Pakistan', value: '
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
6
6
|
]
|
7
7
|
|
8
8
|
%>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<%
|
2
2
|
options = [
|
3
|
-
{ label: 'United States', value: '
|
4
|
-
{ label: 'Canada', value: '
|
5
|
-
{ label: 'Pakistan', value: '
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
6
6
|
]
|
7
7
|
|
8
8
|
%>
|
@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
|
|
5
5
|
const options = [
|
6
6
|
{
|
7
7
|
label: "United States",
|
8
|
-
value: "
|
8
|
+
value: "unitedStates",
|
9
|
+
id: "us"
|
9
10
|
},
|
10
11
|
{
|
11
12
|
label: "Canada",
|
12
|
-
value: "
|
13
|
+
value: "canada",
|
14
|
+
id: "ca"
|
13
15
|
},
|
14
16
|
{
|
15
17
|
label: "Pakistan",
|
16
|
-
value: "
|
18
|
+
value: "pakistan",
|
19
|
+
id: "pk"
|
17
20
|
}
|
18
|
-
];
|
21
|
+
];
|
19
22
|
|
20
23
|
return (
|
21
24
|
<>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<%
|
2
2
|
options = [
|
3
|
-
{ label: 'United States', value: '
|
4
|
-
{ label: 'Canada', value: '
|
5
|
-
{ label: 'Pakistan', value: '
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
6
6
|
]
|
7
7
|
%>
|
8
8
|
|
@@ -10,17 +10,20 @@ const DropdownError = (props) => {
|
|
10
10
|
const options = [
|
11
11
|
{
|
12
12
|
label: "United States",
|
13
|
-
value: "
|
13
|
+
value: "unitedStates",
|
14
|
+
id: "us"
|
14
15
|
},
|
15
16
|
{
|
16
17
|
label: "Canada",
|
17
|
-
value: "
|
18
|
+
value: "canada",
|
19
|
+
id: "ca"
|
18
20
|
},
|
19
21
|
{
|
20
22
|
label: "Pakistan",
|
21
|
-
value: "
|
23
|
+
value: "pakistan",
|
24
|
+
id: "pk"
|
22
25
|
}
|
23
|
-
]
|
26
|
+
];
|
24
27
|
|
25
28
|
return (
|
26
29
|
<>
|