@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
@@ -251,5 +251,9 @@ $desktop--navigation-height: 10rem;
251
251
  // -----------------------------------------------------------------------------
252
252
  $animation-timing--cubic-bezier: cubic-bezier(0.23, 0, 0.03, 1.01);
253
253
 
254
- // Settings.
254
+ // -----------------------------------------------------------------------------
255
+ //
256
+ // Settings
257
+ //
258
+ // -----------------------------------------------------------------------------
255
259
  $enable-deprecation-messages: 1;
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@uncinc/uncinc-react-kitchen-sink",
3
- "version": "2.6.1",
3
+ "version": "2.6.4",
4
4
  "description": "Default React components that are easily extended.",
5
5
  "author": "uncinc",
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
- "files": [
10
- "dist"
11
- ],
12
9
  "sideEffects": [
13
10
  "*.scss",
14
11
  "*.css"
@@ -29,7 +26,8 @@
29
26
  "start": "yarn run storybook",
30
27
  "build": "react-scripts build",
31
28
  "build:js": "cross-env NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src --out-dir dist --copy-files --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs",
32
- "build:types": "tsc --outDir dist",
29
+ "build:types": "tsc --outDir dist --rootDir src",
30
+ "build:cleanup": "find dist -type f -name 'stories.*' -delete -o -name '*.stories.*' -delete -o -name 'test.*' -delete -o -name '*.test.*' -delete",
33
31
  "test": "react-scripts test",
34
32
  "test:ci": "react-scripts test --collectCoverage --coverageReporters=cobertura --coverageDirectory=\"./__tests__/coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
35
33
  "eject": "react-scripts eject",
@@ -37,7 +35,7 @@
37
35
  "storybook": "storybook dev -p 6006",
38
36
  "build-storybook": "storybook build",
39
37
  "yalc-watch": "nodemon -e js,jsx --ignore dist --exec \"yalc publish && yalc push\"",
40
- "publish:npm": "yarn build:js && yarn build:types",
38
+ "publish:npm": "yarn build:js && yarn build:types && yarn build:cleanup",
41
39
  "extract": "sb extract",
42
40
  "eslint": "NODE_ENV=development eslint './src/**/*.{js,jsx,ts,tsx}'",
43
41
  "eslint:fix": "NODE_ENV=development eslint --fix './src/**/*.{js,jsx,ts,tsx}'"
@@ -52,7 +50,9 @@
52
50
  "@types/node": "^20.1.0",
53
51
  "@types/react": "^18.2.6",
54
52
  "@types/react-dom": "^18.2.4",
53
+ "@types/react-html-parser": "^2.0.2",
55
54
  "@types/react-router": "^5.1.20",
55
+ "@types/uuid": "^9.0.2",
56
56
  "@types/video.js": "^7.3.52",
57
57
  "@types/webpack-env": "^1.18.0",
58
58
  "apollo-server-micro": "^3.4.0",
@@ -95,7 +95,7 @@
95
95
  "sass": "^1.55.0",
96
96
  "sass-loader": "^8.0.2",
97
97
  "slick-carousel": "^1.8.1",
98
- "typescript": "^5.0.4",
98
+ "typescript": "^5.2.2",
99
99
  "uuid": "^9.0.0",
100
100
  "videojs-vimeo-tech": "^1.0.0",
101
101
  "videojs-youtube": "^2"
@@ -127,7 +127,6 @@
127
127
  "babel-plugin-named-exports-order": "^0.0.2",
128
128
  "chai": "^4.2.0",
129
129
  "cross-env": "^7.0.2",
130
- "jest": "^29.4.3",
131
130
  "jest-environment-jsdom": "^29.5.0",
132
131
  "jest-junit": "^16.0.0",
133
132
  "prop-types": "^15.8.1",
@@ -140,6 +139,9 @@
140
139
  "storybook-react-i18next": "^1.1.3",
141
140
  "webpack": "^5.85.1"
142
141
  },
