playbook_ui_docs 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  10. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  11. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  12. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  13. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  14. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  15. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  18. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  19. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  20. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  24. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  25. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  26. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  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 +4 -22
  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 +6 -4
  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 +6 -9
  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 +5 -5
  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 +16 -2
  55. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
  56. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  57. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  58. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  59. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  60. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  61. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  62. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  63. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  64. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  65. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  66. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  67. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  68. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  69. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  70. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  71. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  72. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  73. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  74. data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json +278 -0
  75. data/dist/menu.yml +1 -1
  76. data/dist/playbook-doc.js +9 -9
  77. metadata +51 -8
  78. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 54249d47fb093face53275deaaf8384698f82baf614f1f78cc2205a08ebd3c53
4
- data.tar.gz: 73040e7d8eac641cfdb2932c47ad87e398b7344ed6000ece7da5accfda2cedca
3
+ metadata.gz: 0cb71cca55bf453357940372ecf8022e14b30d672dd0a31f48b24f5d874197ba
4
+ data.tar.gz: 3904d1ad854690073f24110601f612a36e062b2f46fd49b2342c7abd3614da22
5
5
  SHA512:
6
- metadata.gz: 11fcc781cdc61c9d5dc75618b73f98845d695bc57206572474e93742e967b2b883d7a602902c4a779e447c5403188d8f532d8ebe2f882c7732410a302cf451b4
7
- data.tar.gz: 8a1d3f2d28f43e071cd9e7171e2446161bb5c1e81252d018735d71221f61b64fdb2c9817c946997b9e2f667bb4ba9900daa5ceea8e35b2b18b190ead5af05262
6
+ metadata.gz: '0078b67cbae19eb2b150c155a920f2c5e9baca1ed42242a434d8a5540292fe0c664b89bf9192a2b2baa26d464d43332434cb923a9c5929176b3ea0e5ee520ed6'
7
+ data.tar.gz: 8ca90b2397158ab7eaa472d540e0df7c21085107a257369ad7e4db256b33397c0c980d744fdee1ceeed22f107bd0445a0f7fd2361a010ac8a098360459be2b5f
@@ -0,0 +1,33 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
@@ -0,0 +1,24 @@
1
+ **BETA VERSION**
2
+ This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
3
+ <br />
4
+ <br />
5
+ <br />
6
+
7
+ The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
8
+
9
+ ### table_data
10
+
11
+ `table_data` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.
12
+
13
+ For a visual of the data structure needed for `table_data`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
14
+
15
+ ### column_definitions
16
+
17
+ Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `column_definitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
18
+
19
+ - `accessor`: this is the key from your data for the value you want rendered in that column
20
+ - `label`: this is what will be rendered as the column header label
21
+
22
+ There is also one optional item that is only required if the table has nested data:
23
+
24
+ - `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
@@ -1,3 +1,8 @@
1
+ **NOTE:** The Advanced Table kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
2
+ <br />
3
+ <br />
4
+ <br />
5
+
1
6
  The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
2
7
 
3
8
  ### tableData
@@ -1,6 +1,6 @@
1
1
  examples:
2
- # rails:
3
- # - advanced_table_default: Default (Required Props)
2
+ rails:
3
+ - advanced_table_beta: Default (Required Props)
4
4
  react:
5
5
  - advanced_table_default: Default (Required Props)
6
6
  - advanced_table_loading: Loading State
