playbook_ui 7.0.1.pre.alpha10 → 7.1.0.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +4 -6
- data/app/controllers/playbook/application_controller.rb +1 -4
- data/app/helpers/playbook/pb_kit_helper.rb +2 -2
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +4 -3
- data/app/pb_kits/playbook/index.js +6 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +5 -1
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +4 -2
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb +1 -12
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_button/_button.jsx +5 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +7 -3
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +2 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +5 -2
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +3 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +10 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +130 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +39 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +28 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +117 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +45 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +30 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +45 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +11 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +9 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +5 -1
- data/app/pb_kits/playbook/pb_contact/_contact.jsx +5 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +5 -1
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +5 -1
- data/app/pb_kits/playbook/pb_date/date.rb +2 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +8 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb +51 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md +6 -0
- data/app/pb_kits/playbook/pb_date/docs/_description.md +2 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +8 -7
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -4
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +6 -5
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +41 -41
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +1 -0
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +5 -1
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +5 -1
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb +1 -8
- data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +31 -17
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +2 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +10 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +7 -2
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +3 -2
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +1 -1
- data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +2 -2
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +2 -2
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx +5 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +5 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +5 -1
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +4 -4
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb +1 -13
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_list/_list.jsx +3 -2
- data/app/pb_kits/playbook/pb_list/_list_item.jsx +3 -2
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +5 -1
- data/app/pb_kits/playbook/pb_message/_message.jsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +5 -2
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -2
- data/app/pb_kits/playbook/pb_person/_person.jsx +5 -1
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +12 -7
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +1 -0
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +5 -1
- data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
- data/app/pb_kits/playbook/pb_popover/index.js +3 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +4 -4
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +4 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.html.erb +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb +9 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +2 -4
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +1 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +2 -2
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +3 -3
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +6 -1
- data/app/pb_kits/playbook/pb_table/_table.jsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -8
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/_time.html.erb +23 -17
- data/app/pb_kits/playbook/pb_time/_time.jsx +22 -13
- data/app/pb_kits/playbook/pb_time/_time.scss +16 -8
- data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb +18 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +3 -3
- data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +47 -3
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +33 -4
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb +11 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +19 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +3 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +0 -7
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +38 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +12 -14
- data/app/pb_kits/playbook/pb_time/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_time/time.rb +14 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +1 -1
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +3 -3
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.jsx +5 -1
- data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +5 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +5 -5
- data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +3 -3
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +41 -43
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_toggle/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +5 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +78 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +20 -3
- data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +30 -0
- data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx +13 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx +12 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +58 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +42 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +13 -0
- data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx +13 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +22 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +26 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +84 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +98 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +11 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +5 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +1 -1
- data/app/pb_kits/playbook/react_rails_kits.js +6 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +22 -23
- data/app/pb_kits/playbook/tokens/_typography.scss +7 -7
- data/app/pb_kits/playbook/tokens/index.scss +11 -0
- data/app/pb_kits/playbook/vendor.js +8 -0
- data/lib/playbook/engine.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +67 -87
- data/app/controllers/playbook/guides_controller.rb +0 -11
- data/app/controllers/playbook/pages_controller.rb +0 -94
- data/app/controllers/playbook/samples_controller.rb +0 -40
- data/app/pb_kits/playbook/packs/application.js +0 -55
- data/app/pb_kits/playbook/packs/examples.js +0 -176
- data/app/pb_kits/playbook/packs/main.scss +0 -12
- data/app/pb_kits/playbook/packs/samples.js +0 -21
- data/app/pb_kits/playbook/packs/site_styles/_samples.scss +0 -72
- data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +0 -43
- data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +0 -146
- data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +0 -10
- data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss +0 -7
- data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +0 -531
- data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +0 -92
- data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +0 -15
- data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +0 -132
- data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -15
- data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +0 -88
- data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +0 -72
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md +0 -1
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb +0 -11
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx +0 -44
- data/app/views/layouts/playbook/_mobile_hamburger.html.erb +0 -2
- data/app/views/layouts/playbook/_nav.html.erb +0 -34
- data/app/views/layouts/playbook/_sidebar.html.erb +0 -51
- data/app/views/layouts/playbook/application.html.erb +0 -26
- data/app/views/layouts/playbook/fullscreen.html.slim +0 -10
- data/app/views/layouts/playbook/grid.html.slim +0 -10
- data/app/views/layouts/playbook/samples.html.erb +0 -19
- data/app/views/playbook/guides/create_kit.html.slim +0 -16
- data/app/views/playbook/guides/create_kit/_file_naming.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_generator.html.md +0 -6
- data/app/views/playbook/guides/create_kit/_kit_examples.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_rails.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_react.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_layout.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_view_objects.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_writing_sass.md +0 -10
- data/app/views/playbook/guides/use_nitro.html.slim +0 -6
- data/app/views/playbook/guides/use_nitro/_local.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_versions.html.md +0 -2
- data/app/views/playbook/pages/fullscreen.html.slim +0 -10
- data/app/views/playbook/pages/grid.html.slim +0 -2
- data/app/views/playbook/pages/home.html.slim +0 -4
- data/app/views/playbook/pages/kit_category_show.html.erb +0 -14
- data/app/views/playbook/pages/kit_show.html.erb +0 -33
- data/app/views/playbook/pages/kits.html.erb +0 -12
- data/app/views/playbook/pages/principals/_getting_started.html.md +0 -30
- data/app/views/playbook/pages/principles.html.slim +0 -3
- data/app/views/playbook/pages/tokens.html.slim +0 -15
- data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +0 -61
- data/app/views/playbook/pages/utilities.html.slim +0 -116
- data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +0 -15
- data/app/views/playbook/samples/collection_detail/index.html.erb +0 -169
- data/app/views/playbook/samples/collection_detail/index.jsx +0 -372
- data/app/views/playbook/samples/dashboards/index.html.erb +0 -81
- data/app/views/playbook/samples/dashboards/index.jsx +0 -130
- data/app/views/playbook/samples/filter_table/index.html.erb +0 -348
- data/app/views/playbook/samples/filter_table/index.jsx +0 -433
- data/app/views/playbook/samples/registration/index.html.erb +0 -316
- data/app/views/playbook/samples/registration/index.jsx +0 -476
- data/app/views/playbook/samples/sample_show.html.erb +0 -36
- data/lib/generators/kit/USAGE +0 -5
- data/lib/generators/kit/kit_generator.rb +0 -95
- data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
- data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
- data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
- data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
- data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_scss.erb +0 -3
- data/lib/tasks/pb_release.rake +0 -77
- data/lib/tasks/playbook_tasks.rake +0 -26
@@ -18,7 +18,7 @@
|
|
18
18
|
|
19
19
|
<%= javascript_tag defer: "defer" do %>
|
20
20
|
document.addEventListener("pb-typeahead-kit-search", function(event) {
|
21
|
-
if (!event.target.dataset.typeaheadExample2) return;
|
21
|
+
if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
|
22
22
|
|
23
23
|
const fuzzyMatch = function(string, term) {
|
24
24
|
const ratio = 0.5;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'Windows', value: '#FFA500' },
|
4
|
+
{ label: 'Siding', value: '#FF0000' },
|
5
|
+
{ label: 'Doors', value: '#00FF00' },
|
6
|
+
{ label: 'Roofs', value: '#0000FF' },
|
7
|
+
]
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
|
11
|
+
|
12
|
+
<!-- This section is an example of the available JavaScript event hooks -->
|
13
|
+
<%= javascript_tag defer: "defer" do %>
|
14
|
+
document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
|
15
|
+
console.log('Option selected')
|
16
|
+
console.dir(event.detail)
|
17
|
+
})
|
18
|
+
document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
|
19
|
+
console.log('Option removed')
|
20
|
+
console.dir(event.detail)
|
21
|
+
})
|
22
|
+
document.addEventListener("pb-typeahead-kit-result-clear", function() {
|
23
|
+
console.log('All options cleared')
|
24
|
+
})
|
25
|
+
<% end %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { Typeahead } from '../..'
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{ label: 'Windows', value: '#FFA500' },
|
8
|
+
{ label: 'Siding', value: '#FF0000' },
|
9
|
+
{ label: 'Doors', value: '#00FF00' },
|
10
|
+
{ label: 'Roofs', value: '#0000FF' },
|
11
|
+
]
|
12
|
+
|
13
|
+
const TypeaheadWithPills = () => {
|
14
|
+
return (
|
15
|
+
<>
|
16
|
+
<Typeahead
|
17
|
+
isMulti
|
18
|
+
label="Colors"
|
19
|
+
options={options}
|
20
|
+
placeholder=""
|
21
|
+
/>
|
22
|
+
</>
|
23
|
+
)
|
24
|
+
}
|
25
|
+
|
26
|
+
export default TypeaheadWithPills
|
@@ -0,0 +1,8 @@
|
|
1
|
+
Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
|
2
|
+
|
3
|
+
`{ label: "Foo", value: "bar" }`
|
4
|
+
|
5
|
+
#### Rails: Subscribing to JS Events
|
6
|
+
`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
|
7
|
+
`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
|
8
|
+
`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
|
2
|
+
|
3
|
+
<!-- This section is an example of how to provide load_options prop for using dynamic options -->
|
4
|
+
<%= javascript_tag defer: "defer" do %>
|
5
|
+
// Simple filter function, providing a list of results in the expected data format
|
6
|
+
|
7
|
+
const filterResults = function(results) {
|
8
|
+
return results.items.map(function(result) {
|
9
|
+
return {
|
10
|
+
label: result.login,
|
11
|
+
value: result.id,
|
12
|
+
}
|
13
|
+
})
|
14
|
+
}
|
15
|
+
|
16
|
+
/* Note: Make sure you assign this to window or a namespace within window
|
17
|
+
or it will not be accessible to the kit! */
|
18
|
+
|
19
|
+
window.asyncPillsPromiseOptions = function(inputValue) {
|
20
|
+
return new Promise(function(resolve) {
|
21
|
+
if (inputValue) {
|
22
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
23
|
+
.then(function(response) { return response.json() })
|
24
|
+
.then(function(results) { resolve(filterResults(results))})
|
25
|
+
} else {
|
26
|
+
resolve([])
|
27
|
+
}
|
28
|
+
})
|
29
|
+
}
|
30
|
+
<% end %>
|
@@ -0,0 +1,84 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
|
5
|
+
import {
|
6
|
+
Caption,
|
7
|
+
Typeahead,
|
8
|
+
User,
|
9
|
+
} from '../..'
|
10
|
+
|
11
|
+
/**
|
12
|
+
*
|
13
|
+
* @const filterResults
|
14
|
+
* @ignore
|
15
|
+
* @returns {[Object]} - a custom mapping of objects, minimally containing
|
16
|
+
* `value` and `label` among other possible fields
|
17
|
+
* @summary - for doc example purposes only
|
18
|
+
*/
|
19
|
+
|
20
|
+
const filterResults = (results) =>
|
21
|
+
results.items.map((result) => {
|
22
|
+
return {
|
23
|
+
label: result.login,
|
24
|
+
value: result.id,
|
25
|
+
}
|
26
|
+
})
|
27
|
+
|
28
|
+
/**
|
29
|
+
*
|
30
|
+
* @const promiseOptions
|
31
|
+
* @ignore
|
32
|
+
* @returns {Promise} - fetch API data results from Typeahead input text
|
33
|
+
* @see - https://react-select.com/home#async
|
34
|
+
* @summary - for doc example purposes only
|
35
|
+
*/
|
36
|
+
|
37
|
+
const promiseOptions = (inputValue) =>
|
38
|
+
new Promise((resolve) => {
|
39
|
+
if (inputValue) {
|
40
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
41
|
+
.then((response) => response.json())
|
42
|
+
.then((results) => resolve(filterResults(results)))
|
43
|
+
} else {
|
44
|
+
resolve([])
|
45
|
+
}
|
46
|
+
})
|
47
|
+
|
48
|
+
const TypeaheadWithPillsAsync = () => {
|
49
|
+
const [users, setUsers] = useState([])
|
50
|
+
const handleOnChange = (value) => setUsers(value)
|
51
|
+
|
52
|
+
return (
|
53
|
+
<>
|
54
|
+
<If condition={users && users.length > 0}>
|
55
|
+
<Caption
|
56
|
+
marginBottom="xs"
|
57
|
+
text="State (Users)"
|
58
|
+
/>
|
59
|
+
<For
|
60
|
+
each="user"
|
61
|
+
of={users}
|
62
|
+
>
|
63
|
+
<User
|
64
|
+
align="left"
|
65
|
+
key={user.value}
|
66
|
+
marginBottom="md"
|
67
|
+
name={user.label}
|
68
|
+
orientation="horizontal"
|
69
|
+
/>
|
70
|
+
</For>
|
71
|
+
</If>
|
72
|
+
<Typeahead
|
73
|
+
async
|
74
|
+
isMulti
|
75
|
+
label="Github Users"
|
76
|
+
loadOptions={promiseOptions}
|
77
|
+
onChange={handleOnChange}
|
78
|
+
placeholder="type the name of a Github user"
|
79
|
+
/>
|
80
|
+
</>
|
81
|
+
)
|
82
|
+
}
|
83
|
+
|
84
|
+
export default TypeaheadWithPillsAsync
|
@@ -0,0 +1,11 @@
|
|
1
|
+
#### Rails: Providing the `load_options` Promise
|
2
|
+
|
3
|
+
**Additional required props: ** `async: true`, `pills: true`
|
4
|
+
|
5
|
+
The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
|
6
|
+
|
7
|
+
#### React: `loadOptions`
|
8
|
+
|
9
|
+
**Additional required props: ** `async: true`
|
10
|
+
|
11
|
+
[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
|
2
|
+
|
3
|
+
<%= javascript_tag defer: "defer" do %>
|
4
|
+
const filterUserResults = function(results) {
|
5
|
+
return results.items.map(function(result) {
|
6
|
+
return {
|
7
|
+
imageUrl: result.avatar_url,
|
8
|
+
label: result.login,
|
9
|
+
value: result.id,
|
10
|
+
}
|
11
|
+
})
|
12
|
+
}
|
13
|
+
|
14
|
+
window.asyncPillsPromiseOptionsUsers = function(inputValue) {
|
15
|
+
return new Promise(function(resolve) {
|
16
|
+
if (inputValue) {
|
17
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
18
|
+
.then(function(response) { return response.json() })
|
19
|
+
.then(function(results) { resolve(filterUserResults(results))})
|
20
|
+
} else {
|
21
|
+
resolve([])
|
22
|
+
}
|
23
|
+
})
|
24
|
+
}
|
25
|
+
<% end %>
|
@@ -0,0 +1,98 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
|
5
|
+
import {
|
6
|
+
Caption,
|
7
|
+
Typeahead,
|
8
|
+
User,
|
9
|
+
} from '../..'
|
10
|
+
|
11
|
+
/**
|
12
|
+
*
|
13
|
+
* @const filterResults
|
14
|
+
* @ignore
|
15
|
+
* @returns {[Object]} - a custom mapping of objects, minimally containing
|
16
|
+
* `value` and `label` among other possible fields
|
17
|
+
* @summary - for doc example purposes only
|
18
|
+
*/
|
19
|
+
|
20
|
+
const filterResults = (results) =>
|
21
|
+
results.items.map((result) => {
|
22
|
+
return {
|
23
|
+
imageUrl: result.avatar_url, //add the custom field
|
24
|
+
label: result.login,
|
25
|
+
value: result.id,
|
26
|
+
}
|
27
|
+
})
|
28
|
+
|
29
|
+
/**
|
30
|
+
*
|
31
|
+
* @const promiseOptions
|
32
|
+
* @ignore
|
33
|
+
* @returns {Promise} - fetch API data results from Typeahead input text
|
34
|
+
* @see - https://react-select.com/home#async
|
35
|
+
* @summary - for doc example purposes only
|
36
|
+
*/
|
37
|
+
|
38
|
+
const promiseOptions = (inputValue) =>
|
39
|
+
new Promise((resolve) => {
|
40
|
+
if (inputValue) {
|
41
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
42
|
+
.then((response) => response.json())
|
43
|
+
.then((results) => resolve(filterResults(results)))
|
44
|
+
} else {
|
45
|
+
resolve([])
|
46
|
+
}
|
47
|
+
})
|
48
|
+
|
49
|
+
const TypeaheadWithPillsAsyncUsers = () => {
|
50
|
+
const [users, setUsers] = useState([])
|
51
|
+
const handleOnChange = (value) => setUsers(value)
|
52
|
+
|
53
|
+
/**
|
54
|
+
*
|
55
|
+
* @const handleOnMultiValueClick {function} - a custom callback for the MultiValue click
|
56
|
+
* @ignore
|
57
|
+
* @returns {null}
|
58
|
+
* @summary - for doc example purposes only
|
59
|
+
*/
|
60
|
+
const handleOnMultiValueClick = (value) => {
|
61
|
+
alert(`You removed the user: "${value.label}"`)
|
62
|
+
}
|
63
|
+
|
64
|
+
return (
|
65
|
+
<>
|
66
|
+
<If condition={users && users.length > 0}>
|
67
|
+
<Caption
|
68
|
+
marginBottom="xs"
|
69
|
+
text="State (Users)"
|
70
|
+
/>
|
71
|
+
<For
|
72
|
+
each="user"
|
73
|
+
of={users}
|
74
|
+
>
|
75
|
+
<User
|
76
|
+
align="left"
|
77
|
+
avatarUrl={user.imageUrl}
|
78
|
+
key={user.value}
|
79
|
+
marginBottom="md"
|
80
|
+
name={user.label}
|
81
|
+
orientation="horizontal"
|
82
|
+
/>
|
83
|
+
</For>
|
84
|
+
</If>
|
85
|
+
<Typeahead
|
86
|
+
async
|
87
|
+
isMulti
|
88
|
+
label="Github Users"
|
89
|
+
loadOptions={promiseOptions}
|
90
|
+
onChange={handleOnChange}
|
91
|
+
onMultiValueClick={handleOnMultiValueClick}
|
92
|
+
placeholder="type the name of a Github user"
|
93
|
+
/>
|
94
|
+
</>
|
95
|
+
)
|
96
|
+
}
|
97
|
+
|
98
|
+
export default TypeaheadWithPillsAsyncUsers
|
@@ -0,0 +1 @@
|
|
1
|
+
If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.
|
@@ -1,4 +1,13 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
-
|
4
|
-
|
3
|
+
- typeahead_default: Default
|
4
|
+
- typeahead_with_context_dark: With Context
|
5
|
+
- typeahead_with_pills: With Pills
|
6
|
+
- typeahead_with_pills_async: With Pills (Async Data)
|
7
|
+
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
8
|
+
|
9
|
+
react:
|
10
|
+
- typeahead_default: Default
|
11
|
+
- typeahead_with_pills: With Pills
|
12
|
+
- typeahead_with_pills_async: With Pills (Async Data)
|
13
|
+
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export { default as TypeaheadDefault } from './_typeahead_default'
|
2
|
+
export { default as TypeaheadWithPills } from './_typeahead_with_pills'
|
3
|
+
export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
|
4
|
+
export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'
|
@@ -5,12 +5,19 @@ module Playbook
|
|
5
5
|
class Typeahead
|
6
6
|
include Playbook::Props
|
7
7
|
|
8
|
+
prop :async, type: Playbook::Props::Boolean,
|
9
|
+
default: false
|
8
10
|
prop :label
|
11
|
+
prop :load_options
|
9
12
|
prop :name
|
10
|
-
prop :
|
13
|
+
prop :options, type: Playbook::Props::HashArray, default: []
|
14
|
+
prop :pills, type: Playbook::Props::Boolean,
|
15
|
+
default: false
|
16
|
+
|
11
17
|
prop :placeholder
|
12
18
|
prop :search_term_minimum_length, default: 3
|
13
19
|
prop :search_debounce_timeout, default: 250
|
20
|
+
prop :value
|
14
21
|
|
15
22
|
partial "pb_typeahead/typeahead"
|
16
23
|
|
@@ -25,6 +32,22 @@ module Playbook
|
|
25
32
|
pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
|
26
33
|
)
|
27
34
|
end
|
35
|
+
|
36
|
+
def typeahead_with_pills_options
|
37
|
+
base_options = {
|
38
|
+
isMulti: true,
|
39
|
+
label: label,
|
40
|
+
options: options,
|
41
|
+
placeholder: placeholder
|
42
|
+
}
|
43
|
+
|
44
|
+
base_options.merge!({
|
45
|
+
async: true,
|
46
|
+
loadOptions: load_options,
|
47
|
+
}) if async
|
48
|
+
|
49
|
+
base_options
|
50
|
+
end
|
28
51
|
end
|
29
52
|
end
|
30
53
|
end
|
@@ -26,8 +26,11 @@ const UserBadge = (props: UserBadgeProps) => {
|
|
26
26
|
const image = require(`./badges/_${badge}.svg`)
|
27
27
|
const ariaProps = buildAriaProps(aria)
|
28
28
|
const dataProps = buildDataProps(data)
|
29
|
-
const classes = classnames(
|
30
|
-
|
29
|
+
const classes = classnames(
|
30
|
+
buildCss('pb_user_badge_kit', size),
|
31
|
+
globalProps(props),
|
32
|
+
className
|
33
|
+
)
|
31
34
|
|
32
35
|
return (
|
33
36
|
<div
|
@@ -33,7 +33,7 @@ const mapColors = (array) => {
|
|
33
33
|
|
34
34
|
// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
|
35
35
|
const alignBlockElement = (event) => {
|
36
|
-
const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .
|
36
|
+
const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
|
37
37
|
const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
|
38
38
|
if (itemToMove !== null) {
|
39
39
|
itemToMove.style.height = `${event.target.chartHeight}px`
|
@@ -0,0 +1,6 @@
|
|
1
|
+
// React-Rendered Rails Kit Exports =====
|
2
|
+
export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
|
3
|
+
export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
|
4
|
+
export { default as Legend } from './pb_legend/_legend.jsx'
|
5
|
+
export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
|
6
|
+
export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
|
@@ -1,10 +1,10 @@
|
|
1
1
|
@import "./opacity";
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
/*=====================================
|
4
|
+
Base colors should not be documented.
|
5
|
+
Only document color use.
|
6
6
|
|
7
|
-
|
7
|
+
Colors -----------------------------*/
|
8
8
|
$royal: #0056CF;
|
9
9
|
$purple: #9E64E9;
|
10
10
|
$teal: #00C4D7;
|
@@ -22,11 +22,11 @@ $colors: (
|
|
22
22
|
orange: $orange
|
23
23
|
);
|
24
24
|
|
25
|
-
|
25
|
+
/* Specialty Gradient -----------------*/
|
26
26
|
$gradient_start: #1C75F2;
|
27
27
|
$gradient_end: $royal;
|
28
28
|
|
29
|
-
|
29
|
+
/* Interface colors -------------------*/
|
30
30
|
$white: #FFFFFF;
|
31
31
|
$silver: #F3F7FB;
|
32
32
|
$slate: #C1CDD6;
|
@@ -42,7 +42,7 @@ $interface_colors: (
|
|
42
42
|
|
43
43
|
);
|
44
44
|
|
45
|
-
|
45
|
+
/* Main colors ------------------------*/
|
46
46
|
$primary: $royal;
|
47
47
|
$secondary: $yellow;
|
48
48
|
$tertiary: $purple;
|
@@ -51,9 +51,9 @@ $main_colors: (
|
|
51
51
|
secondary: $secondary,
|
52
52
|
tertiary: $tertiary
|
53
53
|
);
|
54
|
-
|
54
|
+
/*=====================================
|
55
55
|
|
56
|
-
|
56
|
+
Background colors ------------------*/
|
57
57
|
$bg_light: $silver;
|
58
58
|
$bg_dark: #0a0527;
|
59
59
|
$background_colors: (
|
@@ -61,7 +61,7 @@ $background_colors: (
|
|
61
61
|
bg_dark: $bg_dark
|
62
62
|
);
|
63
63
|
|
64
|
-
|
64
|
+
/* Card colors ------------------*/
|
65
65
|
$card_light: $white;
|
66
66
|
$card_dark: rgba($white, $opacity_1);
|
67
67
|
$card_colors: (
|
@@ -74,15 +74,15 @@ $action_colors: (
|
|
74
74
|
primary_action: $primary-action
|
75
75
|
);
|
76
76
|
|
77
|
-
|
77
|
+
/* Active colors ----------------------*/
|
78
78
|
$active_light: lighten(#E5F2FF, 3.5%);
|
79
|
-
$active_dark: #0082ff;
|
79
|
+
$active_dark: #0082ff;
|
80
80
|
$active_colors: (
|
81
81
|
active_light: $active_light,
|
82
82
|
active_dark: $active_dark
|
83
83
|
);
|
84
84
|
|
85
|
-
|
85
|
+
/* Hover colors -----------------------*/
|
86
86
|
$hover_light: darken($silver, 5%);
|
87
87
|
$hover_dark: rgba($white, $opacity_2);
|
88
88
|
$hover_colors: (
|
@@ -90,7 +90,7 @@ $hover_colors: (
|
|
90
90
|
hover_dark: $hover_dark
|
91
91
|
);
|
92
92
|
|
93
|
-
|
93
|
+
/* Focus colors -----------------------*/
|
94
94
|
$focus_input_light: rgba($active_light, $opacity_5);
|
95
95
|
$focus_input_dark: rgba(#144075, $opacity_5);
|
96
96
|
$focus_input_colors: (
|
@@ -98,7 +98,7 @@ $focus_input_colors: (
|
|
98
98
|
focus_input_dark: $focus_input_dark
|
99
99
|
);
|
100
100
|
|
101
|
-
|
101
|
+
/* Border colors ----------------------*/
|
102
102
|
$border_light: #E4E8F0;
|
103
103
|
$border_dark: rgba($white, $opacity_1);
|
104
104
|
$border_colors: (
|
@@ -106,13 +106,13 @@ $border_colors: (
|
|
106
106
|
border_dark: $border_dark
|
107
107
|
);
|
108
108
|
|
109
|
-
|
109
|
+
/* Shadow colors ----------------------*/
|
110
110
|
$shadow: rgba(#3C6AAC, $opacity_2);
|
111
111
|
$shadow_colors: (
|
112
112
|
shadow: $shadow,
|
113
113
|
);
|
114
114
|
|
115
|
-
|
115
|
+
/* Text colors ------------------------*/
|
116
116
|
$text_lt_default: $charcoal;
|
117
117
|
$text_lt_light: #919EAB;
|
118
118
|
$text_lt_lighter: $slate;
|
@@ -128,7 +128,7 @@ $text_colors: (
|
|
128
128
|
text_dk_lighter: $text_dk_lighter
|
129
129
|
);
|
130
130
|
|
131
|
-
|
131
|
+
/* Data colors ------------------------*/
|
132
132
|
$data_1: $royal;
|
133
133
|
$data_2: $yellow;
|
134
134
|
$data_3: $purple;
|
@@ -148,7 +148,7 @@ $data_colors: (
|
|
148
148
|
data_8: $data_8
|
149
149
|
);
|
150
150
|
|
151
|
-
|
151
|
+
/* Status colors ----------------------*/
|
152
152
|
$success: $green;
|
153
153
|
$warning: $yellow;
|
154
154
|
$error: $red;
|
@@ -174,10 +174,10 @@ $status_color_text: (
|
|
174
174
|
primary: $primary
|
175
175
|
);
|
176
176
|
|
177
|
-
|
177
|
+
/* Link colors ------------------------*/
|
178
178
|
$primary_action: $primary;
|
179
179
|
|
180
|
-
|
180
|
+
/* Product colors ---------------------*/
|
181
181
|
$windows: $royal;
|
182
182
|
$siding: $yellow;
|
183
183
|
$doors: $teal;
|
@@ -195,7 +195,7 @@ $product_colors: (
|
|
195
195
|
insulation: $insulation
|
196
196
|
);
|
197
197
|
|
198
|
-
|
198
|
+
/* Category colors ---------------------*/
|
199
199
|
$category_1: $royal;
|
200
200
|
$category_2: #0CD2E5;
|
201
201
|
$category_3: $yellow;
|
@@ -252,7 +252,6 @@ $transparent: transparent;
|
|
252
252
|
}
|
253
253
|
|
254
254
|
:export {
|
255
|
-
|
256
255
|
@mixin export-colors($colors-list) {
|
257
256
|
@each $name, $color in $colors-list {
|
258
257
|
#{$name}: $color;
|