142
+ "files": [
143
+ "dist"
144
+ ],
143
145
  "browserslist": {
144
146
  "production": [
145
147
  ">0.2%",
@@ -1,38 +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
- 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); }
12
- var _default = {
13
- title: 'Atoms/AbbreviationAnnotation',
14
- component: _.default
15
- };
16
- exports.default = _default;
17
- var Default = function Default(args) {
18
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, ", /*#__PURE__*/_react.default.createElement("abbr", {
19
- title: "Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi."
20
- }, "consectetur adipiscing"), " elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget."), /*#__PURE__*/_react.default.createElement("p", null, "Donec feugiat, nunc vitae euismod", /*#__PURE__*/_react.default.createElement(_.default, _extends({
21
- abbreviationTitle: function abbreviationTitle(html) {
22
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, html, /*#__PURE__*/_react.default.createElement("i", {
23
- className: "icon icon-arrow icon-right"
24
- }));
25
- },
26
- abbreviationContent: function abbreviationContent(html) {
27
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
28
- className: "icon icon-arrow icon-content"
29
- }), /*#__PURE__*/_react.default.createElement("div", null, html));
30
- }
31
- }, args)), "posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare."), /*#__PURE__*/_react.default.createElement("p", null, "Nam venenatis est eget lorem laoreet, id tempor urna hendrerit. Quisque suscipit in magna nec condimentum. Duis id tempor nisi. Sed rutrum urna elit, vitae placerat enim volutpat nec. Vivamus volutpat, magna sit amet commodo ultricies, enim turpis pretium libero, quis molestie nibh augue a ex. Nulla vestibulum vestibulum tellus, vel molestie libero vehicula nec. Sed maximus tortor vel ipsum cursus egestas. Proin suscipit tortor id luctus bibendum."));
32
- };
33
- exports.Default = Default;
34
- var defaultArgs = {
35
- title: 'Titel',
36
- children: 'Content'
37
- };
38
- Default.args = defaultArgs;
@@ -1,39 +0,0 @@
1
- @import '../../styles/assets/variables';
2
-
3
- .AbbreviationAnnotationLink {
4
- background-color: $color--tertiary;
5
- font-family: var(--font--primary);
6
- font-weight: normal;
7
-
8
- &__content {
9
- color: $color--white;
10
- }
11
-
12
- .icon-left {
13
- margin-right: 0.5rem;
14
- }
15
-
16
- .icon-right {
17
- margin-left: 0.5rem;
18
- transform: rotate(90deg);
19
- }
20
-
21
- &--uncollapsed {
22
- .icon-right {
23
- transform: rotate(-90deg);
24
- }
25
- }
26
- }
27
-
28
- .AbbreviationAnnotation {
29
- color: $color--white;
30
- background-color: $color--tertiary;
31
-
32
- .icon-content {
33
- display: block;
34
- font-size: 200%;
35
- margin-top: -0.25rem;
36
- flex: 0 0 auto;
37
- margin-right: 1rem;
38
- }
39
- }
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.withVariant = exports.default = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = _interopRequireDefault(require("."));
9
- var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
10
- var _AccordionItemVariant = _interopRequireDefault(require("./AccordionItemVariant"));
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
- var _default = {
13
- title: 'Atoms/Accordion'
14
- };
15
- exports.default = _default;
16
- var Default = function Default() {
17
- return /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement(_AccordionItem.default, {
18
- title: "Plain text item",
19
- content: "First item content"
20
- }), /*#__PURE__*/_react.default.createElement(_AccordionItem.default, {
21
- title: "HTML item",
22
- content: "<p>Second item <strong>content</strong> that containts <em>HTML</em>.</p>"
23
- }), /*#__PURE__*/_react.default.createElement(_AccordionItem.default, {
24
- title: "Third item",
25
- content: /*#__PURE__*/_react.default.createElement("p", null, "Second item ", /*#__PURE__*/_react.default.createElement("strong", null, "content"), " that containts ", /*#__PURE__*/_react.default.createElement("em", null, "HTML"), ".")
26
- }));
27
- };
28
- exports.Default = Default;
29
- var withVariant = function withVariant() {
30
- return /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement(_AccordionItemVariant.default, {
31
- title: "Plain text item",
32
- content: "<p>Second item <strong>content</strong> that containts <em>HTML</em>.</p>"
33
- }), /*#__PURE__*/_react.default.createElement(_AccordionItemVariant.default, {
34
- title: "HTML item",
35
- content: /*#__PURE__*/_react.default.createElement("p", null, "Second item ", /*#__PURE__*/_react.default.createElement("strong", null, "content"), " that containts ", /*#__PURE__*/_react.default.createElement("em", null, "HTML"), ".")
36
- }), /*#__PURE__*/_react.default.createElement(_AccordionItemVariant.default, {
37
- title: "Third item"
38
- }));
39
- };
40
- exports.withVariant = withVariant;
@@ -1,29 +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
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- var _default = {
11
- title: 'Organisms/Autocomplete'
12
- };
13
- exports.default = _default;
14
- var Default = function Default() {
15
- return /*#__PURE__*/_react.default.createElement(_.default, {
16
- endpoint: "http://nldoet.devinc.eu/autocomplete/json",
17
- renderItem: function renderItem(item) {
18
- console.log(item);
19
- return /*#__PURE__*/_react.default.createElement("div", null, item.name);
20
- },
21
- onSelectItem: function onSelectItem(item) {
22
- console.log('Selected', item);
23
- },
24
- inputProps: {
25
- label: 'test'
26
- }
27
- });
28
- };
29
- exports.Default = Default;
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.WithIcon = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = require(".");
9
- require("./stories.scss");
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- 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); }
12
- var _default = {
13
- component: _.Button,
14
- title: 'Atoms/Button'
15
- };
16
- exports.default = _default;
17
- var Default = function Default(args) {
18
- return /*#__PURE__*/_react.default.createElement(_.Button, args);
19
- };
20
- exports.Default = Default;
21
- var WithIcon = function WithIcon(args) {
22
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Button, args, args.children, /*#__PURE__*/_react.default.createElement("div", {
23
- className: "icon icon-arrow icon-variant-1"
24
- })), /*#__PURE__*/_react.default.createElement(_.Button, _extends({
25
- className: "icon-before icon-arrow icon-variant-1"
26
- }, args)), /*#__PURE__*/_react.default.createElement(_.Button, _extends({
27
- className: "icon-after icon-arrow icon-variant-1"
28
- }, args)));
29
- };
30
- exports.WithIcon = WithIcon;
31
- var defaultArgs = {
32
- children: 'Test',
33
- primary: true
34
- };
35
- Default.args = defaultArgs;
36
- WithIcon.args = defaultArgs;
@@ -1,45 +0,0 @@
1
- @import '../../styles/assets/variables';
2
-
3
- .Button {
4
- display: inline-block;
5
- border-radius: 5px;
6
- text-decoration: none;
7
- text-align: center;
8
- cursor: pointer;
9
-
10
- &--primary {
11
- font-size: 21px;
12
- background-color: #000;
13
- color: #fff;
14
- font-weight: 600;
15
- line-height: 1.14;
16
- padding: 19px 30px;
17
-
18
- &:hover {
19
- background-color: #434343;
20
- }
21
-
22
- &:disabled {
23
- font-family: inherit;
24
- background-color: rgba(0, 0, 0, 0.3);
25
- }
26
- }
27
-
28
- &--inverted {
29
- border: solid 1px #888;
30
- background-color: #fff;
31
- padding: 18px 34.5px;
32
- font-size: 18px;
33
- font-weight: 600;
34
- color: #000;
35
-
36
- &:hover {
37
- background-color: #f1f1f1;
38
- }
39
-
40
- &:disabled {
41
- font-family: inherit;
42
- opacity: .5;
43
- }
44
- }
45
- }
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import './style.scss';
3
- declare const _default: {
4
- component: React.FC<import(".").CallToActionProps>;
5
- title: string;
6
- };
7
- export default _default;
8
- export declare const Default: (args: any) => React.JSX.Element;
@@ -1,37 +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("./style.scss");
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- 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); }
12
- var _default = {
13
- component: _.default,
14
- title: 'Molecules/CallToAction'
15
- };
16
- exports.default = _default;
17
- var Default = function Default(args) {
18
- var title = "Call To Action";
19
- var html = "\n <p>This is a <code>WysiwygField</code> component so you can put whatever you like in here.</p>\n <p>Lorem ipsum dolor sit amet, <abbr title=\"Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.\">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>\n ";
20
- var buttonText = "Button";
21
- var buttonTextSecondary = "Button 2";
22
- var buttonLink = "https://www.uncinc.nl";
23
- var buttonLinkSecondary = "https://www.uncinc.nl/werk";
24
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
25
- title: title,
26
- text: html,
27
- button: {
28
- text: buttonText,
29
- link: buttonLink
30
- },
31
- buttonSecondary: {
32
- text: buttonTextSecondary,
33
- link: buttonLinkSecondary
34
- }
35
- }, args));
36
- };
37
- exports.Default = Default;
@@ -1,91 +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.Default = exports.Advanced = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _reactUseCookie5 = _interopRequireDefault(require("react-use-cookie"));
10
- var _ = _interopRequireDefault(require("."));
11
- require("./stories.scss");
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 _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
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
17
- 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."); }
18
- 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); }
19
- 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; }
20
- 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; } }
21
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
22
- var _default = {
23
- title: 'Organisms/Cookie',
24
- component: _.default
25
- };
26
- exports.default = _default;
27
- var Default = function Default(args) {
28
- var _reactUseCookie = (0, _reactUseCookie5.default)('cookie-agreed', null),
29
- _reactUseCookie2 = _slicedToArray(_reactUseCookie, 2),
30
- didConsent = _reactUseCookie2[0],
31
- setDidConsent = _reactUseCookie2[1];
32
-
33
- // Reset the cookie so we can keep testing the component.
34
- (0, _react.useEffect)(function () {
35
- setDidConsent('');
36
- }, [setDidConsent]);
37
- if (didConsent) return /*#__PURE__*/_react.default.createElement("p", null, "Loading...");
38
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
39
- agreeText: "Accepteren",
40
- manualText: "Zelf instellen",
41
- onAgree: function onAgree(choices) {
42
- return console.log('User agreed to', choices);
43
- },
44
- onDisagree: function onDisagree() {
45
- return console.log('User did NOT agree');
46
- }
47
- }, args), /*#__PURE__*/_react.default.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/_react.default.createElement("p", null, "Aliquam accumsan sem lacus, ut laoreet urna aliquam quis. Ut ut imperdiet tortor, sed vestibulum felis. Etiam a eleifend leo, eu interdum nulla. Etiam id elit ex. Etiam condimentum facilisis venenatis. Curabitur accumsan ut dui vel laoreet. Donec dapibus convallis diam, at sodales nulla laoreet ac. Nunc maximus, orci ac tristique dapibus, dolor felis semper lorem, eu dapibus turpis enim quis urna."));
48
- };
49
- exports.Default = Default;
50
- var Advanced = function Advanced(args) {
51
- var _reactUseCookie3 = (0, _reactUseCookie5.default)('cookie-agreed', null),
52
- _reactUseCookie4 = _slicedToArray(_reactUseCookie3, 2),
53
- didConsent = _reactUseCookie4[0],
54
- setDidConsent = _reactUseCookie4[1];
55
-
56
- // Reset the cookie so we can keep testing the component.
57
- (0, _react.useEffect)(function () {
58
- setDidConsent('');
59
- }, [setDidConsent]);
60
- if (didConsent) return /*#__PURE__*/_react.default.createElement("p", null, "Loading...");
61
- return /*#__PURE__*/_react.default.createElement(_.default, _extends({
62
- agreeText: "Accepteren",
63
- manualText: "Zelf instellen",
64
- showDisagree: true,
65
- onDisagree: function onDisagree() {},
66
- manualButtonClassname: "",
67
- cookieLevels: [{
68
- value: 'necessary',
69
- label: 'Noodzakelijk',
70
- description: 'Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.',
71
- disabled: true
72
- }, {
73
- value: 'voorkeuren',
74
- label: 'Voorkeuren',
75
- description: 'Voorkeurscookies zorgen ervoor dat een website informatie kan onthouden die van invloed is op het gedrag en de vormgeving van de website, zoals de taal van uw voorkeur of de regio waar u woont.',
76
- disabled: false
77
- }, {
78
- value: 'statistieken',
79
- label: 'Statistieken',
80
- description: 'Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.',
81
- disabled: false
82
- }],
83
- defaultValues: {
84
- necessary: true,
85
- voorkeuren: true,
86
- statistieken: true
87
- },
88
- manualHeader: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Manual choice"), /*#__PURE__*/_react.default.createElement("p", null, "You have a choice."))
89
- }, args), /*#__PURE__*/_react.default.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/_react.default.createElement("p", null, "Aliquam accumsan sem lacus, ut laoreet urna aliquam quis. Ut ut imperdiet tortor, sed vestibulum felis. Etiam a eleifend leo, eu interdum nulla. Etiam id elit ex. Etiam condimentum facilisis venenatis. Curabitur accumsan ut dui vel laoreet. Donec dapibus convallis diam, at sodales nulla laoreet ac. Nunc maximus, orci ac tristique dapibus, dolor felis semper lorem, eu dapibus turpis enim quis urna."));
90
- };
91
- exports.Advanced = Advanced;
@@ -1,70 +0,0 @@
1
- @import '../../styles/assets/mixins';
2
- @import '../../styles/assets/variables';
3
-
4
- @keyframes fade-out-and-transform {
5
- 0% {
6
- transform: translateX(-50%) translateY(0px);
7
- }
8
-
9
- 25% {
10
- opacity: 1;
11
- }
12
-
13
- 75% {
14
- opacity: 0;
15
- }
16
-
17
- 100% {
18
- transform: translateX(-50%) translateY(110%);
19
- opacity: 0;
20
- }
21
- }
22
-
23
- .Cookie {
24
- bottom: 1rem;
25
-
26
- @media #{$tablet} {
27
- bottom: 3rem;
28
- }
29
-
30
- &--hidden {
31
- animation-name: fade-out-and-transform;
32
- animation-duration: .6s;
33
- animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
34
- animation-fill-mode: forwards;
35
- }
36
-
37
- &__content {
38
- background: #F4F4F4;
39
- padding: 2rem;
40
- border-radius: 10px;
41
- margin-bottom: 10px;
42
- width: 100%;
43
- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
44
-
45
- @media #{$tablet-down} {
46
- width: auto;
47
- }
48
-
49
- @media #{$tablet} {
50
- padding: 4rem;
51
- }
52
-
53
- &__full-height {
54
- overflow-y: scroll;
55
-
56
- @media #{$mobile-down} {
57
- position: fixed;
58
- top: 2rem;
59
- bottom: 2rem;
60
- right: 2rem;
61
- left: 2rem;
62
- }
63
-
64
- @media #{$normal} {
65
- height: auto;
66
- overflow-y: unset;
67
- }
68
- }
69
- }
70
- }
@@ -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 _DialogHookStory = _interopRequireDefault(require("./DialogHookStory"));
9
- var _DialogHelpersStory = _interopRequireDefault(require("./DialogHelpersStory"));
10
- var _DialogOverrideStory = _interopRequireDefault(require("./DialogOverrideStory"));
11
- var _ = _interopRequireDefault(require("."));
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- var _default = {
14
- title: 'Molecules/Dialog',
15
- component: _.default
16
- };
17
- exports.default = _default;
18
- var Default = function Default(args) {
19
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Here, you see the Dialog implemented using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook. Use the story code as a reference."), /*#__PURE__*/_react.default.createElement(_DialogHookStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "This is the dialog implemented by using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook. This offers some more flexibility."), /*#__PURE__*/_react.default.createElement(_DialogHelpersStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "You can also disable the ", /*#__PURE__*/_react.default.createElement("code", null, "useClickOutside"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "useEscape"), " hooks."), /*#__PURE__*/_react.default.createElement(_DialogOverrideStory.default, null));
20
- };
21
- exports.Default = Default;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import './stories.scss';
3
- declare const _default: {
4
- title: string;
5
- component: React.FC<import(".").DownloadProps>;
6
- };
7
- export default _default;
8
- export declare const Default: (args: any) => React.JSX.Element;
@@ -1,28 +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
- 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); }
12
- var _default = {
13
- title: 'Molecules/Download',
14
- component: _.default
15
- };
16
- exports.default = _default;
17
- var Default = function Default(args) {
18
- var source = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
19
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
20
- source: source,
21
- title: "Download",
22
- description: "Description",
23
- filesize: 12594348,
24
- filename: "dummy.pdf",
25
- mime: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
26
- }, args)), /*#__PURE__*/_react.default.createElement("p", null, "Borders have been added to show the nesting of elements. The orange colored box is an ", /*#__PURE__*/_react.default.createElement("code", null, "a-tag"), " which will contain the link.", /*#__PURE__*/_react.default.createElement("br", null), "The icon has been provided withclasses\xA0", /*#__PURE__*/_react.default.createElement("code", null, "icon-mimeType"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "icon-mimeSubType"), ".", /*#__PURE__*/_react.default.createElement("br", null), "Based on that, you can overwrite the default ", /*#__PURE__*/_react.default.createElement("code", null, "icon-download"), " icon."));
27
- };
28
- exports.Default = Default;
@@ -1,67 +0,0 @@
1
- @import '../../styles/assets/variables';
2
-
3
- .Download {
4
- display: flex;
5
- align-items: center;
6
-
7
- max-width: 80rem;
8
- margin-bottom: 3rem;
9
- padding: 1rem;
10
- padding: 1rem;
11
-
12
- text-decoration: none;
13
-
14
- background-color: $color--grey--lighter;
15
- border: 2px solid $color--grey;
16
- border-radius: 1rem;
17
- border-radius: 1rem;
18
-
19
-
20
- &:hover {
21
- color: $color--white;
22
- background-color: $color--primary;
23
- border-radius: 1rem;
24
-
25
- div {
26
- color: $color--white;
27
- }
28
-
29
- &__icon {
30
- background-position-y: -1em;
31
- }
32
- }
33
-
34
- &__icon {
35
- width: 3rem;
36
- height: 3rem;
37
- margin: 3rem 3rem 3rem 2rem;
38
- font-size: 3rem;
39
- }
40
-
41
- &__content {
42
- display: flex;
43
- flex-direction: column;
44
- flex-grow: 1;
45
- gap: 1rem;
46
-
47
- margin-right: 1rem;
48
- padding: 1rem;
49
-
50
- border: 2px solid $color--grey;
51
- border-radius: 1rem;
52
- }
53
-
54
- &__title,
55
- &__description,
56
- &__attributes {
57
- margin: 0;
58
- padding: 1rem;
59
- border: 2px solid $color--grey;
60
- border-radius: 1rem;
61
- }
62
-
63
- &__extension {
64
- margin-right: 1rem;
65
- text-decoration: none;
66
- }
67
- }