@@ -0,0 +1,71 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "badge",
4
+ text: "12",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
12
+
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "badge",
16
+ text: "12",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
24
+
25
+ <%= pb_rails("avatar", props: {
26
+ component_overlay: {
27
+ component: "badge",
28
+ text: "12",
29
+ placement: "bottom-right"
30
+ },
31
+ name: "Terry Johnson",
32
+ size: "sm",
33
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
+ margin_bottom: "sm"
35
+ }) %>
36
+
37
+ <%= pb_rails("avatar", props: {
38
+ component_overlay: {
39
+ component: "badge",
40
+ text: "12",
41
+ placement: "bottom-left"
42
+ },
43
+ name: "Terry Johnson",
44
+ size: "md",
45
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
+ margin_bottom: "sm"
47
+ }) %>
48
+
49
+ <%= pb_rails("avatar", props: {
50
+ component_overlay: {
51
+ component: "badge",
52
+ text: "12",
53
+ placement: "top-left"
54
+ },
55
+ name: "Terry Johnson",
56
+ size: "lg",
57
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
+ margin_bottom: "sm"
59
+ }) %>
60
+
61
+ <%= pb_rails("avatar", props: {
62
+ component_overlay: {
63
+ component: "badge",
64
+ text: "12",
65
+ placement: "top-right"
66
+ },
67
+ name: "Terry Johnson",
68
+ size: "xl",
69
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
+ margin_bottom: "sm"
71
+ }) %>
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Avatar } from '../..'
3
+
4
+ const AvatarBadgeComponentOverlay = () => {
5
+ return (
6
+ <div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "badge",
10
+ placement: "top-left",
11
+ text: "12"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "badge",
21
+ placement: "top-right",
22
+ text: "12"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
29
+ <Avatar
30
+ componentOverlay={{
31
+ component: "badge",
32
+ placement: "bottom-right",
33
+ text: "12"
34
+ }}
35
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
+ marginBottom="sm"
37
+ size="sm"
38
+ />
39
+
40
+ <Avatar
41
+ componentOverlay={{
42
+ component: "badge",
43
+ placement: "bottom-left",
44
+ text: "12"
45
+ }}
46
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
+ marginBottom="sm"
48
+ size="md"
49
+ />
50
+
51
+ <Avatar
52
+ componentOverlay={{
53
+ component: "badge",
54
+ placement: "top-left",
55
+ text: "12"
56
+ }}
57
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
+ marginBottom="sm"
59
+ size="lg"
60
+ />
61
+
62
+ <Avatar
63
+ componentOverlay={{
64
+ component: "badge",
65
+ placement: "top-right",
66
+ text: "12"
67
+ }}
68
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
+ marginBottom="sm"
70
+ size="xl"
71
+ />
72
+
73
+ </div>
74
+ )
75
+ }
76
+
77
+ export default AvatarBadgeComponentOverlay
@@ -0,0 +1,71 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "icon_circle",
4
+ icon: "plus",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
12
+
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "icon_circle",
16
+ icon: "plus",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
24
+
25
+ <%= pb_rails("avatar", props: {
26
+ component_overlay: {
27
+ component: "icon_circle",
28
+ icon: "plus",
29
+ placement: "bottom-right"
30
+ },
31
+ name: "Terry Johnson",
32
+ size: "sm",
33
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
+ margin_bottom: "sm"
35
+ }) %>
36
+
37
+ <%= pb_rails("avatar", props: {
38
+ component_overlay: {
39
+ component: "icon_circle",
40
+ icon: "plus",
41
+ placement: "bottom-left"
42
+ },
43
+ name: "Terry Johnson",
44
+ size: "md",
45
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
+ margin_bottom: "sm"
47
+ }) %>
48
+
49
+ <%= pb_rails("avatar", props: {
50
+ component_overlay: {
51
+ component: "icon_circle",
52
+ icon: "plus",
53
+ placement: "top-left"
54
+ },
55
+ name: "Terry Johnson",
56
+ size: "lg",
57
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
+ margin_bottom: "sm"
59
+ }) %>
60
+
61
+ <%= pb_rails("avatar", props: {
62
+ component_overlay: {
63
+ component: "icon_circle",
64
+ icon: "plus",
65
+ placement: "top-right"
66
+ },
67
+ name: "Terry Johnson",
68
+ size: "xl",
69
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
+ margin_bottom: "sm"
71
+ }) %>
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Avatar } from '../..'
3
+
4
+ const AvatarCircleIconComponentOverlay = () => {
5
+ return (
6
+ <div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ icon: "plus",
11
+ placement: "top-left"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "iconCircle",
21
+ icon: "plus",
22
+ placement: "top-right"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
29
+ <Avatar
30
+ componentOverlay={{
31
+ component: "iconCircle",
32
+ icon: "plus",
33
+ placement: "bottom-right",
34
+ }}
35
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
+ marginBottom="sm"
37
+ size="sm"
38
+ />
39
+
40
+ <Avatar
41
+ componentOverlay={{
42
+ component: "iconCircle",
43
+ icon: "plus",
44
+ placement: "bottom-left"
45
+ }}
46
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
+ marginBottom="sm"
48
+ size="md"
49
+ />
50
+
51
+ <Avatar
52
+ componentOverlay={{
53
+ component: "iconCircle",
54
+ icon: "plus",
55
+ placement: "top-left"
56
+ }}
57
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
+ marginBottom="sm"
59
+ size="lg"
60
+ />
61
+
62
+ <Avatar
63
+ componentOverlay={{
64
+ component: "iconCircle",
65
+ icon: "plus",
66
+ placement: "top-right"
67
+ }}
68
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
+ marginBottom="sm"
70
+ size="xl"
71
+ />
72
+
73
+ </div>
74
+ )
75
+ }
76
+
77
+ export default AvatarCircleIconComponentOverlay
@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
+ <br/>
61
+ <Avatar
62
+ imageAlt="Terry Johnson Standing"
63
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
+ name="Terry Johnson"
65
+ overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
+ size="lg"
67
+ status="offline"
68
+ {...props}
69
+ />
70
+ <br/>
71
+ <Avatar
72
+ imageAlt="Terry Johnson Standing"
73
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
+ name="Terry Johnson"
75
+ overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
+ size="xl"
77
+ status="offline"
78
+ {...props}
79
+ />
60
80
  </div>
61
81
  )
62
82
  }
@@ -4,11 +4,15 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
8
+ - avatar_badge_component_overlay: Badge Component Overlay
7
9
  react:
8
10
  - avatar_default: Default
9
11
  - avatar_monogram: Monogram
10
12
  - avatar_no_image: "Bad Image Link"
11
13
  - avatar_status: Status
14
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
15
+ - avatar_badge_component_overlay: Badge Component Overlay
12
16
  swift:
13
17
  - avatar_default_swift: Default
14
18
  - avatar_monogram_swift: Monogram
@@ -2,3 +2,5 @@ export { default as AvatarDefault } from './_avatar_default.jsx'
2
2
  export { default as AvatarMonogram } from './_avatar_monogram.jsx'
3
3
  export { default as AvatarStatus } from './_avatar_status.jsx'
4
4
  export { default as AvatarNoImage } from './_avatar_no_image.jsx'
5
+ export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
6
+ export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.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
+ ```