playbook_ui_docs 13.21.0 → 13.22.0.pre.alpha.PLAY1297updatetextstyles2636

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +12 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +278 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -2
  24. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  26. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  27. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  28. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  29. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  30. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  31. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  32. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  33. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  34. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx} +2 -2
  36. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  37. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  39. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  40. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  41. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  42. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  43. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  44. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  45. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  46. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  47. data/dist/menu.yml +4 -0
  48. data/dist/playbook-doc.js +10 -10
  49. metadata +13 -8
  50. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
@@ -0,0 +1,7 @@
1
+
2
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-none", margin_bottom: "none"}) %>
3
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xs", margin_bottom: "xs"}) %>
4
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-sm", margin_bottom: "sm"}) %>
5
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-md", margin_bottom: "md"}) %>
6
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-lg", margin_bottom: "lg"}) %>
7
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xl", margin_bottom: "xl"}) %>
@@ -0,0 +1,41 @@
1
+
2
+ import React from 'react'
3
+
4
+ import DatePicker from '../_date_picker'
5
+
6
+ const DatePickerMarginBottom = (props) => (
7
+ <div>
8
+ <DatePicker
9
+ marginBottom="none"
10
+ pickerId="date-picker-none"
11
+ {...props}
12
+ />
13
+ <DatePicker
14
+ marginBottom="xs"
15
+ pickerId="date-picker-xs"
16
+ {...props}
17
+ />
18
+ <DatePicker
19
+ marginBottom="sm"
20
+ pickerId="date-picker-sm"
21
+ {...props}
22
+ />
23
+ <DatePicker
24
+ marginBottom="md"
25
+ pickerId="date-picker-md"
26
+ {...props}
27
+ />
28
+ <DatePicker
29
+ marginBottom="lg"
30
+ pickerId="date-picker-lg"
31
+ {...props}
32
+ />
33
+ <DatePicker
34
+ marginBottom="xl"
35
+ pickerId="date-picker-xl"
36
+ {...props}
37
+ />
38
+ </div>
39
+ )
40
+
41
+ export default DatePickerMarginBottom
@@ -2,4 +2,11 @@
2
2
  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
3
3
  mode: "range",
4
4
  picker_id: "date-picker-range"
5
+ }) %>
6
+
7
+ <%= pb_rails("date_picker", props: {
8
+ default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
9
+ label: "Default Date Range",
10
+ mode: "range",
11
+ picker_id: "date-picker-default-date3"
5
12
  }) %>
@@ -10,6 +10,13 @@ const DatePickerRange = (props) => (
10
10
  pickerId="date-picker-range"
11
11
  {...props}
12
12
  />
13
+ <DatePicker
14
+ defaultDate={[new Date(), new Date().fp_incr(7)]}
15
+ label="Default Date Range"
16
+ mode="range"
17
+ pickerId="date-picker-default-date3"
18
+ {...props}
19
+ />
13
20
  </div>
14
21
  )
15
22
 
@@ -7,7 +7,7 @@ examples:
7
7
  - date_picker_allow_input: Allow Input
8
8
  - date_picker_input: Input Field
9
9
  - date_picker_label: Label
10
- - date_picker_range: Range
10
+ # - date_picker_range: Range
11
11
  - date_picker_quick_pick_rails: Range (Quick Pick)
12
12
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
13
13
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -20,6 +20,7 @@ examples:
20
20
  - date_picker_hooks: Hooks
21
21
  - date_picker_year_range: Year Range
22
22
  - date_picker_anti_patterns: Anti-Patterns
23
+ - date_picker_margin_bottom: Margin Bottom
23
24
  - date_picker_inline: Inline
24
25
  - date_picker_month_and_year: Month & Year Only
25
26
  - date_picker_week: Week
@@ -36,7 +37,7 @@ examples:
36
37
  - date_picker_label: Label
37
38
  - date_picker_on_change: onChange
38
39
  - date_picker_on_close: onClose
39
- - date_picker_range: Range
40
+ # - date_picker_range: Range
40
41
  - date_picker_quick_pick_react: Range (Quick Pick)
41
42
  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
42
43
  - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -48,6 +49,7 @@ examples:
48
49
  - date_picker_flatpickr_methods: Flatpickr Methods
49
50
  - date_picker_hooks: Hooks
50
51
  - date_picker_year_range: Year Range
52
+ - date_picker_margin_bottom: Margin Bottom
51
53
  - date_picker_inline: Inline
52
54
  - date_picker_month_and_year: Month & Year Only
