playbook_ui 7.11.1 → 7.14.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/helpers/playbook/pb_sample_helper.rb +9 -2
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +3 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +2 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +11 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +2 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +2 -1
- data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx +18 -18
- data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx +3 -3
- data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx +3 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +2 -1
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +5 -5
- data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +10 -10
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +10 -10
- data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +2 -2
- data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +3 -3
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +2 -1
- data/app/pb_kits/playbook/pb_card/_card.jsx +3 -1
- data/app/pb_kits/playbook/pb_card/_card.scss +6 -2
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +6 -0
- data/app/pb_kits/playbook/pb_card/card.rb +9 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb +53 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx +71 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md +1 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +3 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +5 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +3 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx +4 -4
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +2 -3
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +5 -6
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +4 -4
- data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx +3 -3
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx +3 -3
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +3 -3
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx +3 -3
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +3 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +6 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +6 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +6 -6
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx +7 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +5 -2
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +6 -2
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +6 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +61 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +51 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +6 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +6 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +6 -1
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +1 -1
- 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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +4 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +5 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx +17 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +5 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +5 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +9 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx +17 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +5 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +2 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +5 -3
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +3 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +4 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +18 -4
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +3 -1
- data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx +3 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx +3 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.jsx +14 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +8 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +8 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +5 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +5 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +8 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +2 -1
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +1 -0
- data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +7 -1
- data/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx +6 -1
- data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx +8 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +5 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +12 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb +4 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx +2 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx +7 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx +6 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx +150 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx +2 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx +6 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +6 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx +2 -1
- data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +2 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +3 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +2 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +2 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx +2 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx +12 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx +10 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx +2 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx +2 -1
- data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx +2 -1
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx +12 -4
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +7 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +3 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx +3 -1
- data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +5 -1
- data/app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +5 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +7 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx +5 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +8 -1
- data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx +7 -1
- data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx +7 -1
- data/app/pb_kits/playbook/pb_person/docs/_person_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx +3 -1
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx +2 -1
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +2 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +2 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +4 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +3 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +3 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx +7 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +4 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +9 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +5 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +2 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +3 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +3 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx +2 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx +2 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +54 -11
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +53 -6
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +50 -10
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx +42 -42
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +53 -58
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx +46 -52
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb +105 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx +158 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb +2 -2
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +46 -50
- data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +27 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +8 -8
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +4 -1
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +4 -1
- data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_source/docs/_source_noicon.jsx +4 -1
- data/app/pb_kits/playbook/pb_source/docs/_source_types.jsx +9 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +2 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +4 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +4 -1
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +9 -3
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +8 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +4 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +4 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +4 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +4 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_container.jsx +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx +5 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +11 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_lg.jsx +5 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_md.jsx +5 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx +5 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +8 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +10 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +61 -16
- data/app/pb_kits/playbook/pb_table/docs/_table_single_line.jsx +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sm.jsx +5 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +11 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +8 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx +3 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +7 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx +2 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb +16 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +44 -4
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +4 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.html.erb +68 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx +83 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx +2 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx +4 -1
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +7 -0
- data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +9 -1
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx +13 -1
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx +14 -2
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +17 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +5 -2
- data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx +9 -2
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +2 -1
- data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx +4 -1
- data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +6 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +47 -2
- data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +1 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +8 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context_dark.html.erb → _typeahead_with_context.html.erb} +10 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +2 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +17 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +111 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +5 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +5 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +4 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +3 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +4 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +5 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx +4 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx +13 -4
- data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx +4 -1
- data/app/pb_kits/playbook/tokens/_border_radius.scss +21 -7
- data/app/pb_kits/playbook/utilities/_max_width.scss +15 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +20 -20
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/lib/playbook.rb +1 -0
- data/lib/playbook/engine.rb +2 -0
- data/lib/playbook/markdown/template_handler.rb +45 -0
- data/lib/playbook/props.rb +23 -1
- data/lib/playbook/version.rb +1 -1
- metadata +25 -10
@@ -6,7 +6,7 @@ import {
|
|
6
6
|
Title,
|
7
7
|
} from '../..'
|
8
8
|
|
9
|
-
const PopoverScrollHeightDark = () => {
|
9
|
+
const PopoverScrollHeightDark = (props) => {
|
10
10
|
const [showPopover, setShowPopover] = useState(false)
|
11
11
|
|
12
12
|
const handleTogglePopover = () => {
|
@@ -36,15 +36,18 @@ const PopoverScrollHeightDark = () => {
|
|
36
36
|
reference={popoverTrigger}
|
37
37
|
shouldClosePopover={handleShouldClosePopover}
|
38
38
|
show={showPopover}
|
39
|
+
{...props}
|
39
40
|
>
|
40
41
|
<Body
|
41
42
|
marginBottom="sm"
|
42
43
|
text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
|
44
|
+
{...props}
|
43
45
|
/>
|
44
46
|
<Title
|
45
47
|
dark
|
46
48
|
size={4}
|
47
49
|
text="- Abraham Lincoln"
|
50
|
+
{...props}
|
48
51
|
/>
|
49
52
|
|
50
53
|
</PbReactPopover>
|
@@ -5,7 +5,7 @@ import {
|
|
5
5
|
PbReactPopover,
|
6
6
|
} from '../..'
|
7
7
|
|
8
|
-
const PopoverZIndex = () => {
|
8
|
+
const PopoverZIndex = (props) => {
|
9
9
|
const [showPopover, setShowPopover] = useState(false)
|
10
10
|
|
11
11
|
const handleTogglePopover = () => {
|
@@ -30,6 +30,7 @@ const PopoverZIndex = () => {
|
|
30
30
|
<Body
|
31
31
|
marginBottom="md"
|
32
32
|
text="I've got a z-index of 2"
|
33
|
+
{...props}
|
33
34
|
/>
|
34
35
|
</div>
|
35
36
|
<PbReactPopover
|
@@ -40,6 +41,7 @@ const PopoverZIndex = () => {
|
|
40
41
|
shouldClosePopover={handleShouldClosePopover}
|
41
42
|
show={showPopover}
|
42
43
|
zIndex={3}
|
44
|
+
{...props}
|
43
45
|
>
|
44
46
|
{'I have a custom z-index of 3'}
|
45
47
|
</PbReactPopover>
|
@@ -5,7 +5,7 @@ import {
|
|
5
5
|
PbReactPopover,
|
6
6
|
} from '../..'
|
7
7
|
|
8
|
-
const PopoverZIndexDark = () => {
|
8
|
+
const PopoverZIndexDark = (props) => {
|
9
9
|
const [showPopover, setShowPopover] = useState(false)
|
10
10
|
|
11
11
|
const handleTogglePopover = () => {
|
@@ -32,6 +32,7 @@ const PopoverZIndexDark = () => {
|
|
32
32
|
dark
|
33
33
|
marginBottom="md"
|
34
34
|
text="I've got a z-index of 2"
|
35
|
+
{...props}
|
35
36
|
/>
|
36
37
|
</div>
|
37
38
|
<PbReactPopover
|
@@ -42,6 +43,7 @@ const PopoverZIndexDark = () => {
|
|
42
43
|
shouldClosePopover={handleShouldClosePopover}
|
43
44
|
show={showPopover}
|
44
45
|
zIndex={3}
|
46
|
+
{...props}
|
45
47
|
>
|
46
48
|
{'I have a custom z-index of 3'}
|
47
49
|
</PbReactPopover>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
import { Radio } from '../../'
|
3
3
|
|
4
|
-
const RadioCustom = () => {
|
4
|
+
const RadioCustom = (props) => {
|
5
5
|
const [choice, setChoice] = useState('power')
|
6
6
|
|
7
7
|
const handleOnChange = ({ target }) => {
|
@@ -18,6 +18,7 @@ const RadioCustom = () => {
|
|
18
18
|
<Radio
|
19
19
|
className="my_custom_class"
|
20
20
|
label="Custom Power"
|
21
|
+
{...props}
|
21
22
|
>
|
22
23
|
<input
|
23
24
|
checked={choice === 'power'}
|
@@ -25,12 +26,14 @@ const RadioCustom = () => {
|
|
25
26
|
onChange={handleOnChange}
|
26
27
|
type="radio"
|
27
28
|
value="power"
|
29
|
+
{...props}
|
28
30
|
/>
|
29
31
|
</Radio>
|
30
32
|
<br />
|
31
33
|
<Radio
|
32
34
|
className="my_custom_class"
|
33
35
|
label="Custom Nitro"
|
36
|
+
{...props}
|
34
37
|
>
|
35
38
|
<input
|
36
39
|
checked={choice === 'nitro'}
|
@@ -38,12 +41,14 @@ const RadioCustom = () => {
|
|
38
41
|
onChange={handleOnChange}
|
39
42
|
type="radio"
|
40
43
|
value="nitro"
|
44
|
+
{...props}
|
41
45
|
/>
|
42
46
|
</Radio>
|
43
47
|
<br />
|
44
48
|
<Radio
|
45
49
|
className="my_custom_class"
|
46
50
|
label="Custom Google"
|
51
|
+
{...props}
|
47
52
|
>
|
48
53
|
<input
|
49
54
|
checked={choice === 'google'}
|
@@ -51,6 +56,7 @@ const RadioCustom = () => {
|
|
51
56
|
onChange={handleOnChange}
|
52
57
|
type="radio"
|
53
58
|
value="google"
|
59
|
+
{...props}
|
54
60
|
/>
|
55
61
|
</Radio>
|
56
62
|
</div>
|
@@ -1,11 +1,17 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { RichTextEditor } from '../../'
|
3
3
|
|
4
|
-
const RichTextEditorFocus = () => (
|
4
|
+
const RichTextEditorFocus = (props) => (
|
5
5
|
<>
|
6
|
-
<RichTextEditor
|
6
|
+
<RichTextEditor
|
7
|
+
focus
|
8
|
+
{...props}
|
9
|
+
/>
|
7
10
|
<br />
|
8
|
-
<RichTextEditor
|
11
|
+
<RichTextEditor
|
12
|
+
focus
|
13
|
+
{...props}
|
14
|
+
/>
|
9
15
|
</>
|
10
16
|
)
|
11
17
|
export default RichTextEditorFocus
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { RichTextEditor } from '../../'
|
3
3
|
|
4
|
-
const RichTextEditorSticky = () => (
|
4
|
+
const RichTextEditorSticky = (props) => (
|
5
5
|
<div>
|
6
6
|
<RichTextEditor
|
7
7
|
id="sticky"
|
8
8
|
sticky
|
9
9
|
value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
|
10
|
+
{...props}
|
10
11
|
/>
|
11
12
|
</div>
|
12
13
|
)
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
|
|
2
2
|
import { RichTextEditor, Select } from '../../'
|
3
3
|
import { changelog, release } from './templates.js'
|
4
4
|
|
5
|
-
const RichTextEditorTemplates = () => {
|
5
|
+
const RichTextEditorTemplates = (props) => {
|
6
6
|
const [editorContent, setEditorContent] = useState('')
|
7
7
|
|
8
8
|
const handleChange = (event) => {
|
@@ -27,10 +27,12 @@ const RichTextEditorTemplates = () => {
|
|
27
27
|
label="Template"
|
28
28
|
onChange={handleChange}
|
29
29
|
options={options}
|
30
|
+
{...props}
|
30
31
|
/>
|
31
32
|
<RichTextEditor
|
32
33
|
id="template"
|
33
34
|
template={editorContent}
|
35
|
+
{...props}
|
34
36
|
/>
|
35
37
|
</div>
|
36
38
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectBlank = () => {
|
4
|
+
const SelectBlank = (props) => {
|
5
5
|
const options = [
|
6
6
|
{ value: 'USA' },
|
7
7
|
{ value: 'Canada' },
|
@@ -16,6 +16,7 @@ const SelectBlank = () => {
|
|
16
16
|
label="Where do you live"
|
17
17
|
name="location"
|
18
18
|
options={options}
|
19
|
+
{...props}
|
19
20
|
/>
|
20
21
|
</div>
|
21
22
|
)
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectCustomSelect = () => {
|
4
|
+
const SelectCustomSelect = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Select label="Favorite Holiday">
|
8
8
|
<select
|
9
9
|
id="holiday"
|
10
10
|
name="holiday"
|
11
|
+
{...props}
|
11
12
|
>
|
12
13
|
<option value="1">{'Christmas'}</option>
|
13
14
|
<option value="2">{'Thanksgiving'}</option>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectDefault = () => {
|
4
|
+
const SelectDefault = (props) => {
|
5
5
|
const options = [
|
6
6
|
{
|
7
7
|
value: '1',
|
@@ -23,6 +23,7 @@ const SelectDefault = () => {
|
|
23
23
|
label="Favorite Food"
|
24
24
|
name="food"
|
25
25
|
options={options}
|
26
|
+
{...props}
|
26
27
|
/>
|
27
28
|
</div>
|
28
29
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectDisabled = () => {
|
4
|
+
const SelectDisabled = (props) => {
|
5
5
|
const options = [
|
6
6
|
{ value: 'Apple Pie' },
|
7
7
|
{ value: 'Cookies' },
|
@@ -16,6 +16,7 @@ const SelectDisabled = () => {
|
|
16
16
|
label="Favorite Dessert"
|
17
17
|
name="dessert"
|
18
18
|
options={options}
|
19
|
+
{...props}
|
19
20
|
/>
|
20
21
|
</div>
|
21
22
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectDisabledOptions = () => {
|
4
|
+
const SelectDisabledOptions = (props) => {
|
5
5
|
const options = [
|
6
6
|
{
|
7
7
|
value: '1',
|
@@ -38,6 +38,7 @@ const SelectDisabledOptions = () => {
|
|
38
38
|
name="coffee"
|
39
39
|
options={options}
|
40
40
|
value="2"
|
41
|
+
{...props}
|
41
42
|
/>
|
42
43
|
</div>
|
43
44
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Body, Select } from '../..'
|
3
3
|
|
4
|
-
const SelectError = () => {
|
4
|
+
const SelectError = (props) => {
|
5
5
|
const options = [
|
6
6
|
{
|
7
7
|
value: '1',
|
@@ -25,10 +25,12 @@ const SelectError = () => {
|
|
25
25
|
name="food"
|
26
26
|
options={options}
|
27
27
|
value="2"
|
28
|
+
{...props}
|
28
29
|
/>
|
29
30
|
<Body
|
30
31
|
error="Please make a valid selection"
|
31
32
|
status="negative"
|
33
|
+
{...props}
|
32
34
|
/>
|
33
35
|
</div>
|
34
36
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectRequired = () => {
|
4
|
+
const SelectRequired = (props) => {
|
5
5
|
const options = [
|
6
6
|
{ value: 'Left' },
|
7
7
|
{ value: 'Right' },
|
@@ -16,6 +16,7 @@ const SelectRequired = () => {
|
|
16
16
|
name="shoe"
|
17
17
|
options={options}
|
18
18
|
required
|
19
|
+
{...props}
|
19
20
|
/>
|
20
21
|
</div>
|
21
22
|
)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Select } from '../../'
|
3
3
|
|
4
|
-
const SelectValueTextSame = () => {
|
4
|
+
const SelectValueTextSame = (props) => {
|
5
5
|
const options = [
|
6
6
|
{ value: 'Football' },
|
7
7
|
{ value: 'Baseball' },
|
@@ -15,6 +15,7 @@ const SelectValueTextSame = () => {
|
|
15
15
|
label="Favorite Sport"
|
16
16
|
name="sports"
|
17
17
|
options={options}
|
18
|
+
{...props}
|
18
19
|
/>
|
19
20
|
</div>
|
20
21
|
)
|
@@ -9,17 +9,60 @@
|
|
9
9
|
<%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
|
10
10
|
<% end %>
|
11
11
|
|
12
|
-
<label for="<%= object.input_id_present %>">
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
12
|
+
<label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
|
13
|
+
<div class="buffer">
|
14
|
+
<% if object.variant == "display_input" %>
|
15
|
+
<%= pb_rails("flex", props: { vertical: "center" }) do %>
|
16
|
+
<%= pb_rails("flex", props: {
|
17
|
+
orientation: "column",
|
18
|
+
padding: "sm",
|
19
|
+
padding_right: "xs",
|
20
|
+
vertical: "center",
|
21
|
+
}) do %>
|
22
|
+
<%= pb_rails(object.input, props: { text: "" }) do %>
|
23
|
+
<input <%= object.is_checked %> <%= object.is_disabled %> id="checkbox-styled" name="<%= object.name %>-display" type="<%= object.input %>">
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<div class="separator"></div>
|
27
|
+
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
|
28
|
+
<% if object.children.nil? %>
|
29
|
+
<%= pb_rails("body", props: { text: object.text }) %>
|
30
|
+
<% else %>
|
31
|
+
<%= capture(&object.children) %>
|
32
|
+
<% end %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
<% else %>
|
36
|
+
<% if object.children.nil? %>
|
37
|
+
<%= pb_rails("body", props: { text: object.text }) %>
|
38
|
+
<% else %>
|
39
|
+
<%= capture(&object.children) %>
|
40
|
+
<% end %>
|
41
|
+
<% if object.icon %>
|
42
|
+
<div class="pb_selectable_card_circle">
|
43
|
+
<%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
|
44
|
+
</div>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
</div>
|
23
48
|
</label>
|
24
49
|
|
50
|
+
<% if object.variant == "display_input" %>
|
51
|
+
<script>
|
52
|
+
var outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
|
53
|
+
var innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
|
54
|
+
|
55
|
+
outerCheckbox.addEventListener("change", () => {
|
56
|
+
const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
|
57
|
+
const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
|
58
|
+
innerCheckbox.checked = outerCheckbox.checked
|
59
|
+
})
|
60
|
+
|
61
|
+
innerCheckbox.addEventListener("change", () => {
|
62
|
+
const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
|
63
|
+
const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
|
64
|
+
outerCheckbox.checked = innerCheckbox.checked
|
65
|
+
})
|
66
|
+
</script>
|
67
|
+
<% end %>
|
25
68
|
<% end %>
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { Icon } from '../'
|
5
|
+
import { Card, Checkbox, Flex, Icon, Radio } from '../'
|
6
6
|
|
7
7
|
import type { InputCallback } from '../types'
|
8
8
|
|
@@ -20,6 +20,7 @@ type SelectableCardProps = {
|
|
20
20
|
checked: boolean,
|
21
21
|
children?: array<React.ReactChild>,
|
22
22
|
className?: string,
|
23
|
+
dark?: boolean,
|
23
24
|
data: object,
|
24
25
|
disabled?: boolean,
|
25
26
|
icon?: boolean,
|
@@ -30,6 +31,7 @@ type SelectableCardProps = {
|
|
30
31
|
onChange: InputCallback<HTMLInputElement>,
|
31
32
|
text?: string,
|
32
33
|
value?: string,
|
34
|
+
variant?: string,
|
33
35
|
}
|
34
36
|
|
35
37
|
const SelectableCard = ({
|
@@ -37,6 +39,7 @@ const SelectableCard = ({
|
|
37
39
|
checked = false,
|
38
40
|
children,
|
39
41
|
className,
|
42
|
+
dark = false,
|
40
43
|
data = {},
|
41
44
|
disabled = false,
|
42
45
|
icon = false,
|
@@ -46,6 +49,7 @@ const SelectableCard = ({
|
|
46
49
|
onChange = noop,
|
47
50
|
text,
|
48
51
|
value,
|
52
|
+
variant = 'default',
|
49
53
|
...props
|
50
54
|
}: SelectableCardProps) => {
|
51
55
|
const ariaProps = buildAriaProps(aria)
|
@@ -55,7 +59,9 @@ const SelectableCard = ({
|
|
55
59
|
{ 'checked': checked,
|
56
60
|
'disabled': disabled,
|
57
61
|
'enabled': !disabled }),
|
58
|
-
|
62
|
+
dark ? 'dark' : '',
|
63
|
+
className
|
64
|
+
)
|
59
65
|
|
60
66
|
const displayIcon = () => {
|
61
67
|
if (icon === true) {
|
@@ -70,9 +76,16 @@ const SelectableCard = ({
|
|
70
76
|
}
|
71
77
|
}
|
72
78
|
|
73
|
-
const
|
79
|
+
const inputRef = React.createRef()
|
80
|
+
// Delegate clicks to hidden input from visible one
|
81
|
+
const handleClick = () => {
|
82
|
+
inputRef.current.click()
|
83
|
+
}
|
74
84
|
|
85
|
+
const inputType = multi ? 'checkbox' : 'radio'
|
75
86
|
const inputIdPresent = inputId !== null ? inputId : name
|
87
|
+
const Input = multi ? Checkbox : Radio
|
88
|
+
const labelProps = variant === 'displayInput' ? Object.assign(props, { padding: 'none' }) : props
|
76
89
|
|
77
90
|
return (
|
78
91
|
<div
|
@@ -87,15 +100,49 @@ const SelectableCard = ({
|
|
87
100
|
id={inputIdPresent}
|
88
101
|
name={name}
|
89
102
|
onChange={onChange}
|
103
|
+
ref={inputRef}
|
90
104
|
type={inputType}
|
91
105
|
value={value}
|
92
106
|
/>
|
107
|
+
|
93
108
|
<label
|
94
|
-
className={globalProps(
|
109
|
+
className={globalProps(labelProps)}
|
95
110
|
htmlFor={inputIdPresent}
|
96
111
|
>
|
97
|
-
|
98
|
-
|
112
|
+
<div className="buffer">
|
113
|
+
<Choose>
|
114
|
+
<When condition={variant === 'displayInput'}>
|
115
|
+
<Flex vertical="center">
|
116
|
+
<Flex
|
117
|
+
orientation="column"
|
118
|
+
padding="sm"
|
119
|
+
paddingRight="xs"
|
120
|
+
vertical="center"
|
121
|
+
>
|
122
|
+
<Input dark={dark}>
|
123
|
+
<input
|
124
|
+
checked={checked}
|
125
|
+
disabled={disabled}
|
126
|
+
onClick={handleClick}
|
127
|
+
type={inputType}
|
128
|
+
/>
|
129
|
+
</Input>
|
130
|
+
</Flex>
|
131
|
+
<div className="separator" />
|
132
|
+
<Card.Body
|
133
|
+
dark={dark}
|
134
|
+
padding="sm"
|
135
|
+
>
|
136
|
+
{text || children}
|
137
|
+
</Card.Body>
|
138
|
+
</Flex>
|
139
|
+
</When>
|
140
|
+
<Otherwise>
|
141
|
+
{text || children}
|
142
|
+
</Otherwise>
|
143
|
+
</Choose>
|
144
|
+
{displayIcon()}
|
145
|
+
</div>
|
99
146
|
</label>
|
100
147
|
</div>
|
101
148
|
)
|