dibk-design 6.4.1 → 6.5.1
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.
|
@@ -8,10 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _NavigationBarListItem = _interopRequireDefault(require("./NavigationBarListItem"));
|
|
10
10
|
var _theme = require("../functions/theme");
|
|
11
|
+
var _helpers = require("../functions/helpers");
|
|
11
12
|
var _dibkLogoMobile = _interopRequireDefault(require("../assets/svg/dibk-logo-mobile.svg?url"));
|
|
12
13
|
var _dibkLogo = _interopRequireDefault(require("../assets/svg/dibk-logo.svg?url"));
|
|
13
14
|
var _NavigationBarModule = _interopRequireDefault(require("./NavigationBar.module.scss"));
|
|
14
|
-
var _helpers = require("../functions/helpers");
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -102,7 +102,7 @@ const NavigationBar = props => {
|
|
|
102
102
|
}, _react.default.createElement("span", {
|
|
103
103
|
id: "main-content-link-text"
|
|
104
104
|
}, "Hopp til hovedinnhold")), _react.default.createElement("div", {
|
|
105
|
-
className: _NavigationBarModule.default.navigationBar
|
|
105
|
+
className: (0, _helpers.classNameArrayToClassNameString)([_NavigationBarModule.default.navigationBar, props.preventChildElementStacking && _NavigationBarModule.default.preventStacking])
|
|
106
106
|
}, _react.default.createElement("div", {
|
|
107
107
|
className: _NavigationBarModule.default.logoContainer
|
|
108
108
|
}, renderLogo(props.logoLink, props.logoLinkTitle)), !!props.children && _react.default.createElement("div", {
|
|
@@ -122,7 +122,7 @@ const NavigationBar = props => {
|
|
|
122
122
|
}), _react.default.createElement("span", {
|
|
123
123
|
className: _NavigationBarModule.default.line
|
|
124
124
|
})))), hasListItems && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", {
|
|
125
|
-
className:
|
|
125
|
+
className: (0, _helpers.classNameArrayToClassNameString)([_NavigationBarModule.default.dropdownContainer, active && _NavigationBarModule.default.active])
|
|
126
126
|
}, _react.default.createElement("div", {
|
|
127
127
|
id: "main-menu-dropdown",
|
|
128
128
|
className: _NavigationBarModule.default.dropdown
|
|
@@ -134,11 +134,13 @@ NavigationBar.propTypes = {
|
|
|
134
134
|
logoLink: _propTypes.default.string,
|
|
135
135
|
logoLinkTitle: _propTypes.default.string,
|
|
136
136
|
openLogoLinkInNewTab: _propTypes.default.bool,
|
|
137
|
-
theme: _propTypes.default.object
|
|
137
|
+
theme: _propTypes.default.object,
|
|
138
|
+
preventChildElementStacking: _propTypes.default.bool
|
|
138
139
|
};
|
|
139
140
|
NavigationBar.defaultProps = {
|
|
140
141
|
primaryListItems: [],
|
|
141
142
|
secondaryListItems: [],
|
|
142
|
-
logoLink: null
|
|
143
|
+
logoLink: null,
|
|
144
|
+
preventChildElementStacking: false
|
|
143
145
|
};
|
|
144
146
|
var _default = exports.default = NavigationBar;
|
|
@@ -55,14 +55,20 @@
|
|
|
55
55
|
position: relative;
|
|
56
56
|
display: -ms-flexbox;
|
|
57
57
|
display: flex;
|
|
58
|
-
-ms-flex-direction: column;
|
|
59
|
-
flex-direction: column;
|
|
60
58
|
-ms-flex-wrap: wrap;
|
|
61
59
|
flex-wrap: wrap;
|
|
62
60
|
max-width: 100%;
|
|
63
61
|
margin: 0;
|
|
64
62
|
font-size: 18px;
|
|
65
63
|
padding: 0;
|
|
64
|
+
&:not(.preventStacking) {
|
|
65
|
+
-ms-flex-direction: column;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
}
|
|
68
|
+
&.preventStacking {
|
|
69
|
+
-ms-flex-direction: row;
|
|
70
|
+
flex-direction: row;
|
|
71
|
+
}
|
|
66
72
|
@media only screen and (min-width: $screen-sm) {
|
|
67
73
|
-ms-flex-direction: row;
|
|
68
74
|
flex-direction: row;
|
|
@@ -19,6 +19,7 @@ const ToggleNavigationButton = _ref => {
|
|
|
19
19
|
} = _ref;
|
|
20
20
|
const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
|
|
21
21
|
let element = _react.default.createElement(htmlTag, {
|
|
22
|
+
...buttonProps,
|
|
22
23
|
className: elementClass,
|
|
23
24
|
id: id || null
|
|
24
25
|
}, isOpen ? hideText : showText);
|