dibk-design 6.2.3 → 6.3.0

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.
@@ -0,0 +1,8 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Ferdig" style="fill: rgb(23, 121, 18);">
2
+ <mask id="mask0_1089_7430" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" style="mask-type: alpha;">
3
+ <rect width="20" height="20"></rect>
4
+ </mask>
5
+ <g mask="url(#mask0_1089_7430)">
6
+ <path d="M5.71427 8.57149L3.80951 10.4762L8.57141 15.2382L17.1428 6.66672L15.2381 4.76196L8.57141 11.4286L5.71427 8.57149Z"></path>
7
+ </g>
8
+ </svg>
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const ToggleNavigationButton = _ref => {
12
+ let {
13
+ id,
14
+ htmlTag,
15
+ showText,
16
+ hideText,
17
+ buttonProps,
18
+ isOpen
19
+ } = _ref;
20
+ const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
21
+ let element = _react.default.createElement(htmlTag, {
22
+ className: elementClass,
23
+ id: id || null
24
+ }, isOpen ? hideText : showText);
25
+ return element;
26
+ };
27
+ ToggleNavigationButton.propTypes = {
28
+ id: _propTypes.default.string,
29
+ htmlTag: _propTypes.default.string,
30
+ showText: _propTypes.default.string,
31
+ hideText: _propTypes.default.string,
32
+ buttonProps: _propTypes.default.object,
33
+ isOpen: _propTypes.default.bool
34
+ };
35
+ ToggleNavigationButton.defaultProps = {
36
+ htmlTag: "button",
37
+ isOpen: false
38
+ };
39
+ var _default = exports.default = ToggleNavigationButton;
@@ -0,0 +1,31 @@
1
+ @import "../style/global.scss";
2
+
3
+ .toggleNavigationButton {
4
+ background-color: var(--color-body-background, $color-body-background);
5
+ color: var(--color-primary, $color-primary);
6
+ border: 1px solid var(--color-primary, $color-primary);
7
+ font-family: $default-font;
8
+ transition: background-color $default-transition;
9
+ display: block;
10
+ width: 100%;
11
+ margin: 0 auto;
12
+ border-radius: 0;
13
+ font-size: 16px;
14
+ font-weight: 600;
15
+ line-height: 24px;
16
+ letter-spacing: 0.01em;
17
+ padding: 12px 24px;
18
+ cursor: pointer;
19
+ text-align: center;
20
+ position: relative;
21
+ text-decoration: none;
22
+ &:hover {
23
+ color: var(--color-primary-text, $color-primary-text);
24
+ }
25
+ &:focus {
26
+ outline-width: 2px;
27
+ outline-color: var(--color-focus, $color-focus);
28
+ outline-style: auto;
29
+ outline-offset: 1px;
30
+ }
31
+ }
@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _reactRouterDom = require("react-router-dom");
10
10
  var _helpers = require("../../functions/helpers");
11
11
  var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
12
+ var _checkmarkSymbol = _interopRequireDefault(require("../../assets/svg/checkmark-symbol.svg?url"));
12
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
14
  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); }
14
15
  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; }
@@ -23,11 +24,19 @@ const Step = props => {
23
24
  return step.hasErrors ? _StepModule.default.hasErrors : "";
24
25
  };
25
26
  const renderStepContent = (step, index) => {
27
+ const isActiveStep = props.activeStepId === step.id;
28
+ const isVertical = props.direction === "vertical";
29
+ const isFinished = step.finished;
30
+ const showCheckmarkSymbol = isVertical && isFinished && !isActiveStep;
26
31
  return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
27
32
  className: _StepModule.default.stepNumber
28
33
  }, index + 1), _react.default.createElement("span", {
29
34
  className: _StepModule.default.stepName
30
- }, step.name));
35
+ }, step.name), showCheckmarkSymbol && _react.default.createElement("img", {
36
+ src: _checkmarkSymbol.default,
37
+ alt: "",
38
+ className: _StepModule.default.checkmarkSymbol
39
+ }));
31
40
  };
32
41
  const {
33
42
  step,
@@ -35,7 +44,7 @@ const Step = props => {
35
44
  activeStepId
36
45
  } = props;
37
46
  return _react.default.createElement("li", {
38
- className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step)])
47
+ className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step), _StepModule.default[props.direction]])
39
48
  }, step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
40
49
  to: step.link,
41
50
  "aria-current": activeStepId === step.id ? "step" : null,