53
55
  - date_picker_week: Week
@@ -19,6 +19,7 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
19
  export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
20
  export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
21
21
  export { default as DatePickerAllowInput } from './_date_picker_allow_input'
22
+ export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
22
23
  export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
23
24
  export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
24
25
  export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
@@ -1,6 +1,7 @@
1
1
  <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
2
2
 
3
3
  <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
4
+ <form>
4
5
  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
5
6
  <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
6
7
  <% end %>
@@ -12,4 +13,5 @@
12
13
 
13
14
  <% end %>
14
15
  <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
16
+ </form>
15
17
  <% end %>
@@ -1,5 +1,55 @@
1
+ <%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
2
+
1
3
  <%= pb_rails("fixed_confirmation_toast", props: {
4
+ classname: "multitoast-to-hide",
5
+ closeable: true,
6
+ id: "toast-short",
2
7
  multi_line: true,
3
- text: "Scan to Assign Selected Items. Click here to generate report",
8
+ text: "Multi-line is used when the given text will not fit on one line.",
4
9
  status: "tip",
10
+ vertical: "top",
11
+ horizontal: "center"
5
12
  }) %>
13
+
14
+ <%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
15
+
16
+ <%= pb_rails("fixed_confirmation_toast", props: {
17
+ classname: "multitoast-to-hide",
18
+ closeable: true,
19
+ id: "toast-long",
20
+ multi_line: true,
21
+ text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
22
+ status: "tip",
23
+ vertical: "top",
24
+ horizontal: "center"
25
+ }) %>
26
+
27
+
28
+ <script type="text/javascript">
29
+ const multitoasts = document.querySelectorAll(".multitoast-to-hide")
30
+ const multibuttons = document.querySelectorAll("button[data-multitoast]")
31
+
32
+ const hideMultiToasts = () => {
33
+ multitoasts.forEach((toast) => {
34
+ toast.style.display = "none"
35
+ })
36
+ }
37
+
38
+ multibuttons.forEach((button) => {
39
+ button.onclick = () => {
40
+ hideMultiToasts()
41
+ let toast = document.querySelector(button.getAttribute("data-multitoast"))
42
+
43
+ if (toast) {
44
+ toast.style.display = "flex"
45
+ }
46
+ }
47
+ })
48
+ </script>
49
+
50
+ <!-- hiding toast on page load -->
51
+ <style>
52
+ #toast-long, #toast-short {
53
+ display: none;
54
+ }
55
+ </style>
@@ -1,18 +1,69 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
 
3
+ import Button from '../../pb_button/_button'
3
4
  import FixedConfirmationToast from '../_fixed_confirmation_toast'
4
5
 
5
6
  const FixedConfirmationToastMultiLine = (props) => {
6
- return (
7
- <div>
8
- <FixedConfirmationToast
9
- multiLine
10
- status="tip"
11
- text="Scan to Assign Selected Items. Click here to generate report"
12
- {...props}
13
- />
14
- </div>
15
- )
7
+
8
+ const [openShort, setOpenShort] = useState(false)
9
+ const [openLong, setOpenLong] = useState(false)
10
+
11
+ const handleClickShort = () => {
12
+ setOpenShort(true)
13
+ }
14
+ const handleClickLong= () => {
15
+ setOpenLong(true)
16
+ }
17
+
18
+ const handleCloseShort = () => {
19
+ setOpenShort(false)
20
+ }
21
+
22
+ const handleCloseLong= () => {
23
+ setOpenLong(false)
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button
29
+ onClick={handleClickShort}
30
+ text="Short Multiline"
31
+ variant="secondary"
32
+ {...props}
33
+ />
34
+ {' '}
35
+ <Button
36
+ onClick={handleClickLong}
37
+ text="Long Multiline"
38
+ variant="secondary"
39
+ {...props}
40
+ />
41
+
42
+ <FixedConfirmationToast
43
+ closeable
44
+ horizontal='center'
45
+ multiLine
46
+ onClose={handleCloseShort}
47
+ open={openShort}
48
+ status='tip'
49
+ text='Multi-line is used when the given text will not fit on one line.'
50
+ vertical='top'
51
+ {...props}
52
+ />
53
+
54
+ <FixedConfirmationToast
55
+ closeable
56
+ horizontal='center'
57
+ multiLine
58
+ onClose={handleCloseLong}
59
+ open={openLong}
60
+ status='tip'
61
+ text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
62
+ vertical='top'
63
+ {...props}
64
+ />
65
+ </>
66
+ )
16
67
  }
17
68
 
