playbook_ui_docs 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  13. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  14. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  15. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  17. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  18. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  19. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  23. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  24. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  25. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  26. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +32 -0
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +63 -0
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  54. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +23 -0
  55. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +11 -0
  56. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  57. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  58. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  59. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  60. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  61. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  62. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  63. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  64. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  65. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  66. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  67. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  68. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
  69. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
  70. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  71. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  72. data/dist/menu.yml +5 -1
  73. data/dist/playbook-doc.js +10 -10
  74. metadata +56 -6
  75. /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: e5efc79de663963e76ac9525d08ffb97afdc5a9ca0dcc4c4343d6402b02bcd5f
4
- data.tar.gz: 2ae3fc3adba0255a543db54c2a7bba2b7f9bd4564667a70d8b3cd77bb1fd565d
3
+ metadata.gz: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
4
+ data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
5
5
  SHA512:
6
- metadata.gz: 315796eb5d147c63f7c9bb5277245aa2464295b8d04c37309b155beb237e604e238918c8d3f22b5508232bd0d9f91580256f7eaf1a8ad558aa86d3dd497f5b79
7
- data.tar.gz: 973beef1e4087acded14520c8417efc695108010479896df48187d58ddc9bce8f36bf5aca6ac6d3b984f18adbd30c376abead0f5b16a8367e51745ccd11d9673
6
+ metadata.gz: 295d43d1813478690c1fd083359013a0207ae5fb2c79f2f702d139a3b781719eaa1b9d836940d478377971556325fa1d39560d417f61c6f5379e3d77640b531b
7
+ data.tar.gz: 76f1fa54e955307ed54c87ad0062f4fcb2698508da6b166c117d20e81ee883fa13bd5ceb0f6d8814b30e04d05c154d77c73486e12a0d01fbd5fd5b23093422d8
@@ -0,0 +1,23 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [-475, 400, -1000, 354, -856],
4
+ threshold: 0
5
+ }, {
6
+ name: 'Manufacturing',
7
+ data: [1475, 200, 1000, 654, -656],
8
+ threshold: 0
9
+ },
10
+ {
11
+ name: 'Sales & Distribution',
12
+ data: [1270, 100, -1200, 554, 756],
13
+ threshold: 0
14
+ }] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_title: 'Number of Employees',
18
+ chart_data: data,
19
+ id: "bar-default",
20
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
21
+ title: 'Bar Graph with Negative Numbers',
22
+ legend: true,
23
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [-475, 400, -1000, 354, -856],
8
+ threshold: 0
9
+ }, {
10
+ name: 'Manufacturing',
11
+ data: [1475, 200, 1000, 654, -656],
12
+ threshold: 0
13
+ },
14
+ {
15
+ name: 'Sales & Distribution',
16
+ data: [1270, 100, -1200, 554, 756],
17
+ threshold: 0
18
+ }]
19
+
20
+
21
+ const BarGraphStacked = (props) => (
22
+ <div>
23
+ <BarGraph
24
+ axisTitle="Number of Employees"
25
+ chartData={chartData}
26
+ id="bar-default"
27
+ legend
28
+ title="Bar Graph with Negative Numbers"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ {...props}
31
+ />
32
+ </div>
33
+ )
34
+
35
+ export default BarGraphStacked
@@ -0,0 +1,26 @@
1
+ <% data = [{
2
+ name: 'Number of Installations',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ type: 'spline',
6
+ name: 'Percentage',
7
+ data: [48, 70, 25, 55, 72],
8
+ color: '#F9BB00',
9
+ yAxis: 1
10
+ }] %>
11
+
12
+ <% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
13
+
14
+ <% axis_formats = [{format: ""}, {format: "{value}%"}] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_format: axis_formats,
18
+ axis_title: axis_titles,
19
+ chart_data: data,
20
+ id: "bar-spline",
21
+ y_axis_min: 0,
22
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
23
+ subtitle: 'Source: thesolarfoundation.com',
24
+ title: 'Bar Graph with Secondary Y-axis',
25
+ legend: true,
26
+ }) %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Number of Installations',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ type: 'spline',
10
+ name: 'Percentage',
11
+ data: [48, 70, 25, 55, 72],
12
+ color: '#F9BB00',
13
+ yAxis: 1
14
+ }]
15
+
16
+ const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
17
+
18
+ const axisFormats = [{format: ""}, {format: "{value}%"}]
19
+
20
+ const BarGraphSecondaryYAxis= (props) => (
21
+ <div>
22
+ <BarGraph
23
+ axisFormat={axisFormats}
24
+ axisTitle={axisTitles}
25
+ chartData={chartData}
26
+ id="bar-spline"
27
+ legend
28
+ title="Bar Graph with Secondary Y-axis"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ yAxisMin={0}
31
+ {...props}
32
+ />
33
+ </div>
34
+ )
35
+
36
+ export default BarGraphSecondaryYAxis
@@ -0,0 +1,3 @@
1
+ Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array.
2
+
3
+ To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
@@ -0,0 +1,22 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475, 200, 3000, 654, 656],
4
+ },
5
+ {
6
+ name: 'Manufacturing',
7
+ data: [1270, 800, 200, 454, 956],
8
+ }, {
9
+ name: 'Sales & Distribution',
10
+ data: [975, 1600, 1500, 924, 500],
11
+ }] %>
12
+
13
+ <%= pb_rails("bar_graph", props: {
14
+ axis_title: 'Number of Employees',
15
+ chart_data: data,
16
+ id: "bar-default",
17
+ y_axis_min: 0,
18
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
19
+ stacking: "normal",
20
+ title: 'Bar Graph with Stacked Columns',
21
+ legend: true,
22
+ }) %>
@@ -0,0 +1,34 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ },
9
+ {
10
+ name: 'Manufacturing',
11
+ data: [1270, 800, 200, 454, 956],
12
+ }, {
13
+ name: 'Sales & Distribution',
14
+ data: [975, 1600, 1500, 924, 500],
15
+ }]
16
+
17
+
18
+ const BarGraphStacked = (props) => (
19
+ <div>
20
+ <BarGraph
21
+ axisTitle="Number Of Employees"
22
+ chartData={chartData}
23
+ id="bar-default"
24
+ legend
25
+ stacking="normal"
26
+ title="Bar Graph with Stacked Columns"
27
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
28
+ yAxisMin={0}
29
+ {...props}
30
+ />
31
+ </div>
32
+ )
33
+
34
+ export default BarGraphStacked
@@ -0,0 +1 @@
1
+ The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options.
@@ -9,6 +9,9 @@ examples:
9
9
  - bar_graph_spline: Spline
