playbook_ui_docs 13.32.0.pre.alpha.PLAY14143288 → 13.32.0.pre.alpha.PLAY14143297

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 (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +4 -0
  3. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +10 -0
  4. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +31 -0
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
  7. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +5 -1
  8. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +1 -0
  9. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +2 -0
  10. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +2 -0
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +4 -1
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +3 -2
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +2 -0
  14. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -0
  15. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +48 -0
  16. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +3 -0
  17. data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
  20. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
  22. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +22 -57
  23. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
  24. data/dist/playbook-doc.js +26 -26
  25. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f14033d25185093809f123b76f10a331721f6c6ae3b564a285b341f1a212d74e
4
- data.tar.gz: 4a6c994851f19a665da30da7d03969c75045f26c15c361e6342695f1b0911f9d
3
+ metadata.gz: cb66af7bb33430b393d446ddce76cb97cf7e2499083d93c58335b783eb2c6bc6
4
+ data.tar.gz: 239afdc41fd0b4bbdb389825ad9965f45dbe56002dcc7b3d75df03c0f92f08ae
5
5
  SHA512:
6
- metadata.gz: 98f445b0f9eac6dd815510a92cb3e9e403056557a4ad86aef576fb456670227fd61725845cf67cdc221b17375a15fce77d985d16ae4798e8b8790b3594244ba4
7
- data.tar.gz: 5775b0804049b39e46c9d02f915835966d71b14661f1c7ad0dacb08697b3fd7cce0353b8e83909fb7e4f89ab9ddaa6e65b67e00c92d1f6181b843b9bdb3322f2
6
+ metadata.gz: 31ecbc455fb6d0fd330d8e6794e9e237822a00803714263d447ec69bc7917ee5a3ee0b876d1edbca1d9bdc6d36f05713e2269dd0bc69f51ae8c804eb1affe06f
7
+ data.tar.gz: 76f32a1d8ddb1b736b7ff3420f86648dbcde2960946f4281683b3a8bf9ef69a46ed913bebf6ba651a48ed39c464a7dd8c21ff8ecef3ce18a51a075c237adc678
@@ -1,2 +1,6 @@
1
1
  The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
2
2
  It's important to note that certain options may require specific script imports to function properly.
3
+
4
+ Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
5
+
6
+ You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
@@ -0,0 +1,10 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+ import { Dropdown } from 'playbook-ui'
3
+
4
+ const DropdownBlankSelection = (props) => {
5
+ const options = [
6
+ {
7
+ label: "United States",
8
+ value: "United States",
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ },
14
+ {
15
+ label: "Pakistan",
16
+ value: "Pakistan",
17
+ }
18
+ ];
19
+
20
+ return (
21
+ <>
22
+ <Dropdown
23
+ blankSelection="Select one..."
24
+ options={options}
25
+ {...props}
26
+ />
27
+ </>
28
+ )
29
+ }
30
+
31
+ export default DropdownBlankSelection
@@ -9,6 +9,7 @@ examples:
9
9
  - dropdown_with_custom_padding: Custom Option Padding
10
10
  - dropdown_error: Dropdown with Error
11
11
  - dropdown_default_value: Default Value
12
+ - dropdown_blank_selection: Blank Selection
12
13
 
13
14
  react:
14
15
  - dropdown_default: Default
@@ -20,6 +21,7 @@ examples:
20
21
  - dropdown_with_custom_padding: Custom Option Padding
21
22
  - dropdown_error: Dropdown with Error
22
23
  - dropdown_default_value: Default Value
24
+ - dropdown_blank_selection: Blank Selection
23
25
  # - dropdown_with_autocomplete: Autocomplete
24
26
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
25
27
  # - dropdown_with_external_control: useDropdown Hook
@@ -10,4 +10,5 @@ export { default as DropdownWithExternalControl } from './_dropdown_with_externa
10
10
  export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
11
11
  export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
12
12
  export { default as DropdownError } from './_dropdown_error.jsx'
13
- export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
13
+ export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
14
+ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
@@ -1 +1,5 @@
1
- <%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
1
+ <%= pb_rails("form_pill", props: {
2
+ text_transform: "lowercase" ,
3
+ text: "THIS IS A TAG",
4
+ tabindex: 0,
5
+ }) %>
@@ -6,6 +6,7 @@ const FormPillExample = (props) => {
6
6
  <div>
7
7
  <FormPill
8
8
  onClick={() => alert('Click!')}
9
+ tabIndex={0}
9
10
  text="THIS IS A TAG"
10
11
  textTransform="lowercase"
11
12
  {...props}
@@ -2,6 +2,7 @@
2
2
  name: "Anna Black",
3
3
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
4
4
  size: "small",
5
+ tabindex: 0,
5
6
  }) %>
