dibk-design 2.2.0 → 2.4.0

package/dist/assets/svg/asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32.275" height="30.469" focusable="false"><path fill="#9d2024" d="m0 14.355 2.246-6.933c5.176 1.823 8.936 3.402 11.28 4.736-.62-5.892-.945-9.944-.977-12.158h7.08c-.098 3.223-.472 7.26-1.123 12.11 3.353-1.693 7.194-3.256 11.523-4.688l2.246 6.933c-4.134 1.368-8.186 2.28-12.158 2.735 1.986 1.725 4.785 4.801 8.399 9.228l-5.86 4.15c-1.888-2.57-4.118-6.07-6.69-10.497-2.408 4.59-4.524 8.089-6.347 10.498l-5.762-4.15c3.776-4.656 6.478-7.732 8.106-9.23-4.2-.813-8.187-1.724-11.963-2.734"/></svg>

package/dist/components/CheckBoxInput.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CheckBoxInput = function CheckBoxInput(props) {
@@ -35,9 +36,11 @@ var CheckBoxInput = function CheckBoxInput(props) {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _CheckBoxInputModule.default.requiredSymbol
-  }, "*")));
+  })));
 };
 CheckBoxInput.propTypes = {
   checked: _propTypes.default.bool,

package/dist/components/CheckBoxInput.module.scss

@@ -6,9 +6,11 @@
     border: 1px solid transparent;
 
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     &:not(.contentOnly):not(.disabled) {

package/dist/components/CheckBoxList.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CheckBoxList = function CheckBoxList(props) {
@@ -24,9 +25,11 @@ var CheckBoxList = function CheckBoxList(props) {
   };
   return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("span", {
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _CheckBoxListModule.default.requiredSymbol
-  }, "*")) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
 };
 CheckBoxList.propTypes = {
   legend: _propTypes.default.string,

package/dist/components/CheckBoxList.module.scss

@@ -14,9 +14,11 @@ fieldset.checkBoxList {
         font-family: $default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
-            color: $color-error;
-            font-size: 0.8em;
+            width: 1em;
+            height: 1em;
+            font-size: 0.4em;
             vertical-align: top;
+            margin-top: 2px;
         }
     }
 }

