dibk-design 2.7.1 → 3.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.
Files changed (5) hide show
  1. package/dist/components/NavigationBar.js +8 -5
  2. package/dist/components/NavigationBar.module.scss +0 -21
  3. package/dist/components/Select.js +8 -3
  4. package/dist/components/Select.module.scss +11 -2
  5. package/package.json +79 -79
package/dist/components/NavigationBar.js CHANGED
@@ -107,12 +107,17 @@ var NavigationBar = function NavigationBar(props) {
107
107
  backgroundColor: (0, _theme.getThemeNavigationBarTextColor)(props.theme)
108
108
  };
109
109
  var hasListItems = !!((_props$primaryListIte = props.primaryListItems) !== null && _props$primaryListIte !== void 0 && _props$primaryListIte.length) || !!((_props$secondaryListI = props.secondaryListItems) !== null && _props$secondaryListI !== void 0 && _props$secondaryListI.length);
110
- return _react.default.createElement("header", null, _react.default.createElement("div", {
110
+ return _react.default.createElement("div", {
111
111
  className: _NavigationBarModule.default.isPresent
112
112
  }, _react.default.createElement("div", {
113
113
  className: _NavigationBarModule.default.navigationBar,
114
114
  style: navigationBarThemeStyle
115
- }, _react.default.createElement("div", {
115
+ }, _react.default.createElement("a", {
116
+ id: "main-content-link",
117
+ class: "main-content-link"
118
+ }, _react.default.createElement("span", {
119
+ id: "main-content-link-text"
120
+ }, "Hopp til hovedinnhold")), _react.default.createElement("div", {
116
121
  className: _NavigationBarModule.default.logoContainer
117
122
  }, renderLogo(props.logoLink)), !!props.children && _react.default.createElement("div", {
118
123
  className: _NavigationBarModule.default.childElements
@@ -141,9 +146,7 @@ var NavigationBar = function NavigationBar(props) {
141
146
  id: "main-menu-dropdown",
142
147
  className: _NavigationBarModule.default.dropdown,
143
148
  style: navigationBarThemeStyle
144
- }, renderPrimaryList(), renderSecondaryList())), _react.default.createElement("div", {
145
- className: "".concat(_NavigationBarModule.default.dropdownOverlay, " ").concat(active ? _NavigationBarModule.default.active : "")
146
- }))));
149
+ }, renderPrimaryList(), renderSecondaryList()))));
147
150
  };
148
151
  NavigationBar.propTypes = {
149
152
  primaryListItems: _propTypes.default.array,
package/dist/components/NavigationBar.module.scss CHANGED
@@ -38,27 +38,6 @@
38
38
  flex: 1;
39
39
  }
40
40
 
41
- .dropdownOverlay {
42
- @media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
43
- @include transition(all 0.1s ease-out);
44
- content: "";
45
- position: absolute;
46
- top: 73px;
47
- right: 0;
48
- bottom: 0;
49
- left: 0;
50
- z-index: 1;
51
- visibility: hidden;
52
- opacity: 0;
53
- background: transparent;
54
- &.active {
55
- opacity: 1;
56
- background: rgba(0, 0, 0, 0.5);
57
- visibility: visible;
58
- }
59
- }
60
- }
61
-
62
41
  .menuToggle {
63
42
  @include appearance(none);
64
43
  @include transition(background-color 300ms ease-out);
package/dist/components/Select.js CHANGED
@@ -10,9 +10,11 @@ var _Label = _interopRequireDefault(require("./Label"));
10
10
  var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
11
11
  var _theme = require("../functions/theme");
12
12
  var _generators = require("../functions/generators");
13
+ var _helpers = require("../functions/helpers");
13
14
  var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
14
15
  var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
15
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
16
18
  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; }
17
19
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
18
20
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -89,12 +91,13 @@ var Select = function Select(props) {
89
91
  var styleRules = _objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
90
92
  maxWidth: props.width
91
93
  });