6
7
 
7
8
  <br />
@@ -10,4 +11,5 @@
10
11
  <%= pb_rails("form_pill", props: {
11
12
  name: "Anna Black",
12
13
  size: "small",
14
+ tabindex: 0,
13
15
  }) %>
@@ -9,6 +9,7 @@ const FormPillSize = (props) => {
9
9
  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
10
10
  name="Anna Black"
11
11
  size="small"
12
+ tabIndex={0}
12
13
  {...props}
13
14
  />
14
15
  <br />
@@ -16,6 +17,7 @@ const FormPillSize = (props) => {
16
17
  <FormPill
17
18
  name="Anna Black"
18
19
  size="small"
20
+ tabIndex={0}
19
21
  {...props}
20
22
  />
21
23
  </div>
@@ -1 +1,4 @@
1
- <%= pb_rails("form_pill", props: { text: "this is a tag" }) %>
1
+ <%= pb_rails("form_pill", props: {
2
+ text: "this is a tag",
3
+ tabindex: 0,
4
+ }) %>
@@ -6,8 +6,9 @@ const FormPillDefault = (props) => {
6
6
  <div>
7
7
  <FormPill
8
8
  onClick={() => {
9
- alert('Click!')
10
- }}
9
+ alert('Click!')
10
+ }}
11
+ tabIndex={0}
11
12
  text="this is a tag"
12
13
  {...props}
13
14
  />
@@ -1,6 +1,7 @@
1
1
  <%= pb_rails("form_pill", props: {
2
2
  name: "Anna Black",
3
3
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
4
+ tabindex: 0,
4
5
  }) %>
5
6
 
6
7
  <br />
@@ -8,4 +9,5 @@
8
9
 
9
10
  <%= pb_rails("form_pill", props: {
10
11
  name: "Anna Black",
12
+ tabindex: 0,
11
13
  }) %>
@@ -9,6 +9,7 @@ const FormPillDefault = (props) => {
9
9
  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
10
10
  name="Anna Black"
11
11
  onClick={() => alert('Click!')}
12
+ tabIndex={0}
12
13
  {...props}
13
14
  />
14
15
  <br />
@@ -16,6 +17,7 @@ const FormPillDefault = (props) => {
16
17
  <FormPill
17
18
  name="Anna Black"
18
19
  onClick={() => alert('Click!')}
20
+ tabIndex={0}
19
21
  {...props}
20
22
  />
21
23
  </div>
@@ -0,0 +1,48 @@
1
+ <%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
3
+ <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
4
+ <%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
6
+ <% end %>
7
+
8
+ <div id="about">
9
+ <%= pb_rails("body", props: { text: "This is about!" }) %>
10
+ </div>
11
+
12
+ <div id="case_studies">
13
+ <%= pb_rails("body", props: { text: "This is case studies!" }) %>
14
+ </div>
15
+
16
+ <div id="service">
17
+ <%= pb_rails("body", props: { text: "This is service!" }) %>
18
+ </div>
19
+
20
+ <div id="contacts">
21
+ <%= pb_rails("body", props: { text: "This is contacts!" }) %>
22
+ </div>
23
+
24
+ <script>
25
+ // The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
26
+ // The active prop can be used to highlight this active state.
27
+ const navItemClass = "pb_nav_list_kit_item"
28
+ const navItemActiveClass = "pb_nav_list_kit_item_active"
29
+ const dataNavItems = "[data-pb-tab-target]"
30
+
31
+ const navItemTabs = document.querySelectorAll(dataNavItems)
32
+ navItemTabs.forEach(navItemTab => {
33
+ navItemTab.addEventListener("click", event => {
34
+ const navItemTabs = document.querySelectorAll(dataNavItems)
35
+ navItemTabs.forEach(navItemTab => {
36
+ if (navItemTab === event.target.closest(dataNavItems)) {
37
+ navItemTab.classList.add(navItemActiveClass)
38
+ navItemTab.classList.remove(navItemClass)
39
+ } else {
40
+ if (navItemTab.classList.contains(navItemActiveClass)) {
41
+ navItemTab.classList.remove(navItemActiveClass)
42
+ navItemTab.classList.add(navItemClass)
43
+ }
44
+ }
45
+ })
46
+ })
47
+ })
48
+ </script>
@@ -0,0 +1,3 @@
1
+ The Nav kit can also be used to create dynamic tabbing. To do so, use the boolean `tabbing` prop as shown here.
2
+
3
+ All divs you want to use as tabs MUST have an id attached to them. To link the tab to the nav, use the required data attribute `pb_tab_target` on each nav/item and pass it the id of the tab you want linked to that specific nav/item. See code example below to see this in action.
@@ -19,6 +19,7 @@ examples:
19
19
  - block_nav: Block
20
20
  - block_no_title_nav: Without Title
21
21
  - new_tab: Open in a New Tab
22
+ - tab_nav: Tab Nav
22
23
 
23
24
  react:
24
25
  - default_nav: Default
@@ -0,0 +1 @@
1
+ <%= pb_rails("star_rating", props: { padding_bottom: "xs", variant: "interactive" }) %>
@@ -13,4 +13,4 @@ examples:
13
13
  - star_rating_background_options: Background Options
14
14
  - star_rating_hide: Layout Options
15
15
  - star_rating_number_config: Number Config
16
- - star_rating_size_options: Size Options
16
+ - star_rating_size_options: Size Options
@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
5
5
  import Title from '../../pb_title/_title'
6
6
 
7
7
  const TextInputDefault = (props) => {
8
+ const [firstName, setFirstName] = useState('')
8
9
  const handleOnChangeFirstName = ({ target }) => {
9
10
  setFirstName(target.value)
10
11
  }
11
12
  const ref = React.createRef()
12
13
 
13
- const [firstName, setFirstName] = useState('')
14
14
  const [formFields, setFormFields] = useState({
15
15
  firstName: 'Jane',
16
16
  lastName: 'Doe',
@@ -1,3 +1,5 @@
1
+ /* eslint-disable react/no-multi-comp */
2
+
1
3
  import React, { useState } from 'react'
2
4
 
3
5
  import {
@@ -1,63 +1,28 @@
1
- <%= pb_rails("typeahead", props: {
2
- label: "user",
3
- name: :foo,
4
- data: { typeahead_example: true },
5
- input_options: {
6
- classname: "my-typeahead-class",
7
- data: {
8
- typeahead_testing: "data field test"
9
- },
10
- id: "typeahead-input-id-test",
11
- },
12
- })%>
13
-
14
- <br><br><br>
15
-
16
- <%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
17
- <%= pb_rails("body") do %>
18
- Use the above input to search for users on Github, and see the results as you type.
19
- <% end %>
20
-
21
- <%= pb_rails("body") do %>
22
- When you make a selection, you will see it appear in the list below
23
- <% end %>
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
24
9
 
25
- <div data-selected-option></div>
26
- <% end %>
27
-
28
- <template data-typeahead-example-result-option>
29
- <%= pb_rails("user", props: {
30
- name: tag(:slot, name: "name"),
31
- orientation: "horizontal",
32
- align: "left",
33
- avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
34
- avatar: true
35
- }) %>
36
- </template>
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "Colors",
15
+ name: :foo,
16
+ is_multi: false
17
+ })
18
+ %>
37
19
 
38
20
  <%= javascript_tag defer: "defer" do %>
39
- document.addEventListener("pb-typeahead-kit-search", function(event) {
40
- if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
41
-
42
- fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
43
- .then(response => response.json())
44
- .then((result) => {
45
- const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
46
-
47
- event.detail.setResults((result.items || []).map((user) => {
48
- const wrapper = resultOptionTemplate.content.cloneNode(true)
49
- wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
50
- wrapper.querySelector('img').dataset.src = user.avatar_url
51
- return wrapper
52
- }))
53
- })
21
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
22
+ console.log('Single Option selected')
23
+ console.dir(event.detail)
54
24
  })
55
-
56
-
57
- document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
58
- if (!event.target.dataset.typeaheadExample) return;
59
-
60
- document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
61
- document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
25
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
26
+ console.log('All options cleared')
62
27
  })
63
28
  <% end %>
@@ -45,8 +45,6 @@ const promiseOptions = (inputValue) =>
45
45
 
46
46
  const TypeaheadWithPillsAsync = (props) => {
47
47
  const [users, setUsers] = useState([])
48
- const handleOnChange = (value) => setUsers(formatUsers(value))
49
- const formatValue = (users) => formatUsers(users)
50
48
  const formatUsers = (users) => {
51
49
  const results = () => (users.map((user) => {
52
50
  if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,6 +55,8 @@ const TypeaheadWithPillsAsync = (props) => {
57
55
  }))
58
56
  return results()
59
57
  }
58
+ const handleOnChange = (value) => setUsers(formatUsers(value))
59
+ const formatValue = (users) => formatUsers(users)
60
60
 
61
61
  return (
62
62
  <>