@uncinc/uncinc-react-kitchen-sink 2.6.1 → 2.6.4

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 (180) hide show
  1. package/dist/Context/ViewportContext.d.ts +23 -0
  2. package/dist/components/AbbreviationAnnotation/index.d.ts +24 -0
  3. package/dist/components/Accordion/AccordionItem/index.d.ts +17 -0
  4. package/dist/components/Accordion/AccordionItem/index.js +8 -8
  5. package/dist/components/Accordion/AccordionItemVariant/index.d.ts +23 -0
  6. package/dist/components/Accordion/index.d.ts +3 -0
  7. package/dist/components/Accordion/index.js +3 -3
  8. package/dist/components/ApiAutocomplete/index.d.ts +19 -0
  9. package/dist/components/Button/index.d.ts +1 -1
  10. package/dist/components/Cookie/Checkbox/index.d.ts +12 -0
  11. package/dist/components/Cookie/index.d.ts +72 -0
  12. package/dist/components/Dialog/DialogHelpersStory/index.d.ts +3 -0
  13. package/dist/components/Dialog/DialogHookStory/index.d.ts +3 -0
  14. package/dist/components/Dialog/DialogHookStory/index.js +15 -23
  15. package/dist/components/Dialog/DialogOverrideStory/index.d.ts +3 -0
  16. package/dist/components/Dialog/index.d.ts +5 -5
  17. package/dist/components/Download/index.js +1 -1
  18. package/dist/components/FontSizeSwitcher/index.d.ts +11 -0
  19. package/dist/components/Form/Checkbox/index.d.ts +9 -0
  20. package/dist/components/Form/Checkbox/index.js +2 -1
  21. package/dist/components/Form/Checkboxes/index.d.ts +3 -0
  22. package/dist/components/Form/Date/index.d.ts +3 -0
  23. package/dist/components/Form/DatePicker/index.d.ts +3 -0
  24. package/dist/components/Form/DateSelect/index.d.ts +17 -0
  25. package/dist/components/Form/Email/index.d.ts +3 -0
  26. package/dist/components/Form/FormikWrapper/index.d.ts +3 -0
  27. package/dist/components/Form/GenericFormElement/index.d.ts +3 -0
  28. package/dist/components/Form/Number/index.d.ts +3 -0
  29. package/dist/components/Form/RadioButtons/index.d.ts +3 -0
  30. package/dist/components/Form/SearchField/index.d.ts +3 -0
  31. package/dist/components/Form/Select/Input/index.d.ts +3 -0
  32. package/dist/components/Form/Select/index.d.ts +3 -0
  33. package/dist/components/Form/TextField/index.d.ts +4 -0
  34. package/dist/components/Form/TextField/index.js +2 -1
  35. package/dist/components/Form/Textarea/index.d.ts +3 -0
  36. package/dist/components/Form/commonTests.d.ts +6 -0
  37. package/dist/components/Form/{TextField/index.test.js → commonTests.js} +65 -94
  38. package/dist/components/Hamburger/index.d.ts +14 -0
  39. package/dist/components/Header/index.d.ts +10 -0
  40. package/dist/components/Image/Background/index.d.ts +8 -0
  41. package/dist/components/Image/Picture/index.d.ts +2 -2
  42. package/dist/components/InlineMenu/index.d.ts +44 -0
  43. package/dist/components/InlineMenu/index.js +156 -40
  44. package/dist/components/Layout/Container/index.d.ts +22 -0
  45. package/dist/components/Layout/Container/index.js +14 -12
  46. package/dist/components/Layout/QuickLayout/Auto/index.d.ts +14 -0
  47. package/dist/components/Layout/QuickLayout/Center/index.d.ts +6 -0
  48. package/dist/components/Layout/QuickLayout/Clamp/index.d.ts +16 -0
  49. package/dist/components/Layout/QuickLayout/Sidebar/index.d.ts +14 -0
  50. package/dist/components/Layout/QuickLayout/SpaceBetween/index.d.ts +14 -0
  51. package/dist/components/Layout/QuickLayout/Stack/index.d.ts +7 -0
  52. package/dist/components/Layout/QuickLayout/Wrap/index.d.ts +14 -0
  53. package/dist/components/Layout/QuickLayout/index.d.ts +12 -0
  54. package/dist/components/Lottie/LottieAnimation/index.d.ts +3 -0
  55. package/dist/components/Lottie/LottieAnimationWithMousePosition.d.ts +6 -0
  56. package/dist/components/Lottie/index.d.ts +3 -0
  57. package/dist/components/MagicLine/index.d.ts +6 -0
  58. package/dist/components/MediaPlayer/index.js +6 -5
  59. package/dist/components/NavigationScroll/index.d.ts +10 -0
  60. package/dist/components/Pagination/index.d.ts +57 -0
  61. package/dist/components/SearchKit/Facets/ChipFacet/index.d.ts +8 -0
  62. package/dist/components/SearchKit/Facets/ListFacet/index.d.ts +8 -0
  63. package/dist/components/SearchKit/Facets/SelectFacet/index.d.ts +8 -0
  64. package/dist/components/SearchKit/Query/index.d.ts +7 -0
  65. package/dist/components/SearchKit/SearchFacets/index.d.ts +14 -0
  66. package/dist/components/SearchKit/SearchField/index.d.ts +16 -0
  67. package/dist/components/SearchKit/SearchLoadMore/index.d.ts +7 -0
  68. package/dist/components/SearchKit/SearchPage/index.d.ts +14 -0
  69. package/dist/components/SearchKit/SearchPagination/index.d.ts +5 -0
  70. package/dist/components/SearchKit/SearchReset/index.d.ts +7 -0
  71. package/dist/components/SearchKit/SearchResults/index.d.ts +33 -0
  72. package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.d.ts +5 -0
  73. package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.d.ts +6 -0
  74. package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.d.ts +6 -0
  75. package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.d.ts +6 -0
  76. package/dist/components/SearchKit/SearchSelectedFilters/index.d.ts +6 -0
  77. package/dist/components/SearchKit/SearchSorting/index.d.ts +6 -0
  78. package/dist/components/SearchKit/index.d.ts +37 -0
  79. package/dist/components/Share/index.d.ts +18 -0
  80. package/dist/components/Sliders/SliderRelated/index.d.ts +21 -0
  81. package/dist/components/TableRender/index.d.ts +10 -0
  82. package/dist/components/TableRender/index.js +66 -0
  83. package/dist/components/TableRender/style.scss +106 -0
  84. package/dist/components/TitleWithText/index.d.ts +3 -1
  85. package/dist/components/TitleWithText/index.js +8 -5
  86. package/dist/components/WysiwygField/index.d.ts +1 -1
  87. package/dist/components/WysiwygField/index.js +2 -1
  88. package/dist/components/index.d.ts +16 -0
  89. package/dist/config/constants.d.ts +1 -1
  90. package/dist/config/i18next/index.d.ts +2 -0
  91. package/dist/helpers/date.d.ts +3 -0
  92. package/dist/helpers/gtm.d.ts +1 -1
  93. package/dist/helpers/index.d.ts +14 -0
  94. package/dist/helpers/index.js +31 -0
  95. package/dist/helpers/useValueForCurrentViewPort.d.ts +1 -0
  96. package/dist/hooks/useClickOutside.js +1 -1
  97. package/dist/hooks/useDialog.d.ts +1 -4
  98. package/dist/hooks/useDialogHelpers.d.ts +1 -1
  99. package/dist/hooks/useOnScreen.d.ts +2 -0
  100. package/dist/hooks/useOnScreen.js +6 -6
  101. package/dist/hooks/usePrevious.d.ts +1 -0
  102. package/dist/hooks/usePrevious.js +1 -7
  103. package/dist/hooks/useScrollPosition.d.ts +2 -0
  104. package/dist/hooks/useScrollPosition.js +1 -1
  105. package/dist/hooks/useWindowDimensions.d.ts +4 -0
  106. package/dist/index.d.ts +73 -0
  107. package/dist/index.js +14 -0
  108. package/dist/organisms/Downloads/index.js +4 -2
  109. package/dist/organisms/ImageGrid/index.d.ts +25 -0
  110. package/dist/organisms/ImageGrid/index.js +30 -0
  111. package/dist/organisms/ImageGrid/style.scss +53 -0
  112. package/dist/organisms/Text/index.d.ts +2 -0
  113. package/dist/organisms/Text/index.js +5 -1
  114. package/dist/setupTests.d.ts +1 -0
  115. package/dist/styles/assets/_variables.scss +5 -1
  116. package/package.json +10 -8
  117. package/dist/components/AbbreviationAnnotation/stories.js +0 -38
  118. package/dist/components/AbbreviationAnnotation/stories.scss +0 -39
  119. package/dist/components/Accordion/stories.js +0 -40
  120. package/dist/components/ApiAutocomplete/stories.js +0 -29
  121. package/dist/components/Button/stories.js +0 -36
  122. package/dist/components/Button/stories.scss +0 -45
  123. package/dist/components/CallToAction/stories.d.ts +0 -8
  124. package/dist/components/CallToAction/stories.js +0 -37
  125. package/dist/components/Cookie/stories.js +0 -91
  126. package/dist/components/Cookie/stories.scss +0 -70
  127. package/dist/components/Dialog/stories.js +0 -21
  128. package/dist/components/Download/stories.d.ts +0 -8
  129. package/dist/components/Download/stories.js +0 -28
  130. package/dist/components/Download/stories.scss +0 -67
  131. package/dist/components/FontSizeSwitcher/stories.js +0 -25
  132. package/dist/components/Form/Checkbox/stories.js +0 -37
  133. package/dist/components/Form/Checkboxes/index.test.js +0 -155
  134. package/dist/components/Form/Checkboxes/stories.js +0 -49
  135. package/dist/components/Form/Date/stories.js +0 -31
  136. package/dist/components/Form/DatePicker/stories.js +0 -31
  137. package/dist/components/Form/DateSelect/stories.js +0 -54
  138. package/dist/components/Form/Email/stories.js +0 -31
  139. package/dist/components/Form/Number/stories.js +0 -34
  140. package/dist/components/Form/RadioButtons/index.test.js +0 -146
  141. package/dist/components/Form/RadioButtons/stories.js +0 -54
  142. package/dist/components/Form/Select/stories.js +0 -70
  143. package/dist/components/Form/TextField/stories.js +0 -40
  144. package/dist/components/Form/Textarea/stories.js +0 -31
  145. package/dist/components/Hamburger/stories.js +0 -50
  146. package/dist/components/Header/stories.js +0 -50
  147. package/dist/components/Header/stories.scss +0 -11
  148. package/dist/components/Image/stories.js +0 -89
  149. package/dist/components/Image/stories.scss +0 -20
  150. package/dist/components/InlineMenu/stories.js +0 -68
  151. package/dist/components/InlineMenu/stories.scss +0 -10
  152. package/dist/components/Layout/Container/stories.js +0 -95
  153. package/dist/components/Layout/Container/stories.scss +0 -21
  154. package/dist/components/Layout/QuickLayout/stories.js +0 -104
  155. package/dist/components/Lottie/stories.js +0 -66
  156. package/dist/components/MagicLine/stories.js +0 -63
  157. package/dist/components/MagicLine/stories.scss +0 -38
  158. package/dist/components/MediaPlayer/stories.d.ts +0 -12
  159. package/dist/components/MediaPlayer/stories.js +0 -146
  160. package/dist/components/NavigationScroll/stories.js +0 -21
  161. package/dist/components/NavigationScroll/stories.scss +0 -17
  162. package/dist/components/Pagination/stories.js +0 -103
  163. package/dist/components/Pagination/stories.scss +0 -31
  164. package/dist/components/SearchKit/stories.js +0 -205
  165. package/dist/components/Share/stories.js +0 -18
  166. package/dist/components/Share/stories.scss +0 -63
  167. package/dist/components/Sliders/SliderRelated/stories.js +0 -91
  168. package/dist/components/TitleWithText/stories.d.ts +0 -8
  169. package/dist/components/TitleWithText/stories.js +0 -24
  170. package/dist/components/TitleWithText/stories.scss +0 -0
  171. package/dist/components/WysiwygField/stories.js +0 -43
  172. package/dist/organisms/Downloads/stories.d.ts +0 -8
  173. package/dist/organisms/Downloads/stories.js +0 -43
  174. package/dist/organisms/Downloads/stories.scss +0 -67
  175. package/dist/organisms/Quote/stories.d.ts +0 -8
  176. package/dist/organisms/Quote/stories.js +0 -39
  177. package/dist/organisms/Quote/stories.scss +0 -48
  178. package/dist/organisms/Text/stories.d.ts +0 -8
  179. package/dist/organisms/Text/stories.js +0 -30
  180. package/dist/organisms/Text/stories.scss +0 -29
