@coveord/plasma-mantine 48.25.4 → 48.26.0

package/dist/cjs/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n    /**\n     * Header component props (layout/Header)\n     */\n    header?: Omit<HeaderProps, 'children' | 'description'>;\n    /**\n     * The title text displayed on top of the modal\n     */\n    title: string;\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n    <MantineModal\n        {...otherProps}\n        styles={{title: {width: '100%'}}}\n        title={\n            <Header py={0} px={0} description={description} {...header}>\n                {title}\n            </Header>\n        }\n    >\n        {children}\n    </MantineModal>\n);\n"],"names":["Modal","children","title","header","description","otherProps","MantineModal","styles","width","Header","py","px"],"mappings":"AAAA;;;;+BAmBaA;;;eAAAA;;;;;;;oBAnBmC;sBAEd;AAiB3B,IAAMA,QAA6C,+BACtD;QADwDC,kBAAAA,UAAUC,eAAAA,OAAOC,gBAAAA,QAAQC,qBAAAA,aAAgBC;QAAzCJ;QAAUC;QAAOC;QAAQC;;WACjF,qBAACE,WAAY,uCACLD;QACJE,QAAQ;YAACL,OAAO;gBAACM,OAAO;YAAM;QAAC;QAC/BN,qBACI,qBAACO,cAAM;YAACC,IAAI;YAAGC,IAAI;YAAGP,aAAaA;WAAiBD;sBAC/CD;;kBAIRD;;AACS"}
+{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n    /**\n     * Header component props (layout/Header)\n     */\n    header?: Omit<HeaderProps, 'children' | 'description'>;\n    /**\n     * The title text displayed on top of the modal\n     */\n    title: ReactNode;\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n    <MantineModal\n        {...otherProps}\n        styles={{title: {width: '100%'}}}\n        title={\n            <Header py={0} px={0} description={description} {...header}>\n                {title}\n            </Header>\n        }\n    >\n        {children}\n    </MantineModal>\n);\n"],"names":["Modal","children","title","header","description","otherProps","MantineModal","styles","width","Header","py","px"],"mappings":"AAAA;;;;+BAmBaA;;;eAAAA;;;;;;;oBAnBmC;sBAEd;AAiB3B,IAAMA,QAA6C,+BACtD;QADwDC,kBAAAA,UAAUC,eAAAA,OAAOC,gBAAAA,QAAQC,qBAAAA,aAAgBC;QAAzCJ;QAAUC;QAAOC;QAAQC;;WACjF,qBAACE,WAAY,uCACLD;QACJE,QAAQ;YAACL,OAAO;gBAACM,OAAO;YAAM;QAAC;QAC/BN,qBACI,qBAACO,cAAM;YAACC,IAAI;YAAGC,IAAI;YAAGP,aAAaA;WAAiBD;sBAC/CD;;kBAIRD;;AACS"}

