Static Site

2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
--- a/Static/package/dist/collection/components/select/single-select/select.stories.js
+++ b/Static/package/dist/collection/components/select/single-select/select.stories.js
@ -0,0 +1,138 @@
+import { action } from "@storybook/addon-actions";
+//use string instead of json format here to avoid ugly formatting in the storybook code snippet
+// let options = "[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]"
+const options = [{
+    value: "a",
+    label: "option a",
+    selected: false
+  },
+  {
+    value: "b",
+    label: "option b",
+    selected: false
+  },
+  {
+    value: "c",
+    label: "option c",
+    selected: false
+  }];
+export default {
+  title: 'Components/Select/Single Select',
+  // tags: ['autodocs'],
+  args: {
+    size: "m",
+    searchEnabled: true,
+    searchPlaceholderValue: 'Search...',
+    placeholder: true,
+    placeholderValue: 'Placeholder',
+    error: false,
+    errorMessage: 'Some error',
+    label: '',
+    disabled: false,
+    // type: 'single', //for later implementation
+  },
+  argTypes: {
+    // type: { //for later implementation
+    //   // control: { type: 'radio' },
+    //   control: false,
+    // },
+    size: {
+      options: {
+        'small (36px)': 's',
+        'medium (40px)': 'm'
+      },
+      control: {
+        type: 'radio',
+      },
+    },
+    placeholder: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    placeholderValue: { control: 'text' },
+    // value: { for later implementation
+    //   control: 'text',
+    //   description: 'Programmatically set the selected value',
+    // },
+    error: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    errorMessage: { control: 'text' },
+    label: { control: 'text' },
+    disabled: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    searchEnabled: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    searchPlaceholderValue: { control: { type: 'text' } },
+    options: {
+      description: 'Takes an array of objects in the following format',
+    },
+    ifxSelect: {
+      action: 'ifxSelect',
+      description: 'Custom event emitted when item is selected',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
+        },
+      },
+    },
+  },
+};
+const DefaultTemplate = (args) => {
+  const template = `<ifx-select 
+  ifx-size='${args.size}'
+  placeholder='${args.placeholder}'
+  search-enabled='${args.searchEnabled}'
+  search-placeholder-value='${args.searchPlaceholderValue}'
+  ifx-disabled='${args.disabled}'
+  ifx-error='${args.error}'
+  ifx-error-message='${args.errorMessage}'
+  ifx-label='${args.label}'
+  ifx-placeholder-value='${args.placeholderValue}'
+  ifx-options='${JSON.stringify(args.options)}' >
+ </ifx-select>`;
+  setTimeout(() => {
+    var _a, _b;
+    (_a = document.querySelector('ifx-select')) === null || _a === void 0 ? void 0 : _a.addEventListener('ifxSelect', action('ifxSelect'));
+    (_b = document.querySelector('ifx-select')) === null || _b === void 0 ? void 0 : _b.addEventListener('ifxInput', action('ifxInput'));
+  }, 0);
+  return template;
+};
+export const Single = DefaultTemplate.bind({});
+Single.args = {
+  // type: 'single',
+  options: options,
+};
+// export const Text = DefaultTemplate.bind({});
+// Text.args = {
+//   type: 'text',
+//   name: 'text',
+//   value: 'Placeholder',
+//   allowHTML: true,
+//   delimiter: ',',
+//   editItems: true,
+//   maxItemCount: 5,
+// };
+// export const Text = DefaultTemplate.bind({});
+// Text.args = {
+//   type: 'multiple',
+//   name: 'multiple',
+//   choices: 'Choice 1, Choice 2, Choice 3',
+// };
+// export const SingleWithIcon = DefaultTemplate.bind({});
+// SingleWithIcon.args = {
+//   type: 'single',
+//   choices: "Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>",
+// };
+// export const MultiselectCombobox = DefaultTemplate.bind({});
+// MultiselectCombobox.args = {
+//   type: 'multiple',
+//   // removeItemButton: true,
+// };
+//# sourceMappingURL=select.stories.js.map