@uncinc/uncinc-react-kitchen-sink 2.8.4 → 2.8.51

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 (16) hide show
  1. package/dist/components/Dialog/DialogDrawerStory/index.d.ts +3 -0
  2. package/dist/components/Dialog/DialogDrawerStory/index.js +81 -0
  3. package/dist/components/Dialog/DialogDrawerStory/story.scss +39 -0
  4. package/dist/components/Dialog/DialogHookStory/index.js +63 -12
  5. package/dist/components/Dialog/index.d.ts +10 -0
  6. package/dist/components/Dialog/index.js +39 -8
  7. package/dist/components/Dialog/style.scss +1 -2
  8. package/dist/components/Download/index.d.ts +1 -1
  9. package/dist/components/Icon/style.scss +53 -53
  10. package/dist/components/Tag/index.d.ts +5 -3
  11. package/dist/components/Tag/index.js +45 -19
  12. package/dist/components/Tag/style.scss +3 -3
  13. package/dist/organisms/Downloads/index.d.ts +1 -1
  14. package/dist/organisms/Text/index.d.ts +3 -2
  15. package/dist/organisms/Text/index.js +3 -2
  16. package/package.json +2 -1
package/dist/components/Dialog/DialogDrawerStory/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export function DialogHookStory(args: any): React.JSX.Element;
2
+ export default DialogHookStory;
3
+ import React from 'react';
package/dist/components/Dialog/DialogDrawerStory/index.js ADDED
@@ -0,0 +1,81 @@
1
+ var _excluded = ["forwardRef", "children"],
2
+ _excluded2 = ["children"];
3
+ 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); }
4
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
5
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
+ import React from 'react';
7
+ import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
8
+ import useDialog from '../../../hooks/useDialog';
9
+ import Icon from '../../Icon';
10
+ import './story.scss';
11
+ var Content = function Content(_ref) {
12
+ var closeDialog = _ref.closeDialog;
13
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
14
+ className: "Dialog__button_close",
15
+ type: "button",
16
+ onClick: function onClick() {
17
+ return closeDialog();
18
+ }
19
+ }, /*#__PURE__*/React.createElement(Icon, {
20
+ name: "close",
21
+ flair: "filled"
22
+ })), /*#__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")));
23
+ };
24
+ var WrapperComponent = function WrapperComponent(_ref2) {
25
+ var forwardRef = _ref2.forwardRef,
26
+ children = _ref2.children,
27
+ props = _objectWithoutProperties(_ref2, _excluded);
28
+ return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
29
+ initial: {
30
+ x: '100%'
31
+ },
32
+ animate: {
33
+ x: 0
34
+ },
35
+ exit: {
36
+ x: '100%'
37
+ },
38
+ ref: forwardRef
39
+ }), children);
40
+ };
41
+ var BackdropComponent = function BackdropComponent(_ref3) {
42
+ var children = _ref3.children,
43
+ props = _objectWithoutProperties(_ref3, _excluded2);
44
+ return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
45
+ initial: {
46
+ opacity: 0
47
+ },
48
+ animate: {
49
+ opacity: 1
50
+ },
51
+ exit: {
52
+ opacity: 0
53
+ }
54
+ }), children);
55
+ };
56
+ export var DialogHookStory = function DialogHookStory(args) {
57
+ var _useDialog = useDialog(),
58
+ dialogIsOpen = _useDialog.dialogIsOpen,
59
+ openDialog = _useDialog.openDialog,
60
+ closeDialog = _useDialog.closeDialog,
61
+ DialogComponent = _useDialog.DialogComponent;
62
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
63
+ type: "button",
64
+ onClick: openDialog
65
+ }, "Open a dialog"), /*#__PURE__*/React.createElement(MotionConfig, {
66
+ transition: {
67
+ duration: 0.5,
68
+ ease: 'easeOut'
69
+ }
70
+ }, /*#__PURE__*/React.createElement(AnimatePresence, null, dialogIsOpen && /*#__PURE__*/React.createElement(DialogComponent, _extends({
71
+ className: "DialogDrawer",
72
+ dialogIsOpen: dialogIsOpen,
73
+ closeDialog: closeDialog,
74
+ closeIcon: "icon-cross",
75
+ wrapperComponent: WrapperComponent,
76
+ backdropComponent: BackdropComponent
77
+ }, args), /*#__PURE__*/React.createElement(Content, {
78
+ closeDialog: closeDialog
79
+ })))));
80
+ };
81
+ export default DialogHookStory;
package/dist/components/Dialog/DialogDrawerStory/story.scss ADDED
@@ -0,0 +1,39 @@
1
+ @import '../../Icon/style';
2
+
3
+ $material-icon-names: (
4
+ close,
5
+ );
6
+ $custom-icon-path: '/assets/icons/';
7
+
8
+ @include generateMaterialIconClasses;
9
+
10
+ .DialogDrawer {
11
+ .Dialog__wrapper {
12
+ position: fixed;
13
+ right: 0;
14
+ top: 0;
15
+ bottom: 0;
16
+ width: 25%;
17
+ max-height: none;
18
+ border-radius: 0;
19
+ }
20
+
21
+ .Dialog__button_close {
22
+ position: absolute;
23
+ right: 1rem;
24
+ top: 1rem;
25
+ background: none;
26
+ border: none;
27
+ cursor: pointer;
28
+
29
+ .Icon {
30
+ font-size: 300%;
31
+ }
32
+ }
33
+
34
+ .Dialog__backdrop {
35
+ background-color: rgba(0, 0, 0, 0.2);
36
+ -webkit-backdrop-filter: blur(2px);
37
+ backdrop-filter: blur(2px);
38
+ }
39
+ }
package/dist/components/Dialog/DialogHookStory/index.js CHANGED
@@ -1,28 +1,79 @@
1
+ var _excluded = ["forwardRef", "children"],
2
+ _excluded2 = ["children"];
1
3
  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); }
