@3t-transform/threeteeui 0.1.52 → 0.1.57

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

@@ -1,14 +1,14 @@
-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 }) => `
   <tttx-dialog-box
     id='dialogBox'
@@ -19,28 +19,28 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxMobile'
@@ -52,28 +52,28 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxSmall'
@@ -85,28 +85,28 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxLarge'
@@ -118,28 +118,28 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxNoClose'
@@ -150,28 +150,28 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxIcon'
@@ -182,30 +182,30 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxInfo'
@@ -216,31 +216,31 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxSuccess'
@@ -251,31 +251,31 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxWarning'
@@ -286,31 +286,31 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxCritical'
@@ -321,31 +321,31 @@ 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 }) => `
   <tttx-dialog-box
     id='dialogBoxHTML'
@@ -356,53 +356,53 @@ 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 OverflowingText = TttxDialogBoxStory.bind({});
-OverflowingText.args = {
-  data: {
-    header: {
-      title: 'Dialog Title',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: true,
+`;
+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 OverflowingText = TttxDialogBoxStory.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' },
+      ],
+    },
+  },
+};