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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
  3. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +12 -18
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +2 -2
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +2 -2
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +19 -23
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -2
  17. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -2
  18. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +14 -0
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +60 -0
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  21. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +6 -0
  24. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +1 -2
  25. data/dist/playbook-doc.js +9 -9
  26. metadata +4 -4
  27. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
  28. 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: 528a30acbc18da5e9b9d97680bb960f47369d3d4ed62254e360aa80b0edc766d
4
- data.tar.gz: 2677edc6eb85e4213da95e2f66d5e81e855d533fd481c359bfab8ca7550b247d
3
+ metadata.gz: cd6c4463b1d105dd23ca16535f94acbce3bd7984a40939060c5bee736a6df7b7
4
+ data.tar.gz: 989367d7fc387521be5458382c91ef22794b169032a1df5c5605c4dfb00f0010
5
5
  SHA512:
6
- metadata.gz: 885ed671c3d826f1564e922502d30c39d813345a717f455a594bddb1b3b3dfbd90acb941d66bc1a3c9078642a3eefe84592de56a2c96c30e0bc89cb582004947
7
- data.tar.gz: e04a8085dbe8a95f87aa2de8cd5cb2649a885a5b41dd544d692467fc915cc0a2444dde7b19028fc973c95da4853ae21cdf36d5db5b1697c342916bf8cd73e6a9
6
+ metadata.gz: 0524b78ca67a91baf1aa7388d120ff4ba57a37965196446f6974d938ed6af081215388f7db97308d01cf71a8ed132baf270c235d0c8958a80736e548a78123de
7
+ data.tar.gz: ce812010bfc1b5ffa90ba46b230979740b5b5be474fe92871126f3aea90f66c25acad6521552b7faa7221e16256ea91c5eae945422f8c632ea29914805e6801e
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED
@@ -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>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED
@@ -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"
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED
@@ -84,7 +84,7 @@ const DialogStatus = () => {
84
84
  <Flex
85
85
  rowGap="xs"
86
86
  wrap
87
- >
87
+ >
88
88
  <Button
89
89
  marginRight="md"
90
90
  onClick={toggleDefaultAlert}
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED
@@ -74,7 +74,7 @@ const GaugeComplex = (props) => (
74
74
  <Body
75
75
  color="light"
76
76
  text="% Abandoned"
77
- />
77
+ />
78
78
  <Flex wrap>
79
79
  <FlexItem
80
80
  fixedSize="150px"
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
3
  value: "Power Home Remodeling",
4
- id: "powerhome1",
4
+ id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
9
  value: "People",
10
- id: "people1",
10
+ id: "101",
11
11
  children: [
12
12
  {
13
13
  label: "Talent Acquisition",
14
14
  value: "Talent Acquisition",
15
- id: "talent1",
15
+ id: "102",
16
16
  },
17
17
  {
18
18
  label: "Business Affairs",
19
19
  value: "Business Affairs",
20
- id: "business1",
20
+ id: "103",
21
21
  children: [
22
22
  {
23
23
  label: "Initiatives",
24
24
  value: "Initiatives",
25
- id: "initiative1",
25
+ id: "104",
26
26
  },
27
27
  {
28
28
  label: "Learning & Development",
29
29
  value: "Learning & Development",
30
- id: "development1",
30
+ id: "105",
31
31
  },
32
32
  ],
33
33
  },
34
34
  {
35
35
  label: "People Experience",
36
36
  value: "People Experience",
37
- id: "experience1",
37
+ id: "106",
38
38
  },
39
39
  ],
40
40
  },
41
41
  {
42
42
  label: "Contact Center",
43
43
  value: "Contact Center",
44
- id: "contact1",
44
+ id: "107",
45
45
  children: [
46
46
  {
47
47
  label: "Appointment Management",
48
48
  value: "Appointment Management",
49
- id: "appointment1",
49
+ id: "108",
50
50
  },
51
51
  {
52
52
  label: "Customer Service",
53
53
  value: "Customer Service",
54
- id: "customer1",
54
+ id: "109",
55
55
  },
56
56
  {
57
57
  label: "Energy",
58
58
  value: "Energy",
59
- id: "energy1",
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: "default-multi-level-select-test",
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 %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED
@@ -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 (default... with ids only)",
79
+ "Selected Items",
79
80
  selectedNodes
80
81
  )
81
82
  }
82
- returnAllSelected
83
83
  treeData={treeData}
84
84
  {...props}
85
85
  />
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md CHANGED
@@ -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, 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!
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
- By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects.
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"].
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb CHANGED
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
3
  value: "Power Home Remodeling",
4
- id: "powerhome1",
4
+ id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
9
  value: "People",
10
- id: "people1",
10
+ id: "101",
11
11
  children: [
12
12
  {
13
13
  label: "Talent Acquisition",
14
14
  value: "Talent Acquisition",
15
- id: "talent1",
15
+ id: "102",
16
16
  },
17
17
  {
18
18
  label: "Business Affairs",
19
19
  value: "Business Affairs",
20
- id: "business1",
20
+ id: "103",
21
21
  children: [
22
22
  {
23
23
  label: "Initiatives",
24
24
  value: "Initiatives",
25
- id: "initiative1",
25
+ id: "104",
26
26
  },
27
27
  {
28
28
  label: "Learning & Development",
29
29
  value: "Learning & Development",
30
- id: "development1",
30
+ id: "105",
31
31
  },
32
32
  ],
33
33
  },
34
34
  {
35
35
  label: "People Experience",
36
36
  value: "People Experience",
37
- id: "experience1",
37
+ id: "106",
38
38
  },
39
39
  ],
40
40
  },
41
41
  {
42
42
  label: "Contact Center",
43
43
  value: "Contact Center",
44
- id: "contact1",
44
+ id: "107",
45
45
  children: [
46
46
  {
47
47
  label: "Appointment Management",
48
48
  value: "Appointment Management",
49
- id: "appointment1",
49
+ id: "108",
50
50
  },
51
51
  {
52
52
  label: "Customer Service",
53
53
  value: "Customer Service",
54
- id: "customer1",
54
+ id: "109",
55
55
  },
56
56
  {
57
57
  label: "Energy",
58
58
  value: "Energy",
59
- id: "energy1",
59
+ id: "110",
60
60
  },
61
61
  ],
62
62
  },
@@ -65,15 +65,11 @@
65
65
 
66
66
 
67
67
 
68
- <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
69
- <%= pb_rails("multi_level_select", props: {
70
- id: "default-multi-level-select-test-return-all-selected",
71
- name: "q[user_title_org_level_id_in]",
72
- tree_data: treeData,
73
- return_all_selected: true
74
- }) %>
75
- <%= form.actions do |action| %>
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="multiselect-parent-persistence"
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
  }
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb CHANGED
@@ -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 %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx CHANGED
@@ -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}
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx CHANGED
@@ -5,8 +5,7 @@ const PhoneNumberInputDefault = (props) => (
5
5
  <>
6
6
  <PhoneNumberInput
7
7
  id='default'
8
- {...props}
9
- />
8
+ {...props} />
10
9
  </>
11
10
  )
12
11
 
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb ADDED
@@ -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 %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx ADDED
@@ -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;
data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml CHANGED
@@ -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
data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb CHANGED
@@ -1,2 +1,3 @@
1
1
  <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
2
2
  <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
3
+ <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>
data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx CHANGED
@@ -17,6 +17,12 @@ const TitleLightWeight = (props) => {
17
17
  text='Title 2'
18
18
  {...props}
19
19
  />
20
+ <Title bold={false}
21
+ size={3}
22
+ tag='h2'
23
+ text='Title 3'
24
+ {...props}
25
+ />
20
26
  </div>
21
27
  )
22
28
  }
data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md CHANGED
@@ -1,4 +1,3 @@
1
1
  ##### Prop
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.
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.