18
69
  export default FixedConfirmationToastMultiLine
@@ -75,8 +75,6 @@
75
75
  })
76
76
  }
77
77
 
78
- hideToasts()
79
-
80
78
  buttons.forEach((button) => {
81
79
  button.onclick = () => {
82
80
  hideToasts()
@@ -88,3 +86,10 @@
88
86
  }
89
87
  })
90
88
  </script>
89
+
90
+ <!-- hiding toast on page load -->
91
+ <style>
92
+ #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
93
+ display: none;
94
+ }
95
+ </style>
@@ -46,7 +46,3 @@
46
46
  <%= pb_rails("flex/flex_item") do %>4<% end %>
47
47
  <% end %>
48
48
  </div>
49
-
50
-
51
-
52
- </div>
@@ -1,6 +1,7 @@
1
1
  <div>
2
+
2
3
  <%= pb_rails("form_group") do %>
3
- <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
4
+ <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
4
5
  <%= pb_rails("select", props: {
5
6
  blank_selection: "Genre",
6
7
  options: [
@@ -16,4 +17,19 @@
16
17
  ]
17
18
  }) %>
18
19
  <% end %>
20
+ <br>
21
+ <br>
22
+ <%= pb_rails("form_group") do %>
23
+ <%= pb_rails("select", props: {
24
+ blank_selection: "Phone",
25
+ options: [
26
+ { value: "Cell" },
27
+ { value: "Work" },
28
+ { value: "Home" },
29
+ ]
30
+ }) %>
31
+ <%= pb_rails("phone_number_input", props: {
32
+ id: "phone"
33
+ }) %>
34
+ <% end %>
19
35
  </div>
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import FormGroup from '../_form_group'
4
-
4
+ import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
5
  import Select from '../../pb_select/_select'
6
6
  import TextInput from '../../pb_text_input/_text_input'
7
7
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
18
18
  { value: 'Other' },
19
19
  ]
20
20
 
21
+ const phoneOptions = [
22
+ { value: 'Cell' },
23
+ { value: 'Work' },
24
+ { value: 'Home' },
25
+ ]
26
+
21
27
  return (
22
28
  <div>
23
29
  <FormGroup>
24
30
  <TextInput
25
- label="Artist"
26
31
  placeholder="Enter Artist Name"
27
32
  {...props}
28
33
  />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
32
37
  {...props}
33
38
  />
34
39
  </FormGroup>
40
+ <br />
41
+ <br />
42
+ <FormGroup>
43
+ <Select
44
+ blankSelection="Phone"
45
+ options={phoneOptions}
46
+ />
47
+ <PhoneNumberInput
48
+ id='default'
49
+ />
50
+ </FormGroup>
35
51
  </div>
36
52
  )
37
53
  }