@@ -48,6 +57,10 @@ const Step = props => {
48
57
  Step.propTypes = {
49
58
  step: _propTypes.default.object.isRequired,
50
59
  activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
51
- index: _propTypes.default.number.isRequired
60
+ index: _propTypes.default.number.isRequired,
61
+ direction: _propTypes.default.oneOf(["vertical", "horizontal"])
62
+ };
63
+ Step.defaultProps = {
64
+ direction: "vertical"
52
65
  };
53
66
  var _default = exports.default = Step;
@@ -1,112 +1,170 @@
1
1
  @import "../../style/global.scss";
2
2
 
3
- .wizard-topnav .wizard-topnav-item.finished .wizard-topnav-item-content:before {
4
- background-color: var(--color-primary, $color-primary);
5
- }
6
-
7
3
  .wizardTopnavItem {
8
- flex: 1;
9
4
  a {
10
5
  text-decoration: none;
11
6
  }
12
7
  .wizardTopnavItemContent {
13
8
  display: flex;
14
- height: 60px;
15
- align-items: center;
16
- @media only screen and (min-width: $screen-sm) {
17
- display: block;
18
- height: auto;
19
- }
20
- &:before {
21
- @media only screen and (max-width: $screen-xs-max) {
22
- display: block;
23
- content: " ";
24
- height: 36px;
25
- background-color: #e2e1e0;
26
- left: 10px;
27
- top: 33px;
28
- position: relative;
29
- margin-top: -3px;
30
- margin-bottom: -3px;
31
- width: 15px;
32
- margin-right: -15px;
9
+ }
10
+ &.vertical {
11
+ transition: background-color $long-transition;
12
+ .wizardTopnavItemContent {
13
+ -webkit-box-align: center;
14
+ align-items: center;
15
+ -webkit-box-pack: center;
16
+ justify-content: center;
17
+ text-decoration: none;
18
+ border-radius: 0px;
19
+ padding: 12px;
20
+ margin-bottom: 4px;
21
+ font-size: 16px;
22
+ font-weight: 400;
23
+ line-height: 24px;
24
+ letter-spacing: 0.01em;
25
+ .stepNumber {
26
+ display: flex;
27
+ align-self: stretch;
28
+ -webkit-box-align: center;
29
+ align-items: center;
30
+ -webkit-box-pack: center;
31
+ justify-content: center;
32
+ overflow: hidden;
33
+ min-width: 12px;
34
+ max-width: 100%;
35
+ color: var(--color-secondary-contrast, $color-secondary-contrast);
33
36
  }
34
- @media only screen and (min-width: $screen-sm) {
35
- display: inline-block;
36
- content: " ";
37
- height: 15px;
38
- background-color: #e2e1e0;
39
- width: 100%;
40
- left: 50%;
41
- position: relative;
42
- margin-bottom: -30px;
37
+ .stepName {
38
+ -webkit-box-flex: 1;
39
+ flex-grow: 1;
40
+ font-size: 16px;
41
+ font-weight: 400;
42
+ line-height: 24px;
43
+ letter-spacing: 0.01em;
44
+ margin: 0px 0px 0px 12px;
45
+ color: var(--color-default-text, $color-default-text);
43
46
  }
44
47
  }
45
- .stepNumber {
46
- border-radius: 50%;
47
- width: 35px;
48
- height: 35px;
49
- display: block;
50
- text-align: center;
51
- background-color: #e2e1e0;
52
- color: var(--color-default-text, $color-default-text);
53
- position: relative;
54
- font-size: 20px;
55
- line-height: 1.75em;
56
- z-index: 1;
57
- margin-right: 8px;
58
- @media only screen and (min-width: $screen-sm) {
59
- margin: auto;
60
- }
48
+ &:hover:not(.active):not(.finished):not(.hasErrors) {
49
+ background-color: var(--color-secondary-x-light, $color-secondary-x-light);
61
50
  }
62
- .stepName {
63
- display: block;
64
- text-align: left;
65
- color: var(--color-default-text, $color-default-text);
66
- flex: 1;
67
- flex-basis: min-content;
68
- @media only screen and (min-width: $screen-sm) {
69
- display: block;
70
- text-align: center;
51
+ &.active {
52
+ background-color: var(--color-secondary-light, $color-secondary-light);
53
+ }
54
+ &.finished:not(.active) {
55
+ background-color: var(--color-success-x-light, $color-success-x-light);
56
+ &:hover {
57
+ background-color: var(--color-success-light, $color-success-light);
71
58
  }
72
59
  }
73
- }
74
- &.active {
75
- :local(.stepNumber) {
76
- background-color: var(--color-primary, $color-primary);
77
- color: #fff;
60
+ &.hasErrors:not(.active) {
61
+ background-color: var(--color-error-x-light, $color-error-x-light);
62
+ &:hover {
63
+ background-color: var(--color-error-light, $color-error-light);
64
+ }
78
65
  }
79
66
  }
80
- &.finished {
67
+ &.horizontal {
68
+ flex: 1;
81
69
  .wizardTopnavItemContent {
70
+ height: 60px;
71
+ align-items: center;
72
+ @media only screen and (min-width: $screen-sm) {
73
+ display: block;
74
+ height: auto;
75
+ }
82
76
  &:before {
83
- background-color: var(--color-primary, $color-primary);
77
+ @media only screen and (max-width: $screen-xs-max) {
78
+ display: block;
79
+ content: " ";
80
+ height: 36px;
81
+ background-color: #e2e1e0;
82
+ left: 10px;
83
+ top: 33px;
84
+ position: relative;
85
+ margin-top: -3px;
86
+ margin-bottom: -3px;
87
+ width: 15px;
88
+ margin-right: -15px;
89
+ }
90
+ @media only screen and (min-width: $screen-sm) {
91
+ display: inline-block;
92
+ content: " ";
93
+ height: 15px;
94
+ background-color: #e2e1e0;
95
+ width: 100%;
96
+ left: 50%;
97
+ position: relative;
98
+ margin-bottom: -30px;
99
+ }
84
100
  }
85
101
  .stepNumber {
102
+ border-radius: 50%;
103
+ width: 35px;
104
+ height: 35px;
105
+ display: block;
106
+ text-align: center;
107
+ background-color: #e2e1e0;
108
+ color: var(--color-default-text, $color-default-text);
109
+ position: relative;
110
+ font-size: 20px;
111
+ line-height: 1.75em;
112
+ z-index: 1;
113
+ margin-right: 8px;
114
+ @media only screen and (min-width: $screen-sm) {
115
+ margin: auto;
116
+ }
117
+ }
118
+ .stepName {
119
+ display: block;
120
+ text-align: left;
121
+ color: var(--color-default-text, $color-default-text);
122
+ flex: 1;
123
+ flex-basis: min-content;
124
+ @media only screen and (min-width: $screen-sm) {
125
+ display: block;
126
+ text-align: center;
127
+ }
128
+ }
129
+ }
130
+
131
+ &.active {
132
+ :local(.stepNumber) {
86
133
  background-color: var(--color-primary, $color-primary);
87
134
  color: #fff;
88
135
  }
89
136
  }
90
- }
91
- &.hasErrors {
92
- .wizardTopnavItemContent {
93
- &:before {
94
- background-color: var(--color-warning, $color-warning);
95
- }
96
- .stepNumber {
97
- background-color: var(--color-warning, $color-warning);
98
- color: #fff;
137
+ &.finished {
138
+ .wizardTopnavItemContent {
139
+ &:before {
140
+ background-color: var(--color-primary, $color-primary);
141
+ }
142
+ .stepNumber {
143
+ background-color: var(--color-primary, $color-primary);
144
+ color: #fff;
145
+ }
99
146
  }
100
147
  }
101
- }
102
- &:last-child {
103
- .wizardTopnavItemContent {
104
- &:before {
105
- @media only screen and (max-width: $screen-xs-max) {
106
- height: 0;
148
+ &.hasErrors {
149
+ .wizardTopnavItemContent {
150
+ &:before {
151
+ background-color: var(--color-warning, $color-warning);
107
152
  }
108
- @media only screen and (min-width: $screen-sm) {
109
- width: 0;
153
+ .stepNumber {
154
+ background-color: var(--color-warning, $color-warning);
155
+ color: #fff;
156
+ }
157
+ }
158
+ }
159
+ &:last-child {
160
+ .wizardTopnavItemContent {
161
+ &:before {
162
+ @media only screen and (max-width: $screen-xs-max) {
163
+ height: 0;
164
+ }
165
+ @media only screen and (min-width: $screen-sm) {
166
+ width: 0;
167
+ }
110
168
  }
111
169
  }
112
170
  }
@@ -7,6 +7,7 @@ exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
10
+ var _helpers = require("../functions/helpers");
10
11
  var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
13
  const WizardNavigation = props => {
@@ -16,6 +17,7 @@ const WizardNavigation = props => {
16
17
  return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
17
18
  const step = steps[stepKey];
18
19
  return _react.default.createElement(_Step.default, {
20
+ direction: props.direction,
19
21
  step: step,
20
22
  activeStepId: activeStepId,
21
23
  index: stepIndex,
@@ -27,7 +29,8 @@ const WizardNavigation = props => {
27
29
  const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
28
30
  const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
29
31
  return _react.default.createElement("nav", {
30
- "aria-label": ariaLabel
32
+ "aria-label": ariaLabel,
33
+ className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])
31
34
  }, _react.default.createElement("ol", {
32
35
  className: _WizardNavigationModule.default.wizardTopnav
33
36
  }, renderSteps(props.steps, props.activeStepId)));
@@ -44,6 +47,10 @@ WizardNavigation.propTypes = {
44
47
  })
45
48
  }).isRequired,
46
49
  activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
47
- "aria-label": _propTypes.default.string
50
+ "aria-label": _propTypes.default.string,
51
+ direction: _propTypes.default.oneOf(["vertical", "horizontal"])
52
+ };
53
+ WizardNavigation.defaultProps = {
54
+ direction: "vertical"
48
55
  };
49
56
  var _default = exports.default = WizardNavigation;
@@ -1,12 +1,24 @@
1
1
  @import "../style/global.scss";
2
2
 
3
- .wizardTopnav {
4
- display: flex;
5
- margin: 20px;
6
- flex-direction: column;
7
- list-style: none;
8
- padding: 0;
9
- @media only screen and (min-width: $screen-sm) {
10
- flex-direction: row;
3
+ .wizardTopnavContainer {
4
+ .wizardTopnav {
5
+ list-style: none;
6
+ padding: 0;
7
+ margin: 0;
8
+ }
9
+ &.vertical {
10
+ background-color: #fff;
11
+ padding: 12px;
12
+ overflow: hidden;
13
+ }
14
+ &.horizontal {
15
+ .wizardTopnav {
16
+ display: flex;
17
+ margin: 20px;
18
+ flex-direction: column;
19
+ @media only screen and (min-width: $screen-sm) {
20
+ flex-direction: row;
21
+ }
22
+ }
11
23
  }
12
24
  }
package/dist/index.js CHANGED
@@ -201,6 +201,12 @@ Object.defineProperty(exports, "ThemeProvider", {
201
201
  return _ThemeProvider.default;
202
202
  }
203
203
  });
204
+ Object.defineProperty(exports, "ToggleNavigationButton", {
205
+ enumerable: true,
206
+ get: function () {
207
+ return _ToggleNavigationButton.default;
208
+ }
209
+ });
204
210
  Object.defineProperty(exports, "WizardNavigation", {
205
211
  enumerable: true,
206
212
  get: function () {
@@ -246,6 +252,7 @@ var _Select = _interopRequireDefault(require("./components/Select"));
246
252
  var _Table = _interopRequireDefault(require("./components/Table"));
247
253
  var _Textarea = _interopRequireDefault(require("./components/Textarea"));
248
254
  var _ThemeProvider = _interopRequireDefault(require("./components/ThemeProvider"));
255
+ var _ToggleNavigationButton = _interopRequireDefault(require("./components/ToggleNavigationButton"));
249
256
  var _WizardNavigation = _interopRequireDefault(require("./components/WizardNavigation"));
250
257
  var _Step = _interopRequireDefault(require("./components/WizardNavigation/Step"));
251
258
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1 +1,2 @@
1
1
  $default-transition: 200ms cubic-bezier(0.22, 1, 0.36, 1) 0s;
2
+ $long-transition: 400ms cubic-bezier(0.22, 1, 0.36, 1) 0s;
@@ -2,7 +2,7 @@ $screen-xs: 320px !default;
2
2
  $screen-xs-min: $screen-xs !default;
3
3
  $screen-sm: 640px !default;
4
4
  $screen-sm-min: $screen-sm !default;
5
- $screen-md: 960px !default;
5
+ $screen-md: 900px !default;
6
6
  $screen-md-min: $screen-md !default;
7
7
  $screen-lg: 1280px !default;
8
8
  $screen-lg-min: $screen-lg !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "6.2.3",
3
+ "version": "6.3.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "files": [