playbook_ui_docs 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812
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/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -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_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_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_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_dialog/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +32 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -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.html.erb +60 -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.html.erb +45 -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.html.erb +17 -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.html.erb +47 -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 +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.html.erb +10 -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 +23 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +11 -0
- 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_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_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +10 -10
- metadata +56 -6
- /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: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
|
4
|
+
data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
+
```
|
@@ -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
|
-
|
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)` |
|
@@ -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.
|