@@ -1,68 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = _interopRequireDefault(require("."));
9
- var _Header = _interopRequireDefault(require("../Header"));
10
- require("./stories.scss");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
- var _default = {
13
- title: 'Molecules/InlineMenu'
14
- };
15
- exports.default = _default;
16
- var Default = function Default() {
17
- return /*#__PURE__*/_react.default.createElement("div", {
18
- style: {
19
- background: '#eee',
20
- paddingTop: 200
21
- }
22
- }, /*#__PURE__*/_react.default.createElement(_Header.default, {
23
- logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
24
- withAnimation: true,
25
- menu: /*#__PURE__*/_react.default.createElement("nav", null, "Mooi menuutje"),
26
- subMenu: /*#__PURE__*/_react.default.createElement(_.default, {
27
- items: [{
28
- menuItemName: 'Paragraaf 1',
29
- elementId: 'paragraph-1'
30
- }, {
31
- menuItemName: 'Paragraaf 2',
32
- elementId: 'paragraph-2'
33
- }, {
34
- menuItemName: 'Paragraaf 3',
35
- elementId: 'paragraph-3'
36
- }, {
37
- menuItemName: 'Paragraaf 4',
38
- elementId: 'paragraph-4'
39
- }, {
40
- menuItemName: 'Paragraaf 5',
41
- elementId: 'paragraph-5'
42
- }, {
43
- menuItemName: 'Paragraaf 6',
44
- elementId: 'paragraph-6'
45
- }],
46
- scrollToTopOffset: 100
47
- })
48
- }), /*#__PURE__*/_react.default.createElement("div", {
49
- className: "paragraph",
50
- id: "paragraph-1"
51
- }, "Content van paragraaf 1"), /*#__PURE__*/_react.default.createElement("div", {
52
- className: "paragraph",
53
- id: "paragraph-2"
54
- }, "Content van paragraaf 2"), /*#__PURE__*/_react.default.createElement("div", {
55
- className: "paragraph",
56
- id: "paragraph-3"
57
- }, "Content van paragraaf 3"), /*#__PURE__*/_react.default.createElement("div", {
58
- className: "paragraph",
59
- id: "paragraph-4"
60
- }, "Content van paragraaf 4"), /*#__PURE__*/_react.default.createElement("div", {
61
- className: "paragraph",
62
- id: "paragraph-5"
63
- }, "Content van paragraaf 5"), /*#__PURE__*/_react.default.createElement("div", {
64
- className: "paragraph",
65
- id: "paragraph-6"
66
- }, "Content van paragraaf 6"));
67
- };
68
- exports.Default = Default;
@@ -1,10 +0,0 @@
1
- .paragraph {
2
- background: white;
3
- height: 200px;
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
- background: black;
8
- color: white;
9
- margin-bottom: 300px;
10
- }
@@ -1,95 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = _interopRequireDefault(require("."));
9
- require("./stories.scss");
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- var _default = {
12
- title: 'Templates/Container',
13
- component: _.default
14
- };
15
- exports.default = _default;
16
- var Filler = function Filler() {
17
- return /*#__PURE__*/_react.default.createElement("div", {
18
- className: "Filler"
19
- });
20
- };
21
- var Columns = function Columns() {
22
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
23
- className: "row"
24
- }, /*#__PURE__*/_react.default.createElement("div", {
25
- className: "col-12"
26
- }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
27
- className: "row"
28
- }, /*#__PURE__*/_react.default.createElement("div", {
29
- className: "col-6"
30
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
31
- className: "col-6"
32
- }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
33
- className: "row"
34
- }, /*#__PURE__*/_react.default.createElement("div", {
35
- className: "col-4"
36
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
37
- className: "col-4"
38
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
39
- className: "col-4"
40
- }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
41
- className: "row"
42
- }, /*#__PURE__*/_react.default.createElement("div", {
43
- className: "col-3"
44
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
45
- className: "col-3"
46
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
47
- className: "col-3"
48
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
49
- className: "col-3"
50
- }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
51
- className: "row"
52
- }, /*#__PURE__*/_react.default.createElement("div", {
53
- className: "col-2"
54
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
55
- className: "col-2"
56
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
57
- className: "col-2"
58
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
59
- className: "col-2"
60
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
61
- className: "col-2"
62
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
63
- className: "col-2"
64
- }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
65
- className: "row"
66
- }, /*#__PURE__*/_react.default.createElement("div", {
67
- className: "col-1"
68
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
69
- className: "col-1"
70
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
71
- className: "col-1"
72
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
73
- className: "col-1"
74
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
75
- className: "col-1"
76
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
77
- className: "col-1"
78
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
79
- className: "col-1"
80
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
81
- className: "col-1"
82
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
83
- className: "col-1"
84
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
85
- className: "col-1"
86
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
87
- className: "col-1"
88
- }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
89
- className: "col-1"
90
- }, /*#__PURE__*/_react.default.createElement(Filler, null))));
91
- };
92
- var Default = function Default(args) {
93
- return /*#__PURE__*/_react.default.createElement(_.default, args, /*#__PURE__*/_react.default.createElement(Columns, null));
94
- };
95
- exports.Default = Default;
@@ -1,21 +0,0 @@
1
- .Filler {
2
- background-color: #efefef;
3
- width: 100%;
4
- height: 50px;
5
- margin-bottom: 20px;
6
- }
7
-
8
- .box {
9
- font-size: 2rem;
10
- padding: 1rem;
11
- display: grid;
12
- place-items: center;
13
- border-radius: 1rem;
14
- border-style: dashed;
15
- color: white;
16
- height: 150px;
17
-
18
- &__full-height {
19
- height: 100%;
20
- }
21
- }
@@ -1,104 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Wrap = exports.Stack = exports.SpaceBetween = exports.Sidebar = exports.Clamp = exports.Center = exports.Auto = exports.AspectRatio = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = _interopRequireDefault(require("."));
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- var _default = {
11
- title: 'Templates/QuickLayout'
12
- };
13
- exports.default = _default;
14
- var Center = function Center() {
15
- return /*#__PURE__*/_react.default.createElement(_.default, {
16
- type: "center"
17
- }, /*#__PURE__*/_react.default.createElement("div", {
18
- className: "box turqoise"
19
- }, "Wow, i'm centered!"));
20
- };
21
- exports.Center = Center;
22
- var Wrap = function Wrap() {
23
- return /*#__PURE__*/_react.default.createElement(_.default, {
24
- type: "wrap",
25
- min: "150px",
26
- stretched: true
27
- }, /*#__PURE__*/_react.default.createElement("div", {
28
- className: "box box__full-height sunflower"
29
- }, "1"), /*#__PURE__*/_react.default.createElement("div", {
30
- className: "box box__full-height midnightblue"
31
- }, "2"), /*#__PURE__*/_react.default.createElement("div", {
32
- className: "box box__full-height belizehole"
33
- }, "3"));
34
- };
35
- exports.Wrap = Wrap;
36
- var Sidebar = function Sidebar() {
37
- return /*#__PURE__*/_react.default.createElement(_.default, {
38
- type: "sidebar"
39
- }, /*#__PURE__*/_react.default.createElement("div", {
40
- className: "box box__full-height amethyst"
41
- }, "Sidebar"), /*#__PURE__*/_react.default.createElement("div", {
42
- className: "box box__full-height sunflower"
43
- }, "Body"));
44
- };
45
- exports.Sidebar = Sidebar;
46
- var Stack = function Stack() {
47
- return /*#__PURE__*/_react.default.createElement(_.default, {
48
- type: "stack"
49
- }, /*#__PURE__*/_react.default.createElement("div", {
50
- className: "box box__full-height turqoise"
51
- }, "Navigation!"), /*#__PURE__*/_react.default.createElement("div", {
52
- className: "box box__full-height pomegranate"
53
- }, "Body!"), /*#__PURE__*/_react.default.createElement("div", {
54
- className: "box box__full-height belizehole"
55
- }, "Footer!"));
56
- };
57
- exports.Stack = Stack;
58
- var Auto = function Auto() {
59
- return /*#__PURE__*/_react.default.createElement(_.default, {
60
- type: "auto",
61
- gap: "1rem ",
62
- min: "150px"
63
- }, /*#__PURE__*/_react.default.createElement("div", {
64
- className: "box turqoise"
65
- }, "1"), /*#__PURE__*/_react.default.createElement("div", {
66
- className: "box pomegranate"
67
- }, "2"), /*#__PURE__*/_react.default.createElement("div", {
68
- className: "box turqoise"
69
- }, "3"), /*#__PURE__*/_react.default.createElement("div", {
70
- className: "box belizehole"
71
- }, "4"), /*#__PURE__*/_react.default.createElement("div", {
72
- className: "box amethyst"
73
- }, "5"));
74
- };
75
- exports.Auto = Auto;
76
- var SpaceBetween = function SpaceBetween() {
77
- return /*#__PURE__*/_react.default.createElement(_.default, {
78
- type: "spaceBetween",
79
- gap: "1rem",
80
- items: "3"
81
- }, /*#__PURE__*/_react.default.createElement("div", {
82
- className: "box sunflower"
83
- }, "Box 1"), /*#__PURE__*/_react.default.createElement("div", {
84
- className: "box midnightblue"
85
- }, "Box 2"), /*#__PURE__*/_react.default.createElement("div", {
86
- className: "box belizehole"
87
- }, "Box 3"));
88
- };
89
- exports.SpaceBetween = SpaceBetween;
90
- var Clamp = function Clamp() {
91
- return /*#__PURE__*/_react.default.createElement(_.default, {
92
- type: "clamp",
93
- min: "2rem",
94
- value: "2.5vw",
95
- max: "20rem"
96
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent urna lectus, condimentum eu neque ut, hendrerit scelerisque lorem. Aenean vehicula eleifend porta. Suspendisse viverra fermentum urna quis rhoncus. Nam lacinia risus vel purus vestibulum semper. Curabitur rutrum nisl consequat dui pretium, vel dapibus libero venenatis. Praesent non imperdiet ipsum. Suspendisse non enim mattis, blandit nunc et, suscipit magna. Duis eu blandit elit. Fusce rhoncus, augue ut pretium accumsan, quam dolor laoreet nisl, eu faucibus mi massa vulputate enim.");
97
- };
98
- exports.Clamp = Clamp;
99
- var AspectRatio = function AspectRatio() {
100
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Coming ", /*#__PURE__*/_react.default.createElement("a", {
101
- href: "https://caniuse.com/mdn-css_properties_aspect-ratio"
102
- }, "soon...")), /*#__PURE__*/_react.default.createElement("div", null));
103
- };
104
- exports.AspectRatio = AspectRatio;
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.playAnimationOnMousePosition = exports.pauseOnClickAnimation = exports.default = exports.activateOnHoverAnimation = exports.PathLoad = exports.DefaultAnimation = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = _interopRequireDefault(require("."));
9
- var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./LottieAnimationWithMousePosition"));
10
- var _example = _interopRequireDefault(require("../../assets/lottie/example.json"));
11
- var _data = _interopRequireDefault(require("../../assets/lottie/data.json"));
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- 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); }
14
- var _default = {
15
- title: 'Atoms/Lottie',
16
- component: _.default
17
- }; // Default animation
18
- exports.default = _default;
19
- var DefaultAnimation = function DefaultAnimation(args) {
20
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
21
- id: "example",
22
- data: _example.default,
23
- onInit: function onInit(lottie) {
24
- return console.log(lottie);
25
- }
26
- }, args));
27
- };
28
-
29
- // Animation active on hover
30
- exports.DefaultAnimation = DefaultAnimation;
31
- var activateOnHoverAnimation = function activateOnHoverAnimation(args) {
32
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
33
- data: _example.default,
34
- activateOnHover: true
35
- }, args));
36
- };
37
-
38
- // Animation plays on mouse position
39
- exports.activateOnHoverAnimation = activateOnHoverAnimation;
40
- var playAnimationOnMousePosition = function playAnimationOnMousePosition(args) {
41
- return /*#__PURE__*/_react.default.createElement(_LottieAnimationWithMousePosition.default, _extends({
42
- loop: false,
43
- autoplay: false,
44
- data: _data.default,
45
- olaTime: 100,
46
- startPosition: 0.5
47
- }, args));
48
- };
49
-
50
- // Pause animation on click
51
- exports.playAnimationOnMousePosition = playAnimationOnMousePosition;
52
- var pauseOnClickAnimation = function pauseOnClickAnimation(args) {
53
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
54
- data: _example.default,
55
- pauseOnClick: true
56
- }, args));
57
- };
58
-
59
- // Via path load
60
- exports.pauseOnClickAnimation = pauseOnClickAnimation;
61
- var PathLoad = function PathLoad(args) {
62
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
63
- path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
64
- }, args));
65
- };
66
- exports.PathLoad = PathLoad;
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.NoActiveItem = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _classnames = _interopRequireDefault(require("classnames"));
9
- var _ = _interopRequireDefault(require("."));
10
- require("./stories.scss");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
- var _default = {
13
- title: 'Molecules/MagicLine'
14
- };
15
- exports.default = _default;
16
- var Default = function Default() {
17
- return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
18
- var items = ['one', 'two with a longer name', 'three'];
19
- return /*#__PURE__*/_react.default.createElement("div", {
20
- className: "Menu"
21
- }, items.map(function (item) {
22
- var active = item === 'three';
23
- if (active) {
24
- setActiveItemInNavigation(true);
25
- }
26
- var classes = (0, _classnames.default)('Menu__item', {
27
- 'Menu__item--active': active
28
- });
29
- return /*#__PURE__*/_react.default.createElement("div", {
30
- key: item,
31
- className: classes,
32
- onMouseEnter: function onMouseEnter(e) {
33
- hoverMagicLine(e);
34
- },
35
- onMouseLeave: function onMouseLeave(e) {
36
- setInitialMagicLine();
37
- }
38
- }, item);
39
- }));
40
- });
41
- };
42
- exports.Default = Default;
43
- var NoActiveItem = function NoActiveItem() {
44
- return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
45
- var items = ['one', 'two with a longer name', 'three'];
46
- return /*#__PURE__*/_react.default.createElement("div", {
47
- className: "Menu"
48
- }, items.map(function (item) {
49
- var classes = (0, _classnames.default)('Menu__item');
50
- return /*#__PURE__*/_react.default.createElement("div", {
51
- key: item,
52
- className: classes,
53
- onMouseEnter: function onMouseEnter(e) {
54
- hoverMagicLine(e);
55
- },
56
- onMouseLeave: function onMouseLeave(e) {
57
- setInitialMagicLine();
58
- }
59
- }, item);
60
- }));
61
- });
62
- };
63
- exports.NoActiveItem = NoActiveItem;
@@ -1,38 +0,0 @@
1
- .Menu {
2
- display: flex;
3
- flex-direction: row;
4
-
5
- &__item {
6
- margin: 0 1rem;
7
- padding: 0 1rem;
8
- }
9
- }
10
-
11
- .MagicLine {
12
- position: relative;
13
-
14
- &__magic_line {
15
- pointer-events: none;
16
- position: absolute;
17
- bottom: 0;
18
- left: 0;
19
- right: 100%;
20
- padding: 0;
21
- margin: 0;
22
- background-color: red;
23
- height: .2rem;
24
- z-index: 1000000;
25
- opacity: 0;
26
-
27
- &--visible {
28
- opacity: 1;
29
- transition: left .3s cubic-bezier(0.64, 0.04, 0.35, 1),
30
- right .3s cubic-bezier(0.64, 0.04, 0.35, 1),
31
- opacity 0.3s .3s cubic-bezier(0.64, 0.04, 0.35, 1);
32
- }
33
- }
34
-
35
- &:hover .MagicLine__magic_line {
36
- opacity: 1;
37
- }
38
- }
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- declare const _default: {
3
- title: string;
4
- component: React.FC<import("./types").MediaPlayerProps>;
5
- };
6
- export default _default;
7
- export declare const LocalVideo: (args: any) => React.JSX.Element;
8
- export declare const LocalAudio: (args: any) => React.JSX.Element;
9
- export declare const Youtube: (args: any) => React.JSX.Element;
10
- export declare const Vimeo: (args: any) => React.JSX.Element;
11
- export declare const WithCaptions: (args: any) => React.JSX.Element;
12
- export declare const Advanced: (args: any) => React.JSX.Element;
@@ -1,146 +0,0 @@
1
- "use strict";
2
-
3
- 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); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.Youtube = exports.WithCaptions = exports.Vimeo = exports.LocalVideo = exports.LocalAudio = exports.Advanced = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _ = _interopRequireDefault(require("."));
10
- var _nl = _interopRequireDefault(require("../../../.storybook/assets/videos/nl.vtt"));
11
- var _en = _interopRequireDefault(require("../../../.storybook/assets/videos/en.vtt"));
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- 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); }
14
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
16
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
18
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
19
- function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
20
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
21
- 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); }
22
- var localVideo = 'https://www.uncinc.nl/sites/default/files/videos/unc-inc-office-film-v1.mp4';
23
- var _default = {
24
- title: 'Organisms/MediaPlayer',
25
- component: _.default
26
- };
27
- exports.default = _default;
28
- var LocalVideo = function LocalVideo(args) {
29
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
30
- src: localVideo,
31
- type: "video/mp4"
32
- }, args));
33
- };
34
- exports.LocalVideo = LocalVideo;
35
- var LocalAudio = function LocalAudio(args) {
36
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
37
- src: localVideo,
38
- type: "audio/mp4",
39
- audioOnly: true
40
- }, args));
41
- };
42
- exports.LocalAudio = LocalAudio;
43
- var Youtube = function Youtube(args) {
44
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
45
- src: "https://www.youtube.com/watch?v=eJHHZC46i1I",
46
- type: "video/youtube"
47
- }, args));
48
- };
49
- exports.Youtube = Youtube;
50
- var Vimeo = function Vimeo(args) {
51
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
52
- src: "https://vimeo.com/153783319",
53
- type: "video/vimeo"
54
- }, args));
55
- };
56
- exports.Vimeo = Vimeo;
57
- var WithCaptions = function WithCaptions(args) {
58
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
59
- src: localVideo,
60
- type: "video/mp4",
61
- captions: [{
62
- src: _nl.default,
63
- language: 'nl',
64
- label: 'Nederlands',
65
- default: true
66
- }, {
67
- src: _en.default,
68
- language: 'en',
69
- label: 'English'
70
- }]
71
- }, args));
72
- };
73
- exports.WithCaptions = WithCaptions;
74
- var Advanced = function Advanced(args) {
75
- var _useState = (0, _react.useState)(''),
76
- _useState2 = _slicedToArray(_useState, 2),
77
- status = _useState2[0],
78
- setStatus = _useState2[1];
79
- var _useState3 = (0, _react.useState)(0),
80
- _useState4 = _slicedToArray(_useState3, 2),
81
- currentTime = _useState4[0],
82
- setCurrentTime = _useState4[1];
83
- var _useState5 = (0, _react.useState)(1),
84
- _useState6 = _slicedToArray(_useState5, 2),
85
- volume = _useState6[0],
86
- setVolume = _useState6[1];
87
- var _useState7 = (0, _react.useState)(''),
88
- _useState8 = _slicedToArray(_useState7, 2),
89
- error = _useState8[0],
90
- setError = _useState8[1];
91
- var message = (0, _react.useMemo)(function () {
92
- switch (status) {
93
- case 'playing':
94
- {
95
- return 'Video is currently playing';
96
- }
97
- case 'paused':
98
- {
99
- return 'Video is paused';
100
- }
101
- case 'ended':
102
- {
103
- return 'Video has ended';
104
- }
105
- default:
106
- {
107
- return 'Player is ready';
108
- }
109
- }
110
- }, [status]);
111
- if (error) {
112
- return /*#__PURE__*/_react.default.createElement("p", null, "The media player encountered an error: ", error);
113
- }
114
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
115
- src: localVideo,
116
- type: "video/mp4",
117
- controls: ['play', 'volume', 'seekbar', 'currentTime', 'fullscreen'],
118
- posterUrl: "https://www.uncinc.nl/sites/default/files/styles/max_2000x2000/public/2022-06/20220525_unc_inc_bedrijfsrave_mr-4893.webp?itok=WRebIyrU",
119
- notSupportedMessage: "This is a custom message which you see if a media file is not supported.",
120
- className: "CustomizedMediaPlayer",
121
- onPlay: function onPlay() {
122
- return setStatus('playing');
123
- },
124
- onPause: function onPause() {
125
- return setStatus('paused');
126
- },
127
- onEnded: function onEnded() {
128
- return setStatus('ended');
129
- },
130
- onSeeking: function onSeeking(player) {
131
- return setCurrentTime(player.currentTime());
132
- },
133
- onVolumeChange: function onVolumeChange(player) {
134
- return setVolume(player.volume());
135
- },
136
- onError: function onError(player) {
137
- return setError(player.error().message);
138
- },
139
- onFullscreenChange: function onFullscreenChange(player) {
140
- if (player.isFullscreen()) {
141
- console.log('Pssst! Secret message telling you the current video you are watching is in fullscreen.');
142
- }
143
- }
144
- }, args)), /*#__PURE__*/_react.default.createElement("p", null, message), /*#__PURE__*/_react.default.createElement("p", null, "Volume: ", Math.round(volume * 100), "%"), currentTime > 0 && /*#__PURE__*/_react.default.createElement("p", null, "Current time: ", Math.round(currentTime), "s"));
145
- };
146
- exports.Advanced = Advanced;
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _classnames = _interopRequireDefault(require("classnames"));
9
- var _ = _interopRequireDefault(require("."));
10
- require("./stories.scss");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
- var _default = {
13
- title: 'Molecules/NavigationScroll'
14
- };
15
- exports.default = _default;
16
- var Default = function Default() {
17
- return /*#__PURE__*/_react.default.createElement("div", {
18
- className: "NavigationScrollExample"
19
- }, /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("div", null, "one"), /*#__PURE__*/_react.default.createElement("div", null, "two"), /*#__PURE__*/_react.default.createElement("div", null, "three"))));
20
- };
21
- exports.Default = Default;