playbook_ui 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769
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/_playbook.scss +2 -0
- data/app/pb_kits/playbook/index.js +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.tsx +7 -5
- data/app/pb_kits/playbook/pb_background/background.html.erb +0 -1
- data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -1
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -2
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +1 -1
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -2
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -1
- 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 -1
- data/app/pb_kits/playbook/pb_date/date.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -1
- 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 -1
- data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -2
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +181 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +266 -0
- data/app/pb_kits/playbook/pb_dropdown/context/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +38 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +87 -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 +102 -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 +104 -0
- 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 +63 -0
- 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 +77 -0
- 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 +62 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +75 -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 +15 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +10 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +207 -0
- data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +17 -0
- data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +109 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +116 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +190 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +61 -0
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -1
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +1 -2
- data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -1
- 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 -1
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +3 -3
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -1
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +2 -2
- data/app/pb_kits/playbook/pb_list/item.html.erb +1 -2
- data/app/pb_kits/playbook/pb_list/list.html.erb +1 -3
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_message/message.html.erb +1 -1
- data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -4
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -2
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -1
- data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
- data/app/pb_kits/playbook/pb_person/person.html.erb +1 -1
- data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -1
- data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -2
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -2
- data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_radio/radio.html.erb +1 -2
- 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 -1
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_source/source.html.erb +1 -1
- data/app/pb_kits/playbook/pb_source/source.test.js +2 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.html.erb +2 -8
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +2 -2
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +2 -2
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +2 -2
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +2 -3
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +2 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time/time.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +1 -3
- data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -1
- data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/kit_base.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +38 -3
- /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 71177d67df222d53293af018a05b5a4aa6e8c2320e2666e4a0fa306f9c7fa6b6
|
4
|
+
data.tar.gz: 4020bc3572296e4c84a58b117cd6b194d2875429baf2bcf606f5a9e2f3772b25
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b628362eb09ed93b1084e3452766c4753edda243367d3217379e4ad4b83738567931f26af432583a7d38e34dcf8085c6ae05bb6415460a8cbf5b438a25ffd603
|
7
|
+
data.tar.gz: 1aed46186c6455ad3e8adb45e63fe1a55358237eec9c2fd72db3b12a4a9cdbc7031099be20d38e2e79a9bedf89b74cb97a96ed4cc67b05649e5d682064bfade0
|
@@ -1,5 +1,6 @@
|
|
1
1
|
|
2
2
|
|
3
|
+
|
3
4
|
@import 'pb_advanced_table/advanced_table';
|
4
5
|
@import 'pb_avatar/avatar';
|
5
6
|
@import 'pb_avatar_action_button/avatar_action_button';
|
@@ -30,6 +31,7 @@
|
|
30
31
|
@import 'pb_detail/detail';
|
31
32
|
@import 'pb_dialog/dialog';
|
32
33
|
@import 'pb_distribution_bar/distribution_bar';
|
34
|
+
@import 'pb_dropdown/dropdown';
|
33
35
|
@import 'pb_file_upload/file_upload';
|
34
36
|
@import 'pb_filter/filter';
|
35
37
|
@import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
|
@@ -35,6 +35,7 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
|
|
35
35
|
export { default as Detail} from './pb_detail/_detail'
|
36
36
|
export { default as Dialog } from './pb_dialog/_dialog'
|
37
37
|
export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
|
38
|
+
export { default as Dropdown} from './pb_dropdown/_dropdown'
|
38
39
|
export { default as FileUpload } from './pb_file_upload/_file_upload'
|
39
40
|
export { default as Filter } from './pb_filter/_filter'
|
40
41
|
export { default as FixedConfirmationToast } from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
@@ -132,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
|
|
132
133
|
//Theming
|
133
134
|
export {default as mapTheme} from './pb_map/pbMapTheme'
|
134
135
|
export {default as useCollapsible} from './pb_collapsible/useCollapsible'
|
136
|
+
export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
|
135
137
|
|
136
138
|
// CSS Tokens
|
137
139
|
export { default as borderRadius } from './tokens/exports/_border_radius.scss'
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
3
3
|
<% object.column_definitions.each_with_index do |item, index| %>
|
4
4
|
<%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<% object.column_definitions.each_with_index do |column, index| %>
|
3
3
|
<%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
|
4
4
|
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
|
@@ -65,7 +65,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
|
|
65
65
|
|
66
66
|
const Background = (props: BackgroundProps): React.ReactElement => {
|
67
67
|
const {
|
68
|
-
alt =
|
68
|
+
alt = undefined,
|
69
69
|
aria = {},
|
70
70
|
backgroundColor = 'light',
|
71
71
|
backgroundPosition = '',
|
@@ -130,11 +130,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
|
|
130
130
|
);
|
131
131
|
|
132
132
|
const backgroundStyle = {
|
133
|
-
backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
|
134
|
-
backgroundRepeat: resBackgroundRepeat || undefined,
|
135
|
-
backgroundSize: resBackgroundSize || undefined,
|
136
|
-
backgroundPosition: resBackgroundPosition || undefined,
|
137
133
|
backgroundColor: customColor || undefined,
|
134
|
+
...(resImageUrl !== '' ? {
|
135
|
+
backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
|
136
|
+
backgroundRepeat: resBackgroundRepeat || undefined,
|
137
|
+
backgroundPosition: resBackgroundPosition || undefined,
|
138
|
+
backgroundSize: resBackgroundSize || undefined,
|
139
|
+
} : {})
|
138
140
|
};
|
139
141
|
|
140
142
|
const Tag: React.ReactElement | any = `${tag}`;
|
@@ -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',
|
@@ -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
1
|
<%= pb_content_tag(object.tag,
|
2
|
-
object.tag == "button" ? object.options : object.link_options
|
3
|
-
**combined_html_options) do %>
|
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 %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
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 %>
|
3
3
|
<%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
|
4
4
|
<% end %>
|
@@ -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
|
+
```
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<div class="pb_date_range_inline_wrapper">
|
3
3
|
<% if object.icon == true %>
|
4
4
|
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
![Date-Range-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/ccb85e5d-0f6d-4ced-8154-aa9dfa72a131)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
5
|
+
PBDateRangeStacked(
|
6
|
+
startDate: Date().makeDate(year: 2019, month: 6, day: 18),
|
7
|
+
endDate: Date().makeDate(year: 2020, month: 3, day: 20),
|
8
|
+
startAlignment: .trailing,
|
9
|
+
endAlignment: .leading,
|
10
|
+
startVariant: .short(showIcon: false),
|
11
|
+
endVariant: .short(showIcon: false)
|
12
|
+
)
|
13
|
+
}
|
14
|
+
```
|
@@ -0,0 +1,9 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` | |
|
5
|
+
| **endDate** | `Date()` | Takes a string value to set the ending date range value | `Date()` | |
|
6
|
+
| **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
|
7
|
+
| **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
|
8
|
+
| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
|
9
|
+
| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
|
3
3
|
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
|
4
4
|
<%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
|
3
3
|
<%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
|
4
4
|
<% end %>
|
@@ -235,11 +235,11 @@
|
|
235
235
|
height: $space_xl * 2;
|
236
236
|
}
|
237
237
|
.dialog_footer {
|
238
|
-
position:fixed;
|
238
|
+
position: fixed;
|
239
239
|
bottom: 0;
|
240
240
|
background-color: $white;
|
241
|
+
max-width: 100%;
|
241
242
|
}
|
242
|
-
|
243
243
|
&[class*="_sm"] {
|
244
244
|
width: $medium;
|
245
245
|
.dialog_footer {
|
@@ -319,6 +319,7 @@
|
|
319
319
|
position:fixed;
|
320
320
|
bottom: 0;
|
321
321
|
background-color: $white;
|
322
|
+
max-width: 100%;
|
322
323
|
}
|
323
324
|
&[class*="_sm"] {
|
324
325
|
width: $medium;
|
@@ -372,3 +373,4 @@
|
|
372
373
|
cursor: pointer;
|
373
374
|
}
|
374
375
|
}
|
376
|
+
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
|
2
|
-
<%= pb_content_tag(:dialog
|
2
|
+
<%= pb_content_tag(:dialog) do %>
|
3
3
|
<% if object.status === "" && object.title %>
|
4
4
|
<%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
|
5
5
|
<% end %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<% if object.confirm_button && object.cancel_button %>
|
3
3
|
<div class="dialog-pseudo-footer"></div>
|
4
4
|
<%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
|
@@ -1,6 +1,5 @@
|
|
1
1
|
<%= pb_content_tag(:div,
|
2
|
-
class: object.sticky_header
|
3
|
-
**combined_html_options) do %>
|
2
|
+
class: object.sticky_header) do %>
|
4
3
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
5
4
|
<%= content.presence || object.title %>
|
6
5
|
|