playbook_ui_docs 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4617 → 14.8.0.pre.alpha.PLAY1615movenegativetoleftofcurrencysign4539

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 (10) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +7 -84
  3. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
  6. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +1 -2
  7. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -47
  8. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -59
  9. data/dist/playbook-doc.js +1 -1
  10. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e7996c340b098e207608b82f3ee8db7e880981a463801d7538f39bdd998560f1
4
- data.tar.gz: 2b71fc9dfb20e2d6fe1abbc9ae3449f2ed5f7be7eb795b9b9820fa065da6cba6
3
+ metadata.gz: '09a43a4d46127160800077864401c96f1a633e762d79a55a732817f82aab58a0'
4
+ data.tar.gz: 2d763ad05c0c9d165d4664c5a7c2adc78ee6046b05a4564bbb93fb8b509e2c11
5
5
  SHA512:
6
- metadata.gz: 6b319a64ed243b27a0a1cdb9c776788e581d619c4f6fde69a3be73322b93cad2523b91aef3b205ef0a7080d83a5a968851ecb3f21f61be29f6cf46de43aaacdc
7
- data.tar.gz: 10fd55dc22b54164f1df1b61c8aa8422aaf8e1ad49c7208826f96d58bc3b0961382eabfcbeb2c0f9f766341ffcbf508e9122f17fdd1a5367cfbc885e06b72d64
6
+ metadata.gz: de4ca762c121c045d52f6f552f9423b26363fe0a862ad2b926e3799d35973c81ab6e579831b204a2f06ed9a53f23f70982a4a67fc49fcac04fa4b21d46a4ad02
7
+ data.tar.gz: ee521e2eb8aa17c1116894ce1e29b6604170031b174a7a630da7b7762f3426d92bb75e6166f45770e8e4b206b314ee64156147c6663380989194007a77f8ed4b
data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb CHANGED
@@ -1,84 +1,7 @@
1
- <% checkboxes = [
2
- { name: 'Coffee', id: 'coffee', checked: false },
3
- { name: 'Ice Cream', id: 'ice-cream', checked: false },
4
- { name: 'Chocolate', id: 'chocolate', checked: true }
5
- ] %>
6
-
7
- <%= pb_rails("table", props: { container: false, size: "md" }) do %>
8
- <thead>
9
- <tr>
10
- <th>
11
- <%= pb_rails("checkbox", props: {
12
- checked: true,
13
- text: "Uncheck All",
14
- value: "checkbox-value",
15
- name: "main-checkbox",
16
- indeterminate: true,
17
- id: "indeterminate-checkbox"
18
- }) %>
19
- </th>
20
- </tr>
21
- </thead>
22
-
23
- <tbody>
24
- <% checkboxes.each do |checkbox| %>
25
- <tr>
26
- <td>
27
- <%= pb_rails("checkbox", props: {
28
- checked: checkbox[:checked],
29
- text: checkbox[:name],
30
- value: checkbox[:id],
31
- name: "#{checkbox[:id]}-indeterminate-checkbox",
32
- id: "#{checkbox[:id]}-indeterminate-checkbox",
33
- }) %>
34
- </td>
35
- </tr>
36
- <% end %>
37
- </tbody>
38
- <% end %>
39
-
40
- <script>
41
- document.addEventListener('DOMContentLoaded', function() {
42
- const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
43
- const mainCheckbox = document.getElementsByName("main-checkbox")[0];
44
- const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
45
-
46
- const updateMainCheckbox = () => {
47
- // Count the number of checked child checkboxes
48
- const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
49
- // Determine if the main checkbox should be in an indeterminate state
50
- const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
51
-
52
- // Set the main checkbox states
53
- mainCheckbox.indeterminate = indeterminate;
54
- mainCheckbox.checked = checkedCount > 0;
55
-
56
- // Determine the main checkbox label based on the number of checked checkboxes
57
- const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
58
-
59
- // Determine the icon class to add and remove based on the number of checked checkboxes
60
- const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
61
- const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
62
-
63
- // Update main checkbox label
64
- mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
65
-
66
- // Add and remove the icon class to the main checkbox wrapper
67
- mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
68
- mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
69
-
70
- // Toggle the visibility of the checkbox icon based on the indeterminate state
71
- mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
72
- mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
73
- };
74
-
75
- mainCheckbox.addEventListener('change', function() {
76
- childCheckboxes.forEach(cb => cb.checked = this.checked);
77
- updateMainCheckbox();
78
- });
79
-
80
- childCheckboxes.forEach(cb => {
81
- cb.addEventListener('change', updateMainCheckbox);
82
- });
83
- });
84
- </script>
1
+ <%= pb_rails("checkbox" , props: {
2
+ text: "Select ",
3
+ value: "checkbox-value",
4
+ name: "main",
5
+ indeterminate: true,
6
+ id: "test-indeterminate-js"
7
+ }) %>
data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED
@@ -23,7 +23,7 @@
23
23
  %>
