@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,16 +1,16 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Tree View',
-  component: 'tttx-tree-view',
-  parameters: {
-    actions: {
-      handles: ['clickEvent', 'expandNode', 'checkboxChange'],
-    },
-  },
-  decorators: [withActions],
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Tree View',
+  component: 'tttx-tree-view',
+  parameters: {
+    actions: {
+      handles: ['clickEvent', 'expandNode', 'checkboxChange'],
+    },
+  },
+  decorators: [withActions],
+};
 const TttxTreeViewTemplate = ({ data }) => `
-    <tttx-tree-view_1_9_101 id="treeView"></tttx-tree-view_1_9_101>
+    <tttx-tree-view_1_9_103 id="treeView"></tttx-tree-view_1_9_103>
     <script>
     (function() {
         const treeView = document.getElementById('treeView');
@@ -19,393 +19,393 @@ const TttxTreeViewTemplate = ({ data }) => `
         }
     })();
     </script>
-`;
-export const GroupSelectionDemo = TttxTreeViewTemplate.bind({});
-GroupSelectionDemo.args = {
-  data: [
-    {
-      id: '0001',
-      title: '0001 Group testing',
-      isOpen: true,
-      hasCheckbox: false,
-      hasIcon: false,
-      hasHover: true,
-      selectable: true,
-      selected: true,
-      draggable: false,
-      child: [
-        {
-          id: 'goals',
-          title: 'Goals',
-          hasIcon: true,
-          icon: 'flag',
-          iconColor: 'grey',
-          hasHover: true,
-          selectable: true,
-          draggable: true,
-        },
-        {
-          id: 'frontend',
-          title: 'Front end development',
-          isOpen: true,
-          hasCheckbox: true,
-          hasIcon: true,
-          icon: 'folder',
-          iconColor: 'grey',
-          hasHover: true,
-          selectable: true,
-          selected: true,
-          draggable: false,
-          child: [
-            {
-              id: 'portal',
-              title: 'Portal',
-              hasIcon: true,
-              icon: 'description',
-              iconColor: 'grey',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-            {
-              id: 'webcomp',
-              title: 'Web components',
-              isOpen: true,
-              hasCheckbox: true,
-              hasIcon: true,
-              icon: 'folder',
-              iconColor: 'grey',
-              hasHover: true,
-              selectable: true,
-              selected: true,
-              draggable: false,
-              child: [
-                {
-                  id: '11092',
-                  title: '11092',
-                  hasIcon: true,
-                  icon: 'description',
-                  iconColor: 'grey',
-                  hasHover: true,
-                  selectable: true,
-                  draggable: true,
-                },
-              ],
-            },
-            {
-              id: 'subact',
-              title: 'subact-1407',
-              hasIcon: false,
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-          ],
-        },
-        {
-          id: '0002',
-          title: '0002',
-          isOpen: true,
-          hasCheckbox: true,
-          hasIcon: true,
-          icon: 'folder',
-          iconColor: 'grey',
-          hasHover: true,
-          selectable: true,
-          draggable: false,
-          child: [
-            {
-              id: 'ugh',
-              title: 'ugh',
-              isOpen: true,
-              hasCheckbox: true,
-              hasIcon: true,
-              icon: 'folder',
-              iconColor: 'grey',
-              hasHover: true,
-              selectable: true,
-              draggable: false,
-              child: [
-                {
-                  id: '45',
-                  title: '45',
-                  hasIcon: true,
-                  icon: 'description',
-                  iconColor: 'grey',
-                  hasHover: true,
-                  selectable: true,
-                  draggable: true,
-                },
-              ],
-            },
-            {
-              id: '1109',
-              title: '1109',
-              isOpen: false,
-              hasCheckbox: true,
-              hasIcon: true,
-              icon: 'folder',
-              iconColor: 'grey',
-              hasHover: true,
-              selectable: true,
-              draggable: false,
-              child: [],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-export const MultipleGroupsSelection = TttxTreeViewTemplate.bind({});
-MultipleGroupsSelection.args = {
-  data: [
-    {
-      id: 'group1',
-      title: 'Selected Parent Group',
-      isOpen: true,
-      hasCheckbox: true,
-      hasHover: true,
-      selectable: true,
-      selected: true,
-      draggable: false,
-      child: [
-        {
-          id: 'subgroup1',
-          title: 'Selected Subgroup',
-          isOpen: true,
-          hasCheckbox: true,
-          hasHover: true,
-          selectable: true,
-          selected: true,
-          draggable: false,
-          child: [
-            {
-              id: 'activity1',
-              title: 'Activity (No Blue Border)',
-              hasIcon: true,
-              icon: 'check_circle',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-            {
-              id: 'activity2',
-              title: 'Another Activity',
-              hasIcon: true,
-              icon: 'assignment',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-          ],
-        },
-        {
-          id: 'activity3',
-          title: 'Direct Child Activity',
-          hasIcon: true,
-          icon: 'task',
-          hasHover: true,
-          selectable: true,
-          draggable: true,
-        },
-      ],
-    },
-    {
-      id: 'group2',
-      title: 'Unselected Group',
-      isOpen: true,
-      hasCheckbox: true,
-      hasHover: true,
-      selectable: true,
-      selected: false,
-      draggable: false,
-      child: [
-        {
-          id: 'subgroup2',
-          title: 'Unselected Subgroup',
-          isOpen: false,
-          hasCheckbox: true,
-          hasHover: true,
-          selectable: true,
-          selected: false,
-          draggable: false,
-          child: [
-            {
-              id: 'activity4',
-              title: 'Hidden Activity',
-              hasIcon: true,
-              icon: 'visibility_off',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-export const DeepNestedSelection = TttxTreeViewTemplate.bind({});
-DeepNestedSelection.args = {
-  data: [
-    {
-      id: 'root',
-      title: 'Root Group (Selected)',
-      isOpen: true,
-      hasCheckbox: true,
-      hasHover: true,
-      selectable: true,
-      selected: true,
-      draggable: false,
-      child: [
-        {
-          id: 'level1',
-          title: 'Level 1 Subgroup (Selected)',
-          isOpen: true,
-          hasCheckbox: true,
-          hasHover: true,
-          selectable: true,
-          selected: true,
-          draggable: false,
-          child: [
-            {
-              id: 'level2',
-              title: 'Level 2 Subgroup (Selected)',
-              isOpen: true,
-              hasCheckbox: true,
-              hasHover: true,
-              selectable: true,
-              selected: true,
-              draggable: false,
-              child: [
-                {
-                  id: 'level3',
-                  title: 'Level 3 Subgroup (Selected)',
-                  isOpen: true,
-                  hasCheckbox: true,
-                  hasHover: true,
-                  selectable: true,
-                  selected: true,
-                  draggable: false,
-                  child: [
-                    {
-                      id: 'deepactivity',
-                      title: 'Deep Activity (No Border)',
-                      hasIcon: true,
-                      icon: 'star',
-                      hasHover: true,
-                      selectable: true,
-                      draggable: true,
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-export const DragDropWithSelection = TttxTreeViewTemplate.bind({});
-DragDropWithSelection.args = {
-  data: [
-    {
-      id: 'engineer',
-      title: 'Engineer (Selected)',
-      isOpen: true,
-      hasCheckbox: false,
-      hasIcon: false,
-      hasHover: true,
-      selectable: true,
-      selected: true,
-      draggable: false,
-      child: [
-        {
-          id: 'qualification',
-          title: 'Qualification (Selected)',
-          isOpen: true,
-          hasCheckbox: false,
-          hasHover: true,
-          selectable: true,
-          selected: true,
-          draggable: false,
-          child: [
-            {
-              id: '01KKC11BWW4RJ138DXQQBH4TWJ',
-              title: 'Cloud engineer',
-              hasIcon: false,
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-            {
-              id: '01KKC11K9FHKZX03S85ZA8G5SK',
-              title: 'Software engineer',
-              hasIcon: false,
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-            {
-              id: '01KKC11PHZZWN1X65SW44JBT0Q',
-              title: 'This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name ',
-              hasIcon: false,
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            }
-          ],
-        },
-        {
-          id: 'skills',
-          title: 'Skills',
-          isOpen: true,
-          hasCheckbox: false,
-          hasIcon: false,
-          hasHover: true,
-          selectable: true,
-          selected: false,
-          draggable: false,
-          child: [
-            {
-              id: '01KKC11VFZ6A4Q479EYDG7BVT6',
-              title: 'Software engineering',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-            {
-              id: '01KKC11YHZ9SB1T56SRZWTB4P7',
-              title: 'Design patterns',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            },
-          ],
-        },
-        {
-          id: 'thinking',
-          title: 'Thinking',
-          isOpen: true,
-          hasCheckbox: false,
-          hasIcon: false,
-          hasHover: true,
-          selectable: true,
-          selected: false,
-          draggable: false,
-          child: [
-            {
-              id: '01KKESF79WXXC3T137YBMAES51',
-              title: 'Critical thinking skills',
-              hasHover: true,
-              selectable: true,
-              draggable: true,
-            }
-          ],
-        },
-      ],
-    },
-  ],
-};
+`;
+export const GroupSelectionDemo = TttxTreeViewTemplate.bind({});
+GroupSelectionDemo.args = {
+  data: [
+    {
+      id: '0001',
+      title: '0001 Group testing',
+      isOpen: true,
+      hasCheckbox: false,
+      hasIcon: false,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'goals',
+          title: 'Goals',
+          hasIcon: true,
+          icon: 'flag',
+          iconColor: 'grey',
+          hasHover: true,
+          selectable: true,
+          draggable: true,
+        },
+        {
+          id: 'frontend',
+          title: 'Front end development',
+          isOpen: true,
+          hasCheckbox: true,
+          hasIcon: true,
+          icon: 'folder',
+          iconColor: 'grey',
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'portal',
+              title: 'Portal',
+              hasIcon: true,
+              icon: 'description',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'webcomp',
+              title: 'Web components',
+              isOpen: true,
+              hasCheckbox: true,
+              hasIcon: true,
+              icon: 'folder',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              selected: true,
+              draggable: false,
+              child: [
+                {
+                  id: '11092',
+                  title: '11092',
+                  hasIcon: true,
+                  icon: 'description',
+                  iconColor: 'grey',
+                  hasHover: true,
+                  selectable: true,
+                  draggable: true,
+                },
+              ],
+            },
+            {
+              id: 'subact',
+              title: 'subact-1407',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+        {
+          id: '0002',
+          title: '0002',
+          isOpen: true,
+          hasCheckbox: true,
+          hasIcon: true,
+          icon: 'folder',
+          iconColor: 'grey',
+          hasHover: true,
+          selectable: true,
+          draggable: false,
+          child: [
+            {
+              id: 'ugh',
+              title: 'ugh',
+              isOpen: true,
+              hasCheckbox: true,
+              hasIcon: true,
+              icon: 'folder',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              draggable: false,
+              child: [
+                {
+                  id: '45',
+                  title: '45',
+                  hasIcon: true,
+                  icon: 'description',
+                  iconColor: 'grey',
+                  hasHover: true,
+                  selectable: true,
+                  draggable: true,
+                },
+              ],
+            },
+            {
+              id: '1109',
+              title: '1109',
+              isOpen: false,
+              hasCheckbox: true,
+              hasIcon: true,
+              icon: 'folder',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              draggable: false,
+              child: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export const MultipleGroupsSelection = TttxTreeViewTemplate.bind({});
+MultipleGroupsSelection.args = {
+  data: [
+    {
+      id: 'group1',
+      title: 'Selected Parent Group',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'subgroup1',
+          title: 'Selected Subgroup',
+          isOpen: true,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'activity1',
+              title: 'Activity (No Blue Border)',
+              hasIcon: true,
+              icon: 'check_circle',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'activity2',
+              title: 'Another Activity',
+              hasIcon: true,
+              icon: 'assignment',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+        {
+          id: 'activity3',
+          title: 'Direct Child Activity',
+          hasIcon: true,
+          icon: 'task',
+          hasHover: true,
+          selectable: true,
+          draggable: true,
+        },
+      ],
+    },
+    {
+      id: 'group2',
+      title: 'Unselected Group',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: false,
+      draggable: false,
+      child: [
+        {
+          id: 'subgroup2',
+          title: 'Unselected Subgroup',
+          isOpen: false,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: 'activity4',
+              title: 'Hidden Activity',
+              hasIcon: true,
+              icon: 'visibility_off',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export const DeepNestedSelection = TttxTreeViewTemplate.bind({});
+DeepNestedSelection.args = {
+  data: [
+    {
+      id: 'root',
+      title: 'Root Group (Selected)',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'level1',
+          title: 'Level 1 Subgroup (Selected)',
+          isOpen: true,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'level2',
+              title: 'Level 2 Subgroup (Selected)',
+              isOpen: true,
+              hasCheckbox: true,
+              hasHover: true,
+              selectable: true,
+              selected: true,
+              draggable: false,
+              child: [
+                {
+                  id: 'level3',
+                  title: 'Level 3 Subgroup (Selected)',
+                  isOpen: true,
+                  hasCheckbox: true,
+                  hasHover: true,
+                  selectable: true,
+                  selected: true,
+                  draggable: false,
+                  child: [
+                    {
+                      id: 'deepactivity',
+                      title: 'Deep Activity (No Border)',
+                      hasIcon: true,
+                      icon: 'star',
+                      hasHover: true,
+                      selectable: true,
+                      draggable: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export const DragDropWithSelection = TttxTreeViewTemplate.bind({});
+DragDropWithSelection.args = {
+  data: [
+    {
+      id: 'engineer',
+      title: 'Engineer (Selected)',
+      isOpen: true,
+      hasCheckbox: false,
+      hasIcon: false,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'qualification',
+          title: 'Qualification (Selected)',
+          isOpen: true,
+          hasCheckbox: false,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: '01KKC11BWW4RJ138DXQQBH4TWJ',
+              title: 'Cloud engineer',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: '01KKC11K9FHKZX03S85ZA8G5SK',
+              title: 'Software engineer',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: '01KKC11PHZZWN1X65SW44JBT0Q',
+              title: 'This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name ',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            }
+          ],
+        },
+        {
+          id: 'skills',
+          title: 'Skills',
+          isOpen: true,
+          hasCheckbox: false,
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: '01KKC11VFZ6A4Q479EYDG7BVT6',
+              title: 'Software engineering',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: '01KKC11YHZ9SB1T56SRZWTB4P7',
+              title: 'Design patterns',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+        {
+          id: 'thinking',
+          title: 'Thinking',
+          isOpen: true,
+          hasCheckbox: false,
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: '01KKESF79WXXC3T137YBMAES51',
+              title: 'Critical thinking skills',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            }
+          ],
+        },
+      ],
+    },
+  ],
+};