@uncinc/uncinc-react-kitchen-sink 2.5.3 → 2.5.4-2-custom-searchkit-routing
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.
- package/dist/Context/KitchenSinkComponentMapperContext.js +3 -11
- package/dist/Context/ViewportContext.js +8 -21
- package/dist/Context/withMapping.js +6 -17
- package/dist/components/AbbreviationAnnotation/index.js +17 -28
- package/dist/components/AbbreviationAnnotation/stories.js +12 -21
- package/dist/components/Accordion/AccordionItem/index.js +18 -29
- package/dist/components/Accordion/AccordionItemVariant/index.js +14 -25
- package/dist/components/Accordion/index.js +6 -14
- package/dist/components/Accordion/stories.js +16 -26
- package/dist/components/ApiAutocomplete/index.js +7 -17
- package/dist/components/ApiAutocomplete/stories.js +7 -16
- package/dist/components/Button/index.js +21 -30
- package/dist/components/Button/stories.js +11 -21
- package/dist/components/Cookie/Checkbox/index.js +6 -14
- package/dist/components/Cookie/index.js +61 -71
- package/dist/components/Cookie/stories.js +20 -33
- package/dist/components/Dialog/DialogHelpersStory/index.js +13 -25
- package/dist/components/Dialog/DialogHookStory/index.js +13 -22
- package/dist/components/Dialog/DialogOverrideStory/index.js +9 -18
- package/dist/components/Dialog/index.js +35 -46
- package/dist/components/Dialog/stories.js +10 -19
- package/dist/components/FontSizeSwitcher/index.js +17 -28
- package/dist/components/FontSizeSwitcher/stories.js +10 -20
- package/dist/components/Form/Checkbox/index.js +13 -21
- package/dist/components/Form/Checkbox/stories.js +8 -17
- package/dist/components/Form/Checkboxes/index.js +19 -27
- package/dist/components/Form/Checkboxes/index.test.js +23 -27
- package/dist/components/Form/Checkboxes/stories.js +9 -18
- package/dist/components/Form/Date/index.js +4 -12
- package/dist/components/Form/Date/stories.js +7 -16
- package/dist/components/Form/DatePicker/index.js +12 -20
- package/dist/components/Form/DatePicker/stories.js +7 -16
- package/dist/components/Form/DateSelect/index.js +24 -35
- package/dist/components/Form/DateSelect/stories.js +10 -22
- package/dist/components/Form/Email/index.js +4 -12
- package/dist/components/Form/Email/stories.js +7 -16
- package/dist/components/Form/FormikWrapper/index.js +9 -17
- package/dist/components/Form/GenericFormElement/index.js +14 -22
- package/dist/components/Form/Number/index.js +6 -14
- package/dist/components/Form/Number/stories.js +7 -16
- package/dist/components/Form/RadioButtons/index.js +17 -25
- package/dist/components/Form/RadioButtons/index.test.js +23 -27
- package/dist/components/Form/RadioButtons/stories.js +9 -18
- package/dist/components/Form/SearchField/index.js +14 -22
- package/dist/components/Form/Select/Input/index.js +10 -18
- package/dist/components/Form/Select/index.js +10 -18
- package/dist/components/Form/Select/stories.js +9 -19
- package/dist/components/Form/TextField/index.js +11 -19
- package/dist/components/Form/TextField/index.test.js +23 -27
- package/dist/components/Form/TextField/stories.js +8 -17
- package/dist/components/Form/Textarea/index.js +10 -18
- package/dist/components/Form/Textarea/stories.js +7 -16
- package/dist/components/Hamburger/index.js +7 -15
- package/dist/components/Hamburger/stories.js +12 -22
- package/dist/components/Header/index.js +23 -38
- package/dist/components/Header/stories.js +22 -34
- package/dist/components/Image/Background/index.js +10 -21
- package/dist/components/Image/LazyLoadWrapper/index.js +16 -26
- package/dist/components/Image/Picture/index.js +20 -28
- package/dist/components/Image/index.js +11 -19
- package/dist/components/Image/stories.js +28 -41
- package/dist/components/InlineMenu/index.js +14 -25
- package/dist/components/InlineMenu/stories.js +18 -27
- package/dist/components/Layout/Container/index.js +10 -18
- package/dist/components/Layout/Container/stories.js +44 -53
- package/dist/components/Layout/QuickLayout/Auto/index.js +5 -13
- package/dist/components/Layout/QuickLayout/Center/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Clamp/index.js +5 -13
- package/dist/components/Layout/QuickLayout/Sidebar/index.js +6 -14
- package/dist/components/Layout/QuickLayout/SpaceBetween/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Stack/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Wrap/index.js +7 -15
- package/dist/components/Layout/QuickLayout/index.js +16 -24
- package/dist/components/Layout/QuickLayout/stories.js +38 -54
- package/dist/components/Lottie/LottieAnimation/index.js +12 -23
- package/dist/components/Lottie/LottieAnimationWithMousePosition.js +8 -19
- package/dist/components/Lottie/index.js +29 -41
- package/dist/components/Lottie/stories.js +25 -36
- package/dist/components/MagicLine/index.js +12 -23
- package/dist/components/MagicLine/stories.js +16 -26
- package/dist/components/NavigationScroll/index.js +11 -21
- package/dist/components/NavigationScroll/stories.js +9 -18
- package/dist/components/Pagination/index.js +27 -36
- package/dist/components/Pagination/stories.js +17 -30
- package/dist/components/SearchKit/Facets/ChipFacet/index.js +11 -20
- package/dist/components/SearchKit/Facets/ListFacet/index.js +11 -20
- package/dist/components/SearchKit/Facets/SelectFacet/index.js +15 -24
- package/dist/components/SearchKit/Query/index.js +13 -24
- package/dist/components/SearchKit/SearchFacets/index.js +10 -18
- package/dist/components/SearchKit/SearchField/index.js +12 -23
- package/dist/components/SearchKit/SearchLoadMore/index.js +7 -15
- package/dist/components/SearchKit/SearchPage/index.js +9 -18
- package/dist/components/SearchKit/SearchPage/withSearchkitRouting.d.ts +39 -0
- package/dist/components/SearchKit/SearchPage/withSearchkitRouting.js +184 -0
- package/dist/components/SearchKit/SearchPagination/index.js +6 -14
- package/dist/components/SearchKit/SearchReset/index.js +8 -16
- package/dist/components/SearchKit/SearchResults/index.js +28 -39
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.js +7 -18
- package/dist/components/SearchKit/SearchSelectedFilters/index.js +18 -26
- package/dist/components/SearchKit/SearchSorting/index.js +9 -17
- package/dist/components/SearchKit/index.js +58 -39
- package/dist/components/SearchKit/stories.js +54 -69
- package/dist/components/Share/index.js +18 -26
- package/dist/components/Share/stories.js +7 -16
- package/dist/components/Sliders/SliderRelated/index.js +11 -19
- package/dist/components/Sliders/SliderRelated/stories.js +22 -33
- package/dist/components/WysiwygField/index.js +10 -18
- package/dist/components/WysiwygField/stories.js +10 -20
- package/dist/components/index.js +15 -111
- package/dist/config/constants.js +17 -37
- package/dist/config/i18next/index.js +9 -17
- package/dist/helpers/date.js +4 -13
- package/dist/helpers/gtm.js +4 -11
- package/dist/helpers/link.js +4 -12
- package/dist/helpers/useValueForCurrentViewPort.js +6 -13
- package/dist/hooks/useBoolean.js +6 -12
- package/dist/hooks/useClickOutside.js +3 -9
- package/dist/hooks/useDialog.js +6 -13
- package/dist/hooks/useDialogHelpers.js +11 -18
- package/dist/hooks/useEscape.js +3 -9
- package/dist/hooks/useOnScreen.js +4 -10
- package/dist/hooks/usePrevious.js +4 -10
- package/dist/hooks/useScrollPosition.js +4 -11
- package/dist/hooks/useTrapFocus.js +3 -9
- package/dist/hooks/useWindowDimensions.js +4 -10
- package/dist/index.js +76 -471
- package/dist/setupTests.js +2 -5
- package/package.json +11 -5
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.DialogHookStory = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _uuid = require("uuid");
|
|
9
|
-
var _useDialog2 = _interopRequireDefault(require("../../../hooks/useDialog"));
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
1
|
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
2
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
13
3
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -15,31 +5,32 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
15
5
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
16
6
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
17
7
|
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; }
|
|
18
|
-
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
10
|
+
import useDialog from '../../../hooks/useDialog';
|
|
11
|
+
export var DialogHookStory = function DialogHookStory(args) {
|
|
19
12
|
var Content = function Content() {
|
|
20
|
-
return /*#__PURE__*/
|
|
13
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "I've been created using the ", /*#__PURE__*/React.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This hook provides you with:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "title"), " - a header element, or any element, really (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/React.createElement("code", null, "useDialogHelpers"), " hook instead."));
|
|
21
14
|
};
|
|
22
15
|
var title = function title() {
|
|
23
|
-
return /*#__PURE__*/
|
|
16
|
+
return /*#__PURE__*/React.createElement("h2", null, "I'm a Dialog!");
|
|
24
17
|
};
|
|
25
|
-
return /*#__PURE__*/
|
|
26
|
-
var _useDialog = (
|
|
18
|
+
return /*#__PURE__*/React.createElement("div", null, _toConsumableArray(Array(3)).map(function () {
|
|
19
|
+
var _useDialog = useDialog(),
|
|
27
20
|
openDialog = _useDialog.openDialog,
|
|
28
21
|
DialogComponent = _useDialog.DialogComponent;
|
|
29
|
-
var uuid = (
|
|
30
|
-
return /*#__PURE__*/
|
|
22
|
+
var uuid = uuidv4();
|
|
23
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
31
24
|
type: "button",
|
|
32
25
|
onClick: openDialog
|
|
33
|
-
}, "Open a dialog"), /*#__PURE__*/
|
|
26
|
+
}, "Open a dialog"), /*#__PURE__*/React.createElement(DialogComponent, _extends({
|
|
34
27
|
id: uuid,
|
|
35
28
|
title: title,
|
|
36
29
|
showCloseButton: true,
|
|
37
30
|
closeButtonText: "Click here to close me.",
|
|
38
31
|
showCloseIcon: true,
|
|
39
32
|
closeIcon: "icon-cross"
|
|
40
|
-
}, args), /*#__PURE__*/
|
|
33
|
+
}, args), /*#__PURE__*/React.createElement(Content, null)));
|
|
41
34
|
}));
|
|
42
35
|
};
|
|
43
|
-
|
|
44
|
-
var _default = DialogHookStory;
|
|
45
|
-
exports.default = _default;
|
|
36
|
+
export default DialogHookStory;
|
|
@@ -1,31 +1,22 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.DialogOverrideStory = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _useDialog2 = _interopRequireDefault(require("../../../hooks/useDialog"));
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
1
|
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); }
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import useDialog from '../../../hooks/useDialog';
|
|
4
|
+
export var DialogOverrideStory = function DialogOverrideStory(args) {
|
|
5
|
+
var _useDialog = useDialog(),
|
|
13
6
|
openDialog = _useDialog.openDialog,
|
|
14
7
|
closeDialog = _useDialog.closeDialog,
|
|
15
8
|
DialogComponent = _useDialog.DialogComponent;
|
|
16
9
|
var Content = function Content() {
|
|
17
|
-
return /*#__PURE__*/
|
|
10
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "You could pass the ", /*#__PURE__*/React.createElement("code", null, "disableClosers"), " prop.", /*#__PURE__*/React.createElement("br", null), "That way you can create pesky pop-ups or cookiebars that users can't close without doing whatever you require first.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Don't forget to add a ", /*#__PURE__*/React.createElement("button", {
|
|
18
11
|
type: "button",
|
|
19
12
|
onClick: closeDialog
|
|
20
13
|
}, "close"), " button in the content though..."));
|
|
21
14
|
};
|
|
22
|
-
return /*#__PURE__*/
|
|
15
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
23
16
|
type: "button",
|
|
24
17
|
onClick: openDialog
|
|
25
|
-
}, "Open a dialog"), /*#__PURE__*/
|
|
18
|
+
}, "Open a dialog"), /*#__PURE__*/React.createElement(DialogComponent, _extends({
|
|
26
19
|
disableClosers: true
|
|
27
|
-
}, args), /*#__PURE__*/
|
|
20
|
+
}, args), /*#__PURE__*/React.createElement(Content, null)));
|
|
28
21
|
};
|
|
29
|
-
|
|
30
|
-
var _default = DialogOverrideStory;
|
|
31
|
-
exports.default = _default;
|
|
22
|
+
export default DialogOverrideStory;
|
|
@@ -1,22 +1,12 @@
|
|
|
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 = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _reactDom = require("react-dom");
|
|
10
|
-
var _reactRemoveScroll = require("react-remove-scroll");
|
|
11
|
-
var _reactI18next = require("react-i18next");
|
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
var _uuid = require("uuid");
|
|
14
|
-
var _useDialogHelpers2 = _interopRequireDefault(require("../../hooks/useDialogHelpers"));
|
|
15
|
-
require("./style.scss");
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
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); }
|
|
18
|
-
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; }
|
|
19
1
|
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); }
|
|
2
|
+
import React, { useRef } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
4
|
+
import { RemoveScroll } from 'react-remove-scroll';
|
|
5
|
+
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
8
|
+
import useDialogHelpers from '../../hooks/useDialogHelpers';
|
|
9
|
+
import './style.scss';
|
|
20
10
|
var Dialog = function Dialog(props) {
|
|
21
11
|
var id = props.id,
|
|
22
12
|
title = props.title,
|
|
@@ -30,10 +20,10 @@ var Dialog = function Dialog(props) {
|
|
|
30
20
|
dialogLabel = props.dialogLabel,
|
|
31
21
|
portalTarget = props.portalTarget,
|
|
32
22
|
disableClosers = props.disableClosers;
|
|
33
|
-
var wrapper =
|
|
34
|
-
var _useTranslation =
|
|
23
|
+
var wrapper = useRef(null);
|
|
24
|
+
var _useTranslation = useTranslation(),
|
|
35
25
|
t = _useTranslation.t;
|
|
36
|
-
var _useDialogHelpers = (
|
|
26
|
+
var _useDialogHelpers = useDialogHelpers({
|
|
37
27
|
id: id,
|
|
38
28
|
wrapperElement: wrapper,
|
|
39
29
|
closeFunction: closeFunction,
|
|
@@ -43,53 +33,53 @@ var Dialog = function Dialog(props) {
|
|
|
43
33
|
labelId = _useDialogHelpers.labelId,
|
|
44
34
|
dialogHelpersProps = _useDialogHelpers.dialogHelpersProps;
|
|
45
35
|
if (!isOpen) return null;
|
|
46
|
-
return /*#__PURE__*/
|
|
36
|
+
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
|
|
47
37
|
className: "Dialog"
|
|
48
|
-
}, /*#__PURE__*/
|
|
38
|
+
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
49
39
|
className: "Dialog__wrapper"
|
|
50
40
|
}, dialogHelpersProps, {
|
|
51
41
|
ref: wrapper
|
|
52
|
-
}), /*#__PURE__*/
|
|
42
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
53
43
|
id: labelId,
|
|
54
44
|
className: "Dialog__sr-only"
|
|
55
|
-
}, dialogLabel), title && /*#__PURE__*/
|
|
45
|
+
}, dialogLabel), title && /*#__PURE__*/React.createElement("div", {
|
|
56
46
|
className: "Dialog__title"
|
|
57
|
-
}, title()), showCloseIcon && /*#__PURE__*/
|
|
47
|
+
}, title()), showCloseIcon && /*#__PURE__*/React.createElement("button", {
|
|
58
48
|
type: "button",
|
|
59
49
|
className: "Dialog__closeicon",
|
|
60
50
|
"aria-label": t('general.close', 'Close'),
|
|
61
51
|
onClick: closeFunction
|
|
62
|
-
}, /*#__PURE__*/
|
|
52
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
63
53
|
className: "icon ".concat(closeIcon)
|
|
64
|
-
})), /*#__PURE__*/
|
|
54
|
+
})), /*#__PURE__*/React.createElement(RemoveScroll, {
|
|
65
55
|
className: "Dialog__inner"
|
|
66
|
-
}, /*#__PURE__*/
|
|
56
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
67
57
|
className: "Dialog__content"
|
|
68
|
-
}, children), showCloseButton && /*#__PURE__*/
|
|
58
|
+
}, children), showCloseButton && /*#__PURE__*/React.createElement("button", {
|
|
69
59
|
type: "button",
|
|
70
60
|
className: "Dialog__closebutton",
|
|
71
61
|
onClick: closeFunction
|
|
72
|
-
}, closeButtonText))), /*#__PURE__*/
|
|
62
|
+
}, closeButtonText))), /*#__PURE__*/React.createElement("div", {
|
|
73
63
|
className: "Dialog__backdrop",
|
|
74
64
|
"aria-label": t('general.close', 'Close')
|
|
75
65
|
})), portalTarget);
|
|
76
66
|
};
|
|
77
67
|
Dialog.propTypes = {
|
|
78
|
-
id:
|
|
79
|
-
title:
|
|
80
|
-
children:
|
|
81
|
-
isOpen:
|
|
82
|
-
closeFunction:
|
|
83
|
-
showCloseButton:
|
|
84
|
-
closeButtonText:
|
|
85
|
-
showCloseIcon:
|
|
86
|
-
closeIcon:
|
|
87
|
-
dialogLabel:
|
|
88
|
-
portalTarget:
|
|
89
|
-
disableClosers:
|
|
68
|
+
id: PropTypes.string,
|
|
69
|
+
title: PropTypes.element,
|
|
70
|
+
children: PropTypes.element.isRequired,
|
|
71
|
+
isOpen: PropTypes.bool,
|
|
72
|
+
closeFunction: PropTypes.func,
|
|
73
|
+
showCloseButton: PropTypes.bool,
|
|
74
|
+
closeButtonText: PropTypes.string,
|
|
75
|
+
showCloseIcon: PropTypes.bool,
|
|
76
|
+
closeIcon: PropTypes.string,
|
|
77
|
+
dialogLabel: PropTypes.string,
|
|
78
|
+
portalTarget: PropTypes.element,
|
|
79
|
+
disableClosers: PropTypes.bool
|
|
90
80
|
};
|
|
91
81
|
Dialog.defaultProps = {
|
|
92
|
-
id: (
|
|
82
|
+
id: uuidv4(),
|
|
93
83
|
title: null,
|
|
94
84
|
showCloseButton: false,
|
|
95
85
|
closeButtonText: 'Close',
|
|
@@ -101,5 +91,4 @@ Dialog.defaultProps = {
|
|
|
101
91
|
portalTarget: typeof document !== 'undefined' ? document.body : null,
|
|
102
92
|
disableClosers: false
|
|
103
93
|
};
|
|
104
|
-
|
|
105
|
-
exports.default = _default;
|
|
94
|
+
export default Dialog;
|
|
@@ -1,21 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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 = {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import DialogHookStory from './DialogHookStory';
|
|
3
|
+
import DialogHelpersStory from './DialogHelpersStory';
|
|
4
|
+
import DialogOverrideStory from './DialogOverrideStory';
|
|
5
|
+
import DialogComponent from '.';
|
|
6
|
+
export default {
|
|
14
7
|
title: 'Molecules/Dialog',
|
|
15
|
-
component:
|
|
8
|
+
component: DialogComponent
|
|
16
9
|
};
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
};
|
|
21
|
-
exports.Default = Default;
|
|
10
|
+
export var Default = function Default(args) {
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Here, you see the Dialog implemented using the ", /*#__PURE__*/React.createElement("code", null, "useDialog"), " hook. Use the story code as a reference."), /*#__PURE__*/React.createElement(DialogHookStory, null), /*#__PURE__*/React.createElement("p", null, "This is the dialog implemented by using the ", /*#__PURE__*/React.createElement("code", null, "useDialogHelpers"), " hook. This offers some more flexibility."), /*#__PURE__*/React.createElement(DialogHelpersStory, null), /*#__PURE__*/React.createElement("p", null, "You can also disable the ", /*#__PURE__*/React.createElement("code", null, "useClickOutside"), " and ", /*#__PURE__*/React.createElement("code", null, "useEscape"), " hooks."), /*#__PURE__*/React.createElement(DialogOverrideStory, null));
|
|
12
|
+
};
|
|
@@ -1,22 +1,12 @@
|
|
|
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 = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
require("./style.scss");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
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); }
|
|
13
|
-
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; }
|
|
14
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
2
|
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."); }
|
|
16
3
|
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); }
|
|
17
4
|
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; }
|
|
18
5
|
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; } }
|
|
19
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useEffect, useState } from 'react';
|
|
8
|
+
import classnames from 'classnames';
|
|
9
|
+
import './style.scss';
|
|
20
10
|
var FontSizeSwitcher = function FontSizeSwitcher(_ref) {
|
|
21
11
|
var defaultSize = _ref.defaultSize,
|
|
22
12
|
_ref$incrementMode = _ref.incrementMode,
|
|
@@ -28,7 +18,7 @@ var FontSizeSwitcher = function FontSizeSwitcher(_ref) {
|
|
|
28
18
|
|
|
29
19
|
// Use cookie by default to prevent flickering.
|
|
30
20
|
var cookie = getCookie('WCAG_font_size');
|
|
31
|
-
var _useState =
|
|
21
|
+
var _useState = useState(cookie ? parseInt(cookie) : defaultSize),
|
|
32
22
|
_useState2 = _slicedToArray(_useState, 2),
|
|
33
23
|
currentSize = _useState2[0],
|
|
34
24
|
setCurrentSize = _useState2[1];
|
|
@@ -41,52 +31,52 @@ var FontSizeSwitcher = function FontSizeSwitcher(_ref) {
|
|
|
41
31
|
setCurrentSize(parseInt(size));
|
|
42
32
|
}
|
|
43
33
|
};
|
|
44
|
-
|
|
34
|
+
useEffect(function () {
|
|
45
35
|
var html = document.getElementsByTagName('html')[0];
|
|
46
36
|
html.classList.remove('font-size--small', 'font-size--regular', 'font-size--large');
|
|
47
37
|
html.classList.add(['font-size--small', 'font-size--regular', 'font-size--large'][currentSize]);
|
|
48
38
|
}, [currentSize]);
|
|
49
|
-
var classesSmall = (
|
|
39
|
+
var classesSmall = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--small', {
|
|
50
40
|
'active': currentSize === 0
|
|
51
41
|
});
|
|
52
|
-
var classesRegular = (
|
|
42
|
+
var classesRegular = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--regular', {
|
|
53
43
|
'active': currentSize === 1
|
|
54
44
|
});
|
|
55
|
-
var classesLarge = (
|
|
45
|
+
var classesLarge = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--large', {
|
|
56
46
|
'active': currentSize === 2
|
|
57
47
|
});
|
|
58
48
|
if (incrementMode === true) {
|
|
59
|
-
return /*#__PURE__*/
|
|
49
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
60
50
|
className: "FontSizeSwitcher FontSizeSwitcher--increment-mode",
|
|
61
51
|
onClick: function onClick() {
|
|
62
52
|
changeCurrentSize(currentSize + 1);
|
|
63
53
|
}
|
|
64
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
65
55
|
type: "button",
|
|
66
56
|
className: classesSmall
|
|
67
|
-
}, "Small"), /*#__PURE__*/
|
|
57
|
+
}, "Small"), /*#__PURE__*/React.createElement("button", {
|
|
68
58
|
type: "button",
|
|
69
59
|
className: classesRegular
|
|
70
|
-
}, "Regular"), /*#__PURE__*/
|
|
60
|
+
}, "Regular"), /*#__PURE__*/React.createElement("button", {
|
|
71
61
|
type: "button",
|
|
72
62
|
className: classesLarge
|
|
73
63
|
}, "Large"));
|
|
74
64
|
}
|
|
75
|
-
return /*#__PURE__*/
|
|
65
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
76
66
|
className: "FontSizeSwitcher"
|
|
77
|
-
}, /*#__PURE__*/
|
|
67
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
78
68
|
type: "button",
|
|
79
69
|
className: classesSmall,
|
|
80
70
|
onClick: function onClick() {
|
|
81
71
|
return changeCurrentSize(0);
|
|
82
72
|
}
|
|
83
|
-
}, "Small"), /*#__PURE__*/
|
|
73
|
+
}, "Small"), /*#__PURE__*/React.createElement("button", {
|
|
84
74
|
type: "button",
|
|
85
75
|
className: classesRegular,
|
|
86
76
|
onClick: function onClick() {
|
|
87
77
|
return changeCurrentSize(1);
|
|
88
78
|
}
|
|
89
|
-
}, "Regular"), /*#__PURE__*/
|
|
79
|
+
}, "Regular"), /*#__PURE__*/React.createElement("button", {
|
|
90
80
|
type: "button",
|
|
91
81
|
className: classesLarge,
|
|
92
82
|
onClick: function onClick() {
|
|
@@ -97,5 +87,4 @@ var FontSizeSwitcher = function FontSizeSwitcher(_ref) {
|
|
|
97
87
|
FontSizeSwitcher.defaultProps = {
|
|
98
88
|
defaultSize: 1
|
|
99
89
|
};
|
|
100
|
-
|
|
101
|
-
exports.default = _default;
|
|
90
|
+
export default FontSizeSwitcher;
|
|
@@ -1,25 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.IncrementMode = 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 = {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import FontSizeSwitcher from '.';
|
|
3
|
+
export default {
|
|
11
4
|
title: 'Molecules/FontSizeSwitcher'
|
|
12
5
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
6
|
+
export var Default = function Default() {
|
|
7
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeSwitcher, {
|
|
16
8
|
defaultSize: 0
|
|
17
|
-
}), /*#__PURE__*/
|
|
9
|
+
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Header"), /*#__PURE__*/React.createElement("p", null, "And some text.")));
|
|
18
10
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
11
|
+
export var IncrementMode = function IncrementMode() {
|
|
12
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeSwitcher, {
|
|
22
13
|
incrementMode: true
|
|
23
|
-
}), /*#__PURE__*/
|
|
24
|
-
};
|
|
25
|
-
exports.IncrementMode = IncrementMode;
|
|
14
|
+
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Header"), /*#__PURE__*/React.createElement("p", null, "And some text.")));
|
|
15
|
+
};
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _formik = require("formik");
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
|
|
11
|
-
var _withMapping = _interopRequireDefault(require("../../../Context/withMapping"));
|
|
12
|
-
require("./style.scss");
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
1
|
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); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Field } from 'formik';
|
|
4
|
+
import c from 'classnames';
|
|
5
|
+
import GenericFormElement from '../GenericFormElement';
|
|
6
|
+
import withMapping from '../../../Context/withMapping';
|
|
7
|
+
import './style.scss';
|
|
15
8
|
var Checkbox = function Checkbox(props) {
|
|
16
9
|
var title = props.title,
|
|
17
10
|
required = props.required,
|
|
@@ -27,15 +20,15 @@ var Checkbox = function Checkbox(props) {
|
|
|
27
20
|
wrapperClassName = props.wrapperClassName,
|
|
28
21
|
_props$disabled = props.disabled,
|
|
29
22
|
disabled = _props$disabled === void 0 ? false : _props$disabled;
|
|
30
|
-
return /*#__PURE__*/
|
|
31
|
-
className: (
|
|
23
|
+
return /*#__PURE__*/React.createElement(GenericFormElement, {
|
|
24
|
+
className: c('Checkbox', wrapperClassName),
|
|
32
25
|
required: required,
|
|
33
26
|
description: description,
|
|
34
27
|
fieldName: fieldName,
|
|
35
28
|
touched: touched,
|
|
36
29
|
error: error,
|
|
37
30
|
displayRequiredIndicator: displayRequiredIndicator
|
|
38
|
-
}, /*#__PURE__*/
|
|
31
|
+
}, /*#__PURE__*/React.createElement(Field, {
|
|
39
32
|
required: required,
|
|
40
33
|
name: fieldName,
|
|
41
34
|
value: value,
|
|
@@ -44,15 +37,15 @@ var Checkbox = function Checkbox(props) {
|
|
|
44
37
|
var field = _ref.field,
|
|
45
38
|
form = _ref.form;
|
|
46
39
|
var id = "".concat(props.fieldName, "--").concat(props.value);
|
|
47
|
-
var classes = (
|
|
40
|
+
var classes = c('WebformCheckboxes__checkbox__input', {
|
|
48
41
|
'icon-before': true,
|
|
49
42
|
'icon-checkmark': true,
|
|
50
43
|
'icon-variant-1': field.value
|
|
51
44
|
});
|
|
52
|
-
return /*#__PURE__*/
|
|
45
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
53
46
|
className: classes,
|
|
54
47
|
htmlFor: id
|
|
55
|
-
}, /*#__PURE__*/
|
|
48
|
+
}, /*#__PURE__*/React.createElement("input", _extends({}, field, {
|
|
56
49
|
name: fieldName,
|
|
57
50
|
type: "checkbox",
|
|
58
51
|
id: id,
|
|
@@ -69,5 +62,4 @@ var Checkbox = function Checkbox(props) {
|
|
|
69
62
|
Checkbox.defaultProps = {
|
|
70
63
|
onChange: function onChange() {}
|
|
71
64
|
};
|
|
72
|
-
|
|
73
|
-
exports.default = _default;
|
|
65
|
+
export default withMapping(Checkbox);
|
|
@@ -1,23 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.Checkbox = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
|
|
9
|
-
var _ = _interopRequireDefault(require("."));
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
var _default = {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import FormikWrapper from '../FormikWrapper';
|
|
3
|
+
import FormikCheckbox from '.';
|
|
4
|
+
export default {
|
|
12
5
|
title: 'Molecules/Form'
|
|
13
6
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
|
|
7
|
+
export var Checkbox = function Checkbox() {
|
|
8
|
+
return /*#__PURE__*/React.createElement(FormikWrapper, {
|
|
17
9
|
initialValues: {
|
|
18
10
|
'agreed_with_statement': false
|
|
19
11
|
}
|
|
20
|
-
}, /*#__PURE__*/
|
|
12
|
+
}, /*#__PURE__*/React.createElement(FormikCheckbox, {
|
|
21
13
|
title: "I agree with the statement",
|
|
22
14
|
required: true,
|
|
23
15
|
description: "By checking the above box, you agree with the statement.",
|
|
@@ -33,5 +25,4 @@ var Checkbox = function Checkbox() {
|
|
|
33
25
|
console.log('change', e);
|
|
34
26
|
}
|
|
35
27
|
}));
|
|
36
|
-
};
|
|
37
|
-
exports.Checkbox = Checkbox;
|
|
28
|
+
};
|