24
24
 
25
25
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
26
- <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
26
+ <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
27
27
  <%= form.text_field :example_text_field, props: { label: true } %>
28
28
  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
29
29
  <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
92
92
  const selectedUserData = JSON.parse(selectedUserJSON)
93
93
 
94
94
  // set the input field's value
95
- event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
95
+ event.target.querySelector('input[name=example_user]').value = selectedUserData.login
96
96
 
97
97
  // log the selected option's dataset
98
98
  console.log('The selected user data:')
data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
2
- <%= form.text_field :example_text_field_loading, props: { label: true } %>
2
+ <%= form.text_field :example_text_field, props: { label: true } %>
3
3
 
4
4
  <%= form.actions do |action| %>
5
5
  <%= action.submit %>
data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED
@@ -22,74 +22,23 @@
22
22
  %>
23
23
 
24
24
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
25
- <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
26
- <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
27
- <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
28
- <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
29
- <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
30
- <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
31
- <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
32
- <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
33
- <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
34
- <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
35
- <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
36
- <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
25
+ <%= form.text_field :example_text_field, props: { label: true, required: true } %>
26
+ <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
27
+ <%= form.email_field :example_email_field, props: { label: true, required: true } %>
28
+ <%= form.number_field :example_number_field, props: { label: true, required: true } %>
29
+ <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
30
+ <%= form.password_field :example_password_field, props: { label: true, required: true } %>
31
+ <%= form.url_field :example_url_field, props: { label: true, required: true } %>
32
+ <%= form.text_area :example_text_area, props: { label: true, required: true } %>
33
+ <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
34
+ <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
35
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
37
36
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
38
37
  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
39
- <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
38
+ <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
40
39
 
41
40
  <%= form.actions do |action| %>
42
41
  <%= action.submit %>
43
42
  <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
44
43
  <% end %>
45
44
  <% end %>
46
-
47
- <!-- form.typeahead user results example template -->
48
- <template data-typeahead-example-result-option>
49
- <%= pb_rails("user", props: {
50
- name: tag(:slot, name: "name"),
51
- orientation: "horizontal",
52
- align: "left",
53
- avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
54
- avatar: true
55
- }) %>
56
- </template>
57
-
58
- <!-- form.typeahead JS example implementation -->
59
- <%= javascript_tag defer: "defer" do %>
60
- document.addEventListener("pb-typeahead-kit-search", function(event) {
61
- if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
62
-
63
- fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
64
- .then(response => response.json())
65
- .then((result) => {
66
- const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
67
-
68
- event.detail.setResults((result.items || []).map((user) => {
69
- const wrapper = resultOptionTemplate.content.cloneNode(true)
70
- wrapper.children[0].dataset.user = JSON.stringify(user)
71
- wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
72
- wrapper.querySelector('img').dataset.src = user.avatar_url
73
- return wrapper
74
- }))
75
- })
76
- })
77
-
78
-
79
- document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
80
- if (!event.target.dataset.typeaheadExample2) return
81
-
82
- const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
83
- const selectedUserData = JSON.parse(selectedUserJSON)
84
-
85
- // set the input field's value
86
- event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
87
-
88
- // log the selected option's dataset
89
- console.log('The selected user data:')
90
- console.dir(selectedUserData)
91
-
92
- // do even more with the data later - TBD
93
- event.target.dataset.user = selectedUserJSON
94
- })
95
- <% end %>
data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb CHANGED
@@ -6,7 +6,6 @@
6
6
  value: "selected_with_icon",
