playbook_ui_docs 12.26.1.pre.alpha.railsmultilevelimprovements842 → 12.28.0.pre.alpha.20230613implementbakesupport865
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +14 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +60 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb +11 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx +36 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md +19 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +1 -2
- data/dist/playbook-doc.js +9 -9
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 01b3fb9a706c9943042356a2f51edcd0e7ba199667090fc8db34e8b9a6317ccb
|
|
4
|
+
data.tar.gz: 436621f03c7350be624910e6b1c8be5e6389d494dd8e35a8b474367e2df38867
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 91458cd1c421b338d693405fd0b4cf61bf45dc6ffc9f4b73482d2927ac2372a5f43f1cccd0722ba1c0c2189b40b3e42ba065aed08abbf0db8cfd82342435cc29
|
|
7
|
+
data.tar.gz: 00fda82effe7904428e3b73733caa47ab6329ab9c59251344b12cb5cbd0082bd4fa970693f6925532344e794ced94290a63596fa3d576f1eb7bc12038ba89810
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react'
|
|
2
|
+
import { Body, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputAccessInputElement = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
|
|
11
|
+
}, [])
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<Body text="Click the input field below:" />
|
|
17
|
+
<PhoneNumberInput
|
|
18
|
+
id="access-input-element"
|
|
19
|
+
ref={ref}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default PhoneNumberInputAccessInputElement
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
|
|
2
|
+
|
|
3
|
+
`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputClearField = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Use clearField() to clear the field.
|
|
9
|
+
const handleClick = () => {
|
|
10
|
+
ref.current.clearField()
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<PhoneNumberInput
|
|
17
|
+
id="clear-field"
|
|
18
|
+
ref={ref}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<Button
|
|
23
|
+
onClick={handleClick}
|
|
24
|
+
text="Clear the Input Field"
|
|
25
|
+
/>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default PhoneNumberInputClearField
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
|
|
2
|
+
|
|
3
|
+
`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.
|
|
@@ -0,0 +1,14 @@
|
|
|
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 }) %>
|
|
3
|
+
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
|
4
|
+
</form>
|
|
5
|
+
|
|
6
|
+
<% content_for(:pb_js) do %>
|
|
7
|
+
<%= javascript_tag do %>
|
|
8
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
9
|
+
document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
|
|
10
|
+
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
|
11
|
+
})
|
|
12
|
+
})
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputValidation = (props) => {
|
|
5
|
+
const [formErrors, setFormErrors] = useState("");
|
|
6
|
+
const [showFormErrors, setShowFormErrors] = useState(false);
|
|
7
|
+
const [phoneNumber, setPhoneNumber] = useState("");
|
|
8
|
+
const [countryCode, setCountryCode] = useState("af");
|
|
9
|
+
|
|
10
|
+
const handleOnValidate = (valid) => {
|
|
11
|
+
setFormErrors(
|
|
12
|
+
valid ? "" : "Please correct the fields below and try again."
|
|
13
|
+
);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const handleOnChange = ({ iso2, number }) => {
|
|
17
|
+
setCountryCode(iso2);
|
|
18
|
+
setPhoneNumber(number);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const handleOnSubmit = (e) => {
|
|
22
|
+
if (showFormErrors) e.preventDefault()
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setShowFormErrors(formErrors.length > 0);
|
|
27
|
+
}, [formErrors]);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<form
|
|
31
|
+
action=""
|
|
32
|
+
method="get"
|
|
33
|
+
onSubmit={handleOnSubmit}
|
|
34
|
+
>
|
|
35
|
+
{showFormErrors && (
|
|
36
|
+
<FixedConfirmationToast
|
|
37
|
+
marginBottom="md"
|
|
38
|
+
status="error"
|
|
39
|
+
text={formErrors}
|
|
40
|
+
/>
|
|
41
|
+
)}
|
|
42
|
+
<PhoneNumberInput
|
|
43
|
+
error="Missing phone number."
|
|
44
|
+
id="validation"
|
|
45
|
+
initialCountry={countryCode}
|
|
46
|
+
onChange={handleOnChange}
|
|
47
|
+
onValidate={handleOnValidate}
|
|
48
|
+
required
|
|
49
|
+
value={phoneNumber}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
52
|
+
<Button
|
|
53
|
+
htmlType="submit"
|
|
54
|
+
text="Save Phone Number"
|
|
55
|
+
/>
|
|
56
|
+
</form>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default PhoneNumberInputValidation;
|
|
@@ -5,9 +5,13 @@ examples:
|
|
|
5
5
|
- phone_number_input_preferred_countries: Preferred Countries
|
|
6
6
|
- phone_number_input_initial_country: Initial Country
|
|
7
7
|
- phone_number_input_only_countries: Limited Countries
|
|
8
|
+
- phone_number_input_validation: Form Validation
|
|
9
|
+
- phone_number_input_clear_field: Clearing the Input Field
|
|
10
|
+
- phone_number_input_access_input_element: Accessing the Input Element
|
|
8
11
|
|
|
9
12
|
rails:
|
|
10
13
|
- phone_number_input_default: Default
|
|
11
14
|
- phone_number_input_preferred_countries: Preferred Countries
|
|
12
15
|
- phone_number_input_initial_country: Initial Country
|
|
13
|
-
- phone_number_input_only_countries: Limited Countries
|
|
16
|
+
- phone_number_input_only_countries: Limited Countries
|
|
17
|
+
- phone_number_input_validation: Form Validation
|
|
@@ -2,3 +2,6 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
|
|
|
2
2
|
export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
|
|
3
3
|
export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
|
|
4
4
|
export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
|
|
5
|
+
export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
|
|
6
|
+
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
|
7
|
+
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<div class="pb--doc-demo-row">
|
|
2
|
+
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("selectable_card_icon", props: {
|
|
5
|
+
custom_icon: svg_url,
|
|
6
|
+
title_text: "Customization",
|
|
7
|
+
body_text: "Personalize everything",
|
|
8
|
+
input_id: 1,
|
|
9
|
+
checked: true,
|
|
10
|
+
}) %>
|
|
11
|
+
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import SelectableCardIcon from '../_selectable_card_icon'
|
|
3
|
+
|
|
4
|
+
const svg = {
|
|
5
|
+
newChat: (
|
|
6
|
+
<svg
|
|
7
|
+
ariaHidden="true"
|
|
8
|
+
focusable="false"
|
|
9
|
+
role="img"
|
|
10
|
+
viewBox="0 0 512 512"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
),
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const SelectableCardIconCustom = (props) => {
|
|
22
|
+
return (
|
|
23
|
+
<div className="pb--doc-demo-row">
|
|
24
|
+
<SelectableCardIcon
|
|
25
|
+
bodyText="Talk to someone you love"
|
|
26
|
+
checked
|
|
27
|
+
customIcon={svg.newChat}
|
|
28
|
+
inputId={1}
|
|
29
|
+
titleText="New Chat"
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default SelectableCardIconCustom
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Tips for Custom Icons
|
|
2
|
+
|
|
3
|
+
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
|
4
|
+
|
|
5
|
+
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
|
6
|
+
|
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
|
8
|
+
|
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
|
10
|
+
|
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
|
12
|
+
|
|
13
|
+
### React
|
|
14
|
+
|
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
|
16
|
+
|
|
17
|
+
### Rails
|
|
18
|
+
|
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
|
@@ -5,10 +5,10 @@ examples:
|
|
|
5
5
|
- selectable_card_icon_checkmark: Checkmark
|
|
6
6
|
- selectable_card_icon_single_select: Single Select
|
|
7
7
|
- selectable_card_icon_options: With Options
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- selectable_card_icon_custom: Custom Icon
|
|
10
9
|
|
|
11
10
|
react:
|
|
12
11
|
- selectable_card_icon_default: Default
|
|
13
12
|
- selectable_card_icon_checkmark: Checkmark
|
|
14
13
|
- selectable_card_icon_single_select: Single Select
|
|
14
|
+
- selectable_card_icon_custom: Custom Icon
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
|
|
2
2
|
export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
|
|
3
3
|
export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
|
|
4
|
+
export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
##### Prop
|
|
2
|
-
Title `size 1` & `size
|
|
3
|
-
Title `size 3` uses a light font weight by default and will not accept a bold font weight.
|
|
2
|
+
Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
|
|
4
3
|
Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.
|