4
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
5
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
2
6
  import React from 'react';
3
7
  import { v4 as uuidv4 } from 'uuid';
8
+ import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
4
9
  import useDialog from '../../../hooks/useDialog';
10
+ var Content = function Content() {
11
+ 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."));
12
+ };
13
+ var Title = function Title() {
14
+ return /*#__PURE__*/React.createElement("h2", null, "I'm a Dialog!");
15
+ };
16
+ var WrapperComponent = function WrapperComponent(_ref) {
17
+ var forwardRef = _ref.forwardRef,
18
+ children = _ref.children,
19
+ props = _objectWithoutProperties(_ref, _excluded);
20
+ return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
21
+ initial: {
22
+ opacity: 0,
23
+ y: '100px'
24
+ },
25
+ animate: {
26
+ opacity: 1,
27
+ y: 0
28
+ },
29
+ exit: {
30
+ opacity: 0,
31
+ y: '100px'
32
+ },
33
+ ref: forwardRef
34
+ }), children);
35
+ };
36
+ var BackdropComponent = function BackdropComponent(_ref2) {
37
+ var children = _ref2.children,
38
+ props = _objectWithoutProperties(_ref2, _excluded2);
39
+ return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
40
+ initial: {
41
+ opacity: 0
42
+ },
43
+ animate: {
44
+ opacity: 1
45
+ },
46
+ exit: {
47
+ opacity: 0
48
+ }
49
+ }), children);
50
+ };
51
+ var uuid = uuidv4();
5
52
  export var DialogHookStory = function DialogHookStory(args) {
6
53
  var _useDialog = useDialog(),
54
+ dialogIsOpen = _useDialog.dialogIsOpen,
7
55
  openDialog = _useDialog.openDialog,
56
+ closeDialog = _useDialog.closeDialog,
8
57
  DialogComponent = _useDialog.DialogComponent;
9
- var uuid = uuidv4();
10
- var Content = function Content() {
11
- 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."));
12
- };
13
- var title = function title() {
14
- return /*#__PURE__*/React.createElement("h2", null, "I'm a Dialog!");
15
- };
16
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
58
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
17
59
  type: "button",
18
60
  onClick: openDialog
19
- }, "Open a dialog"), /*#__PURE__*/React.createElement(DialogComponent, _extends({
61
+ }, "Open a dialog"), /*#__PURE__*/React.createElement(MotionConfig, {
62
+ transition: {
63
+ duration: 0.5,
64
+ ease: 'easeOut'
65
+ }
66
+ }, /*#__PURE__*/React.createElement(AnimatePresence, null, dialogIsOpen && /*#__PURE__*/React.createElement(DialogComponent, _extends({
20
67
  id: uuid,
21
- title: title,
22
68
  showCloseButton: true,
69
+ dialogIsOpen: dialogIsOpen,
70
+ closeDialog: closeDialog,
23
71
  closeButtonText: "Click here to close me.",
24
72
  showCloseIcon: true,
25
- closeIcon: "icon-cross"
26
- }, args), /*#__PURE__*/React.createElement(Content, null))));
73
+ closeIcon: "icon-cross",
74
+ titleComponent: Title,
75
+ wrapperComponent: WrapperComponent,
76
+ backdropComponent: BackdropComponent
77
+ }, args), /*#__PURE__*/React.createElement(Content, null)))));
27
78
  };
