dibk-design 2.6.2 → 2.6.4

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.
Files changed (6) hide show
  1. package/dist/components/NavigationBar.js +8 -7
  2. package/dist/components/WizardNavigation/Step.js +23 -24
  3. package/dist/components/WizardNavigation/Step.module.scss +3 -1
  4. package/dist/components/WizardNavigation.js +10 -3
  5. package/dist/components/WizardNavigation.module.scss +2 -0
  6. package/package.json +1 -1
package/dist/components/NavigationBar.js CHANGED
@@ -67,7 +67,7 @@ var NavigationBar = function NavigationBar(props) {
67
67
  });
68
68
  }
69
69
  });
70
- return _react.default.createElement("ul", {
70
+ return !!(listItems !== null && listItems !== void 0 && listItems.length) && _react.default.createElement("ul", {
71
71
  className: _NavigationBarModule.default.primaryList
72
72
  }, listItems);
73
73
  };
@@ -79,7 +79,7 @@ var NavigationBar = function NavigationBar(props) {
79
79
  theme: props.theme
80
80
  });
81
81
  });
82
- return _react.default.createElement("ul", {
82
+ return !!(listItems !== null && listItems !== void 0 && listItems.length) && _react.default.createElement("ul", {
83
83
  className: _NavigationBarModule.default.secondaryList
84
84
  }, listItems);
85
85
  };
@@ -106,6 +106,7 @@ var NavigationBar = function NavigationBar(props) {
106
106
  var hamburgerIconLineStyle = {
107
107
  backgroundColor: (0, _theme.getThemeNavigationBarTextColor)(props.theme)
108
108
  };
109
+ var hasListItems = !!((_props$primaryListIte = props.primaryListItems) !== null && _props$primaryListIte !== void 0 && _props$primaryListIte.length) || !!((_props$secondaryListI = props.secondaryListItems) !== null && _props$secondaryListI !== void 0 && _props$secondaryListI.length);
109
110
  return _react.default.createElement("header", null, _react.default.createElement("div", {
110
111
  className: _NavigationBarModule.default.isPresent
111
112
  }, _react.default.createElement("div", {
@@ -113,9 +114,9 @@ var NavigationBar = function NavigationBar(props) {
113
114
  style: navigationBarThemeStyle
114
115
  }, _react.default.createElement("div", {
115
116
  className: _NavigationBarModule.default.logoContainer
116
- }, renderLogo(props.logoLink)), props.children ? _react.default.createElement("div", {
117
+ }, renderLogo(props.logoLink)), !!props.children && _react.default.createElement("div", {
117
118
  className: _NavigationBarModule.default.childElements
118
- }, props.children) : null, !!((_props$primaryListIte = props.primaryListItems) !== null && _props$primaryListIte !== void 0 && _props$primaryListIte.length) || !!((_props$secondaryListI = props.secondaryListItems) !== null && _props$secondaryListI !== void 0 && _props$secondaryListI.length) ? _react.default.createElement("button", {
119
+ }, props.children), hasListItems && _react.default.createElement("button", {
119
120
  type: "button",
120
121
  className: "".concat(_NavigationBarModule.default.menuToggle, " ").concat(active ? _NavigationBarModule.default.active : ""),
121
122
  onClick: function onClick() {
@@ -134,15 +135,15 @@ var NavigationBar = function NavigationBar(props) {
134
135
  }), _react.default.createElement("span", {
135
136
  className: _NavigationBarModule.default.line,
136
137
  style: hamburgerIconLineStyle
137
- }))) : null), _react.default.createElement("div", {
138
+ })))), hasListItems && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", {
138
139
  className: "".concat(_NavigationBarModule.default.dropdownContainer, " ").concat(active ? _NavigationBarModule.default.active : "")
139
140
  }, _react.default.createElement("div", {
140
141
  id: "main-menu-dropdown",
141
142
  className: _NavigationBarModule.default.dropdown,
142
143
  style: navigationBarThemeStyle
143
- }, renderPrimaryList(), renderSecondaryList(), props.children)), _react.default.createElement("div", {
144
+ }, renderPrimaryList(), renderSecondaryList())), _react.default.createElement("div", {
144
145
  className: "".concat(_NavigationBarModule.default.dropdownOverlay, " ").concat(active ? _NavigationBarModule.default.active : "")
145
- })));
146
+ }))));
146
147
  };
