dibk-design 0.4.49 → 0.4.52

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 (8) hide show
  1. package/dist/components/Button.js +8 -2
  2. package/dist/components/Button.md +1 -0
  3. package/dist/components/Button.module.scss +8 -1
  4. package/dist/components/CheckBoxInput.module.scss +6 -0
  5. package/dist/components/RadioButtonInput.module.scss +6 -0
  6. package/dist/components/WizardNavigation/Step.module.scss +48 -11
  7. package/dist/components/WizardNavigation.module.scss +7 -1
  8. package/package.json +1 -1
package/dist/components/Button.js CHANGED
@@ -83,13 +83,18 @@ var Button = /*#__PURE__*/function (_React$Component) {
83
83
  }, {
84
84
  key: "render",
85
85
  value: function render() {
86
+ var _this$props$href;
87
+
86
88
  var buttonProps = _objectSpread({}, this.props);
87
89
 
88
90
  delete buttonProps.noHover;
89
91
  delete buttonProps.rounded;
90
92
  var themeStyle = this.props.theme ? this.getThemeStyle(this.props.theme, this.props.color) : null;
91
93
  var className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[this.props.color], " ").concat(_ButtonModule.default[this.props.size], " ").concat(this.getArrowClass(), " ").concat(this.props.theme ? _ButtonModule.default.hasTheme : '', " ").concat(this.props.noHover ? _ButtonModule.default.noHover : '', " ").concat(this.props.rounded ? _ButtonModule.default.rounded : '');
92
- return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
94
+ return (_this$props$href = this.props.href) !== null && _this$props$href !== void 0 && _this$props$href.length ? /*#__PURE__*/_react.default.createElement("a", _extends({}, buttonProps, {
95
+ className: className,
96
+ style: themeStyle
97
+ }), this.props.content) : /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
93
98
  className: className,
94
99
  style: themeStyle
95
100
  }), this.props.content);
@@ -108,7 +113,8 @@ Button.propTypes = {
108
113
  theme: _propTypes.default.object,
109
114
  disabled: _propTypes.default.bool,
110
115
  noHover: _propTypes.default.bool,
111
- rounded: _propTypes.default.bool
116
+ rounded: _propTypes.default.bool,
117
+ href: _propTypes.default.string
112
118
  };
