playbook_ui 12.6.0 → 12.7.1.pre.alpha.alpharubyrelease281

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +9 -6
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +61 -44
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -0
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +1 -0
  6. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +14 -0
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  8. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -1
  9. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +68 -0
  11. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +21 -4
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +72 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +3 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -1
  16. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +3 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +21 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -2
  19. data/app/pb_kits/playbook/pb_nav/_nav.jsx +3 -0
  20. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +52 -16
  22. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +22 -20
  23. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +16 -24
  24. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -1
  25. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +0 -7
  26. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +0 -2
  27. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +0 -1
  28. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +3 -1
  29. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +19 -0
  30. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +0 -2
  31. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +3 -0
  32. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +40 -34
  33. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +56 -0
  34. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md +5 -0
  35. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  36. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  38. data/lib/playbook/version.rb +2 -2
  39. metadata +16 -9
  40. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb +0 -1
  41. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +0 -14
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5ffe02f5811c58c2f395f4dc42933e6277b77d392e3cbc9657611b91c9d82617
4
- data.tar.gz: b45d5e741b3d219bee86e6f37d8c3c8f7d1f4cbfb482b77fe352acfd703c64ad
3
+ metadata.gz: b8ab8633de1bfebc18ea326dea7aa15fc551ada2b96229e3dbd33f1b57857d92
4
+ data.tar.gz: c424c6b824ff20d0da96b4b211319f0b63fb6aa0d8ea28b6cbe078b10643dd04
5
5
  SHA512:
6
- metadata.gz: b86a515a02c0c3cbd155a4840243d2e50bcefca3ed2a34cca2d67078087b0e2db728fae764e01d526f4da9579aa9249fc9ae245ca435b786a8c75b6a7225bf82
7
- data.tar.gz: bc734f1f1b3cd1ae6d20754334dc6a5590d77bd393a5bcad9fb73f33d330c8d46b6f5ee6eaae0d1ada5754e4e349cdf2d1b9dd2ff307decace3ed1a5a46a0b0d
6
+ metadata.gz: 2e24f4417a1b9f604f1239fa43ef0d69ef66106e172c0116ac4d9dbf726c4dd398cbb0a0abeddb2f7c505cf43b7c54ea959f8187d108e030dd26704832ab02c8
7
+ data.tar.gz: 6d0ff7afdd518377c1c35f82da8e62995b0b38f842b9381ffc6938a9dd44119150de41471dd1b44be15ded578642b04741091647351625ba832200faf396fb30
@@ -5,8 +5,7 @@
5
5
  @import "./sass_partials/inline_styles";
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
-
9
-
8
+ @import "./sass_partials/input_styles";
10
9
 
