@helsenorge/designsystem-react 1.0.0-beta74 → 1.0.0-beta78

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 (72) hide show
  1. package/Button-f5b8067b.js +2 -0
  2. package/Button-f5b8067b.js.map +1 -0
  3. package/Loader-084dd998.js +2 -0
  4. package/Loader-084dd998.js.map +1 -0
  5. package/Modal-a9124cca.js +2 -0
  6. package/Modal-a9124cca.js.map +1 -0
  7. package/color-acb834c6.js +2 -0
  8. package/color-acb834c6.js.map +1 -0
  9. package/components/AnchorLink/index.js +1 -1
  10. package/components/Avatar/index.js +1 -1
  11. package/components/Button/index.js +1 -1
  12. package/components/ButtonWithModal/componentdata.json +22 -0
  13. package/components/ButtonWithModal/index.js +1 -1
  14. package/components/ExpanderList/ExpanderList.d.ts.map +1 -1
  15. package/components/ExpanderList/index.js +1 -1
  16. package/components/ExpanderList/styles.module.scss +35 -19
  17. package/components/ExpanderList/styles.module.scss.d.ts +2 -3
  18. package/components/Icons/Icon.d.ts.map +1 -1
  19. package/components/Icons/Icon.js +1 -1
  20. package/components/Icons/index.d.ts +1 -0
  21. package/components/Icons/index.d.ts.map +1 -1
  22. package/components/Icons/index.js +1 -1
  23. package/components/LinkList/LinkList.d.ts +4 -3
  24. package/components/LinkList/LinkList.d.ts.map +1 -1
  25. package/components/LinkList/componentdata.json +19 -4
  26. package/components/LinkList/index.js +1 -1
  27. package/components/LinkList/styles.module.scss +46 -16
  28. package/components/LinkList/styles.module.scss.d.ts +3 -2
  29. package/components/Loader/Loader.d.ts +8 -0
  30. package/components/Loader/Loader.d.ts.map +1 -1
  31. package/components/Loader/componentdata.json +76 -0
  32. package/components/Loader/index.js +1 -1
  33. package/components/Loader/styles.module.scss +24 -0
  34. package/components/Loader/styles.module.scss.d.ts +3 -0
  35. package/components/Logo/index.js +1 -1
  36. package/components/Modal/Modal.d.ts +4 -1
  37. package/components/Modal/Modal.d.ts.map +1 -1
  38. package/components/Modal/componentdata.json +23 -3
  39. package/components/Modal/index.js +1 -1
  40. package/components/Modal/styles.module.scss +102 -66
  41. package/components/Modal/styles.module.scss.d.ts +19 -11
  42. package/components/NotificationPanel/index.js +1 -1
  43. package/components/Tile/Tile.d.ts.map +1 -1
  44. package/components/Tile/index.js +1 -1
  45. package/constants-d1f48e8e.js +2 -0
  46. package/constants-d1f48e8e.js.map +1 -0
  47. package/grid-11a70eb7.js +2 -0
  48. package/grid-11a70eb7.js.map +1 -0
  49. package/hooks/useBreakpoint.d.ts +9 -0
  50. package/hooks/useBreakpoint.d.ts.map +1 -0
  51. package/index-19b48c51.js +2 -0
  52. package/index-19b48c51.js.map +1 -0
  53. package/index.js +1 -1
  54. package/package.json +4 -2
  55. package/scss/_font-settings.scss +8 -4
  56. package/scss/_palette.scss +2 -0
  57. package/useBreakpoint-a8fa8a61.js +2 -0
  58. package/useBreakpoint-a8fa8a61.js.map +1 -0
  59. package/useWindowSize-c22d7634.js +2 -0
  60. package/useWindowSize-c22d7634.js.map +1 -0
  61. package/Button-f1380b34.js +0 -2
  62. package/Button-f1380b34.js.map +0 -1
  63. package/Icon-43100735.js +0 -2
  64. package/Icon-43100735.js.map +0 -1
  65. package/Loader-ad8bcd78.js +0 -2
  66. package/Loader-ad8bcd78.js.map +0 -1
  67. package/Modal-42bec9e1.js +0 -2
  68. package/Modal-42bec9e1.js.map +0 -1
  69. package/color-d7bbcfcc.js +0 -2
  70. package/color-d7bbcfcc.js.map +0 -1
  71. package/index-cf9fa51d.js +0 -2
  72. package/index-cf9fa51d.js.map +0 -1
@@ -123,6 +123,82 @@
123
123
  "type": {
124
124
  "name": "string"
125
125
  }
