playbook_ui_docs 12.26.1.pre.alpha.railsmultilevelimprovements837 → 12.27.0.pre.alpha.expandednotworking853
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_card/docs/_card_background.jsx +4 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +12 -18
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +19 -23
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -2
- 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 +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +1 -2
- data/dist/playbook-doc.js +9 -9
- metadata +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +0 -87
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cd6c4463b1d105dd23ca16535f94acbce3bd7984a40939060c5bee736a6df7b7
|
4
|
+
data.tar.gz: 989367d7fc387521be5458382c91ef22794b169032a1df5c5605c4dfb00f0010
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0524b78ca67a91baf1aa7388d120ff4ba57a37965196446f6974d938ed6af081215388f7db97308d01cf71a8ed132baf270c235d0c8958a80736e548a78123de
|
7
|
+
data.tar.gz: ce812010bfc1b5ffa90ba46b230979740b5b5be474fe92871126f3aea90f66c25acad6521552b7faa7221e16256ea91c5eae945422f8c632ea29914805e6801e
|
@@ -57,7 +57,7 @@ const CardBackground = (props) => {
|
|
57
57
|
background="product_1_background"
|
58
58
|
marginBottom="sm"
|
59
59
|
{...props}
|
60
|
-
|
60
|
+
>
|
61
61
|
<Body
|
62
62
|
dark
|
63
63
|
text="Product 1 Background"
|
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
|
|
69
69
|
<Card
|
70
70
|
background="product_7_highlight"
|
71
71
|
marginBottom="sm"
|
72
|
-
{...props}
|
73
|
-
>
|
72
|
+
{...props} >
|
74
73
|
<Body
|
75
74
|
dark
|
76
|
-
text="Product 7 Highlight"
|
77
|
-
|
75
|
+
text="Product 7 Highlight"
|
76
|
+
/>
|
78
77
|
</Card>
|
79
78
|
|
80
79
|
|
@@ -49,18 +49,15 @@ const DialogFullHeight = () => {
|
|
49
49
|
<Flex wrap>
|
50
50
|
<Button id="sm"
|
51
51
|
marginRight="md"
|
52
|
-
onClick={toggleHeaderSeparatorDialog}
|
53
|
-
>
|
52
|
+
onClick={toggleHeaderSeparatorDialog}>
|
54
53
|
{"Small Dialog"}
|
55
54
|
</Button>
|
56
55
|
<Button marginRight="md"
|
57
|
-
onClick={toggleFooterSeparatorDialog}
|
58
|
-
>
|
56
|
+
onClick={toggleFooterSeparatorDialog}>
|
59
57
|
{"Medium Dialog"}
|
60
58
|
</Button>
|
61
59
|
<Button marginRight="md"
|
62
|
-
onClick={toggleBothSeparatorsDialog}
|
63
|
-
>
|
60
|
+
onClick={toggleBothSeparatorsDialog}>
|
64
61
|
{"Large Dialog"}
|
65
62
|
</Button>
|
66
63
|
</Flex>
|
@@ -92,8 +89,7 @@ const DialogFullHeight = () => {
|
|
92
89
|
<Dialog.Footer>
|
93
90
|
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
94
91
|
<Button onClick={toggle}
|
95
|
-
variant="link"
|
96
|
-
>
|
92
|
+
variant="link">
|
97
93
|
{"Back"}
|
98
94
|
</Button>
|
99
95
|
</Dialog.Footer>
|
@@ -48,18 +48,15 @@ const DialogFullHeightPlacement = () => {
|
|
48
48
|
<Flex wrap>
|
49
49
|
<Button id="sm"
|
50
50
|
marginRight="md"
|
51
|
-
onClick={toggleHeaderSeparatorDialog}
|
52
|
-
>
|
51
|
+
onClick={toggleHeaderSeparatorDialog}>
|
53
52
|
{"Left Dialog"}
|
54
53
|
</Button>
|
55
54
|
<Button marginRight="xl"
|
56
|
-
onClick={toggleFooterSeparatorDialog}
|
57
|
-
>
|
55
|
+
onClick={toggleFooterSeparatorDialog}>
|
58
56
|
{"Center Dialog"}
|
59
57
|
</Button>
|
60
58
|
<Button marginRight="xl"
|
61
|
-
onClick={toggleBothSeparatorsDialog}
|
62
|
-
>
|
59
|
+
onClick={toggleBothSeparatorsDialog}>
|
63
60
|
{"Right Dialog"}
|
64
61
|
</Button>
|
65
62
|
</Flex>
|
@@ -91,8 +88,7 @@ const DialogFullHeightPlacement = () => {
|
|
91
88
|
<Dialog.Footer>
|
92
89
|
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
93
90
|
<Button onClick={toggle}
|
94
|
-
variant="link"
|
95
|
-
>
|
91
|
+
variant="link">
|
96
92
|
{"Back"}
|
97
93
|
</Button>
|
98
94
|
</Dialog.Footer>
|
@@ -16,12 +16,10 @@ const DialogScrollable = () => {
|
|
16
16
|
return (
|
17
17
|
<>
|
18
18
|
<Button marginRight="md"
|
19
|
-
onClick={toggleDialog1}
|
20
|
-
>{'Open Dialog'}
|
19
|
+
onClick={toggleDialog1}>{'Open Dialog'}
|
21
20
|
</Button>
|
22
21
|
<Button marginRight="md"
|
23
|
-
onClick={toggleDialog2}
|
24
|
-
>{'Open Full Height Dialog'}
|
22
|
+
onClick={toggleDialog2}>{'Open Full Height Dialog'}
|
25
23
|
</Button>
|
26
24
|
<Dialog
|
27
25
|
cancelButton="Cancel"
|
@@ -1,62 +1,62 @@
|
|
1
1
|
<% treeData = [{
|
2
2
|
label: "Power Home Remodeling",
|
3
3
|
value: "Power Home Remodeling",
|
4
|
-
id: "
|
4
|
+
id: "100",
|
5
5
|
expanded: true,
|
6
6
|
children: [
|
7
7
|
{
|
8
8
|
label: "People",
|
9
9
|
value: "People",
|
10
|
-
id: "
|
10
|
+
id: "101",
|
11
11
|
children: [
|
12
12
|
{
|
13
13
|
label: "Talent Acquisition",
|
14
14
|
value: "Talent Acquisition",
|
15
|
-
id: "
|
15
|
+
id: "102",
|
16
16
|
},
|
17
17
|
{
|
18
18
|
label: "Business Affairs",
|
19
19
|
value: "Business Affairs",
|
20
|
-
id: "
|
20
|
+
id: "103",
|
21
21
|
children: [
|
22
22
|
{
|
23
23
|
label: "Initiatives",
|
24
24
|
value: "Initiatives",
|
25
|
-
id: "
|
25
|
+
id: "104",
|
26
26
|
},
|
27
27
|
{
|
28
28
|
label: "Learning & Development",
|
29
29
|
value: "Learning & Development",
|
30
|
-
id: "
|
30
|
+
id: "105",
|
31
31
|
},
|
32
32
|
],
|
33
33
|
},
|
34
34
|
{
|
35
35
|
label: "People Experience",
|
36
36
|
value: "People Experience",
|
37
|
-
id: "
|
37
|
+
id: "106",
|
38
38
|
},
|
39
39
|
],
|
40
40
|
},
|
41
41
|
{
|
42
42
|
label: "Contact Center",
|
43
43
|
value: "Contact Center",
|
44
|
-
id: "
|
44
|
+
id: "107",
|
45
45
|
children: [
|
46
46
|
{
|
47
47
|
label: "Appointment Management",
|
48
48
|
value: "Appointment Management",
|
49
|
-
id: "
|
49
|
+
id: "108",
|
50
50
|
},
|
51
51
|
{
|
52
52
|
label: "Customer Service",
|
53
53
|
value: "Customer Service",
|
54
|
-
id: "
|
54
|
+
id: "109",
|
55
55
|
},
|
56
56
|
{
|
57
57
|
label: "Energy",
|
58
58
|
value: "Energy",
|
59
|
-
id: "
|
59
|
+
id: "110",
|
60
60
|
},
|
61
61
|
],
|
62
62
|
},
|
@@ -65,14 +65,8 @@
|
|
65
65
|
|
66
66
|
|
67
67
|
|
68
|
-
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
69
68
|
<%= pb_rails("multi_level_select", props: {
|
70
|
-
id: "
|
69
|
+
id: "multi-level-select-default-rails",
|
71
70
|
name: "my_array",
|
72
71
|
tree_data: treeData
|
73
72
|
}) %>
|
74
|
-
<%= form.actions do |action| %>
|
75
|
-
<%= action.submit %>
|
76
|
-
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
77
|
-
<% end %>
|
78
|
-
<% end %>
|
@@ -12,6 +12,7 @@ const treeData = [
|
|
12
12
|
label: "People",
|
13
13
|
value: "People",
|
14
14
|
id: "people1",
|
15
|
+
expanded: true,
|
15
16
|
children: [
|
16
17
|
{
|
17
18
|
label: "Talent Acquisition",
|
@@ -75,11 +76,10 @@ const MultiLevelSelectDefault = (props) => {
|
|
75
76
|
id='multiselect-default'
|
76
77
|
onSelect={(selectedNodes) =>
|
77
78
|
console.log(
|
78
|
-
"Selected Items
|
79
|
+
"Selected Items",
|
79
80
|
selectedNodes
|
80
81
|
)
|
81
82
|
}
|
82
|
-
returnAllSelected
|
83
83
|
treeData={treeData}
|
84
84
|
{...props}
|
85
85
|
/>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
|
2
2
|
|
3
|
-
For the React version of the kit, the `onSelect` prop returns an array of all checked items
|
3
|
+
For the React version of the kit, the `onSelect` prop returns an array of objects. This array contains all checked items irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
|
4
4
|
|
5
|
-
|
5
|
+
For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].
|
@@ -1,62 +1,62 @@
|
|
1
1
|
<% treeData = [{
|
2
2
|
label: "Power Home Remodeling",
|
3
3
|
value: "Power Home Remodeling",
|
4
|
-
id: "
|
4
|
+
id: "100",
|
5
5
|
expanded: true,
|
6
6
|
children: [
|
7
7
|
{
|
8
8
|
label: "People",
|
9
9
|
value: "People",
|
10
|
-
id: "
|
10
|
+
id: "101",
|
11
11
|
children: [
|
12
12
|
{
|
13
13
|
label: "Talent Acquisition",
|
14
14
|
value: "Talent Acquisition",
|
15
|
-
id: "
|
15
|
+
id: "102",
|
16
16
|
},
|
17
17
|
{
|
18
18
|
label: "Business Affairs",
|
19
19
|
value: "Business Affairs",
|
20
|
-
id: "
|
20
|
+
id: "103",
|
21
21
|
children: [
|
22
22
|
{
|
23
23
|
label: "Initiatives",
|
24
24
|
value: "Initiatives",
|
25
|
-
id: "
|
25
|
+
id: "104",
|
26
26
|
},
|
27
27
|
{
|
28
28
|
label: "Learning & Development",
|
29
29
|
value: "Learning & Development",
|
30
|
-
id: "
|
30
|
+
id: "105",
|
31
31
|
},
|
32
32
|
],
|
33
33
|
},
|
34
34
|
{
|
35
35
|
label: "People Experience",
|
36
36
|
value: "People Experience",
|
37
|
-
id: "
|
37
|
+
id: "106",
|
38
38
|
},
|
39
39
|
],
|
40
40
|
},
|
41
41
|
{
|
42
42
|
label: "Contact Center",
|
43
43
|
value: "Contact Center",
|
44
|
-
id: "
|
44
|
+
id: "107",
|
45
45
|
children: [
|
46
46
|
{
|
47
47
|
label: "Appointment Management",
|
48
48
|
value: "Appointment Management",
|
49
|
-
id: "
|
49
|
+
id: "108",
|
50
50
|
},
|
51
51
|
{
|
52
52
|
label: "Customer Service",
|
53
53
|
value: "Customer Service",
|
54
|
-
id: "
|
54
|
+
id: "109",
|
55
55
|
},
|
56
56
|
{
|
57
57
|
label: "Energy",
|
58
58
|
value: "Energy",
|
59
|
-
id: "
|
59
|
+
id: "110",
|
60
60
|
},
|
61
61
|
],
|
62
62
|
},
|
@@ -65,15 +65,11 @@
|
|
65
65
|
|
66
66
|
|
67
67
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
<%= action.submit %>
|
77
|
-
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
78
|
-
<% end %>
|
79
|
-
<% end %>
|
68
|
+
|
69
|
+
<%= pb_rails("multi_level_select", props: {
|
70
|
+
id: "multi-level-select-return-all-selected-rails",
|
71
|
+
name: "my_data_array",
|
72
|
+
tree_data: treeData,
|
73
|
+
return_all_selected: true
|
74
|
+
}) %>
|
75
|
+
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
CHANGED
@@ -72,7 +72,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
|
|
72
72
|
return (
|
73
73
|
<div>
|
74
74
|
<MultiLevelSelect
|
75
|
-
id="
|
75
|
+
id="multi-level-select-return-all-selected"
|
76
76
|
onSelect={(selectedNodes) =>
|
77
77
|
console.log("Selected Items with Return All Selected Data", selectedNodes)
|
78
78
|
}
|
@@ -65,7 +65,7 @@
|
|
65
65
|
],
|
66
66
|
}] %>
|
67
67
|
|
68
|
-
<%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
|
68
|
+
<%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true, margin_bottom: "sm" } %>
|
69
69
|
<%= form.actions do |action| %>
|
70
70
|
<%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
|
71
71
|
<% end %>
|
@@ -2,11 +2,9 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- multi_level_select_default: Default
|
4
4
|
- multi_level_select_return_all_selected: Return All Selected
|
5
|
-
- multi_level_select_return_complete_data: Return Complete Data
|
6
5
|
- multi_level_select_with_form: With Form
|
7
6
|
|
8
7
|
react:
|
9
8
|
- multi_level_select_default: Default
|
10
9
|
- multi_level_select_return_all_selected: Return All Selected
|
11
|
-
- multi_level_select_return_complete_data: Return Complete Data
|
12
10
|
|
@@ -1,3 +1,2 @@
|
|
1
1
|
export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
|
2
|
-
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
3
|
-
export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
|
2
|
+
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
@@ -91,8 +91,7 @@ const PassphraseCommon = (props) => {
|
|
91
91
|
<div>
|
92
92
|
<Body
|
93
93
|
marginBottom='md'
|
94
|
-
text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`}
|
95
|
-
/>
|
94
|
+
text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`} />
|
96
95
|
<Passphrase
|
97
96
|
onChange={handleChange}
|
98
97
|
value={input}
|
@@ -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,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.
|