@dktunited-techoff/techoff-suite-ui 1.13.11 → 1.14.0

package/esm/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsModal/TsModal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import './TsModal.css';
+export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;

package/esm/components/TsModal/TsModal.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TsButton } from '../TsButton/TsButton';
+import './TsModal.css';
+export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-modal-container" },
+        React.createElement("div", { className: "ts-modal-blur" }),
+        React.createElement("div", { className: "ts-modal", style: style },
+            React.createElement("div", { className: "ts-modal-header" },
+                React.createElement("div", { className: "ts-modal-title" }, title),
+                React.createElement(TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
+            React.createElement("div", { className: "ts-modal-content" }, children),
+            React.createElement("div", { className: "ts-modal-footer" },
+                React.createElement(TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
+                React.createElement(TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
+};
+//# sourceMappingURL=TsModal.js.map

package/esm/components/TsModal/TsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,QAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsModal/TsModal.types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+export type TsModalProps = {
+    actionLabel: string;
+    actionIcon?: string;
+    style?: CSSProperties;
+    title: string;
+    onAction: () => void;
+    onClose?: () => void;
+} & PropsWithChildren;

package/esm/components/TsModal/TsModal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsModal.types.js.map

package/esm/components/TsModal/TsModal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.types.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.types.ts"],"names":[],"mappings":""}

package/esm/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/esm/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC"}

package/lib/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsModal/TsModal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import './TsModal.css';
+export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;

package/lib/components/TsModal/TsModal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsModal = void 0;
+const React = require("react");
+const TsButton_1 = require("../TsButton/TsButton");
+require("./TsModal.css");
+const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-modal-container" },
+        React.createElement("div", { className: "ts-modal-blur" }),
+        React.createElement("div", { className: "ts-modal", style: style },
+            React.createElement("div", { className: "ts-modal-header" },
+                React.createElement("div", { className: "ts-modal-title" }, title),
+                React.createElement(TsButton_1.TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
+            React.createElement("div", { className: "ts-modal-content" }, children),
+            React.createElement("div", { className: "ts-modal-footer" },
+                React.createElement(TsButton_1.TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
+                React.createElement(TsButton_1.TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
+};
+exports.TsModal = TsModal;
+//# sourceMappingURL=TsModal.js.map

package/lib/components/TsModal/TsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,mDAAgD;AAChD,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,mBAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,mBAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,OAAO,WA0BlB"}

package/lib/components/TsModal/TsModal.types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+export type TsModalProps = {
+    actionLabel: string;
+    actionIcon?: string;
+    style?: CSSProperties;
+    title: string;
+    onAction: () => void;
+    onClose?: () => void;
+} & PropsWithChildren;

package/lib/components/TsModal/TsModal.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsModal.types.js.map

package/lib/components/TsModal/TsModal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.types.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.types.ts"],"names":[],"mappings":""}

package/lib/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/lib/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/lib/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/TsInput/TsBooleanInput/TsBooleanInput"), expo
 __exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
 __exportStar(require("./components/TsLoader/TsLoader"), exports);
 __exportStar(require("./components/TsMenuButton/TsMenuButton"), exports);
+__exportStar(require("./components/TsModal/TsModal"), exports);
 __exportStar(require("./components/TsSwitcher/TsSwitcher"), exports);
 __exportStar(require("./components/TsTabs/TsTabs"), exports);
 __exportStar(require("./components/TsTooltip/TsTooltip"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,yEAAuD;AACvD,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD;AACpD,0EAAwD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,yEAAuD;AACvD,+DAA6C;AAC7C,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD;AACpD,0EAAwD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.13.11",
+  "version": "1.14.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/components/TsModal/TsModal.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import { TsButton } from '../TsButton/TsButton';
+import './TsModal.css';
+
+export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => {
+  // Rendering
+  return (
+    <div className="ts-modal-container">
+      <div className="ts-modal-blur" />
+
+      <div className="ts-modal" style={style}>
+        <div className="ts-modal-header">
+          <div className="ts-modal-title">{title}</div>
+
+          <TsButton icon="close" variant="ghost" rounded onClick={onClose} />
+        </div>
+
+        <div className="ts-modal-content">{children}</div>
+
+        <div className="ts-modal-footer">
+          <TsButton variant="secondary" onClick={onClose}>
+            Cancel
+          </TsButton>
+          <TsButton icon={actionIcon} variant="primary" onClick={onAction}>
+            {actionLabel}
+          </TsButton>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TsModal/TsModal.types.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+
+export type TsModalProps = {
+  actionLabel: string;
+  actionIcon?: string;
+  style?: CSSProperties;
+  title: string;
+  onAction: () => void;
+  onClose?: () => void;
+} & PropsWithChildren;

package/src/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';