@popsure/dirty-swan 0.33.3 → 0.33.5
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/cjs/index.js +31 -18
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/dateSelector/index.d.ts +11 -11
- package/dist/cjs/lib/components/dateSelector/index.stories.d.ts +65 -0
- package/dist/cjs/lib/components/modal/bottomModal/index.d.ts +1 -2
- package/dist/cjs/lib/components/modal/bottomOrRegularModal/index.d.ts +1 -2
- package/dist/cjs/lib/components/modal/index.d.ts +3 -3
- package/dist/cjs/lib/components/modal/index.stories.d.ts +62 -0
- package/dist/cjs/lib/components/modal/regularModal/index.d.ts +1 -2
- package/dist/cjs/lib/components/multiDropzone/index.d.ts +4 -4
- package/dist/cjs/lib/components/multiDropzone/index.stories.d.ts +72 -0
- package/dist/cjs/lib/index.d.ts +2 -2
- package/dist/cjs/lib/util/images/index.d.ts +12 -0
- package/dist/esm/components/dateSelector/index.js +6 -2179
- package/dist/esm/components/dateSelector/index.js.map +1 -1
- package/dist/esm/components/dateSelector/index.stories.js +92 -0
- package/dist/esm/components/dateSelector/index.stories.js.map +1 -0
- package/dist/esm/components/dateSelector/index.test.js +1 -1
- package/dist/esm/components/dateSelector/index.test.js.map +1 -1
- package/dist/esm/components/input/checkbox/index.stories.js +1 -1
- package/dist/esm/components/modal/bottomModal/index.js +3 -3
- package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
- package/dist/esm/components/modal/bottomOrRegularModal/index.js +5 -5
- package/dist/esm/components/modal/bottomOrRegularModal/index.js.map +1 -1
- package/dist/esm/components/modal/index.stories.js +118 -0
- package/dist/esm/components/modal/index.stories.js.map +1 -0
- package/dist/esm/components/modal/regularModal/index.js +3 -3
- package/dist/esm/components/modal/regularModal/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.js +3 -3
- package/dist/esm/components/multiDropzone/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.stories.js +147 -0
- package/dist/esm/components/multiDropzone/index.stories.js.map +1 -0
- package/dist/esm/components/multiDropzone/index.test.js +2 -2
- package/dist/esm/components/multiDropzone/index.test.js.map +1 -1
- package/dist/esm/index-31224f74.js +26 -0
- package/dist/esm/index-31224f74.js.map +1 -0
- package/dist/esm/index-639cf8b3.js +2179 -0
- package/dist/esm/index-639cf8b3.js.map +1 -0
- package/dist/esm/index.js +6 -6
- package/dist/esm/lib/components/dateSelector/index.d.ts +11 -11
- package/dist/esm/lib/components/dateSelector/index.stories.d.ts +65 -0
- package/dist/esm/lib/components/modal/bottomModal/index.d.ts +1 -2
- package/dist/esm/lib/components/modal/bottomOrRegularModal/index.d.ts +1 -2
- package/dist/esm/lib/components/modal/index.d.ts +3 -3
- package/dist/esm/lib/components/modal/index.stories.d.ts +62 -0
- package/dist/esm/lib/components/modal/regularModal/index.d.ts +1 -2
- package/dist/esm/lib/components/multiDropzone/index.d.ts +4 -4
- package/dist/esm/lib/components/multiDropzone/index.stories.d.ts +72 -0
- package/dist/esm/lib/index.d.ts +2 -2
- package/dist/esm/lib/util/images/index.d.ts +12 -0
- package/dist/esm/util/images/index.stories.js +7 -4
- package/dist/esm/util/images/index.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +1 -1
- package/src/lib/components/dateSelector/index.stories.tsx +104 -0
- package/src/lib/components/dateSelector/index.test.tsx +2 -2
- package/src/lib/components/dateSelector/index.tsx +14 -14
- package/src/lib/components/modal/bottomModal/index.tsx +1 -1
- package/src/lib/components/modal/bottomOrRegularModal/index.tsx +2 -2
- package/src/lib/components/modal/index.stories.tsx +254 -0
- package/src/lib/components/modal/index.ts +3 -3
- package/src/lib/components/modal/regularModal/index.tsx +1 -1
- package/src/lib/components/multiDropzone/index.stories.tsx +228 -0
- package/src/lib/components/multiDropzone/index.test.tsx +1 -1
- package/src/lib/components/multiDropzone/index.tsx +6 -6
- package/src/lib/index.tsx +3 -2
- package/src/lib/util/images/index.stories.tsx +20 -12
- package/src/lib/util/images/index.ts +23 -9
- package/dist/esm/index-db2e797f.js +0 -13
- package/dist/esm/index-db2e797f.js.map +0 -1
- package/src/lib/components/dateSelector/index.stories.mdx +0 -106
- package/src/lib/components/modal/index.stories.mdx +0 -313
- package/src/lib/components/multiDropzone/index.stories.mdx +0 -187
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../node_modules/dayjs/locale/de.js","../../../../../src/lib/components/dateSelector/index.stories.tsx"],"sourcesContent":["!function(e,n){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=n(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],n):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_de=n(e.dayjs)}(this,(function(e){\"use strict\";function n(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=n(e),a={s:\"ein paar Sekunden\",m:[\"eine Minute\",\"einer Minute\"],mm:\"%d Minuten\",h:[\"eine Stunde\",\"einer Stunde\"],hh:\"%d Stunden\",d:[\"ein Tag\",\"einem Tag\"],dd:[\"%d Tage\",\"%d Tagen\"],M:[\"ein Monat\",\"einem Monat\"],MM:[\"%d Monate\",\"%d Monaten\"],y:[\"ein Jahr\",\"einem Jahr\"],yy:[\"%d Jahre\",\"%d Jahren\"]};function i(e,n,t){var i=a[t];return Array.isArray(i)&&(i=i[n?0:1]),i.replace(\"%d\",e)}var r={name:\"de\",weekdays:\"Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag\".split(\"_\"),weekdaysShort:\"So._Mo._Di._Mi._Do._Fr._Sa.\".split(\"_\"),weekdaysMin:\"So_Mo_Di_Mi_Do_Fr_Sa\".split(\"_\"),months:\"Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember\".split(\"_\"),monthsShort:\"Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez\".split(\"_\"),ordinal:function(e){return e+\".\"},weekStart:1,yearStart:4,formats:{LTS:\"HH:mm:ss\",LT:\"HH:mm\",L:\"DD.MM.YYYY\",LL:\"D. MMMM YYYY\",LLL:\"D. MMMM YYYY HH:mm\",LLLL:\"dddd, D. MMMM YYYY HH:mm\"},relativeTime:{future:\"in %s\",past:\"vor %s\",s:i,m:i,mm:i,h:i,hh:i,d:i,dd:i,M:i,MM:i,y:i,yy:i}};return t.default.locale(r,null,!0),r}));","import { DateSelector, DateSelectorProps } from '.';\nimport de from 'dayjs/locale/de';\n\nconst story = {\n title: 'JSX/DateSelector',\n component: DateSelector,\n decorators: [\n (Story: any) => (\n <div style={{ minHeight: '320px', paddingTop: '80px' }}>\n <Story />\n </div>\n ),\n ],\n argTypes: {\n yearBoundaries: {\n description: 'Object containing the min and max year boundaries to show.',\n defaultValue: {\n min: 1920, \n max: 2001\n }\n },\n displayCalendar: {\n description: 'Whether the calendar icon/button trigger should show',\n defaultValue: false\n },\n onChange: {\n description: 'Called when the value is changed. Must be a valid date to be triggered',\n action: true,\n table: {\n category: 'Callbacks',\n type: { \n summary: '(date: YYYY-MM-DD) => void'\n },\n },\n },\n value: {\n defaultValue: '2000-12-12',\n description: 'Value of the input',\n table: {\n type: { \n summary: 'YYYY-MM-DD'\n },\n },\n },\n dayjsLocale: {\n description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`\n },\n placeholders: {\n description: 'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.'\n },\n firstDayOfWeek: {\n description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`\n }\n },\n parameters: {\n componentSubtitle: 'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',\n design: {\n url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D293%253A169',\n type: 'figma'\n },\n docs: {\n source: {\n excludeDecorators: true,\n },\n },\n },\n};\n\nexport const DateSelectorStory = ({\n displayCalendar,\n onChange,\n yearBoundaries,\n value\n}: DateSelectorProps) => (\n <DateSelector\n onChange={onChange}\n displayCalendar={displayCalendar}\n yearBoundaries={yearBoundaries}\n value={value}\n />\n);\n\nDateSelectorStory.storyName = \"DateSelector\";\n\nexport const DateSelectorLocalisation = ({ onChange, value, yearBoundaries }: DateSelectorProps) => (\n <>\n {/** import de from 'dayjs/locale/de'; */}\n <DateSelector\n value={value}\n yearBoundaries={yearBoundaries}\n onChange={onChange}\n displayCalendar={true}\n placeholders={{\n day: 'Tag',\n month: 'Monat',\n year: 'Jahr',\n }}\n dayjsLocale={de}\n firstDayOfWeek={2}\n />\n </>\n);\n\nexport default story;\n"],"names":["require$$0","this","_jsx"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { c as customRender } from '../../customRender-4157fcff.js';
|
|
4
|
-
import DateSelector from '
|
|
4
|
+
import { D as DateSelector } from '../../index-639cf8b3.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../_commonjsHelpers-e7f67fd8.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/dateSelector/index.test.tsx"],"sourcesContent":["import { render
|
|
1
|
+
{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/dateSelector/index.test.tsx"],"sourcesContent":["import { render } from '../../util/testUtils';\n\nimport { DateSelector } from '.';\n\nconst setup = (date: string, onChange: (date: string) => void = () => {}) => {\n return render(\n <DateSelector\n value={date}\n yearBoundaries={{ min: 2020, max: 2025 }}\n onChange={onChange}\n displayCalendar\n />\n );\n};\n\ndescribe('DateSelector component', () => {\n it('should return the selected date when clicking on the calendar', async () => {\n const callback = jest.fn();\n const date = '2024-01-01';\n const expectedDate = '2024-01-17';\n const { getByAltText, getByLabelText, user } = setup(date, callback);\n const button = getByAltText('calendar');\n\n await user.click(button);\n\n const calendarCell = getByLabelText(/17 2024/);\n\n await user.click(calendarCell);\n\n expect(callback).toHaveBeenCalledWith(expectedDate);\n\n expect(calendarCell).not.toBeVisible();\n });\n\n it('should close the calendar when clicking outside', async () => {\n const callback = jest.fn();\n const date = '2024-01-01';\n const { getByAltText, getByLabelText, user } = setup(date, callback);\n const button = getByAltText('calendar');\n\n await user.click(button);\n\n const calendarCell = getByLabelText(/17 2024/);\n expect(calendarCell).toBeVisible();\n\n // click outside the calendar\n await user.click(document.body);\n\n expect(callback).not.toHaveBeenCalled();\n\n expect(calendarCell).not.toBeVisible();\n });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAG,UAAC,IAAY,EAAE,QAA2C;IAA3C,yBAAA,EAAA,0BAA2C;IACtE,OAAOA,YAAM,CACXC,IAAC,YAAY,IACX,KAAK,EAAE,IAAI,EACX,cAAc,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EACxC,QAAQ,EAAE,QAAQ,EAClB,eAAe,iBACf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,wBAAwB,EAAE;IACjC,EAAE,CAAC,+DAA+D,EAAE;;;;;oBAC5D,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,IAAI,GAAG,YAAY,CAAC;oBACpB,YAAY,GAAG,YAAY,CAAC;oBAC5B,KAAyC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAA5D,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,IAAI,UAAA,CAA2B;oBAC/D,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;oBAExC,qBAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA;;oBAAxB,SAAwB,CAAC;oBAEnB,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;oBAE/C,qBAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;oBAE/B,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;oBAEpD,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;;;;SACxC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE;;;;;oBAC9C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,IAAI,GAAG,YAAY,CAAC;oBACpB,KAAyC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAA5D,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,IAAI,UAAA,CAA2B;oBAC/D,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;oBAExC,qBAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA;;oBAAxB,SAAwB,CAAC;oBAEnB,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;oBAC/C,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;;oBAGnC,qBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAA;;;oBAA/B,SAA+B,CAAC;oBAEhC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;oBAExC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;;;;SACxC,CAAC,CAAC;AACL,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Checkbox } from './index.js';
|
|
4
|
-
import { i as images } from '../../../index-
|
|
4
|
+
import { i as images } from '../../../index-31224f74.js';
|
|
5
5
|
import '../../../tslib.es6-5bc94358.js';
|
|
6
6
|
import '../../../index-e9e37a34.js';
|
|
7
7
|
import '../../../style-inject.es-1f59c1d0.js';
|
|
@@ -11,7 +11,7 @@ styleInject(css_248z);
|
|
|
11
11
|
|
|
12
12
|
var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
13
13
|
|
|
14
|
-
var BottomModal =
|
|
14
|
+
var BottomModal = function (_a) {
|
|
15
15
|
var title = _a.title, isOpen = _a.isOpen, children = _a.children, onClose = _a.onClose, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c;
|
|
16
16
|
var _d = useState(0), containerXOffset = _d[0], setContainerXOffset = _d[1];
|
|
17
17
|
var _e = useOnClose(onClose, isOpen, dismissible), isClosing = _e.isClosing, handleContainerClick = _e.handleContainerClick, handleOnClose = _e.handleOnClose, handleOnOverlayClick = _e.handleOnOverlayClick;
|
|
@@ -29,7 +29,7 @@ var BottomModal = (function (_a) {
|
|
|
29
29
|
}) }, { children: [jsx("div", __assign({ className: "p-h4 " + styles.title }, { children: title }), void 0),
|
|
30
30
|
dismissible && (jsx("button", __assign({ type: "button", className: styles.close, onClick: handleOnClose }, { children: jsx("img", { src: imageClose, alt: "Close" }, void 0) }), void 0))] }), void 0),
|
|
31
31
|
jsx("div", __assign({ className: styles.content }, { children: children }), void 0)] }), void 0) }), void 0));
|
|
32
|
-
}
|
|
32
|
+
};
|
|
33
33
|
|
|
34
|
-
export
|
|
34
|
+
export { BottomModal };
|
|
35
35
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/bottomModal/img/close.svg","../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React, { useState, useCallback } from 'react';\n\nimport { Props } from '..';\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport useOnClose from '../hooks/useOnClose';\nimport classNames from 'classnames';\n\nexport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/bottomModal/img/close.svg","../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React, { useState, useCallback } from 'react';\n\nimport { Props } from '..';\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport useOnClose from '../hooks/useOnClose';\nimport classNames from 'classnames';\n\nexport const BottomModal = ({\n title,\n isOpen,\n children,\n onClose,\n className = '',\n dismissible = true,\n}: Props) => {\n const [containerXOffset, setContainerXOffset] = useState(0);\n const {\n isClosing,\n handleContainerClick,\n handleOnClose,\n handleOnOverlayClick\n } = useOnClose(\n onClose,\n isOpen,\n dismissible\n );\n\n const containerRef = useCallback((node: HTMLDivElement) => {\n if (node !== null) {\n setContainerXOffset(\n Math.max(\n window.innerHeight * 0.1,\n window.innerHeight - node.getBoundingClientRect().height\n )\n );\n }\n }, []);\n\n if (!isOpen) {\n return <></>;\n }\n\n return (\n <div\n className={isClosing ? styles['overlay--close'] : styles.overlay}\n onClick={handleOnOverlayClick}\n >\n <div\n className={`${\n isClosing ? styles['container--close'] : styles.container\n } ${className}`}\n ref={containerRef}\n style={{ top: `${containerXOffset}px` }}\n onClick={handleContainerClick}\n >\n <div className={classNames(styles.header, {\n 'jc-between': !!title,\n 'jc-end': !title\n })}>\n <div className={`p-h4 ${styles.title}`}>{title}</div>\n {dismissible && (\n <button\n type=\"button\"\n className={styles.close}\n onClick={handleOnClose}\n >\n <img src={imageClose} alt=\"Close\" />\n </button>\n )}\n </div>\n <div className={styles.content}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICSF,WAAW,GAAG,UAAC,EAOpB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAA0C,QAAQ,CAAC,CAAC,CAAC,EAApD,gBAAgB,QAAA,EAAE,mBAAmB,QAAe,CAAC;IACtD,IAAA,KAKD,UAAU,CACb,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAAC,UAAC,IAAoB;QACpD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,mBAAmB,CACjB,IAAI,CAAC,GAAG,CACN,MAAM,CAAC,WAAW,GAAG,GAAG,EACxB,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CACzD,CACF,CAAC;SACH;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BC,uBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,EACf,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,GAAG,EAAK,gBAAgB,OAAI,EAAE,EACvC,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;wBACxC,YAAY,EAAE,CAAC,CAAC,KAAK;wBACrB,QAAQ,EAAE,CAAC,KAAK;qBACjB,CAAC,iBACAF,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;wBACpD,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG;gBACNA,sBAAK,SAAS,EAAE,MAAM,CAAC,OAAO,gBAAG,QAAQ,YAAO,aAC5C,YACF,EACN;AACJ;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useRef, useState, useEffect } from 'react';
|
|
4
|
-
import BottomModal from '../bottomModal/index.js';
|
|
5
|
-
import RegularModal from '../regularModal/index.js';
|
|
4
|
+
import { BottomModal } from '../bottomModal/index.js';
|
|
5
|
+
import { RegularModal } from '../regularModal/index.js';
|
|
6
6
|
import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
|
|
7
7
|
import '../../../useOnClose-d818a54f.js';
|
|
8
8
|
import '../../../index-e9e37a34.js';
|
|
@@ -11,7 +11,7 @@ var css_248z = "@media (min-width: 34rem) {\n .style-module_mobile__3k175 {\n
|
|
|
11
11
|
var styles = {"mobile":"style-module_mobile__3k175","desktop":"style-module_desktop__2lclr"};
|
|
12
12
|
styleInject(css_248z);
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var BottomOrRegularModal = function (_a) {
|
|
15
15
|
var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
|
|
16
16
|
var mobileRef = useRef(null);
|
|
17
17
|
var _b = useState('desktop'), visibleSize = _b[0], setVisibleSize = _b[1];
|
|
@@ -30,7 +30,7 @@ var index = (function (_a) {
|
|
|
30
30
|
}, []);
|
|
31
31
|
return (jsxs(Fragment, { children: [jsx("div", __assign({ className: styles.mobile, ref: mobileRef }, { children: visibleSize === 'mobile' && jsx(BottomModal, __assign({}, props, { isOpen: isOpen }), void 0) }), void 0),
|
|
32
32
|
visibleSize === 'desktop' && (jsx("div", __assign({ className: styles.desktop }, { children: jsx(RegularModal, __assign({}, props, { isOpen: isOpen }), void 0) }), void 0))] }, void 0));
|
|
33
|
-
}
|
|
33
|
+
};
|
|
34
34
|
|
|
35
|
-
export
|
|
35
|
+
export { BottomOrRegularModal };
|
|
36
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomOrRegularModal/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { Props, RegularModal } from '..';\nimport BottomModal from '../bottomModal';\n\nimport styles from './style.module.scss';\n\nexport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomOrRegularModal/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { Props, RegularModal } from '..';\nimport { BottomModal } from '../bottomModal';\n\nimport styles from './style.module.scss';\n\nexport const BottomOrRegularModal = ({ isOpen, ...props }: Props) => {\n const mobileRef = useRef<HTMLDivElement>(null);\n const [visibleSize, setVisibleSize] = useState<'desktop' | 'mobile'>(\n 'desktop'\n );\n\n const handleResize = () => {\n setVisibleSize(\n mobileRef.current !== null &&\n window.getComputedStyle(mobileRef.current).display !== 'none'\n ? 'mobile'\n : 'desktop'\n );\n };\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n handleResize();\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return (\n <>\n <div className={styles.mobile} ref={mobileRef}>\n {visibleSize === 'mobile' && <BottomModal {...props} isOpen={isOpen} />}\n </div>\n {visibleSize === 'desktop' && (\n <div className={styles.desktop}>\n <RegularModal {...props} isOpen={isOpen} />\n </div>\n )}\n </>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;IAOa,oBAAoB,GAAG,UAAC,EAA2B;IAAzB,IAAA,MAAM,YAAA,EAAK,KAAK,cAAlB,UAAoB,CAAF;IACrD,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAgC,QAAQ,CAC5C,SAAS,CACV,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC,CAAC;IAEF,IAAM,YAAY,GAAG;QACnB,cAAc,CACZ,SAAS,CAAC,OAAO,KAAK,IAAI;YACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,MAAM;cAC3D,QAAQ;cACR,SAAS,CACd,CAAC;KACH,CAAC;IAEF,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,YAAY,EAAE,CAAC;QACf,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;SACpD,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,QACEA,4BACEC,sBAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,gBAC1C,WAAW,KAAK,QAAQ,IAAIA,IAAC,WAAW,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,YAAI,YACnE;YACL,WAAW,KAAK,SAAS,KACxBA,sBAAK,SAAS,EAAE,MAAM,CAAC,OAAO,gBAC5BA,IAAC,YAAY,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,YAAI,YACvC,CACP,YACA,EACH;AACJ;;;;"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { _ as __assign } from '../../tslib.es6-5bc94358.js';
|
|
2
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { BottomModal } from './bottomModal/index.js';
|
|
5
|
+
import { RegularModal } from './regularModal/index.js';
|
|
6
|
+
import { BottomOrRegularModal } from './bottomOrRegularModal/index.js';
|
|
7
|
+
import { Markdown } from '../markdown/index.js';
|
|
8
|
+
import '../../style-inject.es-1f59c1d0.js';
|
|
9
|
+
import '../../useOnClose-d818a54f.js';
|
|
10
|
+
import '../../index-e9e37a34.js';
|
|
11
|
+
import '../../index-171a0108.js';
|
|
12
|
+
import '../../index-dd80248b.js';
|
|
13
|
+
import '../../_commonjsHelpers-e7f67fd8.js';
|
|
14
|
+
import 'path';
|
|
15
|
+
import 'querystring';
|
|
16
|
+
|
|
17
|
+
var story = {
|
|
18
|
+
title: 'JSX/Modals',
|
|
19
|
+
component: BottomOrRegularModal,
|
|
20
|
+
argTypes: {
|
|
21
|
+
title: {
|
|
22
|
+
defaultValue: "Modal title",
|
|
23
|
+
description: "The title that needs to be displayed on the modal",
|
|
24
|
+
},
|
|
25
|
+
isOpen: {
|
|
26
|
+
defaultValue: false,
|
|
27
|
+
description: "When set to `true`, the modal is displayed. When set to `false` the modal gets removed",
|
|
28
|
+
},
|
|
29
|
+
dismissible: {
|
|
30
|
+
defaultValue: true,
|
|
31
|
+
description: "The content that gets displayed on the modal",
|
|
32
|
+
},
|
|
33
|
+
className: {
|
|
34
|
+
defaultValue: '',
|
|
35
|
+
description: 'Any additional className',
|
|
36
|
+
},
|
|
37
|
+
children: {
|
|
38
|
+
defaultValue: 'Modal content to be displayed',
|
|
39
|
+
description: 'The content that gets displayed on the modal',
|
|
40
|
+
type: 'text',
|
|
41
|
+
table: {
|
|
42
|
+
type: {
|
|
43
|
+
summary: 'ReactNode'
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
onClose: {
|
|
48
|
+
description: 'Callback when the user close the modal',
|
|
49
|
+
action: true,
|
|
50
|
+
table: {
|
|
51
|
+
category: "Callbacks",
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
parameters: {
|
|
56
|
+
componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
|
|
57
|
+
docs: {
|
|
58
|
+
description: {
|
|
59
|
+
component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
var BottomOrRegularModalStory = function (_a) {
|
|
65
|
+
var children = _a.children, className = _a.className, dismissible = _a.dismissible, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
|
|
66
|
+
var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
|
|
67
|
+
var handleOnClose = function () {
|
|
68
|
+
onClose();
|
|
69
|
+
setDisplay(false);
|
|
70
|
+
};
|
|
71
|
+
return (jsxs(Fragment, { children: [jsx("button", __assign({ className: "p-btn--primary wmn2", onClick: function () { return setDisplay(true); } }, { children: "Click to open modal" }), void 0),
|
|
72
|
+
jsx(BottomOrRegularModal, __assign({ dismissible: dismissible, className: className, title: title, isOpen: display, onClose: handleOnClose }, { children: jsxs("div", __assign({ style: { padding: '0 24px 24px 24px' } }, { children: [jsx("div", { children: children }, void 0),
|
|
73
|
+
jsx("button", __assign({ className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); } }, { children: "Continue" }), void 0)] }), void 0) }), void 0)] }, void 0));
|
|
74
|
+
};
|
|
75
|
+
BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
|
|
76
|
+
var RegularModalStory = function (_a) {
|
|
77
|
+
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
|
|
78
|
+
var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
|
|
79
|
+
var handleOnClose = function () {
|
|
80
|
+
onClose();
|
|
81
|
+
setDisplay(false);
|
|
82
|
+
};
|
|
83
|
+
return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx(Markdown, { children: "If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal)." }, void 0),
|
|
84
|
+
jsx("button", __assign({ className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); } }, { children: "Click to open modal" }), void 0),
|
|
85
|
+
jsx(RegularModal, __assign({ title: title, isOpen: display, onClose: handleOnClose }, { children: jsxs("div", __assign({ style: { padding: '0 24px 24px 24px' } }, { children: [jsx("div", { children: children }, void 0),
|
|
86
|
+
jsx("button", __assign({ className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); } }, { children: "Continue" }), void 0)] }), void 0) }), void 0)] }, void 0));
|
|
87
|
+
};
|
|
88
|
+
RegularModalStory.storyName = 'RegularModal';
|
|
89
|
+
var BottomModalStory = function (_a) {
|
|
90
|
+
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
|
|
91
|
+
var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
|
|
92
|
+
var handleOnClose = function () {
|
|
93
|
+
onClose();
|
|
94
|
+
setDisplay(false);
|
|
95
|
+
};
|
|
96
|
+
return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx(Markdown, { children: "If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal)." }, void 0),
|
|
97
|
+
jsx("button", __assign({ className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); } }, { children: "Click to open modal" }), void 0),
|
|
98
|
+
jsx(BottomModal, __assign({ title: title, isOpen: display, onClose: handleOnClose }, { children: jsxs("div", __assign({ style: { padding: '0 24px 24px 24px' } }, { children: [jsx("div", { children: children }, void 0),
|
|
99
|
+
jsx("button", __assign({ className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); } }, { children: "Continue" }), void 0)] }), void 0) }), void 0)] }, void 0));
|
|
100
|
+
};
|
|
101
|
+
BottomModalStory.storyName = 'BottomModal';
|
|
102
|
+
var NonDismissibleModal = function (_a) {
|
|
103
|
+
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
|
|
104
|
+
var _b = useState(isOpen), display = _b[0], setDisplay = _b[1];
|
|
105
|
+
var handleOnClose = function () {
|
|
106
|
+
onClose();
|
|
107
|
+
setDisplay(false);
|
|
108
|
+
};
|
|
109
|
+
return (jsxs(Fragment, { children: [jsx(Markdown, { children: "Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options." }, void 0),
|
|
110
|
+
jsx(Markdown, { children: "**Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false." }, void 0),
|
|
111
|
+
jsx("button", __assign({ className: "p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); } }, { children: "Click to open modal" }), void 0),
|
|
112
|
+
jsx(BottomOrRegularModal, __assign({ dismissible: false, title: title, isOpen: display, onClose: handleOnClose }, { children: jsxs("div", __assign({ style: { padding: '0 24px 24px 24px' } }, { children: [jsx("div", { children: children }, void 0),
|
|
113
|
+
jsx("button", __assign({ className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); } }, { children: "Continue" }), void 0)] }), void 0) }), void 0)] }, void 0));
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
export default story;
|
|
117
|
+
export { BottomModalStory, BottomOrRegularModalStory, NonDismissibleModal, RegularModalStory };
|
|
118
|
+
//# sourceMappingURL=index.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Markdown } from '../markdown';\n\nconst story = {\n title: 'JSX/Modals',\n component: BottomOrRegularModal,\n argTypes: {\n title: {\n defaultValue: \"Modal title\",\n description: \"The title that needs to be displayed on the modal\",\n },\n isOpen: {\n defaultValue: false,\n description: \"When set to `true`, the modal is displayed. When set to `false` the modal gets removed\",\n },\n dismissible: {\n defaultValue: true,\n description: \"The content that gets displayed on the modal\",\n },\n className: {\n defaultValue: '',\n description: 'Any additional className',\n },\n children: {\n defaultValue: 'Modal content to be displayed',\n description: 'The content that gets displayed on the modal',\n type: 'text',\n table: {\n type: {\n summary: 'ReactNode'\n }\n }\n },\n onClose: {\n description: 'Callback when the user close the modal',\n action: true,\n table: {\n category: \"Callbacks\",\n },\n },\n },\n parameters: {\n componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n docs: {\n description: {\n component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n }\n },\n },\n};\n\nexport const BottomOrRegularModalStory = ({\n children,\n className,\n dismissible,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <button\n className=\"p-btn--primary wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomOrRegularModal\n dismissible={dismissible}\n className={className}\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>\n {children}\n </div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n}\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. \n <Markdown>\n If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead.\n Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).\n </Markdown>\n\n <button\n className=\"p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <RegularModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>\n {children}\n </div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </RegularModal>\n </>\n );\n}\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon.\n <Markdown>\n If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead.\n Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).\n </Markdown>\n\n <button\n className=\"p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>\n {children}\n </div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomModal>\n </>\n );\n}\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const NonDismissibleModal = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <Markdown>\n Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.\n This prop can be useful if we want the user to explicitly interact with the modal options.\n </Markdown>\n\n <Markdown>\n **Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false.\n </Markdown>\n\n <button\n className=\"p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomOrRegularModal\n dismissible={false}\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>\n {children}\n </div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ styleInject(css_248z);
|
|
|
11
11
|
|
|
12
12
|
var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
13
13
|
|
|
14
|
-
var RegularModal =
|
|
14
|
+
var RegularModal = function (_a) {
|
|
15
15
|
var title = _a.title, isOpen = _a.isOpen, children = _a.children, onClose = _a.onClose, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c;
|
|
16
16
|
var _d = useOnClose(onClose, isOpen, dismissible), isClosing = _d.isClosing, handleContainerClick = _d.handleContainerClick, handleOnClose = _d.handleOnClose, handleOnOverlayClick = _d.handleOnOverlayClick;
|
|
17
17
|
if (!isOpen) {
|
|
@@ -22,7 +22,7 @@ var RegularModal = (function (_a) {
|
|
|
22
22
|
'jc-end': !title
|
|
23
23
|
}) }, { children: [title && jsx("div", __assign({ className: "p-h2 " + styles.title }, { children: title }), void 0),
|
|
24
24
|
dismissible && (jsx("button", __assign({ type: "button", className: styles.close, onClick: handleOnClose }, { children: jsx("img", { src: imageClose, alt: "Close" }, void 0) }), void 0))] }), void 0), children] }), void 0) }), void 0) }), void 0));
|
|
25
|
-
}
|
|
25
|
+
};
|
|
26
26
|
|
|
27
|
-
export
|
|
27
|
+
export { RegularModal };
|
|
28
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/regularModal/img/close.svg","../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React from 'react';\n\nimport { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport classNames from 'classnames';\n\nexport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/modal/regularModal/img/close.svg","../../../../../../src/lib/components/modal/regularModal/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import React from 'react';\n\nimport { Props } from '..';\nimport useOnClose from '../hooks/useOnClose';\n\nimport styles from './style.module.scss';\n\nimport imageClose from './img/close.svg';\nimport classNames from 'classnames';\n\nexport const RegularModal = ({\n title,\n isOpen,\n children,\n onClose,\n className = '',\n dismissible = true,\n}: Props) => {\n const {\n isClosing,\n handleContainerClick,\n handleOnClose,\n handleOnOverlayClick\n } = useOnClose(\n onClose,\n isOpen,\n dismissible\n );\n\n if (!isOpen) {\n return <></>;\n }\n\n return (\n <div\n className={isClosing ? styles['overlay--close'] : styles.overlay}\n onClick={handleOnOverlayClick}\n >\n <div\n className={`${\n isClosing ? styles['container--close'] : styles.container\n } ${className}`}\n >\n <div\n className={styles.body}\n onClick={handleContainerClick}\n >\n <div className={classNames(styles.header, {\n 'jc-between': !!title,\n 'jc-end': !title\n })}>\n {title && <div className={`p-h2 ${styles.title}`}>{title}</div>}\n {dismissible && (\n <button\n type=\"button\"\n className={styles.close}\n onClick={handleOnClose}\n >\n <img src={imageClose} alt=\"Close\" />\n </button>\n )}\n </div>\n {children}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAAA,iBAAe;;ICUF,YAAY,GAAG,UAAC,EAOrB;QANN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAKF,UAAU,CACZ,OAAO,EACP,MAAM,EACN,WAAW,CACZ,EARC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,aAAa,mBAAA,EACb,oBAAoB,0BAKrB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACX,OAAOA,yBAAK,CAAC;KACd;IAED,QACEA,sBACE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,EAChE,OAAO,EAAE,oBAAoB,gBAE7BA,sBACE,SAAS,EAAE,CACT,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,SAAS,UACvD,SAAW,gBAEfC,uBACE,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,OAAO,EAAE,oBAAoB,iBAE7BA,uBAAK,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;4BACxC,YAAY,EAAE,CAAC,CAAC,KAAK;4BACrB,QAAQ,EAAE,CAAC,KAAK;yBACjB,CAAC,iBACC,KAAK,IAAIF,sBAAK,SAAS,EAAE,UAAQ,MAAM,CAAC,KAAO,gBAAG,KAAK,YAAO;4BAC9D,WAAW,KACVA,yBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,gBAEtBA,aAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,OAAO,WAAG,YAC7B,CACV,aACG,EACL,QAAQ,aACL,YACF,YACF,EACN;AACJ;;;;"}
|
|
@@ -2805,9 +2805,9 @@ var getErrorMessage = function (_a, _b, textOverrides) {
|
|
|
2805
2805
|
}
|
|
2806
2806
|
};
|
|
2807
2807
|
|
|
2808
|
-
var
|
|
2808
|
+
var MultiDropzone = function (_a) {
|
|
2809
2809
|
var _b;
|
|
2810
|
-
var
|
|
2810
|
+
var uploadedFiles = _a.uploadedFiles, onFileSelect = _a.onFileSelect, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading, _c = _a.isCondensed, isCondensed = _c === void 0 ? false : _c, accept = _a.accept, _d = _a.maxFiles, maxFiles = _d === void 0 ? 0 : _d, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
|
|
2811
2811
|
var _e = useState([]), errors = _e[0], setErrors = _e[1];
|
|
2812
2812
|
var formattedAccept = getFormattedAcceptObject(accept);
|
|
2813
2813
|
var fileList = formatAcceptFileList(formattedAccept);
|
|
@@ -2858,5 +2858,5 @@ var MultiDropZone = function (_a) {
|
|
|
2858
2858
|
jsx(AnimateHeight, __assign({ duration: 300, height: isOverMaxFiles ? 'auto' : 0 }, { children: jsx("p", __assign({ className: "tc-red-500 p-p--small" }, { children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) || "Too many files." }), void 0) }), void 0)] }), void 0));
|
|
2859
2859
|
};
|
|
2860
2860
|
|
|
2861
|
-
export
|
|
2861
|
+
export { MultiDropzone };
|
|
2862
2862
|
//# sourceMappingURL=index.js.map
|