@laerdal/life-react-components 1.2.2-dev.15 → 1.2.2-dev.15.full
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/esm/Accordion/AccordionItem.js +46 -0
- package/dist/esm/Accordion/AccordionItem.js.map +1 -0
- package/dist/esm/Accordion/AccordionMenu.js +35 -0
- package/dist/esm/Accordion/AccordionMenu.js.map +1 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js +53 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/esm/Accordion/index.js +4 -0
- package/dist/esm/Accordion/index.js.map +1 -0
- package/dist/esm/Accordion/styles.js +59 -0
- package/dist/esm/Accordion/styles.js.map +1 -0
- package/dist/esm/HyperLink/HyperLink.js +12 -23
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +14 -53
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +1 -14
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/js/Accordion/AccordionItem.d.ts +9 -0
- package/dist/js/Accordion/AccordionItem.js +58 -0
- package/dist/js/Accordion/AccordionItem.js.map +1 -0
- package/dist/js/Accordion/AccordionMenu.d.ts +15 -0
- package/dist/js/Accordion/AccordionMenu.js +55 -0
- package/dist/js/Accordion/AccordionMenu.js.map +1 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js +101 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/js/Accordion/index.d.ts +3 -0
- package/dist/js/Accordion/index.js +30 -0
- package/dist/js/Accordion/index.js.map +1 -0
- package/dist/js/Accordion/styles.d.ts +10 -0
- package/dist/js/Accordion/styles.js +50 -0
- package/dist/js/Accordion/styles.js.map +1 -0
- package/dist/js/HyperLink/HyperLink.d.ts +2 -2
- package/dist/js/HyperLink/HyperLink.js +4 -14
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +6 -2
- package/dist/js/Modals/ModalDialog.js +16 -54
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.js +3 -7
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/umd/Accordion/AccordionItem.js +70 -0
- package/dist/umd/Accordion/AccordionItem.js.map +1 -0
- package/dist/umd/Accordion/AccordionMenu.js +112 -0
- package/dist/umd/Accordion/AccordionMenu.js.map +1 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js +74 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/umd/Accordion/index.js +44 -0
- package/dist/umd/Accordion/index.js.map +1 -0
- package/dist/umd/Accordion/styles.js +85 -0
- package/dist/umd/Accordion/styles.js.map +1 -0
- package/dist/umd/HyperLink/HyperLink.js +12 -71
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +18 -56
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +1 -14
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/esm/Modals/ModalTypes.js +0 -2
- package/dist/esm/Modals/ModalTypes.js.map +0 -1
- package/dist/js/Modals/ModalTypes.d.ts +0 -18
- package/dist/js/Modals/ModalTypes.js +0 -6
- package/dist/js/Modals/ModalTypes.js.map +0 -1
- package/dist/umd/Modals/ModalTypes.js +0 -20
- package/dist/umd/Modals/ModalTypes.js.map +0 -1
|
@@ -79,88 +79,29 @@
|
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
const _excluded = ["id", "className", "variant", "href", "margin", "children", "target"];
|
|
83
|
-
|
|
84
|
-
function _extends() {
|
|
85
|
-
_extends = Object.assign || function (target) {
|
|
86
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
87
|
-
var source = arguments[i];
|
|
88
|
-
|
|
89
|
-
for (var key in source) {
|
|
90
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
91
|
-
target[key] = source[key];
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return target;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
return _extends.apply(this, arguments);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function _objectWithoutProperties(source, excluded) {
|
|
103
|
-
if (source == null) return {};
|
|
104
|
-
|
|
105
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
106
|
-
|
|
107
|
-
var key, i;
|
|
108
|
-
|
|
109
|
-
if (Object.getOwnPropertySymbols) {
|
|
110
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
111
|
-
|
|
112
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
113
|
-
key = sourceSymbolKeys[i];
|
|
114
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
115
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
116
|
-
target[key] = source[key];
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
return target;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
124
|
-
if (source == null) return {};
|
|
125
|
-
var target = {};
|
|
126
|
-
var sourceKeys = Object.keys(source);
|
|
127
|
-
var key, i;
|
|
128
|
-
|
|
129
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
130
|
-
key = sourceKeys[i];
|
|
131
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
132
|
-
target[key] = source[key];
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
return target;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
82
|
const StyledLink = _styledComponents2.default.a`
|
|
139
83
|
${props => props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle}
|
|
140
84
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
141
85
|
`;
|
|
142
86
|
|
|
143
|
-
const HyperLink =
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
154
|
-
|
|
155
|
-
return /*#__PURE__*/React.createElement(StyledLink, _extends({
|
|
87
|
+
const HyperLink = ({
|
|
88
|
+
id,
|
|
89
|
+
className,
|
|
90
|
+
variant,
|
|
91
|
+
href,
|
|
92
|
+
margin,
|
|
93
|
+
children,
|
|
94
|
+
target
|
|
95
|
+
}) => {
|
|
96
|
+
return /*#__PURE__*/React.createElement(StyledLink, {
|
|
156
97
|
id: id,
|
|
157
98
|
className: className,
|
|
158
99
|
variant: variant,
|
|
159
100
|
href: href,
|
|
160
|
-
target: target ||
|
|
101
|
+
target: target || "_blank",
|
|
161
102
|
rel: "noopener noreferrer",
|
|
162
103
|
margin: margin
|
|
163
|
-
},
|
|
104
|
+
}, children);
|
|
164
105
|
};
|
|
165
106
|
|
|
166
107
|
HyperLink.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K
|
|
1
|
+
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAyC,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAkDC,IAAAA;AAAlD,GAAD,KAAuE;AACvH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAY,MAAA,EAAE,EAAd,EAAA;AAAoB,MAAA,SAAS,EAA7B,SAAA;AAA0C,MAAA,OAAO,EAAjD,OAAA;AAA4D,MAAA,IAAI,EAAhE,IAAA;AAAwE,MAAA,MAAM,EAAEA,MAAM,IAAtF,QAAA;AAAoG,MAAA,GAAG,EAAvG,qBAAA;AAA8H,MAAA,MAAM,EAAER;AAAtI,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEC,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n id: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n return (\n <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "
|
|
3
|
+
define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react,
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -87,7 +87,6 @@
|
|
|
87
87
|
title,
|
|
88
88
|
topImage,
|
|
89
89
|
buttons,
|
|
90
|
-
leftFooterAction,
|
|
91
90
|
backButton,
|
|
92
91
|
closeAction,
|
|
93
92
|
submitAction,
|
|
@@ -230,54 +229,9 @@
|
|
|
230
229
|
}
|
|
231
230
|
};
|
|
232
231
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
});
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
const LeftFooterAction = leftFooterAction => {
|
|
240
|
-
const {
|
|
241
|
-
text,
|
|
242
|
-
actionType,
|
|
243
|
-
disabled,
|
|
244
|
-
icon,
|
|
245
|
-
action
|
|
246
|
-
} = leftFooterAction;
|
|
247
|
-
|
|
248
|
-
switch (actionType) {
|
|
249
|
-
case 'button':
|
|
250
|
-
return /*#__PURE__*/React.createElement(_Button.Button, {
|
|
251
|
-
id: 'left-action-button',
|
|
252
|
-
type: leftFooterAction?.type,
|
|
253
|
-
disabled: disabled,
|
|
254
|
-
loading: leftFooterAction?.loading,
|
|
255
|
-
icon: icon,
|
|
256
|
-
size: size,
|
|
257
|
-
onClick: action,
|
|
258
|
-
variant: leftFooterAction?.variant ?? 'secondary',
|
|
259
|
-
style: {
|
|
260
|
-
order: -1,
|
|
261
|
-
marginRight: 'auto'
|
|
262
|
-
}
|
|
263
|
-
}, text);
|
|
264
|
-
|
|
265
|
-
case 'hyperlink':
|
|
266
|
-
return /*#__PURE__*/React.createElement(_.HyperLink, {
|
|
267
|
-
id: "left-action-hyperlink",
|
|
268
|
-
className: "footer-action",
|
|
269
|
-
href: leftFooterAction.href,
|
|
270
|
-
disabled: disabled,
|
|
271
|
-
variant: "default"
|
|
272
|
-
}, icon && getLeftActionIconElement(icon), text);
|
|
273
|
-
|
|
274
|
-
case 'note':
|
|
275
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
276
|
-
className: "footer-action note"
|
|
277
|
-
}, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
|
|
278
|
-
}
|
|
279
|
-
};
|
|
280
|
-
|
|
232
|
+
buttons?.reverse();
|
|
233
|
+
const lastLeftButton = buttons?.find(a => a.position === 'left');
|
|
234
|
+
buttons?.reverse();
|
|
281
235
|
return /*#__PURE__*/React.createElement(_ModalContainer2.default, {
|
|
282
236
|
showModal: isModalOpen,
|
|
283
237
|
closeModal: closeModalAndClearInput,
|
|
@@ -318,8 +272,12 @@
|
|
|
318
272
|
size: size,
|
|
319
273
|
onClick: b.action,
|
|
320
274
|
type: b.type,
|
|
321
|
-
variant: b.variant
|
|
322
|
-
|
|
275
|
+
variant: b.variant,
|
|
276
|
+
style: b.position === 'left' ? {
|
|
277
|
+
order: -1,
|
|
278
|
+
marginRight: b === lastLeftButton ? 'auto' : undefined
|
|
279
|
+
} : undefined
|
|
280
|
+
}, b.text))))));
|
|
323
281
|
};
|
|
324
282
|
|
|
325
283
|
ModalDialog.propTypes = {
|
|
@@ -327,7 +285,11 @@
|
|
|
327
285
|
closeModalAndClearInput: _propTypes2.default.any.isRequired,
|
|
328
286
|
title: _propTypes2.default.string,
|
|
329
287
|
topImage: _propTypes2.default.any,
|
|
330
|
-
buttons: _propTypes2.default.
|
|
288
|
+
buttons: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
|
289
|
+
action: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.func]),
|
|
290
|
+
text: _propTypes2.default.string.isRequired,
|
|
291
|
+
position: _propTypes2.default.oneOf(['left', 'right'])
|
|
292
|
+
})),
|
|
331
293
|
tooltip: _propTypes2.default.string,
|
|
332
294
|
backButton: _propTypes2.default.func,
|
|
333
295
|
closeAction: _propTypes2.default.func.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","React","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","size","COLORS","black","ModalBackButton","getLeftActionIconElement","icon","LeftFooterAction","leftFooterAction","action","order","marginRight","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HyperLink } from '..';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { ButtonAction, LeftFooterAction, LeftFooterActionBase, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string;\n state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n}) => {\n const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n {tooltip && (\n <div id=\"tooltip\">\n <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </div>\n {tooltipOpen && <span>{tooltip}</span>}\n </div>\n )}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} />}\n\n <ModalFooter size={size}>\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["action","text","position","isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","React","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","size","COLORS","black","ModalBackButton","lastLeftButton","a","setTooltipOpen","neutral_600","tooltipOpen","b","order","marginRight","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n ModalBody,\n ModalFooter,\n ModalTitleSection,\n StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n action?: (() => void) | ((e: any) => void);\n text: string;\n position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string;\n state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state\n}) => {\n const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n buttons?.reverse();\n const lastLeftButton = buttons?.find(a => a.position === 'left');\n buttons?.reverse();\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n {tooltip && (\n <div id=\"tooltip\">\n <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </div>\n {tooltipOpen && <span>{tooltip}</span>}\n </div>\n )}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n { note && <ModalNote note={note} state={state} size={size}/> }\n\n <ModalFooter size={size}>\n {buttons?.map((b, i) => (\n <Button key={b.id || i}\n id={b.id}\n disabled={b.disabled}\n loading={b.loading}\n size={size}\n onClick={b.action}\n type={b.type}\n variant={b.variant}\n style={\n b.position === 'left'\n ? {\n order: -1,\n marginRight: b === lastLeftButton ? 'auto' : undefined\n }\n : undefined\n }>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
border-radius: 2px;
|
|
110
110
|
|
|
111
111
|
span {
|
|
112
|
-
display:
|
|
112
|
+
display:block;
|
|
113
113
|
width: 80%;
|
|
114
114
|
margin-left: 8px;
|
|
115
115
|
color: ${props => getNoteMessageColor(props.state)};
|
|
@@ -134,19 +134,6 @@
|
|
|
134
134
|
justify-content: flex-end;
|
|
135
135
|
|
|
136
136
|
gap: ${props => props?.size === 'large' ? `16px` : '8px'};
|
|
137
|
-
|
|
138
|
-
.footer-action {
|
|
139
|
-
order: -1;
|
|
140
|
-
margin-right: auto;
|
|
141
|
-
display: flex;
|
|
142
|
-
align-items: center;
|
|
143
|
-
font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
|
|
144
|
-
gap: ${props => props?.size === _types.Size.Large ? `8px` : props?.size === _types.Size.Small ? '4px' : '6px'};
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.footer-action.note {
|
|
148
|
-
color: ${_.COLORS.neutral_600};
|
|
149
|
-
}
|
|
150
137
|
`;
|
|
151
138
|
|
|
152
139
|
const getBackgroundColor = exports.getBackgroundColor = state => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","StyledModalHeader","height","Column","div","ModalTitleSection","CloseButtonWrapper","css","Size","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","
|
|
1
|
+
{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","StyledModalHeader","height","Column","div","ModalTitleSection","CloseButtonWrapper","css","Size","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","state","COLORS"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 0 calc(50% - 5px);\n flex-direction: column;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n display: flex;\n div#tooltip {\n margin-left: 12px;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n position: absolute;\n right: 0;\n top: 0;\n margin: -12px !important;\n `\n : css`\n position: absolute;\n top: 0;\n right: 0;\n left: unset;\n margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n left: 0;\n top: 0;\n position: absolute;\n margin: -12px 0 0 -12px !important;\n `\n : css`\n position: unset;\n margin: -12px 0 0 -12px !important;\n `}\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n background-color: ${(props)=> getBackgroundColor(props.state)};\n font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display:block;\n width: 80%;\n margin-left: 8px;\n color: ${(props)=> getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n switch(state){\n case 'positive': return COLORS.correct_100;\n case 'warning': return COLORS.warning_100;\n case 'critical': return COLORS.critical_100;\n default: return COLORS.primary_100;\n }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n switch(state){\n case 'positive': return COLORS.correct_700;\n case 'warning': return COLORS.warning_700;\n case 'critical': return COLORS.critical_700;\n default: return COLORS.primary_700;\n }\n}"],"file":"ModalStyles.js"}
|
package/dist/umd/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink", "./NotificationDot"], factory);
|
|
3
|
+
define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink", "./NotificationDot", "./Accordion"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"), require("./NotificationDot"));
|
|
5
|
+
factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"), require("./NotificationDot"), require("./Accordion"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink, global.NotificationDot);
|
|
10
|
+
factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink, global.NotificationDot, global.Accordion);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink, _NotificationDot) {
|
|
13
|
+
})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink, _NotificationDot, _Accordion) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -268,5 +268,14 @@
|
|
|
268
268
|
}
|
|
269
269
|
});
|
|
270
270
|
});
|
|
271
|
+
Object.keys(_Accordion).forEach(function (key) {
|
|
272
|
+
if (key === "default" || key === "__esModule") return;
|
|
273
|
+
Object.defineProperty(exports, key, {
|
|
274
|
+
enumerable: true,
|
|
275
|
+
get: function () {
|
|
276
|
+
return _Accordion[key];
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
});
|
|
271
280
|
});
|
|
272
281
|
//# sourceMappingURL=index.js.map
|
package/dist/umd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot'
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ButtonProps } from '../Button/Button';
|
|
2
|
-
import { HyperlinkProps } from '../HyperLink/HyperLink';
|
|
3
|
-
export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
|
|
4
|
-
action?: (() => void) | ((e: any) => void);
|
|
5
|
-
text: string;
|
|
6
|
-
}
|
|
7
|
-
export interface LeftFooterActionBase {
|
|
8
|
-
actionType: 'hyperlink' | 'note' | 'button';
|
|
9
|
-
text: string;
|
|
10
|
-
icon?: React.ReactNode;
|
|
11
|
-
action?: (() => void) | ((e: any) => void);
|
|
12
|
-
}
|
|
13
|
-
export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
|
|
14
|
-
}
|
|
15
|
-
export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
|
|
16
|
-
text: string;
|
|
17
|
-
}
|
|
18
|
-
export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
(function (global, factory) {
|
|
2
|
-
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports"], factory);
|
|
4
|
-
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports);
|
|
6
|
-
} else {
|
|
7
|
-
var mod = {
|
|
8
|
-
exports: {}
|
|
9
|
-
};
|
|
10
|
-
factory(mod.exports);
|
|
11
|
-
global.undefined = mod.exports;
|
|
12
|
-
}
|
|
13
|
-
})(this, function (exports) {
|
|
14
|
-
"use strict";
|
|
15
|
-
|
|
16
|
-
Object.defineProperty(exports, "__esModule", {
|
|
17
|
-
value: true
|
|
18
|
-
});
|
|
19
|
-
});
|
|
20
|
-
//# sourceMappingURL=ModalTypes.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"ModalTypes.js"}
|