7
7
  checked: true,
8
8
  icon: true,
9
-
10
9
  }) do %>
11
10
  Selected, with icon
12
11
  <% end %>
@@ -37,4 +36,4 @@
37
36
  Disabled
38
37
  <% end %>
39
38
 
40
- </div>
39
+ </div>
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb CHANGED
@@ -41,50 +41,3 @@
41
41
  }) %>
42
42
  <% end %>
43
43
  <% end %>
44
-
45
- <br /><br /><br />
46
-
47
- <%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
48
- <%= pb_rails("timeline/item") do |item| %>
49
-
50
- <% item.label do %>
51
- <%= pb_rails("timeline/label") do %>
52
- <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
53
- <% end %>
54
- <% end %>
55
-
56
- <% item.step do %>
57
- <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
58
- <% end %>
59
-
60
- <% item.detail do %>
61
- <%= pb_rails("title_detail", props: {
62
- title: "Jackson Heights",
63
- detail: "37-27 74th Street"
64
- }) %>
65
- <% end %>
66
- <% end %>
67
-
68
- <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
69
- <%= pb_rails("title_detail", props: {
70
- title: "Society Hill",
71
- detail: "72 E St Astoria"
72
- }) %>
73
- <% end %>
74
-
75
- <%= pb_rails("timeline/item") do |item| %>
76
-
77
- <% item.step do %>
78
- <%= pb_rails("timeline/step") do %>
79
- <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
80
- <% end %>
81
- <% end %>
82
-
83
- <% item.detail do %>
84
- <%= pb_rails("title_detail", props: {
85
- title: "Greenpoint",
86
- detail: "81 Gate St Brooklyn"
87
- }) %>
88
- <% end %>
89
- <% end %>
90
- <% end %>
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx CHANGED
@@ -62,65 +62,6 @@ const TimelineWithChildren = (props) => (
62
62
  </Timeline.Detail>
63
63
  </Timeline.Item>
64
64
  </Timeline>
65
-
66
- <br />
67
- <br />
68
- <br />
69
-
70
- <Timeline orientation="vertical"
71
- showDate
72
- {...props}
73
- >
74
- <Timeline.Item lineStyle="solid"
75
- {...props}
76
- >
77
- <Timeline.Label>
78
- <Title size={4}
79
- text='Any Kit'
80
- />
81
- </Timeline.Label>
82
- <Timeline.Step icon="user"
83
- iconColor="royal"
84
- />
85
- <Timeline.Detail>
86
- <TitleDetail detail="37-27 74th Street"
87
- title="Jackson Heights"
88
- {...props}
89
- />
90
- </Timeline.Detail>
91
- </Timeline.Item>
92
-
93
- <Timeline.Item lineStyle="dotted"
94
- {...props}
95
- >
96
- <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
97
- <Timeline.Step icon="map-marker-alt"
98
- iconColor="purple"
99
- />
100
- <Timeline.Detail>
101
- <TitleDetail detail="72 E St Astoria"
102
- title="Society Hill"
103
- {...props}
104
- />
105
- </Timeline.Detail>
106
- </Timeline.Item>
107
-
108
- <Timeline.Item lineStyle="solid"
109
- {...props}
110
- >
111
- <Timeline.Step>
112
- <Pill text="3"
113
- variant="success"
114
- />
115
- </Timeline.Step>
116
- <Timeline.Detail>
117
- <TitleDetail detail="81 Gate St Brooklyn"
118
- title="Greenpoint"
119
- {...props}
120
- />
121
- </Timeline.Detail>
122
- </Timeline.Item>
123
- </Timeline>
124
65
  </div>
125
66
  )
126
67