28
79
  export default DialogHookStory;
package/dist/components/Dialog/index.d.ts CHANGED
@@ -39,6 +39,16 @@ declare namespace Dialog {
39
39
  let disableClosers_1: boolean;
40
40
  export { disableClosers_1 as disableClosers };
41
41
  }
42
+ function Wrapper({ forwardRef, children, ...props }: {
43
+ [x: string]: any;
44
+ forwardRef: any;
45
+ children: any;
46
+ }): React.JSX.Element;
47
+ function Backdrop({ forwardRef, children, ...props }: {
48
+ [x: string]: any;
49
+ forwardRef: any;
50
+ children: any;
51
+ }): React.JSX.Element;
42
52
  }
43
53
  import React from 'react';
44
54
  import PropTypes from 'prop-types';
package/dist/components/Dialog/index.js CHANGED
@@ -1,14 +1,18 @@
1
+ var _excluded = ["forwardRef", "children"],
2
+ _excluded2 = ["forwardRef", "children"];
3
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
1
5
  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
6
  import React, { useRef } from 'react';
3
7
  import { createPortal } from 'react-dom';
4
8
  import { RemoveScroll } from 'react-remove-scroll';
5
9
  import { useTranslation } from 'react-i18next';
6
10
  import PropTypes from 'prop-types';
11
+ import classnames from 'classnames';
7
12
  import useDialogHelpers from '../../hooks/useDialogHelpers';
8
13
  import './style.scss';
