@3t-transform/threeteeui 1.9.102 → 1.9.103

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

@@ -1,38 +1,38 @@
-export default {
-  title: 'molecules/Select Box',
-  component: 'tttx-select-box',
-  argTypes: {
-    errorMsg: {
-      control: { type: 'text' },
-    },
-    showErrorBubble: {
-      control: { type: 'boolean' },
-    },
-    showErrorMsg: {
-      control: { type: 'boolean' },
-    },
-  },
-};
-const options = [
-  { value: 'Bonnie', label: 'Steuber', description: 'Practical Course' },
-  { value: 'Priscilla', label: 'Lowe', description: 'E-learn course' },
-  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
-  { value: 'egg', label: 'egg', html: '<tttx-icon_localcomponent icon="egg" />', description: 'Practical Course' },
-  { value: 'Terence', label: 'Hyatt' },
-  { value: 'Ruben', label: 'Toy', description: 'E-learn course' },
-  { value: 'Rhiannon', label: 'Hills' },
-  { value: 'Trent', label: 'Mueller' },
-  { value: 'Penelope', label: 'Mann' },
-  { value: 'Oswaldo', label: 'Klocko' },
-  { value: 'Jorge', label: 'Lockman' },
-  { value: 'Conner', label: 'Feeney' },
-  { value: 'Dorian', label: 'Fay' },
-  { value: 'Estrella', label: 'Predovic' },
-  { value: 'Heidi', label: 'McClure' },
-  { value: 'Ronaldo', label: 'Mann' },
-];
+export default {
+  title: 'molecules/Select Box',
+  component: 'tttx-select-box',
+  argTypes: {
+    errorMsg: {
+      control: { type: 'text' },
+    },
+    showErrorBubble: {
+      control: { type: 'boolean' },
+    },
+    showErrorMsg: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+const options = [
+  { value: 'Bonnie', label: 'Steuber', description: 'Practical Course' },
+  { value: 'Priscilla', label: 'Lowe', description: 'E-learn course' },
+  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
+  { value: 'egg', label: 'egg', html: '<tttx-icon_1_9_103 icon="egg" />', description: 'Practical Course' },
+  { value: 'Terence', label: 'Hyatt' },
+  { value: 'Ruben', label: 'Toy', description: 'E-learn course' },
+  { value: 'Rhiannon', label: 'Hills' },
+  { value: 'Trent', label: 'Mueller' },
+  { value: 'Penelope', label: 'Mann' },
+  { value: 'Oswaldo', label: 'Klocko' },
+  { value: 'Jorge', label: 'Lockman' },
+  { value: 'Conner', label: 'Feeney' },
+  { value: 'Dorian', label: 'Fay' },
+  { value: 'Estrella', label: 'Predovic' },
+  { value: 'Heidi', label: 'McClure' },
+  { value: 'Ronaldo', label: 'Mann' },
+];
 const TemplateHTMLSelectBox = args => `
-    <tttx-select-box_localcomponent
+    <tttx-select-box_1_9_103
         id="htmlSelectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -46,7 +46,7 @@ const TemplateHTMLSelectBox = args => `
         use-external-paginated-filtering="${args.useExternalPaginatedFiltering}"
         is-all-external-data-loaded="${args.isAllExternalDataLoaded}"
         clearable=true
-    ></tttx-select-box_localcomponent>
+    ></tttx-select-box_1_9_103>
     <script>
       // Handle case where storybook renders this story twice
       if (!htmlSelectBox.length) {
@@ -54,20 +54,20 @@ const TemplateHTMLSelectBox = args => `
         htmlSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
       }
     </script>
-`;
-export const BasicHTMLSelectBox = TemplateHTMLSelectBox.bind({});
-BasicHTMLSelectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  isLoading: false,
-  useExternalPaginatedFiltering: false,
-  isAllExternalDataLoaded: false
-};
+`;
+export const BasicHTMLSelectBox = TemplateHTMLSelectBox.bind({});
+BasicHTMLSelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  isLoading: false,
+  useExternalPaginatedFiltering: false,
+  isAllExternalDataLoaded: false
+};
 const TemplateReadOnlySelectBox = args => `
-    <tttx-select-box_localcomponent
+    <tttx-select-box_1_9_103
         id="htmlSelectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -81,7 +81,7 @@ const TemplateReadOnlySelectBox = args => `
         read-only="${args.readOnly}"
         selected-value='${args.selectedValue}'
         clearable=true
-    ></tttx-select-box_localcomponent>
+    ></tttx-select-box_1_9_103>
     <script>
       // Handle case where storybook renders this story twice
         if (!htmlSelectBox.length) {
@@ -89,20 +89,20 @@ const TemplateReadOnlySelectBox = args => `
             htmlSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
         }
     </script>
-`;
-export const ReadOnlySelectBox = TemplateReadOnlySelectBox.bind({});
-ReadOnlySelectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  isLoading: false,
-  selectedValue: options[0].value,
-  readOnly: true
-};
+`;
+export const ReadOnlySelectBox = TemplateReadOnlySelectBox.bind({});
+ReadOnlySelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  isLoading: false,
+  selectedValue: options[0].value,
+  readOnly: true
+};
 const TemplateExternalFilteringSelectBox = args => `
-    <tttx-select-box_localcomponent
+    <tttx-select-box_1_9_103
         id="htmlSelectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -115,7 +115,7 @@ const TemplateExternalFilteringSelectBox = args => `
         use-external-filtering="true"
         is-loading="${args.isLoading}"
         clearable=true
-    ></tttx-select-box_localcomponent>
+    ></tttx-select-box_1_9_103>
     <script>
       // Handle case where storybook renders this story twice
       if (!htmlSelectBox.length) {
@@ -123,19 +123,19 @@ const TemplateExternalFilteringSelectBox = args => `
         htmlSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
       }
     </script>
-`;
-export const ExternalFilteringSelectBox = TemplateExternalFilteringSelectBox.bind({});
-ExternalFilteringSelectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  useExternalFiltering: true,
-  isLoading: false
-};
+`;
+export const ExternalFilteringSelectBox = TemplateExternalFilteringSelectBox.bind({});
+ExternalFilteringSelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  useExternalFiltering: true,
+  isLoading: false
+};
 const TemplateJSXSelectBox = args => `
-    <tttx-select-box_localcomponent
+    <tttx-select-box_1_9_103
         id='objectSelectBox'
         label='${args.label}'
         placeholder='${args.placeholder}'
@@ -145,32 +145,32 @@ const TemplateJSXSelectBox = args => `
         show-error-bubble="${args.showErrorBubble === false ? 'false' : 'true'}"
         ${args.showErrorMsg ? 'show-error-msg' : ''}
         clearable=true
-    ></tttx-select-box_localcomponent>
+    ></tttx-select-box_1_9_103>
     <script>
       objectSelectBox.optionsData = ${JSON.stringify(args.optionsData)}
       objectSelectBox.addEventListener('toggleOpen', (ev) => { console.log(ev) })
       objectSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
     </script>
-`;
-export const BasicJSXSelectBox = TemplateJSXSelectBox.bind({});
-BasicJSXSelectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-};
-const tagOptions = [
-  { value: '1', label: 'Client', html: '<tttx-tag_localcomponent text="Client" color="#f2bebe"></tttx-tag_localcomponent>' },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_localcomponent text="Job Role" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '3', label: 'Project', html: '<tttx-tag_localcomponent text="Project" color="#e4ebc9"></tttx-tag_localcomponent>' },
-];
+`;
+export const BasicJSXSelectBox = TemplateJSXSelectBox.bind({});
+BasicJSXSelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+};
+const tagOptions = [
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_103 text="Client" color="#f2bebe"></tttx-tag_1_9_103>' },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_103 text="Job Role" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '3', label: 'Project', html: '<tttx-tag_1_9_103 text="Project" color="#e4ebc9"></tttx-tag_1_9_103>' },
+];
 const TttxDialogBoxStory = ({ data }) => `
   <button onclick="openDialog()">Open</button>