package/dist/components/DragAndDropFileInput.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("./Button"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _Label = _interopRequireDefault(require("./Label"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -85,9 +86,11 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
     className: _DragAndDropFileInputModule.default.dragAndDropFileInput
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _DragAndDropFileInputModule.default.requiredSymbol
-  }, "*")), _react.default.createElement("div", null, props.children), !props.contentOnly ? _react.default.createElement("div", {
+  })), _react.default.createElement("div", null, props.children), !props.contentOnly ? _react.default.createElement("div", {
     ref: containerElementRef,
     className: "".concat(_DragAndDropFileInputModule.default.dragAndDropContainer, " ").concat(highlight ? _DragAndDropFileInputModule.default.highlighted : "")
   }, props.selectedFileName ? _react.default.createElement("div", null, _react.default.createElement("span", null, _react.default.createElement("b", null, "Valgt fil:"), " ", props.selectedFileName)) : _react.default.createElement("div", null, "Slipp fil her"), _react.default.createElement("input", _extends({}, inputElementProps, {

package/dist/components/DragAndDropFileInput.module.scss

@@ -2,9 +2,11 @@
 
 .dragAndDropFileInput {
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     .dragAndDropContainer {

package/dist/components/ErrorMessage.js

@@ -25,7 +25,7 @@ var ErrorMessage = function ErrorMessage(props) {
     };
   };
   return _react.default.createElement("span", _extends({
-    role: "alert"
+    "aria-live": "polite"
   }, getErrorElementProps()), props.content ? props.content : "");
 };
 ErrorMessage.propTypes = {

package/dist/components/Header.js

@@ -16,13 +16,15 @@ var Header = function Header(props) {
   var headerClass = _HeaderModule.default.header;
   var headerSizeClass = _HeaderModule.default["size-".concat(props.size)];
   var headerElement = _react.default.createElement(htmlTag, {
-    className: "".concat(headerClass, " ").concat(headerSizeClass, " ").concat(bigClass, " ").concat(themeClass)
+    className: "".concat(headerClass, " ").concat(headerSizeClass, " ").concat(bigClass, " ").concat(themeClass),
+    id: props.id || null
   }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
   return _react.default.createElement("div", {
     className: _HeaderModule.default.headerContainer
   }, " ", headerElement, " ");
 };
 Header.propTypes = {
+  id: _propTypes.default.string,
   content: _propTypes.default.string,
   size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
   big: _propTypes.default.bool,

package/dist/components/InputField.js

@@ -11,6 +11,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -69,9 +70,11 @@ var InputField = function InputField(props) {
     className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[props.type])
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _InputFieldModule.default.requiredSymbol
-  }, "*"), props.type === "file" ? _react.default.createElement("div", {
+  }), props.type === "file" ? _react.default.createElement("div", {
     className: _InputFieldModule.default.fileInputContainer
   }, _react.default.createElement("span", {
     className: _InputFieldModule.default.input

package/dist/components/InputField.module.scss

@@ -9,9 +9,11 @@
         display: block;
     }
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     input,
     &.file span.input {

package/dist/components/RadioButtonInput.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var RadioButtonInput = function RadioButtonInput(props) {
@@ -34,9 +35,11 @@ var RadioButtonInput = function RadioButtonInput(props) {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _RadioButtonInputModule.default.requiredSymbol
-  }, "*")));
+  })));
 };
 RadioButtonInput.propTypes = {
   checked: _propTypes.default.bool,

package/dist/components/RadioButtonInput.module.scss

@@ -6,9 +6,11 @@
     border: 1px solid transparent;
 
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     &:not(.contentOnly):not(.disabled) {

package/dist/components/RadioButtonList.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _RadioButtonListModule = _interopRequireDefault(require("./RadioButtonList.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var RadioButtonList = function RadioButtonList(props) {
@@ -24,9 +25,11 @@ var RadioButtonList = function RadioButtonList(props) {
   };
   return _react.default.createElement("fieldset", {
     className: _RadioButtonListModule.default.radioButtonList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("span", {
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _RadioButtonListModule.default.requiredSymbol
-  }, "*")) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
 };
 RadioButtonList.propTypes = {
   legend: _propTypes.default.string,

package/dist/components/RadioButtonList.module.scss

@@ -14,9 +14,11 @@ fieldset.radioButtonList {
         font-family: $default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
-            color: $color-error;
-            font-size: 0.8em;
+            width: 1em;
+            height: 1em;
+            font-size: 0.4em;
             vertical-align: top;
+            margin-top: 2px;
         }
     }
 }

package/dist/components/Select.js

@@ -10,6 +10,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -98,9 +99,11 @@ var Select = function Select(props) {
       className: _SelectModule.default.select
     }, _react.default.createElement(_Label.default, {
       htmlFor: props.id
-    }, props.label, props.required && _react.default.createElement("span", {
+    }, props.label, props.required && _react.default.createElement("img", {
+      src: _asterisk.default,
+      alt: "",
       className: _SelectModule.default.requiredSymbol
-    }, "*")), _react.default.createElement("div", {
+    })), _react.default.createElement("div", {
       className: _SelectModule.default.selectContainer,
       style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
         maxWidth: props.width

package/dist/components/Select.module.scss

@@ -2,9 +2,11 @@
 
 .select {
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     .selectContainer {
         position: relative;

package/dist/components/Textarea.js

@@ -10,6 +10,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -57,9 +58,11 @@ var Textarea = function Textarea(props) {
     className: _TextareaModule.default.textarea
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _TextareaModule.default.requiredSymbol
-  }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+  })), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
     id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme

package/dist/components/Textarea.module.scss

@@ -5,9 +5,11 @@
         display: block;
     }
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     textarea {
         @include appearance(none);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dibk-design",
-    "version": "2.2.0",
+    "version": "2.4.0",
     "private": false,
     "main": "dist/index.js",
     "module": "dist/index.js",