dibk-design 6.5.2 → 7.0.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.
- package/dist/components/Accordion.js +4 -4
- package/dist/components/Accordion.module.scss +25 -18
- package/dist/components/Button.js +11 -14
- package/dist/components/Button.module.scss +79 -66
- package/dist/components/CheckBoxIcon.js +2 -2
- package/dist/components/CheckBoxIcon.module.scss +17 -10
- package/dist/components/CheckBoxInput.js +2 -2
- package/dist/components/CheckBoxInput.module.scss +5 -4
- package/dist/components/CheckBoxList.js +4 -5
- package/dist/components/CheckBoxList.module.scss +3 -2
- package/dist/components/CheckBoxListItem.js +1 -1
- package/dist/components/CheckBoxListItem.module.scss +17 -9
- package/dist/components/Container.js +2 -3
- package/dist/components/Container.module.scss +5 -3
- package/dist/components/ContentBox.js +2 -3
- package/dist/components/ContentBox.module.scss +16 -11
- package/dist/components/DescriptionDetails.js +1 -1
- package/dist/components/DescriptionDetails.module.scss +3 -2
- package/dist/components/DescriptionList.js +2 -2
- package/dist/components/DescriptionList.module.scss +0 -2
- package/dist/components/DescriptionTerm.js +1 -1
- package/dist/components/DescriptionTerm.module.scss +3 -2
- package/dist/components/Dialog.js +4 -5
- package/dist/components/Dialog.module.scss +14 -9
- package/dist/components/DragAndDropFileInput.js +6 -7
- package/dist/components/DragAndDropFileInput.module.scss +9 -5
- package/dist/components/ErrorBox.js +1 -1
- package/dist/components/ErrorBox.module.scss +12 -8
- package/dist/components/ErrorMessage.js +4 -6
- package/dist/components/ErrorMessage.module.scss +5 -3
- package/dist/components/Footer.js +1 -1
- package/dist/components/Footer.module.scss +3 -2
- package/dist/components/Header.js +6 -7
- package/dist/components/Header.module.scss +14 -11
- package/dist/components/InfoBox.js +1 -1
- package/dist/components/InfoBox.module.scss +7 -4
- package/dist/components/InputField.js +8 -10
- package/dist/components/InputField.module.scss +19 -13
- package/dist/components/Label.js +3 -4
- package/dist/components/Label.module.scss +3 -2
- package/dist/components/Lead.js +1 -1
- package/dist/components/Lead.module.scss +5 -3
- package/dist/components/List.js +3 -3
- package/dist/components/List.module.scss +0 -2
- package/dist/components/ListItem.js +1 -1
- package/dist/components/ListItem.module.scss +3 -2
- package/dist/components/LoadingAnimation.js +1 -1
- package/dist/components/LoadingAnimation.module.scss +5 -3
- package/dist/components/NavigationBar.js +9 -10
- package/dist/components/NavigationBar.module.scss +66 -57
- package/dist/components/NavigationBarListItem.js +1 -1
- package/dist/components/PDF.scss +14 -6
- package/dist/components/Paper.js +2 -2
- package/dist/components/Paper.module.scss +3 -2
- package/dist/components/ProgressBar.js +2 -2
- package/dist/components/ProgressBar.module.scss +8 -4
- package/dist/components/RadioButtonIcon.js +2 -2
- package/dist/components/RadioButtonIcon.module.scss +18 -10
- package/dist/components/RadioButtonInput.js +2 -2
- package/dist/components/RadioButtonInput.module.scss +5 -4
- package/dist/components/RadioButtonList.js +4 -5
- package/dist/components/RadioButtonList.module.scss +3 -2
- package/dist/components/RadioButtonListItem.js +1 -1
- package/dist/components/RadioButtonListItem.module.scss +17 -9
- package/dist/components/Select.js +9 -10
- package/dist/components/Select.module.scss +24 -16
- package/dist/components/Table.js +3 -3
- package/dist/components/Table.module.scss +10 -8
- package/dist/components/Textarea.js +7 -8
- package/dist/components/Textarea.module.scss +21 -13
- package/dist/components/Theme.js +2 -2
- package/dist/components/Theme.module.scss +29 -27
- package/dist/components/ThemeProvider.js +2 -2
- package/dist/components/ThemeProvider.module.scss +7 -5
- package/dist/components/ToggleNavigationButton.js +1 -1
- package/dist/components/ToggleNavigationButton.module.scss +11 -8
- package/dist/components/WizardNavigation/Step.js +1 -1
- package/dist/components/WizardNavigation/Step.module.scss +27 -24
- package/dist/components/WizardNavigation.js +4 -5
- package/dist/components/WizardNavigation.module.scss +3 -2
- package/dist/functions/helpers.js +11 -15
- package/dist/functions/theme.js +3 -3
- package/dist/index.js +1 -1
- package/dist/style/base/_typography.scss +5 -2
- package/dist/style/layout/_containers.scss +3 -1
- package/dist/style/pdf.css +3 -0
- package/dist/style/pdf.css.map +1 -1
- package/package.json +16 -15
- package/dist/style/abstracts/_all.scss +0 -2
- package/dist/style/abstracts/mixins/_all.scss +0 -12
- package/dist/style/abstracts/variables/_all.scss +0 -5
- package/dist/style/base/_all.scss +0 -3
- package/dist/style/global.scss +0 -3
- package/dist/style/layout/_all.scss +0 -1
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
// Variables
|
|
2
|
+
@use "../style/abstracts/variables/colors";
|
|
3
|
+
@use "../style/abstracts/variables/transitions";
|
|
4
|
+
@use "../style/abstracts/variables/typography";
|
|
2
5
|
|
|
3
6
|
.toggleNavigationButton {
|
|
4
|
-
background-color: var(--color-body-background,
|
|
5
|
-
color: var(--color-primary,
|
|
6
|
-
border: 1px solid var(--color-primary,
|
|
7
|
-
font-family:
|
|
8
|
-
transition: background-color
|
|
7
|
+
background-color: var(--color-body-background, colors.$color-body-background);
|
|
8
|
+
color: var(--color-primary, colors.$color-primary);
|
|
9
|
+
border: 1px solid var(--color-primary, colors.$color-primary);
|
|
10
|
+
font-family: typography.$default-font;
|
|
11
|
+
transition: background-color transitions.$default-transition;
|
|
9
12
|
display: block;
|
|
10
13
|
width: 100%;
|
|
11
14
|
margin: 0 auto;
|
|
@@ -20,11 +23,11 @@
|
|
|
20
23
|
position: relative;
|
|
21
24
|
text-decoration: none;
|
|
22
25
|
&:hover {
|
|
23
|
-
color: var(--color-primary-text,
|
|
26
|
+
color: var(--color-primary-text, colors.$color-primary-text);
|
|
24
27
|
}
|
|
25
28
|
&:focus {
|
|
26
29
|
outline-width: 2px;
|
|
27
|
-
outline-color: var(--color-focus,
|
|
30
|
+
outline-color: var(--color-focus, colors.$color-focus);
|
|
28
31
|
outline-style: auto;
|
|
29
32
|
outline-offset: 1px;
|
|
30
33
|
}
|
|
@@ -10,7 +10,7 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
10
10
|
var _helpers = require("../../functions/helpers");
|
|
11
11
|
var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
|
|
12
12
|
var _checkmarkSymbol = _interopRequireDefault(require("../../assets/svg/checkmark-symbol.svg?url"));
|
|
13
|
-
function _interopRequireDefault(
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
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); }
|
|
15
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; }
|
|
16
16
|
const Step = props => {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
// Variables
|
|
2
|
+
@use "../../style/abstracts/variables/colors";
|
|
3
|
+
@use "../../style/abstracts/variables/transitions";
|
|
4
|
+
@use "../../style/abstracts/variables/viewports";
|
|
2
5
|
|
|
3
6
|
.wizardTopnavItem {
|
|
4
7
|
a {
|
|
@@ -8,7 +11,7 @@
|
|
|
8
11
|
display: flex;
|
|
9
12
|
}
|
|
10
13
|
&.vertical {
|
|
11
|
-
transition: background-color
|
|
14
|
+
transition: background-color transitions.$long-transition;
|
|
12
15
|
.wizardTopnavItemContent {
|
|
13
16
|
-webkit-box-align: center;
|
|
14
17
|
align-items: center;
|
|
@@ -32,7 +35,7 @@
|
|
|
32
35
|
overflow: hidden;
|
|
33
36
|
min-width: 12px;
|
|
34
37
|
max-width: 100%;
|
|
35
|
-
color: var(--color-secondary-contrast,
|
|
38
|
+
color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
|
|
36
39
|
}
|
|
37
40
|
.stepName {
|
|
38
41
|
-webkit-box-flex: 1;
|
|
@@ -42,25 +45,25 @@
|
|
|
42
45
|
line-height: 24px;
|
|
43
46
|
letter-spacing: 0.01em;
|
|
44
47
|
margin: 0px 0px 0px 12px;
|
|
45
|
-
color: var(--color-default-text,
|
|
48
|
+
color: var(--color-default-text, colors.$color-default-text);
|
|
46
49
|
}
|
|
47
50
|
}
|
|
48
51
|
&:hover:not(.active):not(.finished):not(.hasErrors) {
|
|
49
|
-
background-color: var(--color-secondary-x-light,
|
|
52
|
+
background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
|
|
50
53
|
}
|
|
51
54
|
&.active {
|
|
52
|
-
background-color: var(--color-secondary-light,
|
|
55
|
+
background-color: var(--color-secondary-light, colors.$color-secondary-light);
|
|
53
56
|
}
|
|
54
57
|
&.finished:not(.active) {
|
|
55
|
-
background-color: var(--color-success-x-light,
|
|
58
|
+
background-color: var(--color-success-x-light, colors.$color-success-x-light);
|
|
56
59
|
&:hover {
|
|
57
|
-
background-color: var(--color-success-light,
|
|
60
|
+
background-color: var(--color-success-light, colors.$color-success-light);
|
|
58
61
|
}
|
|
59
62
|
}
|
|
60
63
|
&.hasErrors:not(.active) {
|
|
61
|
-
background-color: var(--color-error-x-light,
|
|
64
|
+
background-color: var(--color-error-x-light, colors.$color-error-x-light);
|
|
62
65
|
&:hover {
|
|
63
|
-
background-color: var(--color-error-light,
|
|
66
|
+
background-color: var(--color-error-light, colors.$color-error-light);
|
|
64
67
|
}
|
|
65
68
|
}
|
|
66
69
|
}
|
|
@@ -69,12 +72,12 @@
|
|
|
69
72
|
.wizardTopnavItemContent {
|
|
70
73
|
height: 60px;
|
|
71
74
|
align-items: center;
|
|
72
|
-
@media only screen and (min-width:
|
|
75
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
73
76
|
display: block;
|
|
74
77
|
height: auto;
|
|
75
78
|
}
|
|
76
79
|
&:before {
|
|
77
|
-
@media only screen and (max-width:
|
|
80
|
+
@media only screen and (max-width: viewports.$screen-xs-max) {
|
|
78
81
|
display: block;
|
|
79
82
|
content: " ";
|
|
80
83
|
height: 36px;
|
|
@@ -87,7 +90,7 @@
|
|
|
87
90
|
width: 15px;
|
|
88
91
|
margin-right: -15px;
|
|
89
92
|
}
|
|
90
|
-
@media only screen and (min-width:
|
|
93
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
91
94
|
display: inline-block;
|
|
92
95
|
content: " ";
|
|
93
96
|
height: 15px;
|
|
@@ -105,23 +108,23 @@
|
|
|
105
108
|
display: block;
|
|
106
109
|
text-align: center;
|
|
107
110
|
background-color: #e2e1e0;
|
|
108
|
-
color: var(--color-default-text,
|
|
111
|
+
color: var(--color-default-text, colors.$color-default-text);
|
|
109
112
|
position: relative;
|
|
110
113
|
font-size: 20px;
|
|
111
114
|
line-height: 1.75em;
|
|
112
115
|
z-index: 1;
|
|
113
116
|
margin-right: 8px;
|
|
114
|
-
@media only screen and (min-width:
|
|
117
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
115
118
|
margin: auto;
|
|
116
119
|
}
|
|
117
120
|
}
|
|
118
121
|
.stepName {
|
|
119
122
|
display: block;
|
|
120
123
|
text-align: left;
|
|
121
|
-
color: var(--color-default-text,
|
|
124
|
+
color: var(--color-default-text, colors.$color-default-text);
|
|
122
125
|
flex: 1;
|
|
123
126
|
flex-basis: min-content;
|
|
124
|
-
@media only screen and (min-width:
|
|
127
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
125
128
|
display: block;
|
|
126
129
|
text-align: center;
|
|
127
130
|
}
|
|
@@ -130,17 +133,17 @@
|
|
|
130
133
|
|
|
131
134
|
&.active {
|
|
132
135
|
:local(.stepNumber) {
|
|
133
|
-
background-color: var(--color-primary,
|
|
136
|
+
background-color: var(--color-primary, colors.$color-primary);
|
|
134
137
|
color: #fff;
|
|
135
138
|
}
|
|
136
139
|
}
|
|
137
140
|
&.finished {
|
|
138
141
|
.wizardTopnavItemContent {
|
|
139
142
|
&:before {
|
|
140
|
-
background-color: var(--color-primary,
|
|
143
|
+
background-color: var(--color-primary, colors.$color-primary);
|
|
141
144
|
}
|
|
142
145
|
.stepNumber {
|
|
143
|
-
background-color: var(--color-primary,
|
|
146
|
+
background-color: var(--color-primary, colors.$color-primary);
|
|
144
147
|
color: #fff;
|
|
145
148
|
}
|
|
146
149
|
}
|
|
@@ -148,10 +151,10 @@
|
|
|
148
151
|
&.hasErrors {
|
|
149
152
|
.wizardTopnavItemContent {
|
|
150
153
|
&:before {
|
|
151
|
-
background-color: var(--color-warning,
|
|
154
|
+
background-color: var(--color-warning, colors.$color-warning);
|
|
152
155
|
}
|
|
153
156
|
.stepNumber {
|
|
154
|
-
background-color: var(--color-warning,
|
|
157
|
+
background-color: var(--color-warning, colors.$color-warning);
|
|
155
158
|
color: #fff;
|
|
156
159
|
}
|
|
157
160
|
}
|
|
@@ -159,10 +162,10 @@
|
|
|
159
162
|
&:last-child {
|
|
160
163
|
.wizardTopnavItemContent {
|
|
161
164
|
&:before {
|
|
162
|
-
@media only screen and (max-width:
|
|
165
|
+
@media only screen and (max-width: viewports.$screen-xs-max) {
|
|
163
166
|
height: 0;
|
|
164
167
|
}
|
|
165
|
-
@media only screen and (min-width:
|
|
168
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
166
169
|
width: 0;
|
|
167
170
|
}
|
|
168
171
|
}
|
|
@@ -9,9 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
|
|
10
10
|
var _helpers = require("../functions/helpers");
|
|
11
11
|
var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
|
|
12
|
-
function _interopRequireDefault(
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
const WizardNavigation = props => {
|
|
14
|
-
var _Object$keys, _props$ariaLabel;
|
|
15
14
|
const renderSteps = (steps, activeStepId) => {
|
|
16
15
|
const hasSteps = steps && Object.keys(steps).length;
|
|
17
16
|
return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
|
|
@@ -25,9 +24,9 @@ const WizardNavigation = props => {
|
|
|
25
24
|
});
|
|
26
25
|
}) : null;
|
|
27
26
|
};
|
|
28
|
-
const amountOfSteps = props.steps &&
|
|
29
|
-
const defaultAriaLabel =
|
|
30
|
-
const ariaLabel =
|
|
27
|
+
const amountOfSteps = props.steps && Object.keys(props.steps)?.length ? Object.keys(props.steps).length : 0;
|
|
28
|
+
const defaultAriaLabel = `I dette skjemaet er det totalt ${amountOfSteps} steg som du skal gå igjennom`;
|
|
29
|
+
const ariaLabel = props["aria-label"]?.length ? props["aria-label"] : defaultAriaLabel;
|
|
31
30
|
return _react.default.createElement("nav", {
|
|
32
31
|
"aria-label": ariaLabel,
|
|
33
32
|
className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
// Variables
|
|
2
|
+
@use "../style/abstracts/variables/viewports";
|
|
2
3
|
|
|
3
4
|
.wizardTopnavContainer {
|
|
4
5
|
.wizardTopnav {
|
|
@@ -16,7 +17,7 @@
|
|
|
16
17
|
display: flex;
|
|
17
18
|
margin: 20px;
|
|
18
19
|
flex-direction: column;
|
|
19
|
-
@media only screen and (min-width:
|
|
20
|
+
@media only screen and (min-width: viewports.$screen-sm) {
|
|
20
21
|
flex-direction: row;
|
|
21
22
|
}
|
|
22
23
|
}
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.stringifyCssColorVariables = exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.getCssVariablesFromTheme = exports.getCssSizeVariablesFromTheme = exports.getCssColorVariablesFromTheme = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.camelCaseToKebabCase = exports.addGlobalStylesheet = exports.addFocusTrapInsideElement = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
const classNameArrayToClassNameString = classNameArray => {
|
|
9
|
-
|
|
10
|
-
return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(className => className)) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
|
|
9
|
+
return classNameArray?.filter(className => className)?.join(" ") || "";
|
|
11
10
|
};
|
|
12
11
|
exports.classNameArrayToClassNameString = classNameArrayToClassNameString;
|
|
13
12
|
const camelCaseToKebabCase = string => {
|
|
@@ -15,22 +14,20 @@ const camelCaseToKebabCase = string => {
|
|
|
15
14
|
};
|
|
16
15
|
exports.camelCaseToKebabCase = camelCaseToKebabCase;
|
|
17
16
|
const getCssColorVariablesFromTheme = theme => {
|
|
18
|
-
|
|
19
|
-
return !!(theme !== null && theme !== void 0 && theme.colors) && !!((_Object$entries = Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors)) !== null && _Object$entries !== void 0 && _Object$entries.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors).reduce((acc, _ref) => {
|
|
17
|
+
return !!theme?.colors && !!Object.entries(theme?.colors)?.length && Object.entries(theme?.colors).reduce((acc, _ref) => {
|
|
20
18
|
let [key, value] = _ref;
|
|
21
|
-
if (key
|
|
22
|
-
acc[
|
|
19
|
+
if (key?.length && value?.length) {
|
|
20
|
+
acc[`--color-${camelCaseToKebabCase(key)}`] = value;
|
|
23
21
|
}
|
|
24
22
|
return acc;
|
|
25
23
|
}, {});
|
|
26
24
|
};
|
|
27
25
|
exports.getCssColorVariablesFromTheme = getCssColorVariablesFromTheme;
|
|
28
26
|
const getCssSizeVariablesFromTheme = theme => {
|
|
29
|
-
|
|
30
|
-
return !!(theme !== null && theme !== void 0 && theme.sizes) && !!((_Object$entries2 = Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes)) !== null && _Object$entries2 !== void 0 && _Object$entries2.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes).reduce((acc, _ref2) => {
|
|
27
|
+
return !!theme?.sizes && !!Object.entries(theme?.sizes)?.length && Object.entries(theme?.sizes).reduce((acc, _ref2) => {
|
|
31
28
|
let [key, value] = _ref2;
|
|
32
|
-
if (key
|
|
33
|
-
acc[
|
|
29
|
+
if (key?.length && value?.length) {
|
|
30
|
+
acc[`--size-${camelCaseToKebabCase(key)}`] = value;
|
|
34
31
|
}
|
|
35
32
|
return acc;
|
|
36
33
|
}, {});
|
|
@@ -44,17 +41,16 @@ const getCssVariablesFromTheme = theme => {
|
|
|
44
41
|
};
|
|
45
42
|
exports.getCssVariablesFromTheme = getCssVariablesFromTheme;
|
|
46
43
|
const addGlobalStylesheet = (styleElementId, styles) => {
|
|
47
|
-
var _document$getElementB;
|
|
48
44
|
const style = document.createElement("style");
|
|
49
45
|
style.setAttribute("id", styleElementId);
|
|
50
46
|
style.textContent = styles;
|
|
51
|
-
|
|
47
|
+
document.getElementById(styleElementId)?.remove();
|
|
52
48
|
document.head.appendChild(style);
|
|
53
49
|
};
|
|
54
50
|
exports.addGlobalStylesheet = addGlobalStylesheet;
|
|
55
51
|
const stringifyCssColorVariables = colorVariables => {
|
|
56
52
|
return Object.keys(colorVariables).reduce((css, key) => {
|
|
57
|
-
return
|
|
53
|
+
return `${css}${key}: ${colorVariables[key]};`;
|
|
58
54
|
}, "");
|
|
59
55
|
};
|
|
60
56
|
exports.stringifyCssColorVariables = stringifyCssColorVariables;
|
|
@@ -88,8 +84,8 @@ exports.getFocusableElementsInsideElement = getFocusableElementsInsideElement;
|
|
|
88
84
|
const addFocusTrapInsideElement = element => {
|
|
89
85
|
setFocusToElement(element);
|
|
90
86
|
const focusableElements = getFocusableElementsInsideElement(element);
|
|
91
|
-
const firstFocusableElement = focusableElements
|
|
92
|
-
const lastFocusableElement =
|
|
87
|
+
const firstFocusableElement = focusableElements?.length ? focusableElements[0] : null;
|
|
88
|
+
const lastFocusableElement = focusableElements?.length > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
|
|
93
89
|
if (firstFocusableElement) {
|
|
94
90
|
firstFocusableElement.onkeydown = event => {
|
|
95
91
|
if (event.keyCode === 9 && event.shiftKey) {
|
package/dist/functions/theme.js
CHANGED
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.getThemeLogoPadding = exports.getThemeLogo = exports.getThemeAppName = void 0;
|
|
7
7
|
const getThemeLogo = theme => {
|
|
8
|
-
return
|
|
8
|
+
return theme?.logo || null;
|
|
9
9
|
};
|
|
10
10
|
exports.getThemeLogo = getThemeLogo;
|
|
11
11
|
const getThemeLogoPadding = theme => {
|
|
12
|
-
return
|
|
12
|
+
return theme?.logoPadding || null;
|
|
13
13
|
};
|
|
14
14
|
exports.getThemeLogoPadding = getThemeLogoPadding;
|
|
15
15
|
const getThemeAppName = theme => {
|
|
16
|
-
return
|
|
16
|
+
return theme?.appName || null;
|
|
17
17
|
};
|
|
18
18
|
exports.getThemeAppName = getThemeAppName;
|
package/dist/index.js
CHANGED
|
@@ -276,4 +276,4 @@ var _ThemeProvider = _interopRequireDefault(require("./components/ThemeProvider"
|
|
|
276
276
|
var _ToggleNavigationButton = _interopRequireDefault(require("./components/ToggleNavigationButton"));
|
|
277
277
|
var _WizardNavigation = _interopRequireDefault(require("./components/WizardNavigation"));
|
|
278
278
|
var _Step = _interopRequireDefault(require("./components/WizardNavigation/Step"));
|
|
279
|
-
function _interopRequireDefault(
|
|
279
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
@use "../abstracts/variables/colors";
|
|
2
|
+
@use "../abstracts/variables/typography";
|
|
3
|
+
|
|
1
4
|
body {
|
|
2
|
-
font-family:
|
|
3
|
-
color:
|
|
5
|
+
font-family: typography.$default-font;
|
|
6
|
+
color: colors.$color-default-text;
|
|
4
7
|
font-weight: normal;
|
|
5
8
|
line-height: 1.4;
|
|
6
9
|
letter-spacing: 0.01em;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
@use "../abstracts/variables/viewports";
|
|
2
|
+
|
|
1
3
|
.main-content {
|
|
2
4
|
padding: 0 20px 20px;
|
|
3
5
|
max-width: 1280px;
|
|
4
6
|
margin: 0 auto;
|
|
5
7
|
font-size: 18px;
|
|
6
|
-
@media only screen and (min-width:
|
|
8
|
+
@media only screen and (min-width: viewports.$screen-lg){
|
|
7
9
|
padding: 0 40px;
|
|
8
10
|
}
|
|
9
11
|
}
|
package/dist/style/pdf.css
CHANGED
package/dist/style/pdf.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/stories/PDF.scss","../../src/style/abstracts/mixins/_box-sizing.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/stories/PDF.scss","../../src/style/abstracts/mixins/_box-sizing.scss"],"names":[],"mappings":"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","file":"pdf.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dibk-design",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"README.md"
|
|
9
9
|
],
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@storybook/test": "^8.
|
|
11
|
+
"@storybook/test": "^8.4.2",
|
|
12
12
|
"@testing-library/jest-dom": "^5.16.5",
|
|
13
13
|
"@testing-library/react": "^14.0.0",
|
|
14
14
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -62,24 +62,25 @@
|
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@babel/cli": "^7.18.10",
|
|
65
|
-
"@storybook/addon-a11y": "^8.
|
|
66
|
-
"@storybook/addon-actions": "^8.
|
|
67
|
-
"@storybook/addon-essentials": "^8.
|
|
68
|
-
"@storybook/addon-interactions": "^8.
|
|
69
|
-
"@storybook/addon-links": "^8.
|
|
70
|
-
"@storybook/addon-mdx-gfm": "^8.
|
|
65
|
+
"@storybook/addon-a11y": "^8.4.2",
|
|
66
|
+
"@storybook/addon-actions": "^8.4.2",
|
|
67
|
+
"@storybook/addon-essentials": "^8.4.2",
|
|
68
|
+
"@storybook/addon-interactions": "^8.4.2",
|
|
69
|
+
"@storybook/addon-links": "^8.4.2",
|
|
70
|
+
"@storybook/addon-mdx-gfm": "^8.4.2",
|
|
71
71
|
"@storybook/addons": "^7.6.17",
|
|
72
|
-
"@storybook/node-logger": "^8.
|
|
73
|
-
"@storybook/preset-create-react-app": "^8.
|
|
74
|
-
"@storybook/react": "^8.
|
|
75
|
-
"@storybook/react-webpack5": "^8.
|
|
76
|
-
"@storybook/theming": "^8.
|
|
72
|
+
"@storybook/node-logger": "^8.4.2",
|
|
73
|
+
"@storybook/preset-create-react-app": "^8.4.2",
|
|
74
|
+
"@storybook/react": "^8.4.2",
|
|
75
|
+
"@storybook/react-webpack5": "^8.4.2",
|
|
76
|
+
"@storybook/theming": "^8.4.2",
|
|
77
77
|
"babel-plugin-named-exports-order": "^0.0.2",
|
|
78
78
|
"babel-plugin-transform-remove-console": "^6.9.4",
|
|
79
79
|
"prop-types": "^15.8.1",
|
|
80
80
|
"react-router-dom": "^6.4.2",
|
|
81
|
-
"storybook": "^8.
|
|
81
|
+
"storybook": "^8.4.2",
|
|
82
82
|
"url-loader": "^4.1.1",
|
|
83
83
|
"webpack": "^5.74.0"
|
|
84
|
-
}
|
|
84
|
+
},
|
|
85
|
+
"packageManager": "yarn@4.5.1"
|
|
85
86
|
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
@import "animation";
|
|
2
|
-
@import "appearance";
|
|
3
|
-
@import "border-radius";
|
|
4
|
-
@import "box-shadow";
|
|
5
|
-
@import "box-sizing";
|
|
6
|
-
@import "calc";
|
|
7
|
-
@import "keyframes";
|
|
8
|
-
@import "opacity";
|
|
9
|
-
@import "placeholder";
|
|
10
|
-
@import "scrollbar";
|
|
11
|
-
@import "transform";
|
|
12
|
-
@import "transition";
|
package/dist/style/global.scss
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import "containers";
|