126
+ },
127
+ "center": {
128
+ "defaultValue": null,
129
+ "description": "Centers the loader in a container",
130
+ "name": "center",
131
+ "parent": {
132
+ "fileName": "src/components/Loader/Loader.tsx",
133
+ "name": "LoaderProps"
134
+ },
135
+ "declarations": [
136
+ {
137
+ "fileName": "src/components/Loader/Loader.tsx",
138
+ "name": "LoaderProps"
139
+ }
140
+ ],
141
+ "required": false,
142
+ "type": {
143
+ "name": "boolean"
144
+ }
145
+ },
146
+ "overlay": {
147
+ "defaultValue": null,
148
+ "description": "Loader is displayed with grey background covering the entire screen",
149
+ "name": "overlay",
150
+ "parent": {
151
+ "fileName": "src/components/Loader/Loader.tsx",
152
+ "name": "LoaderProps"
153
+ },
154
+ "declarations": [
155
+ {
156
+ "fileName": "src/components/Loader/Loader.tsx",
157
+ "name": "LoaderProps"
158
+ }
159
+ ],
160
+ "required": false,
161
+ "type": {
162
+ "name": "boolean"
163
+ }
164
+ },
165
+ "ariaLabelledById": {
166
+ "defaultValue": null,
167
+ "description": "individual id for loading icon (aria-labelledby).",
168
+ "name": "ariaLabelledById",
169
+ "parent": {
170
+ "fileName": "src/components/Loader/Loader.tsx",
171
+ "name": "LoaderProps"
172
+ },
173
+ "declarations": [
174
+ {
175
+ "fileName": "src/components/Loader/Loader.tsx",
176
+ "name": "LoaderProps"
177
+ }
178
+ ],
179
+ "required": false,
180
+ "type": {
181
+ "name": "string"
182
+ }
183
+ },
184
+ "ariaLabel": {
185
+ "defaultValue": null,
186
+ "description": "individual id for loading icon (aria-labelledby).",
187
+ "name": "ariaLabel",
188
+ "parent": {
189
+ "fileName": "src/components/Loader/Loader.tsx",
190
+ "name": "LoaderProps"
191
+ },
192
+ "declarations": [
193
+ {
194
+ "fileName": "src/components/Loader/Loader.tsx",
195
+ "name": "LoaderProps"
196
+ }
197
+ ],
198
+ "required": false,
199
+ "type": {
200
+ "name": "string"
201
+ }
126
202
  }
127
203
  }
128
204
  }
@@ -1,2 +1,2 @@
1
- import{L as e}from"../../Loader-ad8bcd78.js";export{L as default}from"../../Loader-ad8bcd78.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";
1
+ import{L as r}from"../../Loader-084dd998.js";export{L as default}from"../../Loader-084dd998.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"crypto";
2
2
  //# sourceMappingURL=index.js.map
@@ -1,4 +1,5 @@
1
1
  @import '../../scss/_palette.scss';
2
+ @import 'bootstrap/scss/mixins/_screen-reader.scss';
2
3
 
3
4
  @mixin keyframes($name) {
4
5
  @keyframes #{$name} {
@@ -35,6 +36,25 @@
35
36
  @include animate($name, translate, 0.6s, infinite);
36
37
  }
37
38
 
39
+ .loader-wrapper {
40
+ &--center {
41
+ text-align: center;
42
+ }
43
+
44
+ &--overlay {
45
+ z-index: 9999;
46
+ background: $transparentGrey;
47
+ position: fixed;
48
+ top: 0;
49
+ left: 0;
50
+ right: 0;
51
+ bottom: 0;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ }
56
+ }
57
+
38
58
  .loader {
39
59
  display: inline-block;
40
60
  position: relative;
@@ -56,6 +76,10 @@
56
76
  height: 24px;
57
77
  }
58
78
 