94
+ var className = (0, _helpers.classNameArrayToClassNameString)([props.hasErrors && _SelectModule.default.hasErrors, props.multiple && _SelectModule.default.multiple]);
92
95
  var selectElementProps = (_selectElementProps = {
93
96
  name: props.name,
94
97
  multiple: props.multiple,
95
98
  required: props.required,
96
99
  disabled: props.disabled
97
- }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_selectElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
100
+ }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", className), _defineProperty(_selectElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_selectElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
98
101
  return _react.default.createElement("div", {
99
102
  className: _SelectModule.default.select
100
103
  }, _react.default.createElement(_Label.default, {
@@ -108,10 +111,12 @@ var Select = function Select(props) {
108
111
  style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
109
112
  maxWidth: props.width
110
113
  })
111
- }, _react.default.createElement("span", {
114
+ }, !props.multiple && _react.default.createElement("span", {
112
115
  className: _SelectModule.default.selectListArrow,
113
116
  style: getThemeArrowStyle(props.theme)
114
- }), _react.default.createElement("select", selectElementProps, renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
117
+ }), _react.default.createElement("select", _extends({}, selectElementProps, {
118
+ onChange: function onChange(e) {}
119
+ }), renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
115
120
  id: getErrorElementId(),
116
121
  content: props.errorMessage,
117
122
  theme: props.theme
package/dist/components/Select.module.scss CHANGED
@@ -44,7 +44,6 @@
44
44
  @include transition(border-color 0.15s linear);
45
45
  @include appearance(none);
46
46
  @include box-shadow(none);
47
- height: 47px;
48
47
  color: rgba(0, 0, 0, 0.75);
49
48
  width: 100%;
50
49
  font-family: inherit;
@@ -57,7 +56,6 @@
57
56
  cursor: pointer;
58
57
  @media only screen and (min-width: $screen-sm) {
59
58
  font-size: 19px;
60
- height: 56px;
61
59
  }
62
60
 
63
61
  &:hover {
@@ -74,6 +72,17 @@
74
72
  background-color: #ddd;
75
73
  cursor: default;
76
74
  }
75
+ &:not(.multiple) {
76
+ height: 47px;
77
+ padding: 10px 40px 10px 10px;
78
+ @media only screen and (min-width: $screen-sm) {
79
+ height: 56px;
80
+ }
81
+ }
82
+ &.multiple {
83
+ max-height: 100px;
84
+ padding: 10px;
85
+ }
77
86
 
78
87
  &.hasErrors {
79
88
  border-color: $color-error;
package/package.json CHANGED
@@ -1,83 +1,83 @@
1
1
  {
2
- "name": "dibk-design",
3
- "version": "2.7.1",
4
- "private": false,
5
- "main": "dist/index.js",
6
- "module": "dist/index.js",
7
- "files": [
8
- "dist",
9
- "README.md"
2
+ "name": "dibk-design",
3
+ "version": "3.0.0",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.js",
6
+ "files": [
7
+ "dist",
8
+ "README.md"
9
+ ],
10
+ "dependencies": {
11
+ "@testing-library/jest-dom": "^5.16.5",
12
+ "@testing-library/react": "^14.0.0",
13
+ "@testing-library/user-event": "^14.4.3",
14
+ "react": "^18.2.0",
15
+ "react-dom": "^18.2.0",
16
+ "react-scripts": "5.0.1",
17
+ "sass": "^1.55.0",
18
+ "web-vitals": "^3.0.3"
19
+ },
20
+ "scripts": {
21
+ "start": "react-scripts start",
22
+ "build-components": "NODE_ENV=production babel src/stories --ignore src/**/*.stories.jsx --out-dir dist/components --copy-files --no-copy-ignored",
23
+ "build-functions": "NODE_ENV=production babel src/functions --out-dir dist/functions --copy-files --no-copy-ignored",
24
+ "build-index": "NODE_ENV=production babel src/index.js --out-dir dist --copy-files --no-copy-ignored",
25
+ "build-style": "NODE_ENV=production babel src/style --out-dir dist/style --copy-files --no-copy-ignored",
26
+ "build-assets": "NODE_ENV=production babel src/assets --out-dir dist/assets --copy-files --no-copy-ignored",
27
+ "build": "rm -rf dist && yarn build-components && yarn build-functions && yarn build-index && yarn build-style && yarn build-assets",
28
+ "eject": "react-scripts eject",
29
+ "storybook": "storybook dev -p 6006 -s public",
30
+ "build-storybook": "storybook build -s public -o docs"
31
+ },
32
+ "eslintConfig": {
33
+ "extends": [
34
+ "react-app",
35
+ "react-app/jest"
10
36
  ],
11
- "dependencies": {
12
- "@testing-library/jest-dom": "^5.16.5",
13
- "@testing-library/react": "^14.0.0",
14
- "@testing-library/user-event": "^14.4.3",
15
- "react": "^18.2.0",
16
- "react-dom": "^18.2.0",
17
- "react-scripts": "5.0.1",
18
- "sass": "^1.55.0",
19
- "web-vitals": "^3.0.3"
20
- },
21
- "scripts": {
22
- "start": "react-scripts start",
23
- "build-components": "NODE_ENV=production babel src/stories --ignore src/**/*.stories.jsx --out-dir dist/components --copy-files --no-copy-ignored",
24
- "build-functions": "NODE_ENV=production babel src/functions --out-dir dist/functions --copy-files --no-copy-ignored",
25
- "build-index": "NODE_ENV=production babel src/index.js --out-dir dist --copy-files --no-copy-ignored",
26
- "build-style": "NODE_ENV=production babel src/style --out-dir dist/style --copy-files --no-copy-ignored",
27
- "build-assets": "NODE_ENV=production babel src/assets --out-dir dist/assets --copy-files --no-copy-ignored",
28
- "build": "rm -rf dist && yarn build-components && yarn build-functions && yarn build-index && yarn build-style && yarn build-assets",
29
- "eject": "react-scripts eject",
30
- "storybook": "start-storybook -p 6006 -s public",
31
- "build-storybook": "build-storybook -s public -o docs"
32
- },
33
- "eslintConfig": {
34
- "extends": [
35
- "react-app",
36
- "react-app/jest"
37
+ "overrides": [
38
+ {
39
+ "files": [
40
+ "**/*.stories.*"
37
41
  ],
38
- "overrides": [
39
- {
40
- "files": [
41
- "**/*.stories.*"
42
- ],
43
- "rules": {
44
- "import/no-anonymous-default-export": "off"
45
- }
46
- }
47
- ]
48
- },
49
- "browserslist": {
50
- "production": [
51
- ">0.2%",
52
- "not dead",
53
- "not op_mini all"
54
- ],
55
- "development": [
56
- "last 1 chrome version",
57
- "last 1 firefox version",
58
- "last 1 safari version"
59
- ]
60
- },
61
- "devDependencies": {
62
- "@babel/cli": "^7.18.10",
63
- "@storybook/addon-a11y": "^6.5.12",
64
- "@storybook/addon-actions": "^6.5.12",
65
- "@storybook/addon-essentials": "^6.5.12",
66
- "@storybook/addon-interactions": "^6.5.12",
67
- "@storybook/addon-links": "^6.5.12",
68
- "@storybook/addons": "^6.5.12",
69
- "@storybook/builder-webpack5": "^6.5.12",
70
- "@storybook/manager-webpack5": "^6.5.12",
71
- "@storybook/node-logger": "^6.5.12",
72
- "@storybook/preset-create-react-app": "^4.1.2",
73
- "@storybook/react": "^6.5.12",
74
- "@storybook/testing-library": "^0.0.13",
75
- "@storybook/theming": "^6.5.12",
76
- "babel-plugin-named-exports-order": "^0.0.2",
77
- "babel-plugin-transform-remove-console": "^6.9.4",
78
- "prop-types": "^15.8.1",
79
- "react-router-dom": "^6.4.2",
80
- "url-loader": "^4.1.1",
81
- "webpack": "^5.74.0"
82
- }
42
+ "rules": {
43
+ "import/no-anonymous-default-export": "off"
44
+ }
45
+ }
46
+ ]
47
+ },
48
+ "browserslist": {
49
+ "production": [
50
+ ">0.2%",
51
+ "not dead",
52
+ "not op_mini all"
53
+ ],
54
+ "development": [
55
+ "last 1 chrome version",
56
+ "last 1 firefox version",
57
+ "last 1 safari version"
58
+ ]
59
+ },
60
+ "devDependencies": {
61
+ "@babel/cli": "^7.18.10",
62
+ "@storybook/addon-a11y": "^7.0.4",
63
+ "@storybook/addon-actions": "^7.0.4",
64
+ "@storybook/addon-essentials": "^7.0.4",
65
+ "@storybook/addon-interactions": "^7.0.4",
66
+ "@storybook/addon-links": "^7.0.4",
67
+ "@storybook/addon-mdx-gfm": "^7.0.4",
68
+ "@storybook/addons": "^7.0.4",
69
+ "@storybook/node-logger": "^7.0.4",
70
+ "@storybook/preset-create-react-app": "^7.0.4",
71
+ "@storybook/react": "^7.0.4",
72
+ "@storybook/react-webpack5": "^7.0.4",
73
+ "@storybook/testing-library": "^0.1.0",
74
+ "@storybook/theming": "^7.0.4",
75
+ "babel-plugin-named-exports-order": "^0.0.2",
76
+ "babel-plugin-transform-remove-console": "^6.9.4",
77
+ "prop-types": "^15.8.1",
78
+ "react-router-dom": "^6.4.2",
79
+ "storybook": "^7.0.4",
80
+ "url-loader": "^4.1.1",
81
+ "webpack": "^5.74.0"
82
+ }
83
83
  }