10
10
  - bar_graph_colors: Color Overrides
11
11
  - bar_graph_custom: Custom Overrides
12
+ - bar_graph_stacked: Stacked
13
+ - bar_graph_negative_numbers: Negative Numbers
14
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
12
15
 
13
16
 
14
17
  react:
@@ -20,3 +23,6 @@ examples:
20
23
  - bar_graph_spline: Spline
21
24
  - bar_graph_colors: Color Overrides
22
25
  - bar_graph_custom: Custom Overrides
26
+ - bar_graph_stacked: Stacked
27
+ - bar_graph_negative_numbers: Negative Numbers
28
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
8
  export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
+ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
+ export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
+ export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
@@ -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'
@@ -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
+ ```
@@ -17,3 +17,8 @@ examples:
17
17
  - currency_abbreviated: Abbreviate Larger Amounts
18
18
  - currency_matching_decimals: Matching Decimals
19
19
  - currency_unstyled: Unstyled
20
+
21
+ swift:
22
+ - currency_size_swift: Size
23
+ - currency_alignment_swift: Alignment
24
+ - currency_props_swift: ""
@@ -1,3 +1,5 @@
1
1
  Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
+
5
+ NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.
@@ -1,3 +1,5 @@
1
1
  The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
+
5
+ NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.
@@ -1 +1 @@
1
- Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
1
+ Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
@@ -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)` |
@@ -5,3 +5,7 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_range_stacked_default: Default
8
+
9
+ swift:
10
+ - date_range_stacked_default_swift: Default
11
+ - date_range_stacked_props_swift: ""
@@ -27,5 +27,5 @@ examples:
27
27
  - dialog_default_swift: Simple
28
28
  - dialog_sizes_swift: Sizes
29
29
  - dialog_status_swift: Status
30
- - dialog_props_table: ""
30
+ - dialog_props_swift: ""
31
31
 
@@ -0,0 +1,10 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options}) %>
@@ -0,0 +1,32 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../../'
3
+
4
+ const DropdownDefault = (props) => {
5
+
6
+ const options = [
7
+ {
8
+ label: "United States",
9
+ value: "United States",
10
+ },
11
+ {
12
+ label: "Canada",
13
+ value: "Canada",
14
+ },
15
+ {
16
+ label: "Pakistan",
17
+ value: "Pakistan",
18
+ }
19
+ ];
20
+
21
+
22
+ return (
23
+ <div>
24
+ <Dropdown
25
+ options={options}
26
+ {...props}
27
+ />
28
+ </div>
29
+ )
30
+ }
31
+
32
+ export default DropdownDefault
@@ -0,0 +1 @@
1
+ The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
@@ -0,0 +1,17 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options}) do %>
11
+ <%= pb_rails("dropdown/dropdown_trigger") %>
12
+ <%= pb_rails("dropdown/dropdown_container") do %>
13
+ <% options.each do |option| %>
14
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
@@ -0,0 +1,42 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../..'
3
+
4
+ const DropdownSubcomponentStructure = (props) => {
5
+
6
+
7
+ const options = [
8
+ {
9
+ label: "United States",
10
+ value: "United States",
11
+ },
12
+ {
13
+ label: "Canada",
14
+ value: "Canada",
15
+ },
16
+ {
17
+ label: "Pakistan",
18
+ value: "Pakistan",
19
+ }
20
+ ];
21
+
22
+
23
+ return (
24
+ <div>
25
+ <Dropdown
26
+ options={options}
27
+ {...props}
28
+ >
29
+ <Dropdown.Trigger/>
30
+ <Dropdown.Container>
31
+ {options.map((option) => (
32
+ <Dropdown.Option key={option.id}
33
+ option={option}
34
+ />
35
+ ))}
36
+ </Dropdown.Container>
37
+ </Dropdown>
38
+ </div>
39
+ )
40
+ }
41
+
42
+ export default DropdownSubcomponentStructure
@@ -0,0 +1,7 @@
1
+ The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
2
+
3
+ `Dropdown. Trigger` / `dropdown/dropdown_trigger`
4
+ `Dropdown.Container`/ `dropdown/dropdown_container`
5
+ `Dropdown.Option` / `dropdown/dropdown_option`
6
+
7
+ See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.