playbook_ui 13.25.0 → 13.26.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +10 -14
- data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -9
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -6
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
- data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
- data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -7
- data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -7
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
- data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -6
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -7
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
- data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
- data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -6
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
- data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -7
- data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -6
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +100 -34
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +93 -26
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +4 -22
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +5 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +6 -9
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
- data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
- data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +14 -9
- data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +22 -8
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +56 -29
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +130 -68
- data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -6
- data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -7
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
- data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
- data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
- data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
- data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
- data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
- data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
- data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
- data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
- data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
- data/app/pb_kits/playbook/pb_list/item.html.erb +2 -8
- data/app/pb_kits/playbook/pb_list/list.html.erb +2 -8
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -6
- data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
- data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
- data/app/pb_kits/playbook/pb_nav/item.html.erb +3 -14
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -6
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -6
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
- data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
- data/app/pb_kits/playbook/pb_person/person.html.erb +7 -12
- data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
- data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -6
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +3 -6
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
- data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -8
- data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -6
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -5
- data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
- data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
- data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +6 -16
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +6 -16
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +6 -16
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -13
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +6 -16
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
- data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
- data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +3 -7
- data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
- data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
- data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
- data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
- data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
- data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -5
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
- data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
- data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/kit_base.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +33 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 513dedb641f87bf07610bf4bd6234671546cd7dad41022efad3019d85934b45c
|
4
|
+
data.tar.gz: 2ef935c0bfaba7bd80dc47bbaa1b8b4e89aac61c731ec8fbd88440e2557d57fd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1d0e17718945981e3002ebc05b9e9490be10884531df9e1f8ee65515e60d76a6edea5c27e68c50d205c5963047c74786f8d6e3e584b8bc0a76a8373636cb4049
|
7
|
+
data.tar.gz: 1ea1ae2275760805735801a334037a13dc60527fd431a4b985bca64cf85cf1f55ca95f89432c79a5f5593cad4ceed3967d5d1615d71f35daf6dc7d59f79ef991
|
@@ -133,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
|
|
133
133
|
//Theming
|
134
134
|
export {default as mapTheme} from './pb_map/pbMapTheme'
|
135
135
|
export {default as useCollapsible} from './pb_collapsible/useCollapsible'
|
136
|
+
export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
|
136
137
|
|
137
138
|
// CSS Tokens
|
138
139
|
export { default as borderRadius } from './tokens/exports/_border_radius.scss'
|
@@ -1,14 +1,10 @@
|
|
1
|
-
<%=
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
<%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
|
12
|
-
<% end %>
|
13
|
-
<% end %>
|
14
|
-
<% end %>
|
1
|
+
<%= pb_content_tag do %>
|
2
|
+
<%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
|
3
|
+
<% if content.present? %>
|
4
|
+
<% content.presence %>
|
5
|
+
<% else %>
|
6
|
+
<%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
|
7
|
+
<%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
@@ -1,9 +1,5 @@
|
|
1
|
-
<%=
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
<% object.table_data.each do |row| %>
|
7
|
-
<%= render_row_and_children(row, object.column_definitions) %>
|
8
|
-
<% end %>
|
9
|
-
<% end %>
|
1
|
+
<%= pb_content_tag do %>
|
2
|
+
<% object.table_data.each do |row| %>
|
3
|
+
<%= render_row_and_children(row, object.column_definitions) %>
|
4
|
+
<% end %>
|
5
|
+
<% end %>
|
@@ -1,8 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id) do %>
|
1
|
+
<%= pb_content_tag do %>
|
6
2
|
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
7
3
|
<% object.column_definitions.each_with_index do |item, index| %>
|
8
4
|
<%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
|
@@ -17,4 +13,4 @@
|
|
17
13
|
<% end %>
|
18
14
|
<% end %>
|
19
15
|
<% end %>
|
20
|
-
<% end %>
|
16
|
+
<% end %>
|
@@ -1,8 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id) do %>
|
1
|
+
<%= pb_content_tag do %>
|
6
2
|
<% object.column_definitions.each_with_index do |column, index| %>
|
7
3
|
<%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
|
8
4
|
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
|
@@ -34,4 +30,4 @@
|
|
34
30
|
<% end %>
|
35
31
|
<% end %>
|
36
32
|
<% end %>
|
37
|
-
<% end %>
|
33
|
+
<% end %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
id: object.id,
|
4
|
-
data: object.data,
|
5
|
-
class: object.classname,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<% if object.tooltip_text.present? %>
|
8
3
|
<%= pb_rails("tooltip", props: {
|
9
4
|
trigger_element_id: object.tooltip_id,
|
@@ -1,23 +1,14 @@
|
|
1
1
|
<% if object.image_url.present? %>
|
2
|
-
<%=
|
3
|
-
aria: object.aria,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
class: object.classname,
|
2
|
+
<%= pb_content_tag(object.tag,
|
7
3
|
style: "background-image: url('#{object.image_url}');
|
8
4
|
background-repeat: #{object.background_repeat};
|
9
5
|
background-size: #{object.background_size};
|
10
6
|
background-position: #{object.background_position};",
|
11
|
-
**combined_html_options
|
12
7
|
) do %>
|
13
8
|
<%= content.presence %>
|
14
9
|
<% end %>
|
15
10
|
<% else %>
|
16
|
-
<%=
|
17
|
-
aria: object.aria,
|
18
|
-
data: object.data,
|
19
|
-
id: object.id,
|
20
|
-
class: object.classname,
|
11
|
+
<%= pb_content_tag(object.tag,
|
21
12
|
style: object.custom_background_color
|
22
13
|
) do %>
|
23
14
|
<%= content.presence %>
|
@@ -102,7 +102,7 @@ const BarGraph = ({
|
|
102
102
|
max: yAxisMax,
|
103
103
|
opposite: false,
|
104
104
|
title: {
|
105
|
-
text:
|
105
|
+
text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
|
106
106
|
},
|
107
107
|
plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
|
108
108
|
value: 0,
|
@@ -15,7 +15,7 @@ type BodyProps = {
|
|
15
15
|
data?: {[key: string]: string},
|
16
16
|
highlightedText?: string[],
|
17
17
|
highlighting?: boolean,
|
18
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
18
|
+
htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
|
19
19
|
id?: string,
|
20
20
|
status?: 'neutral' | 'negative' | 'positive',
|
21
21
|
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
aria: object.aria,
|
6
|
-
**combined_html_options) do%>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
|
8
3
|
<%= content.presence %>
|
9
4
|
<% end %>
|
@@ -17,7 +17,7 @@ $pb_button_sizes: (
|
|
17
17
|
@each $name, $size in $pb_button_sizes {
|
18
18
|
&[class*=size_#{$name}] {
|
19
19
|
font-size: $size;
|
20
|
-
padding: calc(#{$size} / 2) calc(#{$size} * 2.42)
|
20
|
+
padding: calc(#{$size} / 2) calc(#{$size} * 2.42);
|
21
21
|
@if $name == "sm" {
|
22
22
|
min-height: 0;
|
23
23
|
}
|
@@ -1,6 +1,5 @@
|
|
1
|
-
<%=
|
2
|
-
object.tag == "button" ? object.options : object.link_options
|
3
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(object.tag,
|
2
|
+
object.tag == "button" ? object.options : object.link_options) do %>
|
4
3
|
<% if object.variant === "reaction" %>
|
5
4
|
<% if icon && object.valid_emoji(object.icon) %>
|
6
5
|
<%= pb_rails("flex", props:{ align: "center" }) do %>
|
@@ -74,6 +74,31 @@ $transition: $transition_cubic;
|
|
74
74
|
opacity: $opacity_10;
|
75
75
|
}
|
76
76
|
}
|
77
|
+
|
78
|
+
&:disabled ~ .pb_checkbox_checkmark {
|
79
|
+
cursor: not-allowed;
|
80
|
+
background-color: mix($charcoal, $white, 5%);
|
81
|
+
border-color: $border_light;
|
82
|
+
|
83
|
+
& ~ .pb_checkbox_label {
|
84
|
+
cursor: not-allowed;
|
85
|
+
color: $text_lt_light;
|
86
|
+
}
|
87
|
+
& ~ .pb_checkbox_label .pb_body_kit {
|
88
|
+
cursor: not-allowed;
|
89
|
+
color: $text_lt_light;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
&:disabled:checked ~ .pb_checkbox_checkmark {
|
94
|
+
background-color: $neutral;
|
95
|
+
border-color: $neutral;
|
96
|
+
}
|
97
|
+
|
98
|
+
&:disabled:checked:hover ~ .pb_checkbox_checkmark {
|
99
|
+
background-color: $neutral;
|
100
|
+
border-color: $neutral;
|
101
|
+
}
|
77
102
|
}
|
78
103
|
|
79
104
|
&.dark {
|
@@ -81,6 +106,30 @@ $transition: $transition_cubic;
|
|
81
106
|
&:focus ~ .pb_checkbox_checkmark {
|
82
107
|
box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
|
83
108
|
}
|
109
|
+
|
110
|
+
&:disabled ~ .pb_checkbox_checkmark {
|
111
|
+
cursor: not-allowed;
|
112
|
+
background-color: mix($charcoal, $white, 80%);
|
113
|
+
border: 2px solid $border_dark;
|
114
|
+
|
115
|
+
& ~ .pb_checkbox_label {
|
116
|
+
cursor: not-allowed;
|
117
|
+
color: $text_dk_light;
|
118
|
+
}
|
119
|
+
& ~ .pb_checkbox_label .pb_body_kit {
|
120
|
+
cursor: not-allowed;
|
121
|
+
color: $text_dk_light;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
&:disabled:checked ~ .pb_checkbox_checkmark {
|
126
|
+
background-color: $border_dark;
|
127
|
+
}
|
128
|
+
|
129
|
+
&:disabled:checked:hover ~ .pb_checkbox_checkmark {
|
130
|
+
background-color: $border_dark;
|
131
|
+
border-color: $border_dark;
|
132
|
+
}
|
84
133
|
}
|
85
134
|
|
86
135
|
@media (hover:hover) {
|
@@ -12,6 +12,7 @@ type CheckboxProps = {
|
|
12
12
|
className?: string,
|
13
13
|
dark?: boolean,
|
14
14
|
data?: {[key: string]: string},
|
15
|
+
disabled?: boolean,
|
15
16
|
error?: boolean,
|
16
17
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
17
18
|
id?: string,
|
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
31
32
|
className,
|
32
33
|
dark = false,
|
33
34
|
data = {},
|
35
|
+
disabled = false,
|
34
36
|
error = false,
|
35
37
|
htmlOptions = {},
|
36
38
|
id,
|
@@ -67,6 +69,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
67
69
|
return (
|
68
70
|
<input
|
69
71
|
defaultChecked={checked}
|
72
|
+
disabled={disabled}
|
70
73
|
name={name}
|
71
74
|
onChange={onChange}
|
72
75
|
ref={checkRef}
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
**combined_html_options
|
6
|
-
) do %>
|
1
|
+
<%= pb_content_tag(:label) do %>
|
7
2
|
<%= content.presence || object.input %>
|
8
3
|
<% if object.indeterminate %>
|
9
4
|
<span class="pb_checkbox_indeterminate">
|
@@ -9,6 +9,7 @@ module Playbook
|
|
9
9
|
prop :text
|
10
10
|
prop :value
|
11
11
|
prop :name
|
12
|
+
prop :disabled, type: Playbook::Props::Boolean, default: false
|
12
13
|
|
13
14
|
prop :input_options, type: Playbook::Props::HashProp,
|
14
15
|
default: {}
|
@@ -26,7 +27,7 @@ module Playbook
|
|
26
27
|
end
|
27
28
|
|
28
29
|
def input
|
29
|
-
check_box_tag(name, value, checked, input_options)
|
30
|
+
check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
|
30
31
|
end
|
31
32
|
|
32
33
|
def checkbox_label_status
|
@@ -92,3 +92,17 @@ test('has checked attribute', () => {
|
|
92
92
|
const kit = screen.getByTestId(testId)
|
93
93
|
expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
|
94
94
|
})
|
95
|
+
|
96
|
+
test('has disabled attribute', () => {
|
97
|
+
render(
|
98
|
+
<Checkbox
|
99
|
+
data={{ testid: testId }}
|
100
|
+
disabled
|
101
|
+
name="checkbox-name"
|
102
|
+
text="Checkbox"
|
103
|
+
value="check-box value"
|
104
|
+
/>)
|
105
|
+
const kit = screen.getByTestId(testId)
|
106
|
+
const input = kit.querySelector('input')
|
107
|
+
expect(input).toHaveAttribute('disabled')
|
108
|
+
})
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
3
|
+
<%= pb_rails("checkbox" , props: {
|
4
|
+
input_options: { tabindex: 0 },
|
5
|
+
margin_bottom: "xs",
|
6
|
+
text: "Disabled unchecked",
|
7
|
+
value: "checkbox-value",
|
8
|
+
disabled: true,
|
9
|
+
name: "checkbox-name"
|
10
|
+
}) %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("flex/flex_item") do %>
|
13
|
+
<%= pb_rails("checkbox" , props: {
|
14
|
+
input_options: { tabindex: 0 },
|
15
|
+
text: "Disabled checked",
|
16
|
+
value: "checkbox-value",
|
17
|
+
disabled: true,
|
18
|
+
checked: true,
|
19
|
+
name: "checkbox-name"
|
20
|
+
}) %>
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
23
|
+
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Checkbox from '../_checkbox'
|
4
|
+
|
5
|
+
const CheckboxDisabled = (props) => {
|
6
|
+
return (
|
7
|
+
<div style={{ display: "flex", flexDirection: "column" }}>
|
8
|
+
<Checkbox
|
9
|
+
disabled
|
10
|
+
marginBottom="xs"
|
11
|
+
name="default name"
|
12
|
+
tabIndex={0}
|
13
|
+
text="Disabled unchecked"
|
14
|
+
value="default value"
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
<Checkbox
|
18
|
+
checked
|
19
|
+
disabled
|
20
|
+
name="checkbox-name"
|
21
|
+
text="Disabled checked"
|
22
|
+
value="check-box value"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
</div>
|
26
|
+
)
|
27
|
+
}
|
28
|
+
|
29
|
+
export default CheckboxDisabled
|
@@ -6,6 +6,7 @@ examples:
|
|
6
6
|
- checkbox_error: Default w/ Error
|
7
7
|
- checkbox_options: Checkbox w/ Options
|
8
8
|
- checkbox_indeterminate: Indeterminate Checkbox
|
9
|
+
- checkbox_disabled: Disabled Checkbox
|
9
10
|
|
10
11
|
react:
|
11
12
|
- checkbox_default: Default
|
@@ -13,6 +14,7 @@ examples:
|
|
13
14
|
- checkbox_custom: Custom Checkbox
|
14
15
|
- checkbox_error: Default w/ Error
|
15
16
|
- checkbox_indeterminate: Indeterminate Checkbox
|
17
|
+
- checkbox_disabled: Disabled Checkbox
|
16
18
|
|
17
19
|
swift:
|
18
20
|
- checkbox_default_swift: Default
|
@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
|
|
3
3
|
export { default as CheckboxError } from './_checkbox_error.jsx'
|
4
4
|
export { default as CheckboxChecked } from './_checkbox_checked.jsx'
|
5
5
|
export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
|
6
|
+
export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
id: object.id,
|
4
|
-
data: object.data,
|
5
|
-
class: object.classname,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
|
8
3
|
<%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
|
9
4
|
<% end %>
|
@@ -1,10 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
aria: object.aria,
|
6
|
-
**combined_html_options) do %>
|
7
|
-
|
1
|
+
<%= pb_content_tag do %>
|
8
2
|
<%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
|
9
3
|
<%= pb_rails("flex/flex_item") do %>
|
10
4
|
<%= content.presence %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
id: object.id,
|
4
|
-
data: object.data,
|
5
|
-
class: object.classname,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<%= pb_rails("caption", props: object.caption_props) %>
|
8
3
|
|
9
4
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
[!Currency-Alignment](https://github.com/powerhome/playbook-swift/assets/112719604/d74a9c5a-c606-4cd0-bf70-20e9297ec246)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
5
|
+
HStack {
|
6
|
+
PBCurrency(
|
7
|
+
amount: "2,000",
|
8
|
+
decimalAmount: ".50",
|
9
|
+
label: "left",
|
10
|
+
size: .title4,
|
11
|
+
symbol: "en_US",
|
12
|
+
isEmphasized: true,
|
13
|
+
alignment: .leading
|
14
|
+
)
|
15
|
+
}
|
16
|
+
.frame(maxWidth: .infinity, alignment: .leading)
|
17
|
+
HStack {
|
18
|
+
PBCurrency(
|
19
|
+
amount: "342",
|
20
|
+
decimalAmount: ".00",
|
21
|
+
label: "center",
|
22
|
+
size: .title4,
|
23
|
+
symbol: "en_EU",
|
24
|
+
isEmphasized: true,
|
25
|
+
alignment: .center
|
26
|
+
)
|
27
|
+
}
|
28
|
+
.frame(maxWidth: .infinity, alignment: .center)
|
29
|
+
HStack {
|
30
|
+
PBCurrency(
|
31
|
+
amount: "45",
|
32
|
+
label: "right",
|
33
|
+
size: .title4,
|
34
|
+
symbol: "en_US",
|
35
|
+
unit: "/mo",
|
36
|
+
isEmphasized: true,
|
37
|
+
hasUnit: true,
|
38
|
+
alignment: .trailing
|
39
|
+
)
|
40
|
+
}
|
41
|
+
.frame(maxWidth: .infinity, alignment: .trailing)
|
42
|
+
}
|
43
|
+
```
|
@@ -0,0 +1,12 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **amount** | `String` | Allows user to enter a currency amount | | |
|
5
|
+
| **decimalAmount** | `String` | Allows user to enter a decimal amount | | |
|
6
|
+
| **label** | `String` | Allows user to a descriptive label value | | |
|
7
|
+
| **size** | `PBFont` | Allows user to choose the size of the amount that is being displayed | `.title4` | `title4` `title3` `title4` |
|
8
|
+
| **symbol** | `String` | A string value used to produce the desired currency symbol | | |
|
9
|
+
| **unit** | `String` | Allows user to add a unit of measure instead of a decimal amount | | |
|
10
|
+
| **alignment** | `Alignment` | Sets alignment of content | `.leading` | `leading` `center` `trailing` |
|
11
|
+
| **isEmphasized** | `Bool` | Determines whether or not the currency that is being displayed is emphasized | `false` | `true` `false` |
|
12
|
+
| **hasUnit** | `Bool` | Determines whether or not the currency has a decimal value or a unit of measure | `false` | `true` `false` |
|
@@ -0,0 +1,31 @@
|
|
1
|
+
![Currency-Default](https://github.com/powerhome/playbook-swift/assets/54749071/bf3810f9-6dd2-4bdd-b32a-14109f3a0b9a)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
5
|
+
PBCurrency(
|
6
|
+
amount: "2,000",
|
7
|
+
decimalAmount: ".50",
|
8
|
+
label: "small",
|
9
|
+
size: .title4,
|
10
|
+
symbol: "en_US",
|
11
|
+
isEmphasized: true
|
12
|
+
)
|
13
|
+
PBCurrency(
|
14
|
+
amount: "342",
|
15
|
+
decimalAmount: ".00",
|
16
|
+
label: "medium",
|
17
|
+
size: .title3,
|
18
|
+
symbol: "en_EU",
|
19
|
+
isEmphasized: true
|
20
|
+
)
|
21
|
+
PBCurrency(
|
22
|
+
amount: "45",
|
23
|
+
label: "large",
|
24
|
+
size: .title1,
|
25
|
+
symbol: "en_US",
|
26
|
+
unit: "/mo",
|
27
|
+
isEmphasized: true,
|
28
|
+
hasUnit: true
|
29
|
+
)
|
30
|
+
}
|
31
|
+
```
|