9
14
  var Dialog = function Dialog(props) {
10
15
  var id = props.id,
11
- title = props.title,
12
16
  children = props.children,
13
17
  isOpen = props.isOpen,
14
18
  closeFunction = props.closeFunction,
@@ -18,10 +22,21 @@ var Dialog = function Dialog(props) {
18
22
  closeIcon = props.closeIcon,
19
23
  dialogLabel = props.dialogLabel,
20
24
  portalTarget = props.portalTarget,
21
- disableClosers = props.disableClosers;
25
+ disableClosers = props.disableClosers,
26
+ _props$className = props.className,
27
+ className = _props$className === void 0 ? '' : _props$className,
28
+ _props$titleComponent = props.titleComponent,
29
+ titleComponent = _props$titleComponent === void 0 ? null : _props$titleComponent,
30
+ _props$wrapperCompone = props.wrapperComponent,
31
+ wrapperComponent = _props$wrapperCompone === void 0 ? Dialog.Wrapper : _props$wrapperCompone,
32
+ _props$backdropCompon = props.backdropComponent,
33
+ backdropComponent = _props$backdropCompon === void 0 ? Dialog.Wrapper : _props$backdropCompon;
22
34
  var wrapper = useRef(null);
23
35
  var _useTranslation = useTranslation(),
24
36
  t = _useTranslation.t;
37
+ var TitleComponent = titleComponent;
38
+ var WrapperComponent = wrapperComponent;
39
+ var BackdropComponent = backdropComponent;
25
40
  var _useDialogHelpers = useDialogHelpers({
26
41
  id: id,
27
42
  wrapperElement: wrapper,
@@ -34,18 +49,18 @@ var Dialog = function Dialog(props) {
34
49
  dialogId = _useDialogHelpers.id;
35
50
  if (!isOpen) return null;
36
51
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
37
- className: "Dialog",
52
+ className: classnames('Dialog', className),
38
53
  id: dialogId
39
- }, /*#__PURE__*/React.createElement("div", _extends({
54
+ }, /*#__PURE__*/React.createElement(WrapperComponent, _extends({
40
55
  className: "Dialog__wrapper"
41
56
  }, dialogHelpersProps, {
42
- ref: wrapper
57
+ forwardRef: wrapper
43
58
  }), /*#__PURE__*/React.createElement("div", {
44
59
  id: labelId,
45
60
  className: "Dialog__sr-only"
46
- }, dialogLabel), title && /*#__PURE__*/React.createElement("div", {
61
+ }, dialogLabel), TitleComponent && /*#__PURE__*/React.createElement("div", {
47
62
  className: "Dialog__title"
48
- }, title()), showCloseIcon && /*#__PURE__*/React.createElement("button", {
63
+ }, /*#__PURE__*/React.createElement(TitleComponent, null)), showCloseIcon && /*#__PURE__*/React.createElement("button", {
49
64
  type: "button",
50
65
  className: "Dialog__closeicon",
51
66
  "aria-label": t('general.close', 'Close'),
@@ -60,7 +75,7 @@ var Dialog = function Dialog(props) {
60
75
  type: "button",
61
76
  className: "Dialog__closebutton",
62
77
  onClick: closeFunction
63
- }, closeButtonText))), /*#__PURE__*/React.createElement("div", {
78
+ }, closeButtonText))), /*#__PURE__*/React.createElement(BackdropComponent, {
64
79
  className: "Dialog__backdrop",
65
80
  "aria-label": t('general.close', 'Close')
66
81
  })), portalTarget);
@@ -92,4 +107,20 @@ Dialog.defaultProps = {
92
107
  portalTarget: typeof document !== 'undefined' ? document.body : null,
93
108
  disableClosers: false
94
109
  };
110
+ Dialog.Wrapper = function (_ref) {
111
+ var forwardRef = _ref.forwardRef,
112
+ children = _ref.children,
113
+ props = _objectWithoutProperties(_ref, _excluded);
114
+ return /*#__PURE__*/React.createElement("div", _extends({
115
+ ref: forwardRef
116
+ }, props), children);
117
+ };
118
+ Dialog.Backdrop = function (_ref2) {
119
+ var forwardRef = _ref2.forwardRef,
120
+ children = _ref2.children,
121
+ props = _objectWithoutProperties(_ref2, _excluded2);
122
+ return /*#__PURE__*/React.createElement("div", _extends({
123
+ ref: forwardRef
124
+ }, props), children);
125
+ };
95
126
  export default Dialog;
package/dist/components/Dialog/style.scss CHANGED
@@ -50,7 +50,6 @@
50
50
  height: 100%;
51
51
  position: absolute;
52
52
  cursor: pointer;
53
- background: black;
54
- opacity: 0.7;
53
+ background-color: var(--Dialog--backdrop-background-color, rgba(0, 0, 0, 0.7));
55
54
  }
56
55
  }
package/dist/components/Download/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface DownloadProps {
6
6
  filesize?: number;
7
7
  filename?: string;
8
8
  mime: string;
9
- target?: string;
9
+ target?: HTMLAnchorElement['target'];
10
10
  className?: string;
11
11
  }
12
12
  declare const Download: React.FC<DownloadProps>;
package/dist/components/Icon/style.scss CHANGED
@@ -7,36 +7,36 @@
7
7
  $custom-icon-path: '' !default;
8
8
 
9
9
  $material-icon-names: (
10
- arrow_forward,
11
- chevron_right,
12
- download,
13
- filter_list,
14
- info,
15
- check,
16
- radio,
17
- ) !default;
10
+ arrow_forward,
11
+ chevron_right,
12
+ download,
13
+ filter_list,
14
+ info,
15
+ check,
16
+ radio,
17
+ ) !default;
18
18
 
19
19
  $material-icon-styles: (
20
- filled,
21
- outlined,
22
- round,
23
- sharp,
24
- two-tone
20
+ filled,
21
+ outlined,
22
+ round,
23
+ sharp,
24
+ two-tone
25
25
  );
