@3t-transform/threeteeui 0.1.42 → 0.1.44

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

@@ -0,0 +1,380 @@
+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'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBox) {
+      const dialogBox = document.getElementById('dialogBox');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxMobile = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxMobile'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxMobile) {
+      const dialogBoxMobile = document.getElementById('dialogBoxMobile');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxSmall = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxSmall'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxSmall) {
+      const dialogBoxSmall = document.getElementById('dialogBoxSmall');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxLarge = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxLarge'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxLarge) {
+      const dialogBoxLarge = document.getElementById('dialogBoxLarge');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWithoutCloseButton = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxNoClose'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxNoClose) {
+      const dialogBoxNoClose = document.getElementById('dialogBoxNoClose');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWithIcon = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxIcon'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxIcon) {
+      const dialogBoxIcon = document.getElementById('dialogBoxIcon');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxInfo = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxInfo'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxInfo) {
+      const dialogBoxInfo = document.getElementById('dialogBoxInfo');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxSuccess = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxSuccess'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxSuccess) {
+      const dialogBoxSuccess = document.getElementById('dialogBoxSuccess');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxWarning = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxWarning'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxWarning) {
+      const dialogBoxWarning = document.getElementById('dialogBoxWarning');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxCritical = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxCritical'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxCritical) {
+      const dialogBoxCritical = document.getElementById('dialogBoxCritical');
+    }
+    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' },
+      ],
+    },
+  },
+};
+const TttxDialogBoxHTML = ({ data }) => `
+  <tttx-dialog-box
+    id='dialogBoxHTML'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxHTML) {
+      const dialogBoxHTML = document.getElementById('dialogBoxHTML');
+    }
+    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' },
+      ],
+    },
+  },
+};