147
148
  NavigationBar.propTypes = {
148
149
  primaryListItems: _propTypes.default.array,
package/dist/components/WizardNavigation/Step.js CHANGED
@@ -7,37 +7,36 @@ exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _reactRouterDom = require("react-router-dom");
10
+ var _helpers = require("../../functions/helpers");
10
11
  var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
13
  var Step = function Step(props) {
13
- var getActiveClass = function getActiveClass() {
14
- return props.activeStepId === props.step.id ? _StepModule.default.active : "";
14
+ var getActiveClass = function getActiveClass(step) {
15
+ return props.activeStepId === step.id ? _StepModule.default.active : "";
15
16
  };
16
- var getFinishedClass = function getFinishedClass() {
17
- return props.step.finished ? _StepModule.default.finished : "";
17
+ var getFinishedClass = function getFinishedClass(step) {
18
+ return step.finished ? _StepModule.default.finished : "";
18
19
  };
19
- var getErrorClass = function getErrorClass() {
20
- return props.step.hasErrors ? _StepModule.default.hasErrors : "";
20
+ var getErrorClass = function getErrorClass(step) {
21
+ return step.hasErrors ? _StepModule.default.hasErrors : "";
21
22
  };
22
- var step = props.step;
23
- return step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
23
+ var renderStepContent = function renderStepContent(step, index) {
24
+ return _react.default.createElement("span", {
25
+ className: _StepModule.default.wizardTopnavItemContent
26
+ }, _react.default.createElement("span", {
27
+ className: _StepModule.default.stepNumber
28
+ }, index + 1), _react.default.createElement("span", {
29
+ className: _StepModule.default.stepName
30
+ }, step.name));
31
+ };
32
+ var step = props.step,
33
+ index = props.index;
34
+ return _react.default.createElement("li", {
35
+ className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step)])
36
+ }, step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
24
37
  to: step.link,
25
- className: "".concat(_StepModule.default.wizardTopnavItem, " ").concat(getActiveClass(), " ").concat(getFinishedClass(), " ").concat(getErrorClass())
26
- }, _react.default.createElement("span", {
27
- className: _StepModule.default.wizardTopnavItemContent
28
- }, _react.default.createElement("span", {
29
- className: _StepModule.default.stepNumber
30
- }, props.index + 1), _react.default.createElement("span", {
31
- className: _StepModule.default.stepName
32
- }, props.step.name))) : _react.default.createElement("div", {
33
- className: "".concat(_StepModule.default.wizardTopnavItem, " ").concat(getActiveClass(), " ").concat(getFinishedClass(), " ").concat(getErrorClass())
34
- }, _react.default.createElement("span", {
35
- className: _StepModule.default.wizardTopnavItemContent
36
- }, _react.default.createElement("span", {
37
- className: _StepModule.default.stepNumber
38
- }, props.index + 1), _react.default.createElement("span", {
39
- className: _StepModule.default.stepName
40
- }, props.step.name)));
38
+ "aria-current": props.activeStepId === props.step.id ? "step" : null
39
+ }, renderStepContent(step, index)) : renderStepContent(step, index));
41
40
  };
42
41
  Step.propTypes = {
43
42
  step: _propTypes.default.object.isRequired,
package/dist/components/WizardNavigation/Step.module.scss CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  .wizardTopnavItem {
8
8
  flex: 1;
9
- text-decoration: none;
9
+ a {
10
+ text-decoration: none;
11
+ }
10
12
  .wizardTopnavItemContent {
11
13
  display: flex;
12
14
  height: 60px;
package/dist/components/WizardNavigation.js CHANGED
@@ -10,6 +10,7 @@ var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
10
10
  var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  var WizardNavigation = function WizardNavigation(props) {
13
+ var _Object$keys, _props$ariaLabel;
13
14
  var renderSteps = function renderSteps(steps, activeStepId) {
14
15
  var hasSteps = steps && Object.keys(steps).length;
15
16
  return hasSteps ? Object.keys(steps).map(function (stepKey, stepIndex) {
@@ -22,9 +23,14 @@ var WizardNavigation = function WizardNavigation(props) {
22
23
  });
23
24
  }) : null;
24
25
  };
25
- return _react.default.createElement("div", {
26
+ var amountOfSteps = props.steps && (_Object$keys = Object.keys(props.steps)) !== null && _Object$keys !== void 0 && _Object$keys.length ? Object.keys(props.steps).length : 0;
27
+ var defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
28
+ var ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
29
+ return _react.default.createElement("nav", {
30
+ "aria-label": ariaLabel
31
+ }, _react.default.createElement("ol", {
26
32
  className: _WizardNavigationModule.default.wizardTopnav
27
- }, renderSteps(props.steps, props.activeStepId));
33
+ }, renderSteps(props.steps, props.activeStepId)));
28
34
  };
29
35
  WizardNavigation.propTypes = {
30
36
  steps: _propTypes.default.shape({
@@ -37,7 +43,8 @@ WizardNavigation.propTypes = {
37
43
  reactLink: _propTypes.default.bool
38
44
  })
39
45
  }).isRequired,
40
- activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
46
+ activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
47
+ "aria-label": _propTypes.default.string
41
48
  };
42
49
  var _default = WizardNavigation;
43
50
  exports.default = _default;
package/dist/components/WizardNavigation.module.scss CHANGED
@@ -4,6 +4,8 @@
4
4
  display: flex;
5
5
  margin: 20px;
6
6
  flex-direction: column;
7
+ list-style: none;
8
+ padding: 0;
7
9
  @media only screen and (min-width: $screen-sm) {
8
10
  flex-direction: row;
9
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "2.6.2",
3
+ "version": "2.6.4",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",