26
26
 
27
27
  @mixin icon-color($color: #000000, $opacity: 1) {
28
- $r: color.red($color) / 255;
29
- $g: color.green($color) / 255;
30
- $b: color.blue($color) / 255;
31
- $a: $opacity;
28
+ $r: calc(color.red($color) / 255);
29
+ $g: calc(color.green($color) / 255);
30
+ $b: calc(color.blue($color) / 255);
31
+ $a: $opacity;
32
32
 
33
- // grayscale fallback if SVG from data url is not supported
34
- $lightness: lightness($color);
35
- filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
33
+ // grayscale fallback if SVG from data url is not supported
34
+ $lightness: color.lightness($color);
35
+ filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
36
36
 
37
- // color filter
38
- $svg-filter-id: "recolor";
39
- filter: url('data:image/svg+xml;utf8,\
37
+ // color filter
38
+ $svg-filter-id: "recolor";
39
+ filter: url('data:image/svg+xml;utf8,\
40
40
  <svg xmlns="http://www.w3.org/2000/svg">\
41
41
  <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
42
42
  <feColorMatrix type="matrix" values="\
@@ -51,36 +51,18 @@ $material-icon-styles: (
51
51
  }
52
52
 
53
53
  @mixin unset-icon-color() {
54
- filter: none;
54
+ filter: none;
55
55
  }
56
56
 
57
57
  @mixin generateMaterialIconClasses() {
58
- @for $styleIndex from 1 through length($material-icon-styles) {
59
- $style: list.nth($material-icon-styles, $styleIndex);
58
+ @for $styleIndex from 1 through length($material-icon-styles) {
59
+ $style: list.nth($material-icon-styles, $styleIndex);
60
60
 
61
- @for $nameIndex from 1 through length($material-icon-names) {
62
- $name: list.nth($material-icon-names, $nameIndex);
61
+ @for $nameIndex from 1 through length($material-icon-names) {
62
+ $name: list.nth($material-icon-names, $nameIndex);
63
63
 
64
- .Icon-#{$style}-#{$name} {
65
- background: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
66
- font-size: 100%;
67
- vertical-align: middle;
68
- text-indent: -9999px;
69
- overflow: hidden;
70
- background-position: 0 0;
71
- background-size: 1em;
72
- background-repeat: no-repeat;
73
- }
74
- }
75
- }
76
- }
77
-
78
- @mixin generateCustomIconClasses() {
79
- @for $nameIndex from 1 through length($custom-icon-names) {
80
- $name: list.nth($custom-icon-names, $nameIndex);
81
-
82
- .Icon-#{$name} {
83
- background: url('#{$custom-icon-path}/#{$name}.svg');
64
+ .Icon-#{$style}-#{$name} {
65
+ background: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
84
66
  font-size: 100%;
85
67
  vertical-align: middle;
86
68
  text-indent: -9999px;
@@ -91,10 +73,28 @@ $material-icon-styles: (
91
73
  }
92
74
  }
93
75
  }
94
-
76
+ }
77
+
78
+ @mixin generateCustomIconClasses() {
79
+ @for $nameIndex from 1 through length($custom-icon-names) {
80
+ $name: list.nth($custom-icon-names, $nameIndex);
81
+
82
+ .Icon-#{$name} {
83
+ background: url('#{$custom-icon-path}/#{$name}.svg');
84
+ font-size: 100%;
85
+ vertical-align: middle;
86
+ text-indent: -9999px;
87
+ overflow: hidden;
88
+ background-position: 0 0;
89
+ background-size: 1em;
90
+ background-repeat: no-repeat;
91
+ }
92
+ }
93
+ }
94
+
95
95
 
96
96
  .Icon {
97
- height: 1em;
98
- width: 1em;
99
- @include icon-color(#000000);
100
- }
97
+ height: 1em;
98
+ width: 1em;
99
+ @include icon-color(#000000);
100
+ }
package/dist/components/Tag/index.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import React from 'react';
2
2
  import './style.scss';
3
3
  export interface TagProps {
4
- name: string;
5
- removable?: boolean;
4
+ name: React.ReactNode;
6
5
  stretchClickableArea?: boolean;
7
6
  deleteButtonAriaLabel?: string;
8
7
  className?: string;
9
- onDelete?: (name: string) => void;
8
+ onDelete?: (name: string | React.ReactNode) => void;
9
+ link?: string;
10
+ onClick?: () => void;
11
+ target?: HTMLAnchorElement['target'];
10
12
  }
11
13
  declare const Tag: React.FC<TagProps>;
12
14
  export default Tag;
package/dist/components/Tag/index.js CHANGED
@@ -2,34 +2,60 @@ import React from 'react';
2
2
  import c from 'classnames';
3
3
  import { useTranslation } from 'react-i18next';
4
4
  import './style.scss';
5
- var Tag = function Tag(props) {
5
+ var Tag = function Tag(_ref) {
6
+ var name = _ref.name,
7
+ stretchClickableArea = _ref.stretchClickableArea,
8
+ deleteButtonAriaLabel = _ref.deleteButtonAriaLabel,
9
+ className = _ref.className,
10
+ onDelete = _ref.onDelete,
11
+ link = _ref.link,
12
+ onClick = _ref.onClick,
13
+ _ref$target = _ref.target,
14
+ target = _ref$target === void 0 ? '_blank' : _ref$target;
6
15
  var _useTranslation = useTranslation(),
7
16
  t = _useTranslation.t;
8
- var name = props.name,
9
- removable = props.removable,
10
- stretchClickableArea = props.stretchClickableArea,
11
- deleteButtonAriaLabel = props.deleteButtonAriaLabel,
12
- className = props.className,
13
- onDelete = props.onDelete;
14
- var classNames = c('Tag', {
17
+ var handleOnClick = function handleOnClick(e) {
18
+ if (onClick) {
19
+ e.preventDefault();
20
+ onClick();
21
+ }
22
+ };
23
+ var renderMainInteractivePart = function renderMainInteractivePart() {
24
+ if (link) {
25
+ return /*#__PURE__*/React.createElement("a", {
26
+ href: link,
27
+ target: target,
28
+ className: "Tag__link",
29
+ onClick: onClick ? handleOnClick : undefined
30
+ }, /*#__PURE__*/React.createElement("span", {
31
+ className: "Tag__name"
32
+ }, name));
33
+ }
34
+ if (onClick) {
35
+ return /*#__PURE__*/React.createElement("button", {
36
+ className: "Tag__button",
37
+ onClick: handleOnClick,
38
+ type: "button"
39
+ }, /*#__PURE__*/React.createElement("span", {
40
+ className: "Tag__name"
41
+ }, name));
42
+ }
43
+ return /*#__PURE__*/React.createElement("span", {
44
+ className: "Tag__name"
45
+ }, name);
46
+ };
47
+ var tagClasses = c('Tag', {
15
48
  'Tag--stretch-clickable-area': stretchClickableArea
16
49
  }, className);
17
50
  return /*#__PURE__*/React.createElement("div", {
18
- className: classNames
19
- }, /*#__PURE__*/React.createElement("span", {
20
- className: "Tag__name"
21
- }, name), removable && onDelete && /*#__PURE__*/React.createElement("button", {
22
- className: "Tag__delete-button icon-after icon-cross icon-variant-1",
51
+ className: tagClasses
52
+ }, renderMainInteractivePart(), onDelete && /*#__PURE__*/React.createElement("button", {
53
+ className: "Tag__delete-button icon-after icon-cross",
23
54
  type: "button",
24
- "aria-label": deleteButtonAriaLabel || t('atoms.tag.delete'),
55
+ "aria-label": deleteButtonAriaLabel !== null && deleteButtonAriaLabel !== void 0 ? deleteButtonAriaLabel : t('atoms.tag.delete'),
25
56
  onClick: function onClick() {
26
57
  return onDelete(name);
27
58
  }
28
59
  }));
29
60
  };
30
- Tag.defaultProps = {
31
- removable: true,
32
- stretchClickableArea: true,
33
- onDelete: function onDelete() {}
34
- };
35
61
  export default Tag;
package/dist/components/Tag/style.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '../../styles/assets/mixins';
1
+ @import "../../styles/assets/mixins";
2
2
 
3
3
  .Tag {
4
4
  position: relative;
5
5
  display: inline-flex;
6
6
  flex-wrap: nowrap;
7
- align-items: center;
7
+ align-items: center;
8
8
 
9
9
  &__delete-button {
10
10
  // Expanding the clickable area by adding padding,
@@ -19,7 +19,7 @@
19
19
  &--stretch-clickable-area .Tag__delete-button {
20
20
  margin: 0;
21
21
  padding: 0;
22
-
22
+
23
23
  &:before {
24
24
  @include block-content;
25
25
  }
package/dist/organisms/Downloads/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface DownloadsProps {
4
4
  title?: string;
5
5
  text?: string;
6
6
  downloads: DownloadProps[];
7
- target?: string;
7
+ target?: HTMLAnchorElement['target'];
8
8
  className?: string;
9
9
  }
10
10
  declare const Downloads: React.FC<DownloadsProps>;
package/dist/organisms/Text/index.d.ts CHANGED
@@ -9,15 +9,16 @@ export interface TextProps extends React.HTMLProps<HTMLAttributes<HTMLDivElement
9
9
  readMoreHeight?: number;
10
10
  link?: string;
11
11
  linkText?: string;
12
- target?: string;
12
+ target?: HTMLAnchorElement['target'];
13
13
  secondaryLink?: string;
14
14
  secondaryLinkText?: string;
15
- secondaryTarget?: string;
15
+ secondaryTarget?: HTMLAnchorElement['target'];
16
16
  buttonClassName?: string;
17
17
  buttonPrimary?: boolean;
18
18
  secondaryButtonClassName?: string;
19
19
  secondaryButtonPrimary?: boolean;
20
20
  className?: string;
21
+ children?: React.ReactElement;
21
22
  }
22
23
  declare const Text: React.FC<TextProps>;
23
24
  export default Text;
package/dist/organisms/Text/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["title", "titleProps", "text", "readMore", "duration", "easing", "readMoreHeight", "link", "linkText", "target", "secondaryLink", "secondaryLinkText", "secondaryTarget", "buttonClassName", "buttonPrimary", "secondaryButtonPrimary", "secondaryButtonClassName", "className"];
1
+ var _excluded = ["title", "titleProps", "text", "readMore", "duration", "easing", "readMoreHeight", "link", "linkText", "target", "secondaryLink", "secondaryLinkText", "secondaryTarget", "buttonClassName", "buttonPrimary", "secondaryButtonPrimary", "secondaryButtonClassName", "className", "children"];
2
2
  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); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  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."); }
@@ -40,6 +40,7 @@ var Text = function Text(_ref) {
40
40
  secondaryButtonPrimary = _ref$secondaryButtonP === void 0 ? true : _ref$secondaryButtonP,
41
41
  secondaryButtonClassName = _ref.secondaryButtonClassName,
42
42
  className = _ref.className,
43
+ children = _ref.children,
43
44
  props = _objectWithoutProperties(_ref, _excluded);
44
45
  var _useState = useState(false),
45
46
  _useState2 = _slicedToArray(_useState, 2),
@@ -88,6 +89,6 @@ var Text = function Text(_ref) {
88
89
  primary: secondaryButtonPrimary,
89
90
  inverted: true,
90
91
  rel: "noreferrer"
91
- }, /*#__PURE__*/React.createElement("span", null, secondaryLinkText))));
92
+ }, /*#__PURE__*/React.createElement("span", null, secondaryLinkText))), children);
92
93
  };
93
94
  export default Text;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinc/uncinc-react-kitchen-sink",
3
- "version": "2.8.4",
3
+ "version": "2.8.51",
4
4
  "description": "Default React components that are easily extended.",
5
5
  "author": "uncinc",
6
6
  "license": "MIT",
@@ -141,6 +141,7 @@
141
141
  "babel-plugin-named-exports-order": "^0.0.2",
142
142
  "chai": "^4.2.0",
143
143
  "cross-env": "^7.0.2",
144
+ "framer-motion": "^11.0.3",
144
145
  "husky": "^8.0.3",
145
146
  "jest-environment-jsdom": "^29.5.0",
146
147
  "jest-junit": "^16.0.0",