113
119
  Button.defaultProps = {
114
120
  content: 'button',
package/dist/components/Button.md CHANGED
@@ -5,6 +5,7 @@ Regular buttons example:
5
5
  <Button content="Click me" color="primary" />
6
6
  <Button content="Click me" color="default" disabled />
7
7
  <Button content="Click me" color="primary" disabled />
8
+ <Button content="Link button" color="primary" href="#" />
8
9
  ```
9
10
 
10
11
  Rounded buttons example:
package/dist/components/Button.module.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  font-family: "Altis", sans-serif;
39
39
  border-style: solid;
40
40
  border-width: 1px;
41
- $border-color: $color-primary;
41
+ border-color: $color-primary;
42
42
  cursor: pointer;
43
43
  line-height: 1;
44
44
  position: relative;
@@ -64,6 +64,13 @@
64
64
  }
65
65
  }
66
66
 
67
+ &:focus-visible {
68
+ outline-color: #005fcc;
69
+ outline-style: auto;
70
+ outline-width: 2px;
71
+ outline-offset: 0px;
72
+ }
73
+
67
74
  &:local(.regular) {
68
75
  padding: 14px 24px;
69
76
  @media only screen and (min-width: $screen-sm) {
package/dist/components/CheckBoxInput.module.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  :local(.checkBoxInput) {
4
4
  display: flex;
5
5
  margin-right: 1em;
6
+ border: 1px solid transparent;
6
7
 
7
8
  &:not(:local(.contentOnly)):not(:local(.disabled)) {
8
9
  cursor: pointer;
@@ -17,6 +18,11 @@
17
18
  }
18
19
  }
19
20
 
21
+ &:focus-within{
22
+ border-color: #072938;
23
+ outline-color: #54acb8;
24
+ }
25
+
20
26
  input[type="checkbox"] {
21
27
  opacity: 0;
22
28
  position: absolute;
package/dist/components/RadioButtonInput.module.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  display: flex;
5
5
  cursor: pointer;
6
6
  margin-right: 1em;
7
+ border: 1px solid transparent;
7
8
 
8
9
  &:not(:local(.contentOnly)):not(:local(.disabled)) {
9
10
  cursor: pointer;
@@ -19,6 +20,11 @@
19
20
  }
20
21
  }
21
22
 
23
+ &:focus-within{
24
+ border-color: #072938;
25
+ outline-color: #54acb8;
26
+ }
27
+
22
28
  input[type="radio"] {
23
29
  opacity: 0;
24
30
  position: absolute;
package/dist/components/WizardNavigation/Step.module.scss CHANGED
@@ -8,15 +8,37 @@
8
8
  flex: 1;
9
9
  text-decoration: none;
10
10
  :local(.wizardTopnavItemContent) {
11
+ display: flex;
12
+ height: 60px;
13
+ align-items: center;
14
+ @media only screen and (min-width: $screen-sm) {
15
+ display: block;
16
+ height: auto;
17
+ }
11
18
  &:before {
12
- display: inline-block;
13
- content: " ";
14
- height: 15px;
15
- background-color: #e2e1e0;
16
- width: 100%;
17
- left: 50%;
18
- position: relative;
19
- margin-bottom: -30px;
19
+ @media only screen and (max-width: $screen-xs-max) {
20
+ display: block;
21
+ content: " ";
22
+ height: 36px;
23
+ background-color: #e2e1e0;
24
+ left: 10px;
25
+ top: 33px;
26
+ position: relative;
27
+ margin-top: -3px;
28
+ margin-bottom: -3px;
29
+ width: 15px;
30
+ margin-right: -15px;
31
+ }
32
+ @media only screen and (min-width: $screen-sm) {
33
+ display: inline-block;
34
+ content: " ";
35
+ height: 15px;
36
+ background-color: #e2e1e0;
37
+ width: 100%;
38
+ left: 50%;
39
+ position: relative;
40
+ margin-bottom: -30px;
41
+ }
20
42
  }
21
43
  :local(.stepNumber) {
22
44
  border-radius: 50%;
@@ -26,15 +48,25 @@
26
48
  text-align: center;
27
49
  background-color: #e2e1e0;
28
50
  color: $color-default-text;
29
- margin: auto;
30
51
  position: relative;
31
52
  font-size: 20px;
32
53
  line-height: 1.75em;
54
+ z-index: 1;
55
+ margin-right: 8px;
56
+ @media only screen and (min-width: $screen-sm) {
57
+ margin: auto;
58
+ }
33
59
  }
34
60
  :local(.stepName) {
35
61
  display: block;
36
- text-align: center;
62
+ text-align: left;
37
63
  color: $color-default-text;
64
+ flex: 1;
65
+ flex-basis: min-content;
66
+ @media only screen and (min-width: $screen-sm) {
67
+ display: block;
68
+ text-align: center;
69
+ }
38
70
  }
39
71
  }
40
72
  &:local(.active) {
@@ -68,7 +100,12 @@
68
100
  &:last-child {
69
101
  :local(.wizardTopnavItemContent) {
70
102
  &:before {
71
- width: 0;
103
+ @media only screen and (max-width: $screen-xs-max) {
104
+ height: 0;
105
+ }
106
+ @media only screen and (min-width: $screen-sm) {
107
+ width: 0;
108
+ }
72
109
  }
73
110
  }
74
111
  }
package/dist/components/WizardNavigation.module.scss CHANGED
@@ -1,4 +1,10 @@
1
+ @import "../style/global.scss";
2
+
1
3
  :local(.wizardTopnav) {
2
4
  display: flex;
3
5
  margin: 20px;
4
- }
6
+ flex-direction: column;
7
+ @media only screen and (min-width: $screen-sm) {
8
+ flex-direction: row;
9
+ }
10
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "0.4.49",
3
+ "version": "0.4.52",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",