dibk-design 2.6.3 → 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.
|
@@ -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 ===
|
|
14
|
+
var getActiveClass = function getActiveClass(step) {
|
|
15
|
+
return props.activeStepId === step.id ? _StepModule.default.active : "";
|
|
15
16
|
};
|
|
16
|
-
var getFinishedClass = function getFinishedClass() {
|
|
17
|
-
return
|
|
17
|
+
var getFinishedClass = function getFinishedClass(step) {
|
|
18
|
+
return step.finished ? _StepModule.default.finished : "";
|
|
18
19
|
};
|
|
19
|
-
var getErrorClass = function getErrorClass() {
|
|
20
|
-
return
|
|
20
|
+
var getErrorClass = function getErrorClass(step) {
|
|
21
|
+
return step.hasErrors ? _StepModule.default.hasErrors : "";
|
|
21
22
|
};
|
|
22
|
-
var
|
|
23
|
-
|
|
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
|
-
|
|
26
|
-
},
|
|
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,
|
|
@@ -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
|
-
|
|
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;
|