@@ -1,3 +1,8 @@
1
+ <%= pb_rails("icon_circle", props: {
2
+ icon: "rocket",
3
+ size: "xxs"
4
+ }) %>
5
+ <br />
1
6
  <%= pb_rails("icon_circle", props: {
2
7
  icon: "rocket",
3
8
  size: "xs"
@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
4
4
  const IconCircleSizes = (props) => {
5
5
  return (
6
6
  <div>
7
+ <IconCircle
8
+ icon="rocket"
9
+ size="xxs"
10
+ {...props}
11
+ />
12
+ <br />
7
13
  <IconCircle
8
14
  icon="rocket"
9
15
  size="xs"
@@ -1,5 +1,5 @@
1
- `selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load.
1
+ `selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load.
2
2
 
3
3
  Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
4
4
 
5
- When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
5
+ When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
@@ -68,7 +68,7 @@ const treeData = [
68
68
  },
69
69
  ];
70
70
 
71
- const MultiLevelSelectSelectedIds = (props) => {
71
+ const MultiLevelSelectSelectedIdsReact = (props) => {
72
72
  return (
73
73
  <div>
74
74
  <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIds = (props) => {
85
85
  );
86
86
  };
87
87
 
88
- export default MultiLevelSelectSelectedIds;
88
+ export default MultiLevelSelectSelectedIdsReact;
@@ -0,0 +1,5 @@
1
+ `selected_ids` is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it.
2
+
3
+ Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
4
+
5
+ When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
@@ -12,4 +12,4 @@ examples:
12
12
  - multi_level_select_single: Single Select
13
13
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
14
14
  - multi_level_select_return_all_selected: Return All Selected
15
- - multi_level_select_selected_ids: Selected Ids
15
+ - multi_level_select_selected_ids_react: Selected Ids
@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
2
2
  export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
3
3
  export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
- export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
5
+ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
@@ -1,9 +1,6 @@
1
- <%= pb_rails("online_status", props: { status: "offline" }) %>
2
-
3
- <br>
4
-
5
- <%= pb_rails("online_status", props: { status: "online" }) %>
6
-
7
- <br>
8
-
9
- <%= pb_rails("online_status", props: { status: "away" }) %>
1
+ <%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
2
+ <%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
3
+ <%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
4
+ <%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
5
+ <%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
6
+ <%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>
@@ -5,24 +5,35 @@ import OnlineStatus from '../_online_status'
5
5
  const OnlineStatusDefault = (props) => (
6
6
  <>
7
7
  <OnlineStatus
8
+ marginY="xs"
8
9
  status="offline"
9
10
  {...props}
10
11
  />
11
-
12
- <br />
13
-
14
12
  <OnlineStatus
13
+ marginY="xs"
15
14
  status="online"
16
15
  {...props}
17
16
  />
18
-
19
- <br />
20
-
21
17
  <OnlineStatus
18
+ marginY="xs"
22
19
  status="away"
23
20
  {...props}
24
21
  />
25
-
22
+ <OnlineStatus
23
+ marginY="xs"
24
+ status="error"
25
+ {...props}
26
+ />
27
+ <OnlineStatus
28
+ marginY="xs"
29
+ status="info"
30
+ {...props}
31
+ />
32
+ <OnlineStatus
33
+ marginY="xs"
34
+ status="primary"
35
+ {...props}
36
+ />
26
37
  </>
27
38
  )
28
39
 
@@ -1 +1,2 @@
1
- <%= pb_rails("pagination", props: { model: @users, view: self}) %>
1
+ <%= pb_rails("pagination", props: { model: @users, view: self}) %>
2
+
@@ -1,5 +1,5 @@
1
1
  <form id="example-form-validation" action="" method="get">
2
- <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
2
+ <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
3
3
  <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
4
  </form>
5
5
 
@@ -9,4 +9,4 @@
9
9
  if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
10
10
  })
11
11
  })
12
- <% end %>
12
+ <% end %>
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("toggle", props: {
2
+ checked: true,
3
+ disabled: true
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("toggle", props: {
9
+ checked: false,
10
+ disabled: true
11
+ }) %>
@@ -0,0 +1,21 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Toggle } from '../..'
5
+
6
+ const ToggleDisabled= () => {
7
+ return (
8
+ <>
9
+ <Toggle
10
+ checked
11
+ disabled
12
+ />
13
+
14
+ <br />
15
+
16
+ <Toggle disabled />
17
+ </>
18
+ )
19
+ }
20
+
21
+ export default ToggleDisabled
@@ -2,6 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - toggle_default: Default State
5
+ - toggle_disabled: Disabled
5
6
  - toggle_name: Name and Value
6
7
  - toggle_custom: Custom checkbox input
7
8
  - toggle_custom_radio: Custom radio inputs
@@ -9,6 +10,7 @@ examples:
9
10
 
10
11
  react:
11
12
  - toggle_default: Default State
13
+ - toggle_disabled: Disabled
12
14
  - toggle_name: Name and Value
13
15
  - toggle_custom: Custom checkbox input
14
16
  - toggle_custom_radio: Custom radio inputs
@@ -16,4 +18,4 @@ examples:
16
18
  swift:
17
19
  - toggle_default_swift: Default State
18
20
  - toggle_name_swift: Name and Value
19
- - toggle_props_swift: ""
21
+ - toggle_props_swift: ""
@@ -1,4 +1,5 @@
1
1
  export { default as ToggleDefault } from './_toggle_default'
2
+ export { default as ToggleDisabled } from './_toggle_disabled'
2
3
  export { default as ToggleCustom } from './_toggle_custom'
3
4
  export { default as ToggleName } from './_toggle_name'
4
5
  export { default as ToggleCustomRadio } from './_toggle_custom_radio'
data/dist/menu.yml CHANGED
@@ -407,6 +407,10 @@ kits:
407
407
  platforms: *web
408
408
  description: Badges can be used for notification, tags, and status. They are used for count and numbers.
409
409
  status: "stable"
410
+ - name: "online_status"
411
+ platforms: *web
412
+ description: Online Status is a small indicator that lets the user know the status of a person or item.
413
+ status: "stable"
410
414
  - name: "pill"
411
415
  platforms: *all
412
416
  description: A pill uses both a keyword and a specific color to categorize an item.