@3t-transform/threeteeui 0.1.59 → 0.1.61

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js

@@ -0,0 +1,698 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Tree View',
+  component: 'tttx-tree-view',
+  parameters: {
+    actions: {
+      handles: ['clickEvent'],
+    },
+  },
+  decorators: [withActions],
+};
+const TttxTreeViewStory = ({ data }) => `
+    <tttx-tree-view id="treeViewDefault"></tttx-tree-view>
+    <script>
+    if(!treeViewDefault) {
+      const treeViewDefault = document.getElementById('treeViewDefault');
+    }
+    treeViewDefault.data = ${JSON.stringify(data)};
+    </script>
+
+`;
+export const Default = TttxTreeViewStory.bind({});
+Default.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: true,
+      checked: false,
+      icon: 'check_circle',
+      iconColor: 'green',
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          icon: 'check_circle',
+          iconColor: 'green',
+          menuActive: true,
+          child: [
+            {
+              id: 2,
+              hasIcon: true,
+              icon: 'help',
+              iconColor: 'gray',
+              title: 'this is a test',
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      icon: 'help',
+      iconColor: 'gray',
+      chevronActive: true,
+      child: [
+        {
+          id: 4,
+          hasCheckbox: true,
+          hasIcon: true,
+          icon: 'help',
+          iconColor: 'gray',
+          title: 'Boop 2077',
+        },
+        {
+          id: 4,
+          hasCheckbox: true,
+          hasIcon: true,
+          icon: 'help',
+          iconColor: 'gray',
+          title: 'sjdnfkn 2077',
+          chevronActive: true,
+          menuActive: true,
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewSimple = ({ data }) => `
+    <tttx-tree-view id="treeViewSimple"></tttx-tree-view>
+    <script>
+    if(!treeViewSimple) {
+      const treeViewSimple = document.getElementById('treeViewSimple');
+    }
+    treeViewSimple.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const Simple = TttxTreeViewSimple.bind({});
+Simple.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      hasCheckbox: false,
+      child: [
+        {
+          id: 4,
+          title: 'Boop 2077',
+        },
+        {
+          id: 4,
+          title: 'sjdnfkn 2077',
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewRightButtons = ({ data }) => `
+    <tttx-tree-view id="treeViewRightButtons"></tttx-tree-view>
+    <script>
+    if(!treeViewRightButtons) {
+      const treeViewRightButtons = document.getElementById('treeViewRightButtons');
+    }
+    treeViewRightButtons.data = ${JSON.stringify(data)};
+    </script>
+
+`;
+export const RightButtons = TttxTreeViewRightButtons.bind({});
+RightButtons.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      menuActive: true,
+      chevronActive: true,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          menuActive: true,
+          chevronActive: true,
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+              menuActive: true,
+              chevronActive: true,
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          menuActive: true,
+          chevronActive: true,
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      menuActive: true,
+      chevronActive: true,
+      child: [
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'Boop 2077',
+          menuActive: true,
+          chevronActive: true,
+        },
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'sjdnfkn 2077',
+          chevronActive: true,
+          menuActive: true,
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewMenuButton = ({ data }) => `
+    <tttx-tree-view id="treeViewMenuButton"></tttx-tree-view>
+    <script>
+    if(!treeViewMenuButton) {
+      const treeViewMenuButton = document.getElementById('treeViewMenuButton');
+    }
+    treeViewMenuButton.data = ${JSON.stringify(data)};
+    </script>
+
+`;
+export const MenuButton = TttxTreeViewMenuButton.bind({});
+MenuButton.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      menuActive: true,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          menuActive: true,
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+              menuActive: true,
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          menuActive: true,
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      menuActive: true,
+      child: [
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'Boop 2077',
+          menuActive: true,
+        },
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'sjdnfkn 2077',
+          menuActive: true,
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewChevron = ({ data }) => `
+    <tttx-tree-view id="treeViewChevron"></tttx-tree-view>
+    <script>
+    if(!treeViewChevron) {
+      const treeViewChevron = document.getElementById('treeViewChevron');
+    }
+    treeViewChevron.data = ${JSON.stringify(data)};
+    </script>
+
+`;
+export const Chevron = TttxTreeViewChevron.bind({});
+Chevron.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      chevronActive: true,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          chevronActive: true,
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+              chevronActive: true,
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          chevronActive: true,
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      chevronActive: true,
+      child: [
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'Boop 2077',
+          chevronActive: true,
+        },
+        {
+          id: 4,
+          hasCheckbox: false,
+          hasIcon: false,
+          title: 'sjdnfkn 2077',
+          chevronActive: true,
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewHTML = ({ data }) => `
+    <tttx-tree-view id="treeViewHTML"></tttx-tree-view>
+    <script>
+    if(!treeViewHTML) {
+      const treeViewHTML = document.getElementById('treeViewHTML');
+    }
+    treeViewHTML.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const HTML = TttxTreeViewHTML.bind({});
+HTML.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      html: '<p>This is html </p>',
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          html: '<p>This is html </p>',
+          openOrClosed: 'arrow_right',
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+              html: '<p>This is html </p>',
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          html: '<p>This is html </p>',
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      hasCheckbox: false,
+      html: '<p>This is html </p>',
+      child: [
+        {
+          id: 4,
+          title: 'Boop 2077',
+          html: '<p>This is html </p>',
+        },
+        {
+          id: 4,
+          title: 'sjdnfkn 2077',
+          html: '<p>This is html </p>',
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewCheckbox = ({ data }) => `
+    <tttx-tree-view id="treeViewCheckbox"></tttx-tree-view>
+    <script>
+    if(!treeViewCheckbox) {
+      const treeViewCheckbox = document.getElementById('treeViewCheckbox');
+    }
+    treeViewCheckbox.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const Checkbox = TttxTreeViewCheckbox.bind({});
+Checkbox.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: true,
+      checked: false,
+      hasIcon: false,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasCheckbox: true,
+          checked: false,
+          child: [
+            {
+              id: 2,
+              hasIcon: false,
+              title: 'this is a test',
+              hasCheckbox: true,
+              checked: false,
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: false,
+          hasCheckbox: true,
+          checked: false,
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: false,
+      hasCheckbox: true,
+      checked: false,
+      child: [
+        {
+          id: 4,
+          title: 'Boop 2077',
+          hasCheckbox: true,
+          checked: false,
+        },
+        {
+          id: 4,
+          title: 'sjdnfkn 2077',
+          hasCheckbox: true,
+          checked: false,
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewIcons = ({ data }) => `
+    <tttx-tree-view id="treeViewIcons"></tttx-tree-view>
+    <script>
+    if(!treeViewIcons) {
+      const treeViewIcons = document.getElementById('treeViewIcons');
+    }
+    treeViewIcons.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const Icons = TttxTreeViewIcons.bind({});
+Icons.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: true,
+      icon: 'check_circle',
+      iconColor: 'green',
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+          openOrClosed: 'arrow_right',
+          child: [
+            {
+              id: 2,
+              hasIcon: true,
+              icon: 'check_circle',
+              iconColor: 'green',
+              title: 'this is a test',
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasIcon: true,
+      icon: 'help',
+      iconColor: 'gray',
+      hasCheckbox: false,
+      child: [
+        {
+          id: 4,
+          title: 'Boop 2077',
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+        {
+          id: 4,
+          title: 'sjdnfkn 2077',
+          hasIcon: true,
+          icon: 'help',
+          iconColor: 'gray',
+        },
+      ],
+    },
+  ],
+};
+const TttxTreeViewCheckBoxAndIcons = ({ data }) => `
+    <tttx-tree-view id="treeViewCheckBoxAndIcons"></tttx-tree-view>
+    <script>
+    if(!treeViewCheckBoxAndIcons) {
+      const treeViewCheckBoxAndIcons = document.getElementById('treeViewCheckBoxAndIcons');
+    }
+    treeViewCheckBoxAndIcons.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const CheckBoxAndIcons = TttxTreeViewCheckBoxAndIcons.bind({});
+CheckBoxAndIcons.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: true,
+      checked: false,
+      hasIcon: true,
+      icon: 'check_circle',
+      iconColor: 'green',
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          hasIcon: true,
+          hasCheckbox: true,
+          checked: false,
+          icon: 'check_circle',
+          iconColor: 'green',
+          openOrClosed: 'arrow_right',
+          child: [
+            {
+              id: 2,
+              hasIcon: true,
+              icon: 'check_circle',
+              iconColor: 'green',
+              hasCheckbox: true,
+              checked: false,
+              title: 'this is a test',
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasCheckbox: true,
+          checked: false,
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: 'second route',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: true,
+      checked: false,
+      hasIcon: true,
+      icon: 'check_circle',
+      iconColor: 'green',
+      child: [
+        {
+          id: 4,
+          title: 'Boop 2077',
+          hasCheckbox: true,
+          checked: false,
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+        {
+          id: 4,
+          title: 'sjdnfkn 2077',
+          hasCheckbox: true,
+          checked: false,
+          hasIcon: true,
+          icon: 'check_circle',
+          iconColor: 'green',
+        },
+      ],
+    },
+  ],
+};

package/dist/components/index.d.ts

@@ -8,9 +8,11 @@ export { TttxKeyvalueBlock as TttxKeyvalueBlock } from '../types/components/atom
 export { TttxList as TttxList } from '../types/components/molecules/tttx-list/tttx-list';
 export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
 export { TttxQrCode as TttxQrcode } from '../types/components/atoms/tttx-qrcode/tttx-qrcode';
+export { TttxSelectBox as TttxSelectBox } from '../types/components/molecules/tttx-select-box/tttx-select-box';
 export { TttxSorter as TttxSorter } from '../types/components/molecules/tttx-sorter/tttx-sorter';
 export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
 export { TttxToolbar as TttxToolbar } from '../types/components/molecules/tttx-toolbar/tttx-toolbar';
+export { TttxTreeView as TttxTreeView } from '../types/components/molecules/tttx-tree-view/tttx-tree-view';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -8,6 +8,8 @@ export { TttxKeyvalueBlock, defineCustomElement as defineCustomElementTttxKeyval
 export { TttxList, defineCustomElement as defineCustomElementTttxList } from './tttx-list.js';
 export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
 export { TttxQrcode, defineCustomElement as defineCustomElementTttxQrcode } from './tttx-qrcode.js';
+export { TttxSelectBox, defineCustomElement as defineCustomElementTttxSelectBox } from './tttx-select-box.js';
 export { TttxSorter, defineCustomElement as defineCustomElementTttxSorter } from './tttx-sorter.js';
 export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';
 export { TttxToolbar, defineCustomElement as defineCustomElementTttxToolbar } from './tttx-toolbar.js';
+export { TttxTreeView, defineCustomElement as defineCustomElementTttxTreeView } from './tttx-tree-view.js';