@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js

@@ -1,19 +1,19 @@
-export default {
-  title: 'molecules/Dialog box',
-  component: 'tttx-dialog-box',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A magical storybook story about Tttx Dialog Box.',
-      },
-    },
-  },
-};
+export default {
+  title: 'molecules/Dialog box',
+  component: 'tttx-dialog-box',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A magical storybook story about Tttx Dialog Box.',
+      },
+    },
+  },
+};
 const TttxDialogBoxStory = ({ data }) => `
   <button onclick="openDialog()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBox'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBox) {
       const dialogBox = document.getElementById('dialogBox');
@@ -26,33 +26,33 @@ const TttxDialogBoxStory = ({ data }) => `
     }
     dialogBox.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Default = TttxDialogBoxStory.bind({});
-Default.args = {
-  data: {
-    header: {
-      title: 'Dialog Title',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is the default dialog',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Default = TttxDialogBoxStory.bind({});
+Default.args = {
+  data: {
+    header: {
+      title: 'Dialog Title',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is the default dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxMobile = ({ data }) => `
   <button onclick="openDialogMobile()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxMobile'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxMobile) {
       const dialogBoxMobile = document.getElementById('dialogBoxMobile');
@@ -66,33 +66,33 @@ const TttxDialogBoxMobile = ({ data }) => `
     dialogBoxMobile.data = ${JSON.stringify(data)};
     dialogBoxMobile.size = "mobile"
   </script>
-`;
-export const Mobile = TttxDialogBoxMobile.bind({});
-Mobile.args = {
-  data: {
-    header: {
-      title: 'Mobile Dialog',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is a Mobile dialog',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'copy', icon: 'content_copy', type: 'default' },
-      ],
-    },
-  },
-};
+`;
+export const Mobile = TttxDialogBoxMobile.bind({});
+Mobile.args = {
+  data: {
+    header: {
+      title: 'Mobile Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a Mobile dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'copy', icon: 'content_copy', type: 'default' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxSmall = ({ data }) => `
   <button onclick="openDialogSmall()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxSmall'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxSmall) {
       const dialogBoxSmall = document.getElementById('dialogBoxSmall');
@@ -106,33 +106,33 @@ const TttxDialogBoxSmall = ({ data }) => `
     dialogBoxSmall.data = ${JSON.stringify(data)};
     dialogBoxSmall.size = "small"
   </script>
-`;
-export const Small = TttxDialogBoxSmall.bind({});
-Small.args = {
-  data: {
-    header: {
-      title: 'Small Dialog',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is a small dialog',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Small = TttxDialogBoxSmall.bind({});
+Small.args = {
+  data: {
+    header: {
+      title: 'Small Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a small dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxLarge = ({ data }) => `
   <button onclick="openDialogLarge()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxLarge'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxLarge) {
       const dialogBoxLarge = document.getElementById('dialogBoxLarge');
@@ -146,33 +146,33 @@ const TttxDialogBoxLarge = ({ data }) => `
     dialogBoxLarge.data = ${JSON.stringify(data)};
     dialogBoxLarge.size = "large"
   </script>
-`;
-export const Large = TttxDialogBoxLarge.bind({});
-Large.args = {
-  data: {
-    header: {
-      title: 'Large Dialog',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is a large dialog',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Large = TttxDialogBoxLarge.bind({});
+Large.args = {
+  data: {
+    header: {
+      title: 'Large Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a large dialog',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxWithoutCloseButton = ({ data }) => `
   <button onclick="openDialogNoClose()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxNoClose'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxNoClose) {
       const dialogBoxNoClose = document.getElementById('dialogBoxNoClose');
@@ -185,33 +185,33 @@ const TttxDialogBoxWithoutCloseButton = ({ data }) => `
     }
     dialogBoxNoClose.data = ${JSON.stringify(data)};
   </script>
-`;
-export const closeDisabled = TttxDialogBoxWithoutCloseButton.bind({});
-closeDisabled.args = {
-  data: {
-    header: {
-      title: 'Dialog Without Close Button',
-      hasIcon: false,
-      hasClose: false,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is a dialog box without a close buttons',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const closeDisabled = TttxDialogBoxWithoutCloseButton.bind({});
+closeDisabled.args = {
+  data: {
+    header: {
+      title: 'Dialog Without Close Button',
+      hasIcon: false,
+      hasClose: false,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a dialog box without a close buttons',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxWithIcon = ({ data }) => `
   <button onclick="openDialogIcon()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxIcon'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxIcon) {
       const dialogBoxIcon = document.getElementById('dialogBoxIcon');
@@ -224,35 +224,35 @@ const TttxDialogBoxWithIcon = ({ data }) => `
     }
     dialogBoxIcon.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Icon = TttxDialogBoxWithIcon.bind({});
-Icon.args = {
-  data: {
-    header: {
-      title: 'Icons Dialog',
-      hasIcon: true,
-      iconName: 'egg',
-      iconColor: 'green',
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'this is a dialog box with an icon in the header and on the buttonss',
-    },
-    footer: {
-      buttons: [
-        { name: 'Primary Icon', icon: 'egg', type: 'primary' },
-        { name: 'default Icon', icon: 'egg', type: 'default' },
-        { name: 'boderless Icon', icon: 'egg', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Icon = TttxDialogBoxWithIcon.bind({});
+Icon.args = {
+  data: {
+    header: {
+      title: 'Icons Dialog',
+      hasIcon: true,
+      iconName: 'egg',
+      iconColor: 'green',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'this is a dialog box with an icon in the header and on the buttonss',
+    },
+    footer: {
+      buttons: [
+        { name: 'Primary Icon', icon: 'egg', type: 'primary' },
+        { name: 'default Icon', icon: 'egg', type: 'default' },
+        { name: 'boderless Icon', icon: 'egg', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxInfo = ({ data }) => `
   <button onclick="openDialogInfo()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxInfo'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxInfo) {
       const dialogBoxInfo = document.getElementById('dialogBoxInfo');
@@ -265,36 +265,36 @@ const TttxDialogBoxInfo = ({ data }) => `
     }
     dialogBoxInfo.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Info = TttxDialogBoxInfo.bind({});
-Info.args = {
-  data: {
-    type: 'info',
-    header: {
-      title: 'Info',
-      hasIcon: true,
-      iconName: 'info',
-      iconColor: 'blue',
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'there is some info',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Info = TttxDialogBoxInfo.bind({});
+Info.args = {
+  data: {
+    type: 'info',
+    header: {
+      title: 'Info',
+      hasIcon: true,
+      iconName: 'info',
+      iconColor: 'blue',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is some info',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxSuccess = ({ data }) => `
   <button onclick="openDialogSuccess()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxSuccess'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxSuccess) {
       const dialogBoxSuccess = document.getElementById('dialogBoxSuccess');
@@ -307,36 +307,36 @@ const TttxDialogBoxSuccess = ({ data }) => `
     }
     dialogBoxSuccess.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Success = TttxDialogBoxSuccess.bind({});
-Success.args = {
-  data: {
-    type: 'success',
-    header: {
-      title: 'Success',
-      hasIcon: true,
-      iconName: 'check_circle',
-      iconColor: 'green',
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'there is no content',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Success = TttxDialogBoxSuccess.bind({});
+Success.args = {
+  data: {
+    type: 'success',
+    header: {
+      title: 'Success',
+      hasIcon: true,
+      iconName: 'check_circle',
+      iconColor: 'green',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is no content',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxWarning = ({ data }) => `
   <button onclick="openDialogWarning()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxWarning'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxWarning) {
       const dialogBoxWarning = document.getElementById('dialogBoxWarning');
@@ -349,36 +349,36 @@ const TttxDialogBoxWarning = ({ data }) => `
     }
     dialogBoxWarning.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Warning = TttxDialogBoxWarning.bind({});
-Warning.args = {
-  data: {
-    type: 'warning',
-    header: {
-      title: 'Warning',
-      hasIcon: true,
-      iconName: 'warning',
-      iconColor: 'orange',
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'there is a warning',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Warning = TttxDialogBoxWarning.bind({});
+Warning.args = {
+  data: {
+    type: 'warning',
+    header: {
+      title: 'Warning',
+      hasIcon: true,
+      iconName: 'warning',
+      iconColor: 'orange',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is a warning',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxCritical = ({ data }) => `
   <button onclick="openDialogCritical()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxCritical'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxCritical) {
       const dialogBoxCritical = document.getElementById('dialogBoxCritical');
@@ -391,36 +391,36 @@ const TttxDialogBoxCritical = ({ data }) => `
     }
     dialogBoxCritical.data = ${JSON.stringify(data)};
   </script>
-`;
-export const Critical = TttxDialogBoxCritical.bind({});
-Critical.args = {
-  data: {
-    type: 'critical',
-    header: {
-      title: 'Critical',
-      hasIcon: true,
-      iconName: 'report',
-      iconColor: 'red',
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: false,
-      contentText: 'there is a critical error',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+`;
+export const Critical = TttxDialogBoxCritical.bind({});
+Critical.args = {
+  data: {
+    type: 'critical',
+    header: {
+      title: 'Critical',
+      hasIcon: true,
+      iconName: 'report',
+      iconColor: 'red',
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: false,
+      contentText: 'there is a critical error',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
 const TttxDialogBoxHTML = ({ data }) => `
   <button onclick="openDialogHTML()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxHTML'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxHTML) {
       const dialogBoxHTML = document.getElementById('dialogBoxHTML');
@@ -433,34 +433,34 @@ const TttxDialogBoxHTML = ({ data }) => `
     }
     dialogBoxHTML.data = ${JSON.stringify(data)};
   </script>
-`;
-export const CustomHTML = TttxDialogBoxHTML.bind({});
-CustomHTML.args = {
-  data: {
-    header: {
-      title: 'html Dialog',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: true,
-      customHtml: '<div><div>This is a custom html</div><a href="https://example.com/">Click here</a></div>',
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
-const link = 'https://uat.3tplatform.com/U2FsdGVkX18l6CTkVQIEFERL%2FnhogHPK3H4e%2FKrELJcM6Jg2cFG6MDMRpJnhzg%2FnNx0cNFOn5IqC8PchiG%2BIded4%2B%2Foe2u%2BPeGnMmrhU38kPG8y2EHRrAXfHe24dNz0vZYauMC7I88j1SHCI%2F564ZkSDjIeqQJ2KBuVpNRFvNnyjfL0ENeiQqvPTCz%2ByCjexJ9bREgkeHDfvMplRI8CH92m%2B1rwWdoQbD09qb4w1wWiJE7MhLhBuXe6OeP1vNheORIeZObDC1KgAluvtbSDbGuSVGTkBgCZv2%2FD%2BIHbEMOQwjO7V7fHp0hNlb%2BPdc0Qg9RUOn%2BcVQiz4SEWBsRr1PF%2BXRIW736L8udcse%2FJYrkkq15ilKYhSwEmm7RdIxxgTTUyOanmYJBXONn0zbYDlRQ%3D%3D';
+`;
+export const CustomHTML = TttxDialogBoxHTML.bind({});
+CustomHTML.args = {
+  data: {
+    header: {
+      title: 'html Dialog',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: true,
+      customHtml: '<div><div>This is a custom html</div><a href="https://example.com/">Click here</a></div>',
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const link = 'https://uat.3tplatform.com/U2FsdGVkX18l6CTkVQIEFERL%2FnhogHPK3H4e%2FKrELJcM6Jg2cFG6MDMRpJnhzg%2FnNx0cNFOn5IqC8PchiG%2BIded4%2B%2Foe2u%2BPeGnMmrhU38kPG8y2EHRrAXfHe24dNz0vZYauMC7I88j1SHCI%2F564ZkSDjIeqQJ2KBuVpNRFvNnyjfL0ENeiQqvPTCz%2ByCjexJ9bREgkeHDfvMplRI8CH92m%2B1rwWdoQbD09qb4w1wWiJE7MhLhBuXe6OeP1vNheORIeZObDC1KgAluvtbSDbGuSVGTkBgCZv2%2FD%2BIHbEMOQwjO7V7fHp0hNlb%2BPdc0Qg9RUOn%2BcVQiz4SEWBsRr1PF%2BXRIW736L8udcse%2FJYrkkq15ilKYhSwEmm7RdIxxgTTUyOanmYJBXONn0zbYDlRQ%3D%3D';
 const TttxDialogBoxOverflow = ({ data }) => `
   <button onclick="openDialogOverflow()">Open</button>
-  <tttx-dialog-box_1_9_101
+  <tttx-dialog-box_1_9_103
     id='dialogBoxOverflow'
-  ></tttx-dialog-box_1_9_101>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBoxOverflow) {
       const dialogBoxOverflow = document.getElementById('dialogBoxOverflow');
@@ -473,31 +473,31 @@ const TttxDialogBoxOverflow = ({ data }) => `
     }
     dialogBoxOverflow.data = ${JSON.stringify(data)};
   </script>
-`;
-export const OverflowingText = TttxDialogBoxOverflow.bind({});
-OverflowingText.args = {
-  data: {
-    header: {
-      title: 'Dialog Title',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: true,
+`;
+export const OverflowingText = TttxDialogBoxOverflow.bind({});
+OverflowingText.args = {
+  data: {
+    header: {
+      title: 'Dialog Title',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: true,
       customHtml: `
         <p>Copy the link below to share a PDF of your qualifications<p>
         <p><a href=${link}>${link}</a><p>
         <p>
         Please note, the link above is only valid for 3 days. 
         Anyone with access to these links in this time will be able to view your qualifications</p>
-        `,
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
+        `,
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};