79
+ &__hidden-text {
80
+ @include sr-only();
81
+ }
82
+
59
83
  &__dot {
60
84
  position: absolute;
61
85
  width: 8px;
@@ -1,6 +1,8 @@
1
1
  export type Styles = {
2
+ center: string;
2
3
  loader: string;
3
4
  loader__dot: string;
5
+ ' loader__hidden-text': string;
4
6
  'loader__dot--banana': string;
5
7
  'loader__dot--black': string;
6
8
  'loader__dot--cherry': string;
@@ -14,6 +16,7 @@ export type Styles = {
14
16
  'loader--large': string;
15
17
  'loader--medium': string;
16
18
  'loader--small': string;
19
+ overlay: string;
17
20
  scale: string;
18
21
  'scale-regular': string;
19
22
  'scale-reverse': string;
@@ -1,2 +1,2 @@
1
- import{_ as e}from"../../_tslib-51c8a283.js";import c from"react";import{g as l}from"../../color-d7bbcfcc.js";import"../../index-cf9fa51d.js";import"../../palette-f206f488.js";var t=function(e){var t=e.size,v=void 0===t?300:t,h=e.color,a=void 0===h?"black":h,i=e.className,o=void 0===i?"":i;return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:v,role:"img","aria-labelledby":"logo-title",viewBox:"0 0 502 220",className:o},c.createElement("title",{id:"logo-title"},"Helsenorge"),c.createElement("g",{fill:l(a,500)},c.createElement("path",{d:"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z"})))},v=function(e){var t=e.size,v=void 0===t?300:t,h=e.color,a=void 0===h?"black":h,i=e.className,o=void 0===i?"":i;return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:v,role:"img","aria-labelledby":"logo-title",viewBox:"0 0 87 12",className:o},c.createElement("title",{id:"logo-title"},"Helsenorge"),c.createElement("g",{fill:l(a,500)},c.createElement("path",{d:"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z"})))};export default function(l){var h=l.byline,a=void 0!==h&&h,i=e(l,["byline"]);return a?c.createElement(v,Object.assign({},i)):c.createElement(t,Object.assign({},i))}
1
+ import{_ as e}from"../../_tslib-51c8a283.js";import c from"react";import{g as l}from"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";var t=function(e){var t=e.size,v=void 0===t?300:t,h=e.color,i=void 0===h?"black":h,r=e.className,a=void 0===r?"":r;return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:v,role:"img","aria-labelledby":"logo-title",viewBox:"0 0 502 220",className:a},c.createElement("title",{id:"logo-title"},"Helsenorge"),c.createElement("g",{fill:l(i,500)},c.createElement("path",{d:"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z"})))},v=function(e){var t=e.size,v=void 0===t?300:t,h=e.color,i=void 0===h?"black":h,r=e.className,a=void 0===r?"":r;return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:v,role:"img","aria-labelledby":"logo-title",viewBox:"0 0 87 12",className:a},c.createElement("title",{id:"logo-title"},"Helsenorge"),c.createElement("g",{fill:l(i,500)},c.createElement("path",{d:"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z"})))};export default function(l){var h=l.byline,i=void 0!==h&&h,r=e(l,["byline"]);return i?c.createElement(v,Object.assign({},r)):c.createElement(t,Object.assign({},r))}
2
2
  //# sourceMappingURL=index.js.map
@@ -2,11 +2,14 @@ import React from 'react';
2
2
  export declare enum ModalVariants {
3
3
  normal = "normal",
4
4
  warning = "warning",
5
- error = "error"
5
+ error = "error",
6
+ image = "image"
6
7
  }
7
8
  export interface ModalProps {
8
9
  /** Title of the modal */
9
10
  title: string;
11
+ /** Title of the modal */
12
+ titleId?: string;
10
13
  /** Description of the modal */
11
14
  description?: string;
12
15
  /** Changes the visual representation of the modal. Description will not render if children prop is provided */
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAczC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiCD,QAAA,MAAM,KAAK,kFAsFT,CAAC;AAIH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD,QAAA,MAAM,KAAK,kFA0GT,CAAC;AAIH,eAAe,KAAK,CAAC"}
@@ -19,6 +19,25 @@
19
19
  "name": "string"
20
20
  }
21
21
  },
22
+ "titleId": {
23
+ "defaultValue": null,
24
+ "description": "Title of the modal",
25
+ "name": "titleId",
26
+ "parent": {
27
+ "fileName": "src/components/Modal/Modal.tsx",
28
+ "name": "ModalProps"
29
+ },
30
+ "declarations": [
31
+ {
32
+ "fileName": "src/components/Modal/Modal.tsx",
33
+ "name": "ModalProps"
34
+ }
35
+ ],
36
+ "required": false,
37
+ "type": {
38
+ "name": "string"
39
+ }
40
+ },
22
41
  "description": {
23
42
  "defaultValue": null,
24
43
  "description": "Description of the modal",
@@ -70,6 +89,9 @@
70
89
  },
71
90
  {
72
91
  "value": "\"error\""
92
+ },
93
+ {
94
+ "value": "\"image\""
73
95
  }
74
96
  ]
75
97
  }
@@ -174,9 +196,7 @@
174
196
  }
175
197
  },
