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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +5 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +4 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +3 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -0
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +48 -0
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +3 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +1 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +22 -57
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
- data/dist/playbook-doc.js +26 -26
- metadata +7 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cb66af7bb33430b393d446ddce76cb97cf7e2499083d93c58335b783eb2c6bc6
|
4
|
+
data.tar.gz: 239afdc41fd0b4bbdb389825ad9965f45dbe56002dcc7b3d75df03c0f92f08ae
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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'
|
@@ -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,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.
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("star_rating", props: { padding_bottom: "xs", variant: "interactive" }) %>
|
@@ -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,63 +1,28 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
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
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
name:
|
31
|
-
|
32
|
-
|
33
|
-
|
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-
|
40
|
-
|
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
|
<>
|