playbook_ui 15.0.0.pre.alpha.renovatenpmtrixvulnerability10692 → 15.0.0.pre.alpha.stimulusbutton10763
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_advanced_table/Components/RegularTableView.tsx +12 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +29 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +5 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +18 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +5 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/index.js +99 -0
- data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
- data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
- data/dist/chunks/{_line_graph-CUfJ7E4h.js → _line_graph-C9stNsP3.js} +1 -1
- data/dist/chunks/{_typeahead-DCp1lVJx.js → _typeahead-D3MtsWXG.js} +2 -2
- data/dist/chunks/{_weekday_stacked-qrsOsOR9.js → _weekday_stacked-BMwekyel.js} +2 -2
- data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-QZuu1ltS.js} +1 -1
- data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-CleM960_.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- 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/engine.rb +0 -1
- data/lib/playbook/kit_base.rb +23 -2
- data/lib/playbook/version.rb +1 -1
- metadata +21 -26
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3d949c2d669654df8d56ca2863fef4dbdcb143cf8acb4f3a5693eee5c9be68f8
|
4
|
+
data.tar.gz: 9dbc0f1e5082115203fe7f31c2e80cfd0fa8c23ad3359e09db20e15a51c2f289
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d139edd243825c2115465ee24481d84b1dd57db03ea1f9096ccfbda81f42b3e82fefcffa586e668d2a163d2777c61981b152e0985b4c21c4401f85c1c8e83e4d
|
7
|
+
data.tar.gz: 38ec1c3422f047193fc6604f8f2eb6daee1a5d380ecf1ce663c8e34d4efefc421d72cc9444724f2fa52df90ab7f04013ba95886c304b5925b9915f15168ef106
|
@@ -30,6 +30,7 @@ const TableCellRenderer = ({
|
|
30
30
|
columnPinning,
|
31
31
|
customRowStyle,
|
32
32
|
columnDefinitions,
|
33
|
+
isMultiHeaderColumn = false,
|
33
34
|
}: {
|
34
35
|
row: Row<GenericObject>
|
35
36
|
collapsibleTrail?: boolean
|
@@ -38,12 +39,18 @@ const TableCellRenderer = ({
|
|
38
39
|
columnPinning: { left: string[] }
|
39
40
|
customRowStyle?: GenericObject
|
40
41
|
columnDefinitions?: {[key:string]:any}[]
|
42
|
+
isMultiHeaderColumn?: boolean
|
41
43
|
}) => {
|
42
44
|
return (
|
43
45
|
<>
|
44
46
|
{row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
|
45
47
|
const isPinnedLeft = columnPinning.left.includes(cell.column.id);
|
48
|
+
// Add a border to the right of each group of columns for multi-header column tables
|
46
49
|
const isLastCell = (() => {
|
50
|
+
if (!isMultiHeaderColumn) {
|
51
|
+
return false;
|
52
|
+
}
|
53
|
+
|
47
54
|
const parent = cell.column.parent;
|
48
55
|
if (!parent) {
|
49
56
|
const last = row.getVisibleCells().at(-1);
|
@@ -133,6 +140,9 @@ export const RegularTableView = ({
|
|
133
140
|
|
134
141
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
135
142
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
143
|
+
const isMultiHeaderColumn = columnDefinitions.some(
|
144
|
+
(obj: Record<string, unknown>) => "columns" in obj
|
145
|
+
);
|
136
146
|
|
137
147
|
// Row pinning
|
138
148
|
function PinnedRow({ row }: { row: Row<any> }) {
|
@@ -158,6 +168,7 @@ export const RegularTableView = ({
|
|
158
168
|
columnDefinitions={columnDefinitions}
|
159
169
|
columnPinning={columnPinning}
|
160
170
|
customRowStyle={customRowStyle}
|
171
|
+
isMultiHeaderColumn={isMultiHeaderColumn}
|
161
172
|
loading={loading}
|
162
173
|
row={row}
|
163
174
|
stickyLeftColumn={stickyLeftColumn}
|
@@ -221,6 +232,7 @@ export const RegularTableView = ({
|
|
221
232
|
columnDefinitions={columnDefinitions}
|
222
233
|
columnPinning={columnPinning}
|
223
234
|
customRowStyle={customRowStyle}
|
235
|
+
isMultiHeaderColumn={isMultiHeaderColumn}
|
224
236
|
loading={loading}
|
225
237
|
row={row}
|
226
238
|
stickyLeftColumn={stickyLeftColumn}
|
@@ -249,8 +249,10 @@
|
|
249
249
|
}
|
250
250
|
|
251
251
|
.pb_advanced_table_body {
|
252
|
-
|
253
|
-
|
252
|
+
tr {
|
253
|
+
.last-cell:not(:last-of-type) {
|
254
|
+
border-right: 1px solid $border_light !important;
|
255
|
+
}
|
254
256
|
}
|
255
257
|
tr td:first-child {
|
256
258
|
padding-left: 8px !important;
|
@@ -701,6 +703,14 @@
|
|
701
703
|
}
|
702
704
|
}
|
703
705
|
}
|
706
|
+
|
707
|
+
.pb_advanced_table_header {
|
708
|
+
> tr {
|
709
|
+
.last-header-cell:last-of-type {
|
710
|
+
border-right-width: 0 !important;
|
711
|
+
}
|
712
|
+
}
|
713
|
+
}
|
704
714
|
}
|
705
715
|
}
|
706
716
|
|
@@ -975,14 +985,14 @@
|
|
975
985
|
// Firefox-specific fix for last-header-cell and last-cell vertical borders
|
976
986
|
@-moz-document url-prefix() {
|
977
987
|
.pb_advanced_table_header {
|
978
|
-
.last-header-cell {
|
988
|
+
.last-header-cell:not(:last-child) {
|
979
989
|
border-right: none !important;
|
980
990
|
box-shadow: 1px 0 0 0 $border_light !important;
|
981
991
|
}
|
982
992
|
}
|
983
993
|
|
984
994
|
.pb_advanced_table_body {
|
985
|
-
.last-cell {
|
995
|
+
.last-cell:not(:last-child) {
|
986
996
|
border-right: none !important;
|
987
997
|
box-shadow: 1px 0 0 0 $border_light !important;
|
988
998
|
}
|
@@ -991,14 +1001,14 @@
|
|
991
1001
|
// Dark mode Firefox fixes
|
992
1002
|
&.dark {
|
993
1003
|
.pb_advanced_table_header {
|
994
|
-
.last-header-cell {
|
1004
|
+
.last-header-cell:not(:last-child) {
|
995
1005
|
border-right: none !important;
|
996
1006
|
box-shadow: 1px 0 0 0 $border_dark !important;
|
997
1007
|
}
|
998
1008
|
}
|
999
1009
|
|
1000
1010
|
.pb_advanced_table_body {
|
1001
|
-
.last-cell {
|
1011
|
+
.last-cell:not(:last-child) {
|
1002
1012
|
border-right: none !important;
|
1003
1013
|
box-shadow: 1px 0 0 0 $border_dark !important;
|
1004
1014
|
}
|
@@ -1011,18 +1021,62 @@
|
|
1011
1021
|
.pb-advanced-table-popover-option:hover {
|
1012
1022
|
background-color: $bg_light;
|
1013
1023
|
}
|
1024
|
+
|
1014
1025
|
// Removes borders when Wrapped inside the Card Kit
|
1015
|
-
.pb_card_kit > .pb_advanced_table
|
1016
|
-
|
1017
|
-
.
|
1018
|
-
.
|
1026
|
+
.pb_card_kit > .pb_advanced_table {
|
1027
|
+
// Remove right border only from the actual last column
|
1028
|
+
.pb_advanced_table_body tr td:last-child,
|
1029
|
+
.pb_advanced_table_header tr th:last-child {
|
1030
|
+
box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
|
1019
1031
|
border-right: none !important;
|
1032
|
+
}
|
1033
|
+
|
1034
|
+
// Without vertical border, remove all last-cell borders
|
1035
|
+
// Specifically for header to prevent thicker borders in firefox.
|
1036
|
+
.pb_table:not(.vertical-border) {
|
1037
|
+
.pb_advanced_table_header .last-header-cell {
|
1038
|
+
box-shadow: none !important;
|
1039
|
+
}
|
1040
|
+
}
|
1041
|
+
// Firefox fix
|
1042
|
+
@-moz-document url-prefix() {
|
1043
|
+
.pb_advanced_table_header {
|
1044
|
+
.last-header-cell {
|
1045
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
1046
|
+
}
|
1047
|
+
}
|
1048
|
+
}
|
1049
|
+
|
1050
|
+
// For tables WITH vertical borders, only remove border from actual last column
|
1051
|
+
.pb_table.vertical-border {
|
1052
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1053
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1054
|
+
box-shadow: none !important;
|
1055
|
+
border-right: 1px solid $border_light !important;
|
1056
|
+
}
|
1057
|
+
|
1058
|
+
// Dark mode
|
1059
|
+
&.dark {
|
1060
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1061
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1062
|
+
border-right: 1px solid $border_dark !important;
|
1063
|
+
}
|
1064
|
+
}
|
1065
|
+
}
|
1066
|
+
|
1067
|
+
// Support column group border colors
|
1068
|
+
&.pb_advanced_table[class*="column-group-border-"] {
|
1069
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1070
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1071
|
+
border-right: 1px solid var(--column-border-color) !important;
|
1072
|
+
}
|
1073
|
+
}
|
1020
1074
|
}
|
1021
1075
|
|
1022
|
-
//
|
1023
|
-
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1076
|
+
// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
|
1077
|
+
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1024
1078
|
.pb_card_kit > .pb_advanced_table .last-row-cell {
|
1025
1079
|
td {
|
1026
|
-
border-bottom: none !important;
|
1080
|
+
border-bottom: none !important;
|
1027
1081
|
}
|
1028
1082
|
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<br/>
|
2
|
+
<%= pb_rails("button", props: { text: "Disable Buttons", variant: "link", id: "toggle-disabled-demo" }) %>
|
3
|
+
<%= pb_rails("button", props: { text: "Enable Buttons", variant: "link", id: "toggle-enabled-demo" }) %>
|
4
|
+
<br/>
|
5
|
+
<%= pb_rails("button", props: { text: "I am a Normal Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_bottom: "lg" }) %>
|
6
|
+
<br/>
|
7
|
+
<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com", margin_right: "lg" }) %>
|
8
|
+
|
9
|
+
<script>
|
10
|
+
document.addEventListener('DOMContentLoaded', function () {
|
11
|
+
const disableTrigger = document.querySelector('#toggle-disabled-demo')
|
12
|
+
const enableTrigger = document.querySelector('#toggle-enabled-demo')
|
13
|
+
|
14
|
+
// Managed Buttons
|
15
|
+
const btn = document.querySelector('#normal_managed_button');
|
16
|
+
const link = document.querySelector('#a_tag_managed_button');
|
17
|
+
|
18
|
+
disableTrigger.addEventListener('click', (e) => {
|
19
|
+
// Disable both default button and a tag button
|
20
|
+
btn.setAttribute('disabled', true)
|
21
|
+
link.setAttribute('aria-disabled', 'true')
|
22
|
+
});
|
23
|
+
enableTrigger.addEventListener('click', (e) => {
|
24
|
+
// Enable both default button and a tag button
|
25
|
+
btn.removeAttribute('disabled')
|
26
|
+
link.removeAttribute('aria-disabled')
|
27
|
+
});
|
28
|
+
});
|
29
|
+
</script>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
If needing to toggle the disabled state of the Button dynmically, you can now do so in rails using the `pb-button-managed` data attribute.
|
2
|
+
|
3
|
+
If your button has `data:{ pb-button-managed: true }` on it, you can then toggle state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.
|
4
|
+
|
5
|
+
Click to enable or disable the buttons above and view the code snippet below for details!
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<%= pb_rails("button", props: { text: "Disable Button", variant: "link", id: "toggle-disabled-demo-with-helper" }) %>
|
2
|
+
<%= pb_rails("button", props: { text: "Enable Button", variant: "link", id: "toggle-enabled-demo-with-helper" }) %>
|
3
|
+
<br/>
|
4
|
+
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
|
5
|
+
|
6
|
+
<script>
|
7
|
+
document.addEventListener('DOMContentLoaded', function () {
|
8
|
+
const demoBtn = document.querySelector('#managed_button_with_helper')
|
9
|
+
|
10
|
+
const disable = document.querySelector('#toggle-disabled-demo-with-helper')
|
11
|
+
const enable = document.querySelector('#toggle-enabled-demo-with-helper')
|
12
|
+
|
13
|
+
disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
|
14
|
+
|
15
|
+
enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
|
16
|
+
|
17
|
+
});
|
18
|
+
</script>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute.
|
2
|
+
|
3
|
+
If your button has `data:{ pb-button-managed: true }` on it, you can then toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shoen in the code snippet below.
|
4
|
+
|
5
|
+
Click to enable or disable the buttons above!
|
@@ -11,6 +11,8 @@ examples:
|
|
11
11
|
- button_options: Button Additional Options
|
12
12
|
- button_size: Button Size
|
13
13
|
- button_form: Button Form Attribute
|
14
|
+
- button_managed_disabled: Button Toggle Disabled State
|
15
|
+
- button_managed_disabled_helper: Button Toggle Disabled State Helper
|
14
16
|
|
15
17
|
react:
|
16
18
|
- button_default: Button Variants
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element"
|
2
|
+
|
3
|
+
const BUTTON_SELECTOR = "[data-pb-button-managed]"
|
4
|
+
|
5
|
+
export default class PbButton extends PbEnhancedElement {
|
6
|
+
static get selector() {
|
7
|
+
return BUTTON_SELECTOR
|
8
|
+
}
|
9
|
+
|
10
|
+
connect() {
|
11
|
+
this._attrManaged = this._attributesPresent()
|
12
|
+
this.element._pbButton = this
|
13
|
+
|
14
|
+
this._onClick = (e) => {
|
15
|
+
if (this.isDisabled()) {
|
16
|
+
e.preventDefault()
|
17
|
+
e.stopImmediatePropagation()
|
18
|
+
}
|
19
|
+
}
|
20
|
+
this.element.addEventListener("click", this._onClick, true)
|
21
|
+
|
22
|
+
if (this._attrManaged) this._syncClassesFromAttributes()
|
23
|
+
|
24
|
+
this._observer = new MutationObserver(() => {
|
25
|
+
this._attrManaged = true
|
26
|
+
this._syncClassesFromAttributes()
|
27
|
+
})
|
28
|
+
this._observer.observe(this.element, {
|
29
|
+
attributes: true,
|
30
|
+
attributeFilter: ["disabled", "aria-disabled"],
|
31
|
+
})
|
32
|
+
}
|
33
|
+
|
34
|
+
disconnect() {
|
35
|
+
this.element.removeEventListener("click", this._onClick, true)
|
36
|
+
this._observer?.disconnect()
|
37
|
+
delete this.element._pbButton
|
38
|
+
}
|
39
|
+
|
40
|
+
disable() { this.setDisabled(true) }
|
41
|
+
enable() { this.setDisabled(false) }
|
42
|
+
|
43
|
+
setDisabled(state) {
|
44
|
+
if (this._isButton()) {
|
45
|
+
state
|
46
|
+
? this.element.setAttribute("disabled", "disabled")
|
47
|
+
: this.element.removeAttribute("disabled")
|
48
|
+
} else {
|
49
|
+
state
|
50
|
+
? this.element.setAttribute("aria-disabled", "true")
|
51
|
+
: this.element.removeAttribute("aria-disabled")
|
52
|
+
}
|
53
|
+
this._attrManaged = true
|
54
|
+
this._applyClassState(state)
|
55
|
+
}
|
56
|
+
|
57
|
+
isDisabled() {
|
58
|
+
if (this._isButton()) {
|
59
|
+
if (this.element.hasAttribute("disabled")) return true
|
60
|
+
if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
|
61
|
+
} else {
|
62
|
+
const aria = this.element.getAttribute("aria-disabled")
|
63
|
+
if (aria === "true") return true
|
64
|
+
if (this._attrManaged && aria !== "true") return false
|
65
|
+
}
|
66
|
+
return this.element.classList.contains("pb_button_disabled")
|
67
|
+
}
|
68
|
+
|
69
|
+
_isButton() {
|
70
|
+
return this.element.tagName === "BUTTON"
|
71
|
+
}
|
72
|
+
|
73
|
+
_attributesPresent() {
|
74
|
+
return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
|
75
|
+
}
|
76
|
+
|
77
|
+
_syncClassesFromAttributes() {
|
78
|
+
const state = this._attrDisabledState()
|
79
|
+
const disabled = (state === null) ? false : state
|
80
|
+
this._applyClassState(disabled)
|
81
|
+
}
|
82
|
+
|
83
|
+
_attrDisabledState() {
|
84
|
+
if (this._isButton()) {
|
85
|
+
return this.element.hasAttribute("disabled") ? true : null
|
86
|
+
} else {
|
87
|
+
const aria = this.element.getAttribute("aria-disabled")
|
88
|
+
if (aria === "true") return true
|
89
|
+
if (aria === "false") return false
|
90
|
+
return this.element.hasAttribute("aria-disabled") ? false : null
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
_applyClassState(disabled) {
|
95
|
+
this.element.classList.toggle("pb_button_disabled", !!disabled)
|
96
|
+
this.element.classList.toggle("pb_button_enabled", !disabled)
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
@@ -48,3 +48,30 @@
|
|
48
48
|
&:hover { cursor: pointer; }
|
49
49
|
}
|
50
50
|
}
|
51
|
+
|
52
|
+
.pb_nav_extended_underline {
|
53
|
+
position: relative;
|
54
|
+
|
55
|
+
// Add full-width border using pseudo-element so as not to break the active item border
|
56
|
+
&::after {
|
57
|
+
content: '';
|
58
|
+
position: absolute;
|
59
|
+
bottom: 0;
|
60
|
+
left: 0;
|
61
|
+
right: 0;
|
62
|
+
height: 3px;
|
63
|
+
background-color: $border_light;
|
64
|
+
z-index: 1;
|
65
|
+
}
|
66
|
+
|
67
|
+
.pb_nav_list_kit_item_active.pb_nav_list_item_link {
|
68
|
+
position: relative;
|
69
|
+
z-index: 2;
|
70
|
+
}
|
71
|
+
|
72
|
+
&.dark {
|
73
|
+
&::after {
|
74
|
+
background-color: rgba($white, $opacity_3);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
@@ -117,3 +117,19 @@ test('should change variant', () => {
|
|
117
117
|
const kit = screen.getByTestId(navTestId)
|
118
118
|
expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
|
119
119
|
})
|
120
|
+
|
121
|
+
test('extendedUnderline should work as expected', () => {
|
122
|
+
render(
|
123
|
+
<NavDefault extendedUnderline
|
124
|
+
orientation="horizontal"
|
125
|
+
/>
|
126
|
+
)
|
127
|
+
const kit = screen.getByTestId(navTestId)
|
128
|
+
expect(kit).toHaveClass('pb_nav_extended_underline')
|
129
|
+
})
|
130
|
+
|
131
|
+
test('extendedUnderline should not be applied when orientation is vertical', () => {
|
132
|
+
render(<NavDefault extendedUnderline />)
|
133
|
+
const kit = screen.getByTestId(navTestId)
|
134
|
+
expect(kit).not.toHaveClass('pb_nav_extended_underline')
|
135
|
+
})
|
@@ -14,6 +14,7 @@ type NavProps = {
|
|
14
14
|
className?: string | string[],
|
15
15
|
data?: Record<string, unknown>,
|
16
16
|
dark?: boolean,
|
17
|
+
extendedUnderline?: boolean,
|
17
18
|
highlight?: boolean,
|
18
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
20
|
id?: string,
|
@@ -33,6 +34,7 @@ const Nav = (props: NavProps): React.ReactElement => {
|
|
33
34
|
className,
|
34
35
|
data = {},
|
35
36
|
dark = false,
|
37
|
+
extendedUnderline = false,
|
36
38
|
highlight = true,
|
37
39
|
htmlOptions = {},
|
38
40
|
id,
|
@@ -52,6 +54,9 @@ const Nav = (props: NavProps): React.ReactElement => {
|
|
52
54
|
highlight: highlight,
|
53
55
|
borderless: borderless,
|
54
56
|
}),
|
57
|
+
// extended underline is only applicable for horizontal normal nav, should not
|
58
|
+
// affect other variants or orientations
|
59
|
+
variant === 'normal' && orientation === 'horizontal' && extendedUnderline && 'pb_nav_extended_underline',
|
55
60
|
globalProps(props),
|
56
61
|
className
|
57
62
|
)
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Nav from '../_nav'
|
4
|
+
import NavItem from '../_item'
|
5
|
+
|
6
|
+
const HorizontalNavExtendedunderline = (props) => {
|
7
|
+
return (
|
8
|
+
<Nav
|
9
|
+
extendedUnderline
|
10
|
+
link="#"
|
11
|
+
orientation="horizontal"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<NavItem
|
15
|
+
link="#"
|
16
|
+
text="About"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<NavItem
|
20
|
+
active
|
21
|
+
link="#"
|
22
|
+
text="Case Studies"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
<NavItem
|
26
|
+
link="#"
|
27
|
+
text="Service"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<NavItem
|
31
|
+
link="#"
|
32
|
+
text="Contacts"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
</Nav>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default HorizontalNavExtendedunderline
|
@@ -0,0 +1 @@
|
|
1
|
+
The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container.
|
@@ -17,6 +17,7 @@ examples:
|
|
17
17
|
- horizontal_nav: Horizontal Nav
|
18
18
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
19
19
|
- bold_horizontal_nav: Bold Horizontal Nav
|
20
|
+
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
20
21
|
- block_nav: Block
|
21
22
|
- block_no_title_nav: Without Title
|
22
23
|
- new_tab: Open in a New Tab
|
@@ -42,6 +43,7 @@ examples:
|
|
42
43
|
- horizontal_nav: Horizontal Nav
|
43
44
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
44
45
|
- bold_horizontal_nav: Bold Horizontal Nav
|
46
|
+
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
45
47
|
- block_nav: Block
|
46
48
|
- block_no_title_nav: Without Title
|
47
49
|
- new_tab: Open in a New Tab
|
@@ -19,4 +19,5 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
|
|
19
19
|
export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
|
20
20
|
export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
|
21
21
|
export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
|
22
|
-
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
22
|
+
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
23
|
+
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
@@ -14,9 +14,10 @@ module Playbook
|
|
14
14
|
prop :highlight, type: Playbook::Props::Boolean, default: true
|
15
15
|
prop :borderless, type: Playbook::Props::Boolean, default: false
|
16
16
|
prop :tabbing, type: Playbook::Props::Boolean, default: false
|
17
|
+
prop :extended_underline, type: Playbook::Props::Boolean, default: false
|
17
18
|
|
18
19
|
def classname
|
19
|
-
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
|
20
|
+
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class) + extended_underline_class
|
20
21
|
end
|
21
22
|
|
22
23
|
def data
|
@@ -34,6 +35,10 @@ module Playbook
|
|
34
35
|
def borderless_class
|
35
36
|
borderless ? "borderless" : nil
|
36
37
|
end
|
38
|
+
|
39
|
+
def extended_underline_class
|
40
|
+
variant === "normal" && orientation === "horizontal" && extended_underline ? " pb_nav_extended_underline" : ""
|
41
|
+
end
|
37
42
|
end
|
38
43
|
end
|
39
44
|
end
|
@@ -4,8 +4,8 @@
|
|
4
4
|
|
5
5
|
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
|
6
6
|
|
7
|
-
|
8
|
-
window.addEventListener("
|
7
|
+
<script>
|
8
|
+
window.addEventListener("load", () => {
|
9
9
|
|
10
10
|
// variables for the kits you are targeting
|
11
11
|
const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
|
@@ -142,4 +142,4 @@
|
|
142
142
|
});
|
143
143
|
|
144
144
|
})
|
145
|
-
|
145
|
+
</script>
|
@@ -10,8 +10,8 @@
|
|
10
10
|
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
|
11
11
|
|
12
12
|
|
13
|
-
|
14
|
-
window.addEventListener("
|
13
|
+
<script>
|
14
|
+
window.addEventListener("load", () => {
|
15
15
|
|
16
16
|
const commonText = document.querySelector("#body_common")
|
17
17
|
|
@@ -133,4 +133,4 @@
|
|
133
133
|
});
|
134
134
|
|
135
135
|
})
|
136
|
-
|
136
|
+
</script>
|
@@ -4,8 +4,8 @@
|
|
4
4
|
|
5
5
|
<div id="match"> </div>
|
6
6
|
|
7
|
-
|
8
|
-
window.addEventListener("
|
7
|
+
<script>
|
8
|
+
window.addEventListener("load", () => {
|
9
9
|
|
10
10
|
const useState = (defaultValue) => {
|
11
11
|
let value = defaultValue;
|
@@ -48,4 +48,4 @@
|
|
48
48
|
|
49
49
|
}
|
50
50
|
})
|
51
|
-
|
51
|
+
</script>
|
@@ -32,8 +32,8 @@
|
|
32
32
|
|
33
33
|
|
34
34
|
|
35
|
-
|
36
|
-
window.addEventListener("
|
35
|
+
<script>
|
36
|
+
window.addEventListener("load", () => {
|
37
37
|
|
38
38
|
|
39
39
|
// variables for the passphrase kits you are targeting
|
@@ -320,4 +320,4 @@
|
|
320
320
|
|
321
321
|
|
322
322
|
})
|
323
|
-
|
323
|
+
</script>
|
@@ -7,8 +7,8 @@
|
|
7
7
|
<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
|
8
8
|
|
9
9
|
|
10
|
-
|
11
|
-
window.addEventListener("
|
10
|
+
<script>
|
11
|
+
window.addEventListener("load", () => {
|
12
12
|
|
13
13
|
// variables for the kits you are targeting
|
14
14
|
const passphrase = document.querySelector(".passphrase_change").querySelector("input")
|
@@ -120,4 +120,4 @@
|
|
120
120
|
});
|
121
121
|
|
122
122
|
})
|
123
|
-
|
123
|
+
</script>
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<script>
|
14
14
|
document.addEventListener('DOMContentLoaded', () => {
|
15
15
|
function handleButtonClick() {
|
16
|
-
const editorContainer = [...document.querySelectorAll('[data-react-props]')]
|
17
|
-
.find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
|
16
|
+
const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
|
17
|
+
.find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
|
18
18
|
|
19
19
|
const editorElement = editorContainer?.querySelector('trix-editor')
|
20
20
|
const inputId = editorElement?.getAttribute('input')
|