dibk-design 6.0.0 → 6.1.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.
Files changed (10) hide show
  1. package/dist/components/Button.js +1 -1
  2. package/dist/components/Dialog.js +1 -1
  3. package/dist/components/Dialog.module.scss +41 -15
  4. package/dist/components/Header.js +6 -2
  5. package/dist/components/Header.module.scss +15 -0
  6. package/dist/components/InputField.js +1 -1
  7. package/dist/components/Lead.js +31 -0
  8. package/dist/components/Lead.module.scss +11 -0
  9. package/dist/index.js +7 -0
  10. package/package.json +1 -1
package/dist/components/Button.js CHANGED
@@ -38,7 +38,7 @@ const Button = props => {
38
38
  delete buttonProps.content;
39
39
  delete buttonProps.arrow;
40
40
  delete buttonProps.noMargin;
41
- const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "default" : props.color;
41
+ const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "secondary" : props.color;
42
42
  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
43
43
  const renderReactLinkElements = childElements => {
44
44
  const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
package/dist/components/Dialog.js CHANGED
@@ -63,7 +63,7 @@ const Dialog = props => {
63
63
  }, props.closeButton ? _react.default.createElement("button", {
64
64
  "aria-label": "Lukk dialog",
65
65
  onClick: props.onClickOutside,
66
- className: _DialogModule.default.closeButton
66
+ className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.closeButton, props.noPadding && _DialogModule.default.noPadding])
67
67
  }, _react.default.createElement("img", {
68
68
  src: _xSymbol.default,
69
69
  alt: ""
package/dist/components/Dialog.module.scss CHANGED
@@ -38,14 +38,10 @@
38
38
  .dialogContainer {
39
39
  display: flex;
40
40
  flex-wrap: wrap;
41
- background-color: #fff;
41
+ overflow: auto;
42
42
  .dialogContent {
43
- &:not(.noPadding) {
44
- padding: 30px 15px;
45
- @media only screen and (min-width: $screen-sm) {
46
- padding: 60px 40px;
47
- }
48
- }
43
+ background-color: #fff;
44
+ width: 100%;
49
45
  }
50
46
  .dialogContent {
51
47
  position: relative;
@@ -56,15 +52,7 @@
56
52
  color: var(--color-primary, $color-primary);
57
53
  display: inline-block;
58
54
  position: absolute;
59
- right: 7px;
60
- top: 4px;
61
- text-decoration: underline;
62
- font-size: 19px;
63
55
  cursor: pointer;
64
- @media only screen and (min-width: $screen-sm) {
65
- right: 15px;
66
- top: 10px;
67
- }
68
56
  &:hover {
69
57
  text-decoration: none;
70
58
  }
@@ -83,6 +71,29 @@
83
71
  }
84
72
  .dialogContainer {
85
73
  animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInVertical;
74
+ max-height: 90vh;
75
+ .dialogContent {
76
+ &:not(.noPadding) {
77
+ padding: 30px 15px;
78
+ @media only screen and (min-width: $screen-sm) {
79
+ padding: 60px 40px;
80
+ }
81
+ }
82
+ }
83
+ }
84
+ .closeButton {
85
+ &:not(.noPadding) {
86
+ right: 5px;
87
+ top: 8px;
88
+ @media only screen and (min-width: $screen-sm) {
89
+ right: 10px;
90
+ top: 13px;
91
+ }
92
+ }
93
+ &.noPadding {
94
+ right: 0;
95
+ top: 0;
96
+ }
86
97
  }
87
98
  }
88
99
  &.isSidebar {
@@ -91,6 +102,21 @@
91
102
  .dialogContainer {
92
103
  height: 100%;
93
104
  width: var(--max-width, auto);
105
+ .dialogContent {
106
+ &:not(.noPadding) {
107
+ padding: 24px;
108
+ }
109
+ }
110
+ }
111
+ .closeButton {
112
+ &:not(.noPadding) {
113
+ right: 5px;
114
+ top: 8px;
115
+ }
116
+ &.noPadding {
117
+ right: 0;
118
+ top: 0;
119
+ }
94
120
  }
95
121
  &.left {
96
122
  margin: 0 auto 0 0;
package/dist/components/Header.js CHANGED
@@ -10,7 +10,7 @@ var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
10
10
  var _helpers = require("../functions/helpers");
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  const Header = props => {
13
- var _props$htmlTag, _props$content;
13
+ var _props$htmlTag, _props$label, _props$content;
14
14
  const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
15
15
  const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
16
16
  const headerClass = _HeaderModule.default.header;
@@ -18,7 +18,10 @@ const Header = props => {
18
18
  let headerElement = _react.default.createElement(htmlTag, {
19
19
  className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass]),
20
20
  id: props.id || null,
21
- htmlFor: props.htmlFor || null
21
+ htmlFor: props.htmlFor || null,
22
+ style: props !== null && props !== void 0 && (_props$label = props.label) !== null && _props$label !== void 0 && _props$label.length ? {
23
+ "--label": "\"".concat(props.label, "\"")
24
+ } : null
22
25
  }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
23
26
  return _react.default.createElement("div", {
24
27
  className: _HeaderModule.default.headerContainer
@@ -29,6 +32,7 @@ Header.propTypes = {
29
32
  content: _propTypes.default.string,
30
33
  size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
31
34
  big: _propTypes.default.bool,
35
+ label: _propTypes.default.string,
32
36
  htmlTag: _propTypes.default.string,
33
37
  htmlFor: _propTypes.default.string
34
38
  };
package/dist/components/Header.module.scss CHANGED
@@ -57,5 +57,20 @@
57
57
  line-height: 1;
58
58
  letter-spacing: 0px;
59
59
  }
60
+ &[style*="--label"] {
61
+ &::before {
62
+ content: var(--label);
63
+ display: block;
64
+ font-family: $default-font;
65
+ font-size: 12px;
66
+ font-weight: 600;
67
+ line-height: 18px;
68
+ letter-spacing: 0px;
69
+ text-transform: uppercase;
70
+ color: var(--color-heading-text, $color-heading-text);
71
+ opacity: 0.75;
72
+ margin-bottom: 0.3em;
73
+ }
74
+ }
60
75
  }
61
76
  }
package/dist/components/InputField.js CHANGED
@@ -123,7 +123,7 @@ InputField.defaultProps = {
123
123
  required: false,
124
124
  label: "",
125
125
  contentOnly: false,
126
- buttonColor: "default",
126
+ buttonColor: "primary",
127
127
  dateFormat: "d. MMMM, yyyy",
128
128
  placeholder: "",
129
129
  defaultContent: "",
package/dist/components/Lead.js ADDED
@@ -0,0 +1,31 @@
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 _LeadModule = _interopRequireDefault(require("./Lead.module.scss"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const Lead = _ref => {
12
+ let {
13
+ id,
14
+ htmlTag,
15
+ children
16
+ } = _ref;
17
+ const leadClass = _LeadModule.default.lead;
18
+ let leadElement = _react.default.createElement(htmlTag, {
19
+ className: leadClass,
20
+ id: id || null
21
+ }, children);
22
+ return leadElement;
23
+ };
24
+ Lead.propTypes = {
25
+ id: _propTypes.default.string,
26
+ htmlTag: _propTypes.default.string
27
+ };
28
+ Lead.defaultProps = {
29
+ htmlTag: "p"
30
+ };
31
+ var _default = exports.default = Lead;
package/dist/components/Lead.module.scss ADDED
@@ -0,0 +1,11 @@
1
+ @import "../style/global.scss";
2
+
3
+ .lead {
4
+ font-family: $default-font;
5
+ font-size: 18px;
6
+ font-weight: 400;
7
+ line-height: 26px;
8
+ letter-spacing: 0.01em;
9
+ margin: 0 0 24px;
10
+ color: var(--color-heading-text, $color-heading-text);
11
+ }
package/dist/index.js CHANGED
@@ -105,6 +105,12 @@ Object.defineProperty(exports, "Label", {
105
105
  return _Label.default;
106
106
  }
107
107
  });
108
+ Object.defineProperty(exports, "Lead", {
109
+ enumerable: true,
110
+ get: function () {
111
+ return _Lead.default;
112
+ }
113
+ });
108
114
  Object.defineProperty(exports, "List", {
109
115
  enumerable: true,
110
116
  get: function () {
@@ -224,6 +230,7 @@ var _Header = _interopRequireDefault(require("./components/Header"));
224
230
  var _InfoBox = _interopRequireDefault(require("./components/InfoBox"));
225
231
  var _InputField = _interopRequireDefault(require("./components/InputField"));
226
232
  var _Label = _interopRequireDefault(require("./components/Label"));
233
+ var _Lead = _interopRequireDefault(require("./components/Lead"));
227
234
  var _List = _interopRequireDefault(require("./components/List"));
228
235
  var _ListItem = _interopRequireDefault(require("./components/ListItem"));
229
236
  var _LoadingAnimation = _interopRequireDefault(require("./components/LoadingAnimation"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "6.0.0",
3
+ "version": "6.1.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "files": [