176
198
  "ariaLabel": {
177
- "defaultValue": {
178
- "value": "Dialog"
179
- },
199
+ "defaultValue": null,
180
200
  "description": "Sets the aria-label of the modal",
181
201
  "name": "ariaLabel",
182
202
  "parent": {
@@ -1,2 +1,2 @@
1
- import{M as s}from"../../Modal-42bec9e1.js";export{M as default}from"../../Modal-42bec9e1.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-f1380b34.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"../../color-d7bbcfcc.js";import"../../index-cf9fa51d.js";import"../../Loader-ad8bcd78.js";import"../Loader/styles.module.scss";import"../../useHover-57ad4df9.js";import"../Button/styles.module.scss";import"../../Icon-43100735.js";import"../../AlertSignFill-64bfef57.js";import"./styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";
1
+ import{M as s}from"../../Modal-a9124cca.js";export{M as default}from"../../Modal-a9124cca.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-f5b8067b.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-084dd998.js";import"../Loader/styles.module.scss";import"crypto";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"./styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";
2
2
  //# sourceMappingURL=index.js.map
@@ -38,22 +38,22 @@
38
38
  font-size: 20px;
39
39
  }
40
40
 
41
- &.normal {
41
+ &--normal {
42
42
  background-color: $white;
43
43
  }
44
- &.error {
44
+ &--error {
45
45
  background-color: $cherry100;
46
46
 
47
- .title {
47
+ &__title {
48
48
  color: $cherry600;
49
49
  }
50
50
  }
51
- &.warning {
51
+ &--warning {
52
52
  background-color: $banana50;
53
53
  }
54
- &.error,
55
- &.warning {
56
- .title {
54
+ &--error,
55
+ &--warning {
56
+ &__title {
57
57
  div:nth-child(2) {
58
58
  padding-left: 8px;
59
59
  }
@@ -74,7 +74,7 @@
74
74
  width: 515px;
75
75
  }
76
76
 
77
- &.large {
77
+ &--large {
78
78
  @media (min-width: map-get($grid-breakpoints, md)) {
79
79
  width: 612px;
80
80
  }
@@ -82,78 +82,114 @@
82
82
  width: 696px;
83
83
  }
84
84
  }
85
- }
86
85
 
87
- .close {
88
- position: absolute;
89
- right: 15px;
90
- top: 15px;
91
- @media (max-width: map-get($grid-breakpoints, md)) {
92
- right: 0px;
93
- top: 0px;
94
- }
95
- }
86
+ &--image {
87
+ max-height: calc(100vh - 24px);
88
+ max-width: calc(100vw - 24px);
89
+ width: 100%;
96
90
 
97
- .contentWrapper {
98
- padding: 48px;
99
- @media (max-width: map-get($grid-breakpoints, sm)) {
100
- padding: 32px 24px;
91
+ &__img {
92
+ max-height: calc(100vh - 185px);
93
+ max-width: calc(100vw - 40px);
94
+ width: 100%;
95
+ line-height: 0px;
96
+ overflow: hidden;
97
+ }
98
+
99
+ &__text {
100
+ font-size: 12pt;
101
+ padding-top: 16px;
102
+ display: block;
103
+ }
101
104
  }
102
- .content {
103
- margin: 20px 0;
105
+
106
+ &__close {
107
+ position: absolute;
108
+ right: 15px;
109
+ top: 15px;
110
+ @media (max-width: map-get($grid-breakpoints, md)) {
111
+ right: 0px;
112
+ top: 0px;
113
+ }
114
+
115
+ &--image {
116
+ position: absolute;
117
+ right: 0px;
118
+ margin: 8px;
119
+ }
104
120
  }
105
- .title {
106
- display: flex;
107
- div {
121
+
122
+ &__contentWrapper {
123
+ padding: 48px;
124
+ @media (max-width: map-get($grid-breakpoints, sm)) {
125
+ padding: 32px 24px;
126
+ }
127
+
128
+ &--image {
129
+ padding: 48px 16px 32px;
130
+ }
131
+
132
+ &__content {
133
+ margin: 20px 0;
134
+
135
+ &--image {
136
+ margin-top: 10px;
137
+ }
138
+ }
139
+
140
+ &__title {
108
141
  display: flex;
109
- justify-content: center;
110
- align-items: center;
142
+ div {
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ }
111
147
  }
112
148
  }
113
- }
114
149
 
115
- .description {
116
- white-space: pre-line;
117
- }
150
+ &__description {
151
+ white-space: pre-line;
152
+ }
118
153
 
119
- .lukkekryss {
120
- height: 42px;
121
- width: 42px;
122
- padding: 0;
123
- border: 0;
124
- background-color: transparent;
125
- cursor: pointer;
126
-
127
- &:hover,
128
- &:active {
129
- background-color: rgba(88, 171, 187, 0.1);
130
- }
131
- &:focus {
132
- box-shadow: 0px 0px 0px 2px $black;
133
- background-color: rgba(88, 171, 187, 0.1);
134
- border-radius: 0;
154
+ &__lukkekryss {
155
+ height: 42px;
156
+ width: 42px;
157
+ padding: 0;
135
158
  border: 0;
136
- outline: none;
137
- }
138
- }
159
+ background-color: transparent;
160
+ cursor: pointer;
139
161
 
140
- .actions {
141
- display: flex;
142
- padding: 5px 0;
143
- button:first-child {
144
- margin-right: 24px;
162
+ &:hover,
163
+ &:active {
164
+ background-color: rgba(88, 171, 187, 0.1);
165
+ }
166
+ &:focus {
167
+ box-shadow: 0px 0px 0px 2px $black;
168
+ background-color: rgba(88, 171, 187, 0.1);
169
+ border-radius: 0;
170
+ border: 0;
171
+ outline: none;
172
+ }
145
173
  }
146
- }
147
174
 
148
- /* animation on open */
149
- @keyframes open {
150
- 0% {
151
- opacity: 0;
152
- transform: scale(0.9);
175
+ &__actions {
176
+ display: flex;
177
+ padding: 5px 0;
178
+ button:first-child {
179
+ margin-right: 24px;
180
+ }
153
181
  }
154
182
 
155
- 100% {
156
- opacity: 1;
157
- transform: scale(1);
183
+ /* animation on open */
184
+ @keyframes open {
185
+ 0% {
186
+ opacity: 0;
187
+ transform: scale(0.9);
188
+ }
189
+
190
+ 100% {
191
+ opacity: 1;
192
+ transform: scale(1);
193
+ }
158
194
  }
159
195
  }
@@ -1,20 +1,28 @@
1
1
  export type Styles = {
2
- actions: string;
3
2
  align: string;
4
- close: string;
5
- content: string;
6
- contentWrapper: string;
7
- description: string;
8
- error: string;
9
- large: string;
10
- lukkekryss: string;
11
3
  modal: string;
4
+ modal__actions: string;
5
+ modal__close: string;
6
+ 'modal__close--image': string;
7
+ modal__contentWrapper: string;
8
+ modal__contentWrapper__content: string;
9
+ 'modal__contentWrapper__content--image': string;
10
+ modal__contentWrapper__title: string;
11
+ 'modal__contentWrapper--image': string;
12
+ modal__description: string;
13
+ modal__lukkekryss: string;
14
+ 'modal--error': string;
15
+ 'modal--error__title': string;
16
+ 'modal--image': string;
17
+ 'modal--image__img': string;
18
+ 'modal--image__text': string;
19
+ 'modal--large': string;
20
+ 'modal--normal': string;
21
+ 'modal--warning': string;
22
+ 'modal--warning__title': string;
12
23
  'modal-overlay': string;
13
24
  'modal-overlay--lowerzindex': string;
14
- normal: string;
15
25
  open: string;
16
- title: string;
17
- warning: string;
18
26
  };
19
27
 
20
28
  export type ClassNames = keyof Styles;
@@ -1,2 +1,2 @@
1
- import{a as e}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import a from"react";import{c as o}from"../../index-9b84fabc.js";import{p as n}from"../../palette-f206f488.js";import{I as t}from"../../Icon-43100735.js";import{u as i}from"../../useHover-57ad4df9.js";import{a as r,A as l,X as c}from"../../AlertSignFill-64bfef57.js";import s from"./styles.module.scss";import"../../_tslib-51c8a283.js";var m={info:a.createElement(t,{svgIcon:function(e){var o=e.isExtraSmall,n=e.isHovered,t=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 10.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),i=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 8.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),r=a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 10.61a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"});return o?n?a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 8.084a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"}):r:n?i:t},color:n.kiwi900,hoverColor:n.kiwi900}),warn:a.createElement(t,{svgIcon:r,color:"black",hoverColor:"black"}),alert:a.createElement(t,{svgIcon:l,color:n.cherry500,hoverColor:n.cherry500}),alertLabel:a.createElement(t,{svgIcon:r,color:n.cherry500,hoverColor:n.cherry500}),crisis:a.createElement(t,{svgIcon:l,color:n.banana200,hoverColor:n.banana200})},f=a.forwardRef((function(r,l){var f,v,p=r.children,d=r.variant,h=void 0===d?"info":d,_=r.shadow,u=void 0!==_&&_,b=r.dismissable,E=void 0!==b&&b,C=r.onClick,w=r.label,g=r.fluid,y=void 0!==g&&g,I=r.size,M=r.className,N=i(void 0,E),j=N.hoverRef,S=N.isHovered,k=o(s["notification-panel__close-button"],"crisis"===h?s["notification-panel__close-button--crisis"]:"");var H;return H=a.createElement("div",{ref:l,className:o(s["notification-panel"],s["notification-panel--"+I],s["notification-panel--"+h],(f={},e(f,s["notification-panel--shadow"],!y&&u),e(f,s["notification-panel--haslabel"],!!w&&!p),e(f,s["notification-panel--dismissable"],E),f),M||"")},a.createElement("span",{className:s["notification-panel__icon"]},m["alert"===h&&w&&!p?"alertLabel":h]),a.createElement("section",{"aria-label":function(){if(p){var e="";return a.Children.map(p,(function(a){"string"==typeof a&&(e+=a)})),e}return""}(),className:o(s["notification-panel__content"],(v={},e(v,s["notification-panel__content--crisis"],"crisis"===h),e(v,s["notification-panel__content--haslabel"],!!w&&!p),e(v,s["notification-panel__content--isred"],"alert"===h&&!!w&&!p),v))},w?a.createElement("h1",{className:s["notification-panel__label"],dangerouslySetInnerHTML:{__html:w}}):null,p),E?a.createElement("span",{className:s["notification-panel__action-column"]},a.createElement("button",{className:k,onClick:C,ref:j},a.createElement(t,{svgIcon:c,isHovered:S,size:38,color:"crisis"===h?n.white:n.blueberry500,hoverColor:"crisis"===h?n.white:n.blueberry700}))):null),y?a.createElement("div",{className:o(s["notification-panel__fluidwrapper"],s["notification-panel__fluidwrapper--"+h],e({},s["notification-panel__fluidwrapper--shadow"],u))},H):H}));export default f;
1
+ import{a as e}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import a from"react";import{c as o}from"../../index-9b84fabc.js";import{p as t}from"../../palette-f206f488.js";import{I as n,a as i}from"../../constants-d1f48e8e.js";import{u as r}from"../../useHover-57ad4df9.js";import{a as l,A as c,X as s}from"../../AlertSignFill-64bfef57.js";import m from"./styles.module.scss";import"../../_tslib-51c8a283.js";var f={info:a.createElement(n,{svgIcon:function(e){var o=e.isExtraSmall,t=e.isHovered,n=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 10.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),i=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 8.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),r=a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 10.61a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"});return o?t?a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 8.084a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"}):r:t?i:n},color:t.kiwi900,hoverColor:t.kiwi900}),warn:a.createElement(n,{svgIcon:l,color:"black",hoverColor:"black"}),alert:a.createElement(n,{svgIcon:c,color:t.cherry500,hoverColor:t.cherry500}),alertLabel:a.createElement(n,{svgIcon:l,color:t.cherry500,hoverColor:t.cherry500}),crisis:a.createElement(n,{svgIcon:c,color:t.banana200,hoverColor:t.banana200})},v=a.forwardRef((function(l,c){var v,p,d=l.children,h=l.variant,_=void 0===h?"info":h,u=l.shadow,b=void 0!==u&&u,E=l.dismissable,C=void 0!==E&&E,w=l.onClick,g=l.label,y=l.fluid,M=void 0!==y&&y,I=l.size,N=l.className,S=r(void 0,C),j=S.hoverRef,k=S.isHovered,H=o(m["notification-panel__close-button"],"crisis"===_?m["notification-panel__close-button--crisis"]:"");var x;return x=a.createElement("div",{ref:c,className:o(m["notification-panel"],m["notification-panel--"+I],m["notification-panel--"+_],(v={},e(v,m["notification-panel--shadow"],!M&&b),e(v,m["notification-panel--haslabel"],!!g&&!d),e(v,m["notification-panel--dismissable"],C),v),N||"")},a.createElement("span",{className:m["notification-panel__icon"]},f["alert"===_&&g&&!d?"alertLabel":_]),a.createElement("section",{"aria-label":function(){if(d){var e="";return a.Children.map(d,(function(a){"string"==typeof a&&(e+=a)})),e}return""}(),className:o(m["notification-panel__content"],(p={},e(p,m["notification-panel__content--crisis"],"crisis"===_),e(p,m["notification-panel__content--haslabel"],!!g&&!d),e(p,m["notification-panel__content--isred"],"alert"===_&&!!g&&!d),p))},g?a.createElement("h1",{className:m["notification-panel__label"],dangerouslySetInnerHTML:{__html:g}}):null,d),C?a.createElement("span",{className:m["notification-panel__action-column"]},a.createElement("button",{className:H,onClick:w,ref:j},a.createElement(n,{svgIcon:s,isHovered:k,size:i.XSmall,color:"crisis"===_?t.white:t.blueberry500,hoverColor:"crisis"===_?t.white:t.blueberry700}))):null),M?a.createElement("div",{className:o(m["notification-panel__fluidwrapper"],m["notification-panel__fluidwrapper--"+_],e({},m["notification-panel__fluidwrapper--shadow"],b))},x):x}));export default v;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAU,SAAQ,eAAe;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAqBD,eAAO,MAAM,IAAI,cAkCC,CAAC;AAInB,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAK7C,UAAU,SAAU,SAAQ,eAAe;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAqBD,eAAO,MAAM,IAAI,cAkCC,CAAC;AAInB,eAAe,IAAI,CAAC"}
@@ -1,2 +1,2 @@
1
- import{_ as e,a as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as i}from"../../_tslib-51c8a283.js";import l,{useState as r}from"react";import{c as o}from"../../index-9b84fabc.js";import a from"./styles.module.scss";var c=l.forwardRef((function(e,i){var r,c=e.children,n=e.className,s=e.htmlMarkup,m=void 0===s?"span":s,d=e.highlighted,f=e.compact,p=o(a.tile__title,(t(r={},a["tile__title--highlighted"],d),t(r,a["tile__title--compact"],f),r),n),u=m;return l.createElement(u,{className:p,ref:i},c)})),n=l.forwardRef((function(c,n){var s,m=c.icon,d=c.title,f=c.className,p=void 0===f?"":f,u=c.description,h=c.fixed,g=void 0!==h&&h,_=c.highlighted,v=void 0!==_&&_,E=i(c,["icon","title","className","description","fixed","highlighted"]),N=r(!1),b=e(N,2),w=b[0],x=b[1],j=!u,M=o(a.tile,(t(s={},a["tile--fixed"],g),t(s,a["tile--compact"],j),t(s,a["tile--highlighted"],v),s),p),k=o(a["title-wrapper"],t({},a["title-wrapper--compact"],j));return l.createElement("a",Object.assign({ref:n,className:M,onMouseEnter:function(){return x(!0)},onMouseLeave:function(){return x(!1)},onFocus:function(){return x(!0)},onBlur:function(){return x(!1)}},E),l.createElement("div",{className:k},l.cloneElement(m,{size:64,isHovered:w,color:v?"white":"black"}),l.cloneElement(d,{highlighted:v,compact:j})),u?l.createElement("p",{className:a.tile__description},u):null)}));n.Title=c;export default n;
1
+ import{_ as e,a as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as i}from"../../_tslib-51c8a283.js";import r,{useState as l}from"react";import{c as o}from"../../index-9b84fabc.js";import{a}from"../../constants-d1f48e8e.js";import c from"./styles.module.scss";var n=r.forwardRef((function(e,i){var l,a=e.children,n=e.className,s=e.htmlMarkup,m=void 0===s?"span":s,d=e.highlighted,f=e.compact,p=o(c.tile__title,(t(l={},c["tile__title--highlighted"],d),t(l,c["tile__title--compact"],f),l),n),u=m;return r.createElement(u,{className:p,ref:i},a)})),s=r.forwardRef((function(n,s){var m,d=n.icon,f=n.title,p=n.className,u=void 0===p?"":p,h=n.description,g=n.fixed,_=void 0!==g&&g,v=n.highlighted,E=void 0!==v&&v,N=i(n,["icon","title","className","description","fixed","highlighted"]),b=l(!1),j=e(b,2),w=j[0],x=j[1],M=!h,k=o(c.tile,(t(m={},c["tile--fixed"],_),t(m,c["tile--compact"],M),t(m,c["tile--highlighted"],E),m),u),B=o(c["title-wrapper"],t({},c["title-wrapper--compact"],M));return r.createElement("a",Object.assign({ref:s,className:k,onMouseEnter:function(){return x(!0)},onMouseLeave:function(){return x(!1)},onFocus:function(){return x(!0)},onBlur:function(){return x(!1)}},N),r.createElement("div",{className:B},r.cloneElement(d,{size:a.Medium,isHovered:w,color:E?"white":"black"}),r.cloneElement(f,{highlighted:E,compact:M})),h?r.createElement("p",{className:c.tile__description},h):null)}));s.Title=n;export default s;
2
2
  //# sourceMappingURL=index.js.map
@@ -0,0 +1,2 @@
1
+ import{_ as e}from"./_tslib-51c8a283.js";import a from"react";var i,l=a.forwardRef((function(l,r){var o=l.svgIcon,t=l.ariaLabel,s=l.id,d=l.className,c=void 0===d?"":d,m=l.size,n=void 0===m?i.Small:m,v=l.color,g=void 0===v?"black":v,b=l.hoverColor,h=void 0===b?g||"black":b,f=l.isHovered,S=void 0!==f&&f,u=l.testId,I=e(l,["svgIcon","ariaLabel","id","className","size","color","hoverColor","isHovered","testId"]),L=a.createElement(o,{isExtraSmall:n<=i.XSmall,isHovered:S}),X=s&&t?"title-".concat(s):void 0;return a.createElement("svg",Object.assign({id:s,"data-testid":u,ref:r,className:"hnds-style-icon ".concat(c),role:"img","aria-label":!s&&t?t:void 0,"aria-labelledby":X,"aria-hidden":"true",viewBox:"0 0 48 48",style:{minWidth:n,minHeight:n},width:n,height:n,fill:S?h:g},I),X&&a.createElement("title",{id:X},t),L)}));l.displayName="Icon",function(e){e[e.XSmall=38]="XSmall",e[e.Small=48]="Small",e[e.Medium=64]="Medium",e[e.Large=80]="Large",e[e.XLarge=130]="XLarge"}(i||(i={}));export{l as I,i as a};
2
+ //# sourceMappingURL=constants-d1f48e8e.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants-d1f48e8e.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var x={null:0,xs:360,sm:564,md:768,lg:1088,xl:1450},m={xs:"(min-width: ".concat(x.xs,"px)"),sm:"(min-width: ".concat(x.sm,"px)"),md:"(min-width: ".concat(x.md,"px)"),lg:"(min-width: ".concat(x.lg,"px)"),xl:"(min-width: ".concat(x.xl,"px)")};export{x as b,m as s};
2
+ //# sourceMappingURL=grid-11a70eb7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid-11a70eb7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,9 @@
1
+ export declare enum Breakpoint {
2
+ Xs,
3
+ Sm,
4
+ Md,
5
+ Lg,
6
+ Xl
7
+ }
8
+ export declare const useBreakpoint: () => Breakpoint | undefined;
9
+ //# sourceMappingURL=useBreakpoint.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAIA,oBAAY,UAAU;IACpB,EAAmB;IACnB,EAAmB;IACnB,EAAmB;IACnB,EAAmB;IACnB,EAAmB;CACpB;AAED,eAAO,MAAM,aAAa,8BAsBzB,CAAC"}
@@ -0,0 +1,2 @@
1
+ import{p as s}from"./palette-f206f488.js";import{s as a,b as e}from"./grid-11a70eb7.js";var r={spacer:1,spacers:{0:0,1:1/8,2:1/4,3:.5,4:1,5:1.5,6:2,7:3,8:4,9:5,10:6,11:7,12:8},palette:s,screen:a,breakpoints:e};export{r as t};
2
+ //# sourceMappingURL=index-19b48c51.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-19b48c51.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{t as theme}from"./index-cf9fa51d.js";export{u as useHover}from"./useHover-57ad4df9.js";import"./palette-f206f488.js";import"./_rollupPluginBabelHelpers-e1c7fe69.js";import"react";
1
+ export{t as theme}from"./index-19b48c51.js";export{u as useHover}from"./useHover-57ad4df9.js";import"./palette-f206f488.js";import"./grid-11a70eb7.js";import"./_rollupPluginBabelHelpers-e1c7fe69.js";import"react";
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@helsenorge/designsystem-react",
3
3
  "sideEffects": false,
4
- "version": "1.0.0-beta74",
4
+ "version": "1.0.0-beta78",
5
5
  "description": "The official design system for Helsenorge built with React.",
6
6
  "repository": {
7
7
  "type": "tfs",
@@ -28,7 +28,8 @@
28
28
  "styled-components": "^5.0.0"
29
29
  },
30
30
  "dependencies": {
31
- "bootstrap": "4.4.1"
31
+ "bootstrap": "4.4.1",
32
+ "uuid": "8.3.2"
32
33
  },
33
34
  "devDependencies": {
34
35
  "@babel/core": "^7.8.3",
@@ -56,6 +57,7 @@
56
57
  "@types/prettier": "1.19.0",
57
58
  "@types/styled-components": "5.0.1",
58
59
  "@types/testing-library__react": "^10.0.5",
60
+ "@types/uuid": "8.3.1",
59
61
  "async": "^3.1.0",
60
62
  "babel-loader": "^8.0.6",
61
63
  "classnames": "^2.2.6",
@@ -1,4 +1,8 @@
1
- $font-size-sm: 1.125rem;
2
- $font-size-md: 1.25rem;
3
- $lineheight-size-sm: 1.75rem;
4
- $lineheight-size-md: 1.875rem;
1
+ $font-size-xs: 1rem; // 16px
2
+ $font-size-sm: 1.125rem; // 18px
3
+ $font-size-md: 1.25rem; // 20px
4
+ $font-size-lg: 1.5rem; // 24px
5
+ $lineheight-size-xs: 1.5rem; // 28px
6
+ $lineheight-size-sm: 1.75rem; // 28px
7
+ $lineheight-size-md: 1.875rem; // 30px
8
+ $lineheight-size-lg: 2rem; // 32px