playbook_ui 16.1.0.pre.alpha.play274314184 → 16.1.0.pre.alpha.play274314216
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +6 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +6 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/index.js +11 -10
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -3
- data/app/pb_kits/playbook/pb_nav/_nav.scss +82 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb +24 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx +87 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -6
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -1
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +1 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +29 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -0
- data/dist/chunks/{_pb_line_graph-CC2Ywwix.js → _pb_line_graph-DJcGlEF0.js} +1 -1
- data/dist/chunks/_typeahead-Bme5UrUS.js +1 -0
- data/dist/chunks/{globalProps-DYr2qrIf.js → globalProps-ClQG2Tbk.js} +1 -1
- data/dist/chunks/{lib-DgqmX9CF.js → lib-C3P9fL1l.js} +1 -1
- data/dist/chunks/vendor.js +4 -4
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +8 -6
- data/dist/chunks/_typeahead-BqoIZGFP.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4746dd33a26086506951f9184b9f89dcb6b5a9be07cfb2fb4e226f3550241d29
|
|
4
|
+
data.tar.gz: 8d4346fd89f85c5eaa8a443437d5a717764d742ffa126b5450c0e05886459650
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4dfcf986345e0318cbacff6ccc83568890c35087c89c1aa59542d43e6635f9eff10426232a2f6237e1e0ae733169a3e8ddcbaabfa56b1af189498708eb90c33e
|
|
7
|
+
data.tar.gz: 312f3e4ea24beca0b251d6f68b270fc36386915518558deb07da1c4b5075b3db5abae52461fe512a721145d255462ecbe1742977b88754db9598b0712d259855
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<% end %>
|
|
29
29
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
30
30
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
31
|
-
<%= pb_rails("
|
|
31
|
+
<%= pb_rails("textarea", props: {id: "default"}) %>
|
|
32
32
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
33
33
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
34
34
|
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
|
@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
|
|
|
4
4
|
import Button from '../../pb_button/_button'
|
|
5
5
|
import Caption from '../../pb_caption/_caption'
|
|
6
6
|
import Dialog from '../../pb_dialog/_dialog'
|
|
7
|
-
import
|
|
7
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
8
8
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
9
9
|
|
|
10
10
|
const DialogCompound = () => {
|
|
@@ -25,8 +25,12 @@ const DialogCompound = () => {
|
|
|
25
25
|
<Body>{'What do you need us to take care of?'}</Body>
|
|
26
26
|
</Dialog.Header>
|
|
27
27
|
<Dialog.Body>
|
|
28
|
+
<Textarea
|
|
29
|
+
id="default-example-1"
|
|
30
|
+
label="Description"
|
|
31
|
+
rows={4}
|
|
32
|
+
/>
|
|
28
33
|
<Caption marginBottom="xs">{'Description'}</Caption>
|
|
29
|
-
<RichTextEditor />
|
|
30
34
|
<br />
|
|
31
35
|
<Caption>
|
|
32
36
|
{
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<% end %>
|
|
13
13
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
14
14
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
15
|
-
<%= pb_rails("
|
|
15
|
+
<%= pb_rails("textarea", props: {id: "default-7"}) %>
|
|
16
16
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
17
17
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
18
18
|
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<% end %>
|
|
32
32
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
33
33
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
34
|
-
<%= pb_rails("
|
|
34
|
+
<%= pb_rails("textarea", props: {id: "default-8"}) %>
|
|
35
35
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
36
36
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
37
37
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<% end %>
|
|
50
50
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
51
51
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
52
|
-
<%= pb_rails("
|
|
52
|
+
<%= pb_rails("textarea", props: {id: "default-9"}) %>
|
|
53
53
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
54
54
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
55
55
|
|
|
@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
|
|
|
5
5
|
import Dialog from '../../pb_dialog/_dialog'
|
|
6
6
|
import Flex from '../../pb_flex/_flex'
|
|
7
7
|
import Caption from '../../pb_caption/_caption'
|
|
8
|
-
import
|
|
8
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
9
9
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
10
10
|
|
|
11
11
|
const useDialog = (visible = false) => {
|
|
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
|
|
|
77
77
|
<Body>{title}</Body>
|
|
78
78
|
</Dialog.Header>
|
|
79
79
|
<Dialog.Body>
|
|
80
|
-
<
|
|
81
|
-
|
|
80
|
+
<Textarea
|
|
81
|
+
id="default-example-1"
|
|
82
|
+
label="Description"
|
|
83
|
+
rows={4}
|
|
84
|
+
/>
|
|
82
85
|
<br />
|
|
83
86
|
<Caption>
|
|
84
87
|
{
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<% end %>
|
|
14
14
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
15
15
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
16
|
-
<%= pb_rails("
|
|
16
|
+
<%= pb_rails("textarea", props: {id: "default-2"}) %>
|
|
17
17
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
18
18
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
19
19
|
<% end %>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<% end %>
|
|
33
33
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
34
34
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
35
|
-
<%= pb_rails("
|
|
35
|
+
<%= pb_rails("textarea", props: {id: "default-3"}) %>
|
|
36
36
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
37
37
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
38
38
|
<% end %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<% end %>
|
|
51
51
|
<%= pb_rails("dialog/dialog_body") do %>
|
|
52
52
|
<%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
|
|
53
|
-
<%= pb_rails("
|
|
53
|
+
<%= pb_rails("textarea", props: {id: "default-4"}) %>
|
|
54
54
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
55
55
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
56
56
|
<% end %>
|
|
@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
|
|
|
5
5
|
import Dialog from '../../pb_dialog/_dialog'
|
|
6
6
|
import Flex from '../../pb_flex/_flex'
|
|
7
7
|
import Caption from '../../pb_caption/_caption'
|
|
8
|
-
import
|
|
8
|
+
import Textarea from "../../pb_textarea";
|
|
9
9
|
import Typeahead from '../../pb_typeahead/_typeahead'
|
|
10
10
|
|
|
11
11
|
const useDialog = (visible = false) => {
|
|
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
|
|
|
76
76
|
<Body>{title}</Body>
|
|
77
77
|
</Dialog.Header>
|
|
78
78
|
<Dialog.Body>
|
|
79
|
-
<
|
|
80
|
-
|
|
79
|
+
<Textarea
|
|
80
|
+
id="default-example-2"
|
|
81
|
+
label="Description"
|
|
82
|
+
rows={4}
|
|
83
|
+
/>
|
|
81
84
|
<br />
|
|
82
85
|
<Caption>
|
|
83
86
|
{
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
const option = e.detail;
|
|
77
77
|
const dropdown = e.target;
|
|
78
78
|
|
|
79
|
-
const display = dropdown.querySelector("
|
|
79
|
+
const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
|
|
80
80
|
if (!display) return;
|
|
81
81
|
|
|
82
82
|
const nameEl = display.querySelector("#dropdown-avatar-name");
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
|
8
8
|
<input
|
|
9
9
|
data-default-value="<%= input_default_value %>"
|
|
10
|
-
|
|
10
|
+
data-dropdown-selected-option
|
|
11
11
|
name="<%= object.name %><%= '[]' if object.multi_select %>"
|
|
12
12
|
style="display: none"
|
|
13
13
|
<%= object.required ? "required" : ""%>
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
24
24
|
<% if object.custom_display.present? %>
|
|
25
25
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
26
|
-
<div
|
|
26
|
+
<div data-dropdown-trigger-custom-display style="display: none;">
|
|
27
27
|
<%= object.custom_display %>
|
|
28
28
|
</div>
|
|
29
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
29
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
|
|
30
30
|
<% end %>
|
|
31
31
|
<% else %>
|
|
32
32
|
<% if object.multi_select %>
|
|
33
33
|
<%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
|
|
34
|
-
<%= pb_rails("flex", props: {
|
|
34
|
+
<%= pb_rails("flex", props: { data: { 'dropdown-pills-wrapper': true }, wrap: true }) do %>
|
|
35
35
|
<% end %>
|
|
36
36
|
<% if object.autocomplete %>
|
|
37
37
|
<input
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
autocomplete="off"
|
|
43
43
|
/>
|
|
44
44
|
<% else %>
|
|
45
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
45
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, data: { "dropdown-trigger-display-multi-select": true }}) %>
|
|
46
46
|
<% end %>
|
|
47
47
|
<% end %>
|
|
48
48
|
<% else %>
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
autocomplete="off"
|
|
56
56
|
/>
|
|
57
57
|
<% else %>
|
|
58
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
58
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
|
|
59
59
|
<% end %>
|
|
60
60
|
<% end %>
|
|
61
61
|
<% end %>
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
<% end %>
|
|
64
64
|
<%= pb_rails("flex/flex_item") do %>
|
|
65
65
|
<%= pb_rails("body", props: {display: "flex", align_items:"center" }) do %>
|
|
66
|
-
<%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm",
|
|
67
|
-
<%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm",
|
|
68
|
-
<%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm",
|
|
66
|
+
<%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", data:{'dropdown-clear-icon': true }, padding_right:"xs" }) %>
|
|
67
|
+
<%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", data:{'dropdown-open-icon': true }}) %>
|
|
68
|
+
<%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", data:{ 'dropdown-close-icon': true }}) %>
|
|
69
69
|
<% end %>
|
|
70
70
|
<% end %>
|
|
71
71
|
<% end %>
|
|
@@ -4,18 +4,19 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
|
|
|
4
4
|
const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
|
|
5
5
|
const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
|
|
6
6
|
const CONTAINER_SELECTOR = "[data-dropdown-container]";
|
|
7
|
-
const DOWN_ARROW_SELECTOR = "
|
|
8
|
-
const UP_ARROW_SELECTOR = "
|
|
7
|
+
const DOWN_ARROW_SELECTOR = "[data-dropdown-open-icon]";
|
|
8
|
+
const UP_ARROW_SELECTOR = "[data-dropdown-close-icon]";
|
|
9
9
|
const OPTION_SELECTOR = "[data-dropdown-option-label]";
|
|
10
10
|
const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
|
|
11
|
-
const DROPDOWN_TRIGGER_DISPLAY = "
|
|
11
|
+
const DROPDOWN_TRIGGER_DISPLAY = "[data-dropdown-trigger-display]";
|
|
12
12
|
const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
|
|
13
|
-
const DROPDOWN_INPUT = "
|
|
13
|
+
const DROPDOWN_INPUT = "[data-dropdown-selected-option]";
|
|
14
14
|
const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
|
|
15
15
|
const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
|
|
16
|
-
const CLEAR_ICON_SELECTOR = "
|
|
16
|
+
const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
|
|
17
17
|
const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
|
|
18
18
|
|
|
19
|
+
|
|
19
20
|
export default class PbDropdown extends PbEnhancedElement {
|
|
20
21
|
static get selector() {
|
|
21
22
|
return DROPDOWN_SELECTOR;
|
|
@@ -305,7 +306,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
305
306
|
onOptionSelected(value, selectedOption) {
|
|
306
307
|
const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
|
|
307
308
|
const customDisplayElement = this.element.querySelector(
|
|
308
|
-
|
|
309
|
+
'[data-dropdown-trigger-custom-display]',
|
|
309
310
|
);
|
|
310
311
|
|
|
311
312
|
if (triggerElement) {
|
|
@@ -693,9 +694,9 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
693
694
|
updatePills() {
|
|
694
695
|
if (!this.isMultiSelect) return;
|
|
695
696
|
|
|
696
|
-
const wrapper = this.element.querySelector(
|
|
697
|
+
const wrapper = this.element.querySelector('[data-dropdown-pills-wrapper]');
|
|
697
698
|
const placeholder = this.element.querySelector(
|
|
698
|
-
|
|
699
|
+
'[data-dropdown-trigger-display-multi-select]',
|
|
699
700
|
);
|
|
700
701
|
if (!wrapper) return;
|
|
701
702
|
|
|
@@ -773,7 +774,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
773
774
|
}
|
|
774
775
|
}
|
|
775
776
|
const customDisplay = this.element.querySelector(
|
|
776
|
-
|
|
777
|
+
'[data-dropdown-trigger-custom-display]',
|
|
777
778
|
);
|
|
778
779
|
if (customDisplay) {
|
|
779
780
|
customDisplay.style.display = "none";
|
|
@@ -829,7 +830,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
829
830
|
}
|
|
830
831
|
|
|
831
832
|
const customDisplay = this.element.querySelector(
|
|
832
|
-
|
|
833
|
+
'[data-dropdown-trigger-custom-display]',
|
|
833
834
|
);
|
|
834
835
|
if (customDisplay) {
|
|
835
836
|
customDisplay.style.display = "none";
|
|
@@ -91,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
|
|
|
91
91
|
marginX,
|
|
92
92
|
marginY,
|
|
93
93
|
disabled = false,
|
|
94
|
+
|
|
94
95
|
} = props;
|
|
95
96
|
|
|
96
97
|
const spacingMarginProps = {
|
|
@@ -197,13 +198,14 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
|
197
198
|
if (React.isValidElement(child)) {
|
|
198
199
|
const childProps: NavChildProps = {
|
|
199
200
|
itemSpacing: itemSpacing,
|
|
201
|
+
...(disabled && { disabled: disabled })
|
|
200
202
|
};
|
|
201
203
|
return React.cloneElement(child, childProps);
|
|
202
204
|
}
|
|
203
205
|
return child;
|
|
204
206
|
});
|
|
205
207
|
|
|
206
|
-
const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
|
|
208
|
+
const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass, disabledClass)
|
|
207
209
|
|
|
208
210
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
209
211
|
if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
|
|
@@ -231,8 +233,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
|
231
233
|
icon={iconRight && iconRight}
|
|
232
234
|
iconSize="xs"
|
|
233
235
|
id={id}
|
|
234
|
-
onClick={onClick}
|
|
235
|
-
onIconClick={onIconRightClick}
|
|
236
|
+
onClick={disabled ? undefined : onClick}
|
|
237
|
+
onIconClick={disabled ? undefined : onIconRightClick}
|
|
236
238
|
>
|
|
237
239
|
<Collapsible.Main
|
|
238
240
|
className={globalProps({ ...finalItemSpacing })}
|
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
@import "./collapsible_nav";
|
|
8
8
|
|
|
9
9
|
[class^="pb_nav_list"] {
|
|
10
|
+
|
|
10
11
|
//classes for fontSize and fontWeight props
|
|
11
12
|
.font_size_small {
|
|
13
|
+
|
|
12
14
|
.pb_nav_list_item_text,
|
|
13
15
|
.pb_nav_list_item_text_collapsible {
|
|
14
16
|
font-size: $font_small;
|
|
@@ -16,6 +18,7 @@
|
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
.font_size_normal {
|
|
21
|
+
|
|
19
22
|
.pb_nav_list_item_text,
|
|
20
23
|
.pb_nav_list_item_text_collapsible {
|
|
21
24
|
font-size: $font_normal;
|
|
@@ -23,6 +26,7 @@
|
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
.font_bolder {
|
|
29
|
+
|
|
26
30
|
.pb_nav_list_item_text,
|
|
27
31
|
.pb_nav_list_item_text_collapsible {
|
|
28
32
|
font-weight: $bolder !important;
|
|
@@ -30,6 +34,7 @@
|
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.font_bold {
|
|
37
|
+
|
|
33
38
|
.pb_nav_list_item_text,
|
|
34
39
|
.pb_nav_list_item_text_collapsible {
|
|
35
40
|
font-weight: $bold !important;
|
|
@@ -37,6 +42,7 @@
|
|
|
37
42
|
}
|
|
38
43
|
|
|
39
44
|
.font_regular {
|
|
45
|
+
|
|
40
46
|
.pb_nav_list_item_text,
|
|
41
47
|
.pb_nav_list_item_text_collapsible {
|
|
42
48
|
font-weight: $regular;
|
|
@@ -79,19 +85,22 @@
|
|
|
79
85
|
}
|
|
80
86
|
|
|
81
87
|
// Disabled scss
|
|
82
|
-
.pb_nav_item_disabled
|
|
88
|
+
.pb_nav_item_disabled{
|
|
83
89
|
cursor: not-allowed !important;
|
|
84
|
-
|
|
90
|
+
|
|
91
|
+
.pb_nav_list_item_text,
|
|
85
92
|
.pb_nav_list_item_icon_left,
|
|
86
93
|
.pb_nav_list_item_icon_right,
|
|
87
94
|
.pb_nav_list_item_icon_section {
|
|
88
95
|
color: $text_lt_lighter !important;
|
|
89
96
|
cursor: not-allowed !important;
|
|
90
97
|
}
|
|
98
|
+
|
|
91
99
|
@media (hover: hover) {
|
|
92
100
|
&:hover {
|
|
93
|
-
background-color:
|
|
101
|
+
background-color: $white !important;
|
|
94
102
|
color: $text_lt_lighter !important;
|
|
103
|
+
|
|
95
104
|
.pb_nav_list_item_text,
|
|
96
105
|
.pb_nav_list_item_icon_left,
|
|
97
106
|
.pb_nav_list_item_icon_right {
|
|
@@ -100,3 +109,73 @@
|
|
|
100
109
|
}
|
|
101
110
|
}
|
|
102
111
|
}
|
|
112
|
+
|
|
113
|
+
.pb_nav_item_disabled {
|
|
114
|
+
cursor: not-allowed !important;
|
|
115
|
+
|
|
116
|
+
.pb_nav_list_item_text,
|
|
117
|
+
.pb_nav_list_item_text_collapsible,
|
|
118
|
+
.pb_nav_list_item_icon_left,
|
|
119
|
+
.pb_nav_list_item_icon_right,
|
|
120
|
+
.pb_nav_list_item_icon_section,
|
|
121
|
+
.pb_nav_list_item_link,
|
|
122
|
+
.pb_nav_list_item_link_collapsible,
|
|
123
|
+
.cursor_pointer {
|
|
124
|
+
color: $text_lt_lighter !important;
|
|
125
|
+
cursor: not-allowed !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.pb_collapsible_main_kit {
|
|
129
|
+
background-color: $white !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.icon_wrapper,
|
|
133
|
+
svg {
|
|
134
|
+
color: $text_lt_lighter !important;
|
|
135
|
+
cursor: not-allowed !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media (hover: hover) {
|
|
139
|
+
&:hover {
|
|
140
|
+
background-color: $white !important;
|
|
141
|
+
|
|
142
|
+
.pb_collapsible_main_kit,
|
|
143
|
+
.pb_nav_list_item_link,
|
|
144
|
+
.icon_wrapper {
|
|
145
|
+
background-color: $white !important;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.pb_nav_list_item_icon_section_collapsible path,
|
|
149
|
+
.pb_nav_list_item_link_collapsible path {
|
|
150
|
+
color: $text_lt_lighter !important;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.collapsible_nav_wrapper_pb_nav_item_disabled {
|
|
157
|
+
.pb_collapsible_main_kit {
|
|
158
|
+
background-color: $white !important;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.pb_nav_list_item_link,
|
|
162
|
+
.pb_nav_list_item_text,
|
|
163
|
+
.pb_nav_list_item_icon_left,
|
|
164
|
+
.pb_nav_list_item_icon_right,
|
|
165
|
+
.icon_wrapper,
|
|
166
|
+
.pb_nav_list_item_icon_section {
|
|
167
|
+
color: $text_lt_lighter !important;
|
|
168
|
+
cursor: not-allowed !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.icon_wrapper svg {
|
|
172
|
+
color: $text_lt_lighter !important;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&:hover {
|
|
176
|
+
.icon_wrapper,
|
|
177
|
+
.pb_nav_list_item_link {
|
|
178
|
+
background-color: $white !important;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
2
|
+
<%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
|
|
3
|
+
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
4
|
+
<%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
|
|
5
|
+
<%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
|
|
6
|
+
<%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
|
|
10
|
+
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
11
|
+
<%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
|
|
12
|
+
<%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
|
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
|
|
17
|
+
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
18
|
+
<%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
|
|
19
|
+
<%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
|
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Nav from '../../pb_nav/_nav'
|
|
3
|
+
import NavItem from '../../pb_nav/_item'
|
|
4
|
+
|
|
5
|
+
const CollapsibleNavDisabledItem = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<Nav
|
|
8
|
+
variant="bold"
|
|
9
|
+
{...props}
|
|
10
|
+
>
|
|
11
|
+
<NavItem
|
|
12
|
+
collapsed={false}
|
|
13
|
+
collapsible
|
|
14
|
+
disabled
|
|
15
|
+
iconLeft="city"
|
|
16
|
+
link="#"
|
|
17
|
+
text="Overview"
|
|
18
|
+
{...props}
|
|
19
|
+
>
|
|
20
|
+
<NavItem
|
|
21
|
+
link="#"
|
|
22
|
+
text="City"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
<NavItem
|
|
26
|
+
link="#"
|
|
27
|
+
text="People"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
<NavItem
|
|
31
|
+
link="#"
|
|
32
|
+
text="Business"
|
|
33
|
+
{...props}
|
|
34
|
+
/>
|
|
35
|
+
</NavItem>
|
|
36
|
+
<NavItem
|
|
37
|
+
collapsible
|
|
38
|
+
iconLeft="theater-masks"
|
|
39
|
+
link="#"
|
|
40
|
+
text="Albums"
|
|
41
|
+
{...props}
|
|
42
|
+
>
|
|
43
|
+
<NavItem
|
|
44
|
+
disabled
|
|
45
|
+
link="#"
|
|
46
|
+
text="Entertainment"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
<NavItem
|
|
50
|
+
link="#"
|
|
51
|
+
text="Food"
|
|
52
|
+
{...props}
|
|
53
|
+
/>
|
|
54
|
+
<NavItem
|
|
55
|
+
link="#"
|
|
56
|
+
text="Style"
|
|
57
|
+
{...props}
|
|
58
|
+
/>
|
|
59
|
+
</NavItem>
|
|
60
|
+
<NavItem
|
|
61
|
+
collapsible
|
|
62
|
+
iconLeft="city"
|
|
63
|
+
link="#"
|
|
64
|
+
text="Similar Artists"
|
|
65
|
+
{...props}
|
|
66
|
+
>
|
|
67
|
+
<NavItem
|
|
68
|
+
link="#"
|
|
69
|
+
text="City"
|
|
70
|
+
{...props}
|
|
71
|
+
/>
|
|
72
|
+
<NavItem
|
|
73
|
+
link="#"
|
|
74
|
+
text="People"
|
|
75
|
+
{...props}
|
|
76
|
+
/>
|
|
77
|
+
<NavItem
|
|
78
|
+
link="#"
|
|
79
|
+
text="Business"
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
</NavItem>
|
|
83
|
+
</Nav>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default CollapsibleNavDisabledItem
|
|
@@ -14,6 +14,7 @@ examples:
|
|
|
14
14
|
- collapsible_nav: Collapsible Nav
|
|
15
15
|
- collapsible_nav_with_all_options: Collapsible Nav With Options
|
|
16
16
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
17
|
+
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
17
18
|
- horizontal_nav: Horizontal Nav
|
|
18
19
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
19
20
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -42,6 +43,7 @@ examples:
|
|
|
42
43
|
- collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
|
|
43
44
|
- collapsible_nav_custom: Collapsible Nav With Custom Toggling
|
|
44
45
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
46
|
+
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
45
47
|
- horizontal_nav: Horizontal Nav
|
|
46
48
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
47
49
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -62,9 +64,3 @@ examples:
|
|
|
62
64
|
- nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
|
|
63
65
|
- nav_horizontal_bold_swift: Horizontal Bold
|
|
64
66
|
- nav_props_swift: ""
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
@@ -22,4 +22,5 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
|
|
|
22
22
|
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
|
23
23
|
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
|
24
24
|
export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
|
|
25
|
-
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
25
|
+
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
26
|
+
export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<% if object.collapsible %>
|
|
2
|
-
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
|
|
2
|
+
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname + (object.disabled ? " collapsible_nav_wrapper_pb_nav_item_disabled" : "") }) do %>
|
|
3
3
|
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
|
|
4
4
|
<%= pb_content_tag( object.tag,
|
|
5
5
|
href: object.link && object.link,
|
|
@@ -25,7 +25,7 @@ module Playbook
|
|
|
25
25
|
default: "_self"
|
|
26
26
|
def classname
|
|
27
27
|
if collapsible
|
|
28
|
-
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
|
|
28
|
+
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible#{disabled_class}"
|
|
29
29
|
else
|
|
30
30
|
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
|
|
31
31
|
end
|