11
10
  [class^=pb_date_picker_kit] {
12
11
  .input_wrapper {
@@ -20,8 +19,10 @@
20
19
  @import "./sass_partials/calendar_input_icon";
21
20
  }
22
21
 
23
- &:focus, :focus-within {
24
- div.cal_icon_wrapper, input.text_input{
22
+ &:focus,
23
+ :focus-within {
24
+ div.cal_icon_wrapper,
25
+ input.date_picker_input {
25
26
  @include transition_default;
26
27
  border-color: $primary;
27
28
  }
@@ -33,18 +34,20 @@
33
34
  @import "./sass_partials/header_styles";
34
35
  @import "./sass_partials/overrides";
35
36
 
36
- .text_input.flatpickr-input {
37
+ .date_picker_input.flatpickr-input {
37
38
  text-overflow: ellipsis;
38
39
  padding-right: $space_xl + 10 !important;
39
40
  }
41
+
40
42
  // Calendar Shadow and Border
41
43
  .flatpickr-calendar {
42
44
  box-shadow: $shadow_deeper;
43
45
  border: 1px solid $border_light;
44
46
  }
47
+
45
48
  // Hide Caret
46
49
  &:before,
47
50
  &:after {
48
51
  content: none;
49
52
  }
50
- }
53
+ }
@@ -5,13 +5,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
5
  import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import datePickerHelper from './date_picker_helper'
8
-
9
8
  import Icon from '../pb_icon/_icon'
10
- import TextInput from '../pb_text_input/_text_input'
9
+ import Caption from '../pb_caption/_caption'
10
+ import Body from '../pb_body/_body'
11
11
 
12
12
  type DatePickerProps = {
13
13
  allowInput?: boolean,
14
- aria?: {[key: string]: string},
14
+ aria?: { [key: string]: string },
15
15
  className?: string,
16
16
  dark?: boolean,
17
17
  data?: { [key: string]: string },
@@ -27,15 +27,15 @@ type DatePickerProps = {
27
27
  hideLabel?: boolean,
28
28
  id?: string,
29
29
  inLine?: boolean,
30
- inputAria?: {[key: string]: string},
31
- inputData?: {[key: string]: string},
32
- inputOnChange?: (arg: string) => void,
30
+ inputAria?: { [key: string]: string },
31
+ inputData?: { [key: string]: string },
32
+ inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
33
33
  inputValue?: any,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
37
37
  name: string,
38
- pickerId?: ArrayLike<Node> | Node | string,
38
+ pickerId?: string,
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
@@ -68,8 +68,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
68
68
  hideLabel = false,
69
69
  id,
70
70
  inLine = false,
71
- inputAria,
72
- inputData,
71
+ inputAria = {},
72
+ inputData = {},
73
73
  inputOnChange,
74
74
  inputValue,
75
75
  label = 'Date Picker',
@@ -87,11 +87,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
87
87
  selectionType = '',
88
88
  showTimezone = false,
89
89
  staticPosition = true,
90
- yearRange = [ 1900, 2100 ],
90
+ yearRange = [1900, 2100],
91
91
  } = props
92
92
 
93
93
  const ariaProps = buildAriaProps(aria)
94
94
  const dataProps = buildDataProps(data)
95
+ const inputAriaProps = buildAriaProps(inputAria)
96
+ const inputDataProps = buildDataProps(inputData)
97
+
95
98
  const classes = classnames(
96
99
  buildCss('pb_date_picker_kit'),
97
100
  globalProps(props),
@@ -128,13 +131,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
128
131
 
129
132
  const iconWrapperClass = () => {
130
133
  let base = 'cal_icon_wrapper'
131
- if (dark){
134
+ if (dark) {
132
135
  base += ' dark'
133
136
  }
134
- if (hideLabel){
137
+ if (hideLabel) {
135
138
  base += ' no_label_shift'
136
139
  }
137
- if (error){
140
+ if (error) {
138
141
  base += ' error'
139
142
  }
140
143
  return base
@@ -142,61 +145,75 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
142
145
 
143
146
  return (
144
147
  <div
145
- {...ariaProps}
146
- {...dataProps}
147
- className={classes}
148
- id={id}
148
+ {...ariaProps}
149
+ {...dataProps}
150
+ className={classes}
151
+ id={id}
149
152
  >
150
- <div className="input_wrapper">
151
- <TextInput
152
- aria={inputAria}
153
+ <div
154
+ {...inputAriaProps}
155
+ {...inputDataProps}
156
+ className="input_wrapper">
157
+
158
+ <Caption
159
+ className="pb_date_picker_kit_label"
160
+ text={hideLabel ? null : label}
161
+ />
162
+
163
+ <div className="date_picker_input_wrapper">
164
+ <input
153
165
  autoComplete="off"
154
- dark={dark}
155
- data={inputData}
166
+ className="date_picker_input"
156
167
  disabled={disableInput}
157
- error={error}
158
168
  id={pickerId}
159
- label={hideLabel ? null : label}
160
169
  name={name}
161
170
  onChange={inputOnChange}
162
171
  placeholder={placeholder}
163
172
  value={inputValue}
164
- />
173
+ />
165
174
 
166
- { !hideIcon &&
175
+ {error && <Body
176
+ status="negative"
177
+ text={error}
178
+ variant={null}
179
+ />
180
+ }
181
+ </div>
182
+
183
+ {!hideIcon &&
167
184
  <div
168
- className={iconWrapperClass()}
169
- id={`cal-icon-${pickerId}`}
185
+ className={iconWrapperClass()}
186
+ id={`cal-icon-${pickerId}`}
170
187
  >
171
- <Icon
188
+ <Icon
172
189
  className="cal_icon"
173
190
  icon="calendar-alt"
174
- />
175
- </div>
191
+ />
192
+ </div>
176
193
  }
177
194
 
178
- { hideIcon && inLine ?
195
+ {hideIcon && inLine ?
179
196
  <div>
180
197
  <div
181
- className={iconWrapperClass()}
182
- id={`${pickerId}-icon-plus`}
198
+ className={iconWrapperClass()}
199
+ id={`${pickerId}-icon-plus`}
183
200
  >
184
201
  <Icon
185
- className="date-picker-plus-icon"
186
- icon="plus"
202
+ className="date-picker-plus-icon"
203
+ icon="plus"
187
204
  />
188
205
  </div>
189
206
  <div
190
- className={iconWrapperClass()}
191
- id={`${pickerId}-angle-down`}
207
+ className={iconWrapperClass()}
208
+ id={`${pickerId}-angle-down`}
192
209
  >
193
- <Icon
194
- className="angle_down_icon"
195
- icon="angle-down"
196
- />
210
+ <Icon
211
+ className="angle_down_icon"
212
+ icon="angle-down"
213
+ />
197
214
  </div>
198
- </div>
199
- : null }
215
+ </div>
216
+ : null}
200
217
  </div>
201
218
  </div>
202
219
  )
@@ -112,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
112
112
  // ===========================================================
113
113
 
114
114
  flatpickr(`#${pickerId}`, {
115
+ allowInput,
115
116
  closeOnSelect,
116
117
  disableMobile: true,
117
118
  dateFormat: getDateFormat(),
@@ -0,0 +1 @@
1
+ <%= pb_rails("date_picker", props: { allow_input: true, picker_id: "date-picker-allow-input"}) %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import DatePicker from '../_date_picker'
3
+
4
+ const DatePickerAllowInput = (props) => (
5
+ <>
6
+ <DatePicker
7
+ allowInput
8
+ pickerId="date-picker-allow-input"
9
+ {...props}
10
+ />
11
+ </>
12
+ )
13
+
14
+ export default DatePickerAllowInput
@@ -0,0 +1 @@
1
+ Setting the `allowInput` prop to true permits users to key values directly into the input. This prop is set to false by default.
@@ -4,6 +4,7 @@ examples:
4
4
  - date_picker_default: Default
5
5
  - date_picker_hide_icon: Hide Input Icon
6
6
  - date_picker_default_date: Default Date
7
+ - date_picker_allow_input: Allow Input
7
8
  - date_picker_input: Input Field
8
9
  - date_picker_label: Label
9
10
  - date_picker_range: Range
@@ -22,11 +23,11 @@ examples:
22
23
  - date_picker_positions: Custom Positions
23
24
  - date_picker_positions_element: Custom Position (based on element)
24
25
 
25
-
26
26
  react:
27
27
  - date_picker_default: Default
28
28
  - date_picker_hide_icon: Hide Input Icon
29
29
  - date_picker_default_date: Default Date
30
+ - date_picker_allow_input: Allow Input
30
31
  - date_picker_input: Input Field
31
32
  - date_picker_label: Label
32
33
  - date_picker_on_change: onChange
@@ -18,3 +18,4 @@ export { default as DatePickerTime } from './_date_picker_time.jsx'
18
18
  export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
19
  export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
20
  export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
21
+ export { default as DatePickerAllowInput } from './_date_picker_allow_input'
@@ -0,0 +1,68 @@
1
+ @import "../../pb_textarea/textarea_mixin";
2
+
3
+ [class^=pb_date_picker_kit] {
4
+ margin-bottom: $space_sm;
5
+
6
+ .pb_date_picker_kit_label {
7
+ margin-bottom: $space_xs;
8
+ display: block;
9
+ }
10
+
11
+ .date_picker_input_wrapper {
12
+ display: block;
13
+
14
+ input::placeholder,
15
+ .date_picker_input .placeholder {
16
+ @include pb_body_light;
17
+ }
18
+
19
+ input,
20
+ .date_picker_input {
21
+ max-height: 45px;
22
+ @include pb_textarea_light;
23
+ overflow: hidden;
24
+ }
25
+
26
+ input:hover,
27
+ .date_picker_input:hover {
28
+ background-color: rgba($focus_input_light, $opacity_5);
29
+ }
30
+
31
+ input:focus,
32
+ .date_picker_input:focus,
33
+ input:-webkit-autofill:focus,
34
+ .date_picker_input:-webkit-autofill:focus {
35
+ @include pb_textarea_focus;
36
+ @include transition_default;
37
+ border-color: $primary;
38
+ background-color: rgba($focus_input_light, $opacity_5);
39
+ }
40
+ }
41
+
42
+ &.error {
43
+ .date_picker_input_wrapper {
44
+ [class*=pb_body_kit] {
45
+ margin-top: $space_xs / 2;
46
+ }
47
+
48
+ input,
49
+ .date_picker_input {
50
+ border-color: $error;
51
+ }
52
+ }
53
+ }
54
+
55
+ &.inline {
56
+ .date_picker_input_wrapper input::placeholder,
57
+ .date_picker_input_wrapper .date_picker_input .placeholder {
58
+ opacity: 1;
59
+ }
60
+
61
+ &:not(:hover) {
62
+ .date_picker_input_wrapper input:not(:focus) {
63
+ background-color: transparent;
64
+ border-color: transparent;
65
+ }
66
+ }
67
+ }
68
+ }
@@ -1,6 +1,6 @@
1
1
  <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
2
2
  <div class="pb--kit-example">
3
- <%= pb_rails("caption", props: { text: example_title }) %>
3
+ <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
4
4
  <br />
5
5
  <%= example %>
6
6
  <br>
@@ -12,11 +12,18 @@ type MultiLevelSelectProps = {
12
12
  id?: string;
13
13
  treeData?: { [key: string]: string }[];
14
14
  onChange?: any;
15
- onSelect?: (SelectedNodes: { [key: string]: any }) => void;
15
+ onSelect?: (prop: { [key: string]: any }) => void;
16
16
  };
17
17
 
18
18
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
19
- const { aria = {}, className, data = {}, id, treeData, onSelect } = props;
19
+ const {
20
+ aria = {},
21
+ className,
22
+ data = {},
23
+ id,
24
+ treeData,
25
+ onSelect = () => {},
26
+ } = props;
20
27
 
21
28
  const ariaProps = buildAriaProps(aria);
22
29
  const dataProps = buildDataProps(data);
@@ -28,6 +35,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
28
35
 
29
36
  const [formattedData, setFormattedData] = useState(treeData);
30
37
  const [selectedItems, setSelectedItems] = useState([]);
38
+ const [checkedData, setCheckedData] = useState([]);
31
39
 
32
40
  const onChange = (currentNode: { [key: string]: any }) => {
33
41
  const updatedData = formattedData.map((item: any) => {
@@ -62,16 +70,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
62
70
  const uniqueSelected = selected.filter(
63
71
  (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
64
72
  );
65
- onSelect(uniqueSelected);
73
+ setCheckedData(uniqueSelected);
66
74
  }, [selectedItems]);
67
75
 
76
+ useEffect(() => {
77
+ let el = document.getElementById("pb_data_wrapper");
78
+
79
+ if (el) {
80
+ el.setAttribute("data-tree", JSON.stringify(checkedData));
81
+ }
82
+
83
+ onSelect(checkedData);
84
+ }, [checkedData]);
85
+
68
86
  return (
69
87
  <div {...ariaProps} {...dataProps} className={classes} id={id}>
70
88
  <MultiSelectHelper
71
89
  treeData={formattedData}
72
90
  id={id}
73
91
  onChange={onChange}
74
- onSelect={onSelect}
75
92
  {...props}
76
93
  />
77
94
  </div>
@@ -0,0 +1,72 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "powerhome1",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "people1",
11
+ children: [
12
+ {
13
+ label: "Talent Acquisition",
14
+ value: "Talent Acquisition",
15
+ id: "talent1",
16
+ },
17
+ {
18
+ label: "Business Affairs",
19
+ value: "Business Affairs",
20
+ id: "business1",
21
+ children: [
22
+ {
23
+ label: "Initiatives",
24
+ value: "Initiatives",
25
+ id: "initiative1",
26
+ },
27
+ {
28
+ label: "Learning & Development",
29
+ value: "Learning & Development",
30
+ id: "development1",
31
+ },
32
+ ],
33
+ },
34
+ {
35
+ label: "People Experience",
36
+ value: "People Experience",
37
+ id: "experience1",
38
+ },
39
+ ],
40
+ },
41
+ {
42
+ label: "Contact Center",
43
+ value: "Contact Center",
44
+ id: "contact1",
45
+ children: [
46
+ {
47
+ label: "Appointment Management",
48
+ value: "Appointment Management",
49
+ id: "appointment1",
50
+ },
51
+ {
52
+ label: "Customer Service",
53
+ value: "Customer Service",
54
+ id: "customer1",
55
+ },
56
+ {
57
+ label: "Energy",
58
+ value: "Energy",
59
+ id: "energy1",
60
+ },
61
+ ],
62
+ },
63
+ ],
64
+ }] %>
65
+
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "default-multi-level-select",
69
+ tree_data:treeData
70
+ }) %>
71
+
72
+
@@ -1,3 +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
- 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 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
+
5
+ For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.
@@ -1,5 +1,6 @@
1
1
  examples:
2
-
2
+ rails:
3
+ - multi_level_select_default: Default
3
4
 
4
5
  react:
5
6
  - multi_level_select_default: Default
@@ -0,0 +1,3 @@
1
+ <div id="pb_data_wrapper" data-tree="">
2
+ <%= react_component("MultiLevelSelect", object.multi_level_select_options ) %>
3
+ </div>
@@ -0,0 +1,21 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbMultiLevelSelect
5
+ class MultiLevelSelect < Playbook::KitBase
6
+ prop :tree_data, type: Playbook::Props::Array,
7
+ default: []
8
+
9
+ def classname
10
+ generate_classname("pb_multi_level_select")
11
+ end
12
+
13
+ def multi_level_select_options
14
+ {
15
+ id: id,
16
+ treeData: tree_data,
17
+ }
18
+ end
19
+ end
20
+ end
21
+ end
@@ -29,10 +29,9 @@ test('should render custom class', () => {
29
29
  <MultiLevelSelect
30
30
  className='custom-class'
31
31
  data={{ testid: testId}}
32
- onSelect={()=> console.log("hello")}
33
32
  treeData={treeData}
34
33
  />
35
- )
34
+ )
36
35
 
37
36
  const kit = screen.getByTestId(testId)
38
37
  expect(kit).toHaveClass('custom-class')
@@ -14,6 +14,7 @@ type NavProps = {
14
14
  children?: React.Node,
15
15
  className?: string | array<string>,
16
16
  data?: object,
17
+ dark?: boolean,
17
18
  highlight?: boolean,
18
19
  id?: string,
19
20
  onClick?: EventHandler,
@@ -29,6 +30,7 @@ const Nav = (props: NavProps) => {
29
30
  children,
30
31
  className,
31
32
  data = {},
33
+ dark = false,
32
34
  highlight = true,
33
35
  id,
34
36
  link = '#',
@@ -64,6 +66,7 @@ const Nav = (props: NavProps) => {
64
66
  onClick={onClick}
65
67
  >
66
68
  <Caption
69
+ dark={dark}
67
70
  size="md"
68
71
  text={`${title}`}
69
72
  />
@@ -6,7 +6,7 @@
6
6
  <% if object.title %>
7
7
  <%= content_tag(:div, class: "pb_nav_list_title") do %>
8
8
  <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
9
- <%= pb_rails("caption", props: { text: object.title }) %>
9
+ <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
10
10
  <% end %>
11
11
  <% end %>
12
12
  <% end %>