package/dist/definitions/components/modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from '@mantine/core';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import { HeaderProps } from '../header';
 export interface CustomModalProps extends Omit<ModalProps, 'title'> {
     /**
@@ -9,7 +9,7 @@ export interface CustomModalProps extends Omit<ModalProps, 'title'> {
     /**
      * The title text displayed on top of the modal
      */
-    title: string;
+    title: ReactNode;
     /**
      * The description text displayed inside the header underneath the title
      */

package/dist/definitions/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAYrD,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAYrD,CAAC"}

package/dist/esm/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n    /**\n     * Header component props (layout/Header)\n     */\n    header?: Omit<HeaderProps, 'children' | 'description'>;\n    /**\n     * The title text displayed on top of the modal\n     */\n    title: string;\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n    <MantineModal\n        {...otherProps}\n        styles={{title: {width: '100%'}}}\n        title={\n            <Header py={0} px={0} description={description} {...header}>\n                {title}\n            </Header>\n        }\n    >\n        {children}\n    </MantineModal>\n);\n"],"names":["Modal","MantineModal","Header","children","title","header","description","otherProps","styles","width","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,SAASC,YAAY,QAAmB,gBAAgB;AAEhE,SAAQC,MAAM,QAAoB,YAAY;AAiB9C,OAAO,IAAMF,QAA6C,+BACtD;QADwDG,kBAAAA,UAAUC,eAAAA,OAAOC,gBAAAA,QAAQC,qBAAAA,aAAgBC;QAAzCJ;QAAUC;QAAOC;QAAQC;;WACjF,KAACL,sDACOM;QACJC,QAAQ;YAACJ,OAAO;gBAACK,OAAO;YAAM;QAAC;QAC/BL,qBACI,KAACF;YAAOQ,IAAI;YAAGC,IAAI;YAAGL,aAAaA;WAAiBD;sBAC/CD;;kBAIRD;;AACS,EAChB"}
+{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n    /**\n     * Header component props (layout/Header)\n     */\n    header?: Omit<HeaderProps, 'children' | 'description'>;\n    /**\n     * The title text displayed on top of the modal\n     */\n    title: ReactNode;\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n    <MantineModal\n        {...otherProps}\n        styles={{title: {width: '100%'}}}\n        title={\n            <Header py={0} px={0} description={description} {...header}>\n                {title}\n            </Header>\n        }\n    >\n        {children}\n    </MantineModal>\n);\n"],"names":["Modal","MantineModal","Header","children","title","header","description","otherProps","styles","width","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,SAASC,YAAY,QAAmB,gBAAgB;AAEhE,SAAQC,MAAM,QAAoB,YAAY;AAiB9C,OAAO,IAAMF,QAA6C,+BACtD;QADwDG,kBAAAA,UAAUC,eAAAA,OAAOC,gBAAAA,QAAQC,qBAAAA,aAAgBC;QAAzCJ;QAAUC;QAAOC;QAAQC;;WACjF,KAACL,sDACOM;QACJC,QAAQ;YAACJ,OAAO;gBAACK,OAAO;YAAM;QAAC;QAC/BL,qBACI,KAACF;YAAOQ,IAAI;YAAGC,IAAI;YAAGL,aAAaA;WAAiBD;sBAC/CD;;kBAIRD;;AACS,EAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.25.4",
+  "version": "48.26.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import {Modal as MantineModal, ModalProps} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, ReactNode} from 'react';
 import {Header, HeaderProps} from '../header';
 
 export interface CustomModalProps extends Omit<ModalProps, 'title'> {
@@ -10,7 +10,7 @@ export interface CustomModalProps extends Omit<ModalProps, 'title'> {
     /**
      * The title text displayed on top of the modal
      */
-    title: string;
+    title: ReactNode;
     /**
      * The description text displayed inside the header underneath the title
      */

package/src/components/modal/__tests__/Modal.spec.tsx

@@ -1,5 +1,6 @@
+import {QuestionSize32Px} from '@coveord/plasma-react-icons';
 import {Container} from '@mantine/core';
-import {render, screen, fireEvent} from '@test-utils';
+import {fireEvent, render, screen} from '@test-utils';
 import {Modal} from '../Modal';
 
 describe('Modal', () => {
@@ -17,6 +18,25 @@ describe('Modal', () => {
         expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
+    it('allows ReactNode as title', async () => {
+        render(
+            <Modal
+                opened
+                onClose={jest.fn()}
+                title={
+                    <div>
+                        <QuestionSize32Px />
+                        ReactNode title
+                    </div>
+                }
+            >
+                <Container>Children</Container>
+            </Modal>
+        );
+        expect(await screen.findByRole('img', {name: /question/i})).toBeInTheDocument();
+        expect(screen.getByText(/reactnode title/i)).toBeInTheDocument();
+    });
+
     it('trigger onClose function when click on the close button', () => {
         const onClose = jest.fn();
         render(