@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js

@@ -1,98 +1,98 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/List',
-  component: 'tttx-list',
-  parameters: {
-    actions: {
-      handles: ['listRowClick', 'listRowCheckboxClick'],
-    },
-  },
-  decorators: [withActions],
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/List',
+  component: 'tttx-list',
+  parameters: {
+    actions: {
+      handles: ['listRowClick', 'listRowCheckboxClick'],
+    },
+  },
+  decorators: [withActions],
+};
 const TemplateStringList = ({ data }) => `
-    <tttx-list_1_9_101
+    <tttx-list_1_9_103
         data='${JSON.stringify(data)}'
         id='list'
         name='stringList'
-    ></tttx-list_1_9_101>
-`;
-export const BasicStringList = TemplateStringList.bind({});
-BasicStringList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg"  color="green" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg"  color="green" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" color="orange" /></span> Lee', clickable: true },
-    { element: '<span><tttx-icon_1_9_101 icon="egg" color="red" /></span> Ben' },
-  ],
-};
+    ></tttx-list_1_9_103>
+`;
+export const BasicStringList = TemplateStringList.bind({});
+BasicStringList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg"  color="green" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg"  color="green" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" color="orange" /></span> Lee', clickable: true },
+    { element: '<span><tttx-icon_1_9_103 icon="egg" color="red" /></span> Ben' },
+  ],
+};
 const TemplateObjectList = ({ data }) => `
-    <tttx-list_1_9_101
+    <tttx-list_1_9_103
         id='objectList'
         name='objectList'
-    ></tttx-list_1_9_101>
+    ></tttx-list_1_9_103>
     <script>
         if(!objectList) {
             const objectList = document.getElementId('objectList');
         }
         objectList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicObjectList = TemplateObjectList.bind({});
-BasicObjectList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicObjectList = TemplateObjectList.bind({});
+BasicObjectList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" /></span> Ben' },
+  ],
+};
 const TemplateClickableList = ({ data }) => `
-    <tttx-list_1_9_101
+    <tttx-list_1_9_103
         id='clickableList'
         name='clickableList'
-    ></tttx-list_1_9_101>
+    ></tttx-list_1_9_103>
     <script>
         if(!clickableList) {
             const clickableList = document.getElementId('clickableList');
         }
         clickableList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicClickableList = TemplateClickableList.bind({});
-BasicClickableList.args = {
-  data: [
-    {
-      clickable: true,
-      icon: 'chevron_right',
-      element: '<span><tttx-icon_1_9_101 icon="egg" /></span> Demulon 1,000,000',
-      rowData: '[{ "name": "Demulon 1,000,000" }]',
-    },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" color="red" /></span> Patrick' },
-    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="add" /></span> Lee ' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_101 icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicClickableList = TemplateClickableList.bind({});
+BasicClickableList.args = {
+  data: [
+    {
+      clickable: true,
+      icon: 'chevron_right',
+      element: '<span><tttx-icon_1_9_103 icon="egg" /></span> Demulon 1,000,000',
+      rowData: '[{ "name": "Demulon 1,000,000" }]',
+    },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" color="red" /></span> Patrick' },
+    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="add" /></span> Lee ' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_103 icon="egg" /></span> Ben' },
+  ],
+};
 const TemplateWorkerList = ({ data }) => `
-    <tttx-list_1_9_101
+    <tttx-list_1_9_103
         id='workersList'
         name='workersList'
-    ></tttx-list_1_9_101>
+    ></tttx-list_1_9_103>
     <script>
         if(!workersList) {
             const workersList = document.getElementId('workersList');
         }
         workersList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const WorkerList = TemplateWorkerList.bind({});