-  <tttx-dialog-box_localcomponent
+  <tttx-dialog-box_1_9_103
     id='dialogBox'
     allow-overflow='true'
-  ></tttx-dialog-box_localcomponent>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBox) {
       const dialogBox = document.getElementById('dialogBox');
@@ -183,20 +183,20 @@ const TttxDialogBoxStory = ({ data }) => `
     }
     dialogBox.data = ${JSON.stringify(data)};
   </script>
-`;
-export const DialogBoxWithDropdown = TttxDialogBoxStory.bind({});
-DialogBoxWithDropdown.args = {
-  data: {
-    header: {
-      title: 'Dialog Title',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: true,
+`;
+export const DialogBoxWithDropdown = TttxDialogBoxStory.bind({});
+DialogBoxWithDropdown.args = {
+  data: {
+    header: {
+      title: 'Dialog Title',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: true,
       customHtml: `
               <div style="padding: 5px; display: flex; gap: 16px; flex-direction: column">
-                <tttx-select-box_localcomponent
+                <tttx-select-box_1_9_103
                   id="htmlSelectBox"
                   options-data='${JSON.stringify(tagOptions)}'
                   label='Label'
@@ -204,37 +204,37 @@ DialogBoxWithDropdown.args = {
                   search-enabled='${true}'
                   inline='${false}'
                   selected-value='${tagOptions[1].value}'
-                ></tttx-select-box_localcomponent>
-                <tttx-standalone-input_localcomponent
+                ></tttx-select-box_1_9_103>
+                <tttx-standalone-input_1_9_103
                   label='Name'
                   placeholder='Enter name'
-                ></tttx-standalone-input_localcomponent>
-                <tttx-select-box_localcomponent
+                ></tttx-standalone-input_1_9_103>
+                <tttx-select-box_1_9_103
                   id="htmlSelectBox2"
                   options-data='${JSON.stringify(options)}'
                   label='Label 2'
                   placeholder='Placeholder 2'
-                ></tttx-select-box_localcomponent>
+                ></tttx-select-box_1_9_103>
               </div>
-            `,
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
-const priorityOptions = [
-  { value: '1', label: 'Triss Merigold', prioritise: true, description: 'A sorceress' },
-  { value: '2', label: 'Yennefer of Vengerberg', prioritise: true },
-  { value: '3', label: 'Philippa Eilhart' },
-  { value: '4', label: 'Keira Metz', description: 'Likes towers, and other things to make this description longer!' }
-];
+            `,
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const priorityOptions = [
+  { value: '1', label: 'Triss Merigold', prioritise: true, description: 'A sorceress' },
+  { value: '2', label: 'Yennefer of Vengerberg', prioritise: true },
+  { value: '3', label: 'Philippa Eilhart' },
+  { value: '4', label: 'Keira Metz', description: 'Likes towers, and other things to make this description longer!' }
+];
 const TemplatePriorityHTMLSelectBox = args => `
-    <tttx-select-box_localcomponent
+    <tttx-select-box_1_9_103
         id="htmlSelectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -248,7 +248,7 @@ const TemplatePriorityHTMLSelectBox = args => `
         priority-label='${args.priorityLabel}'
         non-priority-label='${args.nonPriorityLabel}'
         clearable=true
-    ></tttx-select-box_localcomponent>
+    ></tttx-select-box_1_9_103>
     <script>
         // Handle case where storybook renders this story twice
         if (!htmlSelectBox.length) {
@@ -256,15 +256,15 @@ const TemplatePriorityHTMLSelectBox = args => `
             htmlSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
         }
     </script>
-`;
-export const PriorityHTMLSelectBox = TemplatePriorityHTMLSelectBox.bind({});
-PriorityHTMLSelectBox.args = {
-  optionsData: priorityOptions,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  isLoading: false,
-  priorityLabel: 'The Best',
-  nonPriorityLabel: 'The Rest'
-};
+`;
+export const PriorityHTMLSelectBox = TemplatePriorityHTMLSelectBox.bind({});
+PriorityHTMLSelectBox.args = {
+  optionsData: priorityOptions,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  isLoading: false,
+  priorityLabel: 'The Best',
+  nonPriorityLabel: 'The Rest'
+};