playbook_ui_docs 12.23.0.pre.alpha.movemarkdown708 → 12.24.0.pre.alpha.play824745
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_avatar/docs/_avatar_swift.md +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -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 +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/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 +11 -6
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +2 -2
- data/dist/playbook-doc.js +11 -11
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 52a2c02ada7d89a73e58cbedaef142d4907534b3085b51b8726f07e1c0d4f1a5
|
4
|
+
data.tar.gz: 9e2066b01463934124325e98d6d967aeaccfdb3fe49598433221b651d8ca8cf9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6c7aa25bdd4d98e3cf2678be00e1ef1d3db37f16dc633da4a2633ecf53f8eb02f283bc43cad97f48aa5f8a65504b9712a28c620fa4511d3a908e09a226ad3dbe
|
7
|
+
data.tar.gz: a580dcb426e190b669306cb04493575861f23109ff6dea2d1eeb761ae198b544b9833fb8b4dac79299a026913a831c5cdaaa3bafe5b627d77047100b617ebaab
|
@@ -0,0 +1 @@
|
|
1
|
+
![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
|
@@ -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,11 @@ 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
|
8
9
|
|
9
10
|
rails:
|
10
11
|
- phone_number_input_default: Default
|
11
12
|
- phone_number_input_preferred_countries: Preferred Countries
|
12
13
|
- phone_number_input_initial_country: Initial Country
|
13
|
-
- phone_number_input_only_countries: Limited Countries
|
14
|
+
- phone_number_input_only_countries: Limited Countries
|
15
|
+
- phone_number_input_validation: Form Validation
|
@@ -2,3 +2,4 @@ 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'
|
@@ -1,15 +1,20 @@
|
|
1
|
-
import React from
|
1
|
+
import React from "react"
|
2
2
|
|
3
|
-
import Title from
|
3
|
+
import Title from "../_title"
|
4
4
|
|
5
5
|
const TitleLightWeight = (props) => {
|
6
6
|
return (
|
7
7
|
<div>
|
8
|
-
<Title
|
9
|
-
bold={false}
|
8
|
+
<Title bold={false}
|
10
9
|
size={1}
|
11
|
-
tag=
|
12
|
-
text=
|
10
|
+
tag='h1'
|
11
|
+
text='Title 1'
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
<Title bold={false}
|
15
|
+
size={2}
|
16
|
+
tag='h2'
|
17
|
+
text='Title 2'
|
13
18
|
{...props}
|
14
19
|
/>
|
15
20
|
</div>
|
@@ -1,4 +1,4 @@
|
|
1
1
|
##### Prop
|
2
|
-
Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
|
3
|
-
Title `size
|
2
|
+
Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
|
3
|
+
Title `size 3` uses a light font weight by default and will not accept a bold font weight.
|
4
4
|
Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.
|