-WorkerList.args = {
-  data: [
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a890',
-      toggleable: true,
-      icon: 'chevron_right',
+`;
+export const WorkerList = TemplateWorkerList.bind({});
+WorkerList.args = {
+  data: [
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a890',
+      toggleable: true,
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: flex-start; width: 100%;">
     <label>
@@ -107,31 +107,31 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_9_101 text="Driller" color="#F4DFFF"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_101>
+                    <tttx-tag_1_9_103 text="Driller" color="#F4DFFF"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_103>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="school" color="gray" /></span><span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_9_103 icon="school" color="gray" /></span><span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_101 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_9_103 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_103 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
     </label>
-    <div style='margin-left: auto; padding: 6px;'><tttx-tag_1_9_101 text="Element on the right"></tttx-tag_1_9_101></div>
+    <div style='margin-left: auto; padding: 6px;'><tttx-tag_1_9_103 text="Element on the right"></tttx-tag_1_9_103></div>
 </div>
-`,
-      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
-    },
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a891',
-      toggleable: true,
-      active: true,
-      icon: 'chevron_right',
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a891',
+      toggleable: true,
+      active: true,
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: flex-start;">
     <label>
@@ -146,31 +146,31 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_9_101 text="Driller" color="#F4DFFF"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_101>
+                    <tttx-tag_1_9_103 text="Driller" color="#F4DFFF"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_103>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="school" color="gray" /></span><span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_9_103 icon="school" color="gray" /></span><span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_101 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_9_103 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_103 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
     </label>
 </div>
-`,
-      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
-    },
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a892',
-      hasCheckbox: true,
-      clickable: true,
-      checked: true,
-      icon: 'chevron_right',
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a892',
+      hasCheckbox: true,
+      clickable: true,
+      checked: true,
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: flex-start;">
     <label>
@@ -185,32 +185,32 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_9_101 text="Driller" color="#F4DFFF"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_101>
+                    <tttx-tag_1_9_103 text="Driller" color="#F4DFFF"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_103>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="school" color="gray" /></span><span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_9_103 icon="school" color="gray" /></span><span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_101 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_9_103 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_103 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
     </label>
 </div>
-`,
-      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
-    },
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a893',
-      hasCheckbox: true,
-      toggleable: true,
-      checked: true,
-      active: true,
-      icon: 'chevron_right',
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a893',
+      hasCheckbox: true,
+      toggleable: true,
+      checked: true,
+      active: true,
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: flex-start;">
     <label>
@@ -225,53 +225,53 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_9_101 text="Driller" color="#F4DFFF"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_101>
-                    <tttx-tag_1_9_101 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_101>
+                    <tttx-tag_1_9_103 text="Driller" color="#F4DFFF"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="Offshore" color="#CEF4EB"></tttx-tag_1_9_103>
+                    <tttx-tag_1_9_103 text="3t Transform" color="#DDE6FA"></tttx-tag_1_9_103>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="school" color="gray" /></span><span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_9_103 icon="school" color="gray" /></span><span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_9_101 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_101 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_9_103 icon="verified_user" color="gray" /></span><span><tttx-icon_1_9_103 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
     </label>
 </div>
-`,
-      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
-    },
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a894',
-      clickable: true,
-      icon: 'chevron_right',
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a894',
+      clickable: true,
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
-    <span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 
+    <span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 
     Qualification row 
-    <tttx-tag_1_9_101 text="Vantage" color="#D5D5D5"></tttx-tag_1_9_101>
+    <tttx-tag_1_9_103 text="Vantage" color="#D5D5D5"></tttx-tag_1_9_103>
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>
-`,
-      rowData: 'any data',
-    },
-    {
-      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a895',
-      icon: 'chevron_right',
+`,
+      rowData: 'any data',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a895',
+      icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
-    <span><tttx-icon_1_9_101 icon="check_circle" color="green" /></span> 
+    <span><tttx-icon_1_9_103 icon="check_circle" color="green" /></span> 
     Qualification row 
-    <tttx-tag_1_9_101 text="Vantage" color="#D5D5D5"></tttx-tag_1_9_101>
+    <tttx-tag_1_9_103 text="Vantage" color="#D5D5D5"></tttx-tag_1_9_103>
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>
-`,
-      rowData: 'any data',
-    },
-  ],
-};
+`,
+      rowData: 'any data',
+    },
+  ],
+};