@infineon/infineon-design-system-stencil 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.5ed5af060f6d294c39b0d509d73a088e1d9ffceb.0

package/dist/collection/components/select/single-select/select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    label: '',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      options: {\n        'small (36px)': 's',\n        'medium (40px)': 'm',\n      },\n      control: {\n        type: 'radio',\n      },\n    },\n    placeholder: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    placeholderValue: { control: 'text' },\n    // value: { for later implementation\n    //   control: 'text',\n    //   description: 'Programmatically set the selected value',\n    // },\n    error: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    errorMessage: { control: 'text' },\n    label: { control: 'text' },\n    disabled: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    showSearch: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    searchPlaceholderValue: { control: { type: 'text' } },\n\n    options: {\n      description: 'Takes an array of objects in the following format',\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    label: '',\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    placeholder: {\n      description: 'Determines whether a placeholder is displayed or not.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    placeholderValue: {\n      description: 'Sets the text displayed as the placeholder when placeholder is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    error: {\n      description: 'Displays an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    errorMessage: {\n      description: 'Message displayed when error is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    label: {\n      description: 'Sets the label.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    disabled: {\n      description: 'Disables the dropdown.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    showSearch: {\n      description: 'Enables a search bar inside the dropdown to filter options.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    searchPlaceholderValue: {\n      description: 'Placeholder text for the search input field.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    options: {\n      description: 'Takes an array of objects in the following format.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* changes.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}

package/dist/collection/components/slider/slider.stories.js

@@ -5,36 +5,120 @@ export default {
     component: 'ifx-slider',
     tags: ['autodocs'],
     argTypes: {
-        min: { control: 'number' },
-        max: { control: 'number' },
-        step: { control: 'number' },
-        type: { control: 'radio', options: ['single', 'double'] },
-        value: { control: 'number', if: { arg: 'type', eq: 'single' } },
-        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single' } },
-        disabled: { control: 'boolean' },
+        min: { control: 'number',
+            description: 'The minimum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '0' },
+                type: { summary: 'number' }
+            }
+        },
+        max: { control: 'number',
+            description: 'The maximum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '100' },
+                type: { summary: 'number' }
+            }
+        },
+        step: { control: 'number',
+            description: 'The step value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '1' },
+                type: { summary: 'number' }
+            }
+        },
+        type: { control: 'radio', options: ['single', 'double'],
+            description: 'The type of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'single' },
+                type: { summary: 'single | double' }
+            }
+        },
+        value: { control: 'number', if: { arg: 'type', eq: 'single' },
+            description: 'The current value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number ' }
+            }
+        },
+        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The minimum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            }
+        },
+        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The maximum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            },
+        },
+        showPercentage: {
+            control: 'boolean', if: { arg: 'type', eq: 'single' },
+            description: 'Show the percentage of the slider value.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
+        disabled: { control: 'boolean',
+            description: 'Disable the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
         leftIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the left of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
         rightIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the right of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        leftText: { control: 'text',
+            description: 'The text on the left side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        rightText: { control: 'text',
+            description: 'The text on the right side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
-        leftText: { control: 'text' },
-        rightText: { control: 'text' },
         ifxChange: {
             action: 'ifxChange',
-            description: 'Custom event emitted on input change',
+            description: 'Custom event emitted on input change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
         },
-    },
+    }
 };
 const Template = args => {
     const sliderElement = document.createElement('ifx-slider');

package/dist/collection/components/slider/slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number' },\n    max: { control: 'number' },\n    step: { control: 'number' },\n    type: { control: 'radio', options: ['single', 'double']},\n    value: { control: 'number', if: { arg: 'type', eq: 'single'} },\n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single'} },\n    disabled: { control: 'boolean' },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    leftText: { control: 'text' },\n    rightText: { control: 'text' },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input change',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number',\n      description: 'The minimum value of the slider.',\n    table:{\n      category: 'ifx-slider props',\n      defaultValue: { summary: '0' },\n      type: { summary: 'number' }\n    }\n  },\n    max: { control: 'number',\n      description: 'The maximum value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '100' },\n        type: { summary: 'number' }\n      } \n    },\n    step: { control: 'number',\n      description: 'The step value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '1' },\n        type: { summary: 'number' }\n      }\n     },\n    type: { control: 'radio', options: ['single', 'double'],\n      description: 'The type of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          defaultValue: { summary: 'single' },\n          type: { summary: 'single | double' }\n       }\n    },\n    value: { control: 'number', if: { arg: 'type', eq: 'single'},\n      description: 'The current value of the slider.',\n      table: {  \n        category: 'ifx-slider props',\n        type: { summary: 'number ' }\n      }\n    },  \n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The minimum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    }\n  },\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The maximum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    },\n  }, \n    showPercentage: { \n      control: 'boolean', if: { arg: 'type', eq: 'single'},\n      description: 'Show the percentage of the slider value.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    disabled: { control: 'boolean',\n      description: 'Disable the slider.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select'},\n        description: 'The icon on the left of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          type: { summary: 'string' }\n        }\n       },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      description: 'The icon on the right of the slider.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    leftText: { control: 'text',\n      description: 'The text on the left side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    rightText: { control: 'text',\n      description: 'The text on the right side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input change.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n    },\n  }\n}\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}

package/dist/collection/components/spinner/spinner.stories.js

@@ -4,20 +4,52 @@ export default {
     args: {
         size: 'm',
         variant: 'default',
+        inverted: false,
     },
     argTypes: {
         size: {
-            description: 'Size options: s (24px) and m (40px) - default: m',
+            description: 'Size options: s (24px) and m (40px).',
             options: ['s', 'm'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         variant: {
+            description: 'Variant of the spinner.',
             options: ['default', 'brand'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'default'
+                },
+                type: {
+                    summary: 'string'
+                }
+            },
         },
+        inverted: {
+            description: 'Changes the color of spinner to white.',
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }
     },
 };
-const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}"></ifx-spinner>`;
+const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
 export const Default = DefaultTemplate.bind({});
 Default.argsTypes = {};
 //# sourceMappingURL=spinner.stories.js.map

package/dist/collection/components/spinner/spinner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,kBAAkB,CAAC;AAE5G,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;YACtC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;AAExI,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n    inverted: false,\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px).',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    variant: {\n      description: 'Variant of the spinner.',\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'default'\n        },\n        type: {\n          summary: 'string'\n        }\n      },\n    },\n    inverted: {\n      description: 'Changes the color of spinner to white.',\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    }\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\" inverted=\"${args.inverted}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}

package/dist/collection/components/status/status.css

@@ -18,87 +18,27 @@
 .container.no-border {
   padding: 0;
 }
-.container.border-engineering-100 {
-  border: 1px solid #F7F7F7;
-}
-.container.border-engineering-200 {
-  border: 1px solid #EEEDED;
-}
-.container.border-engineering-300 {
-  border: 1px solid #BFBBBB;
-}
-.container.border-engineering-400 {
-  border: 1px solid #8D8786;
-}
-.container.border-engineering-500 {
-  border: 1px solid #575352;
-}
-.container.border-engineering-600 {
-  border: 1px solid #3C3A39;
-}
-.container.border-ocean-100 {
-  border: 1px solid #DFF4F3;
-}
-.container.border-ocean-200 {
-  border: 1px solid #B8DEDA;
-}
-.container.border-ocean-300 {
-  border: 1px solid #6CB4AD;
-}
-.container.border-ocean-400 {
-  border: 1px solid #3B9B91;
+.container.border-orange {
+  border: 1px solid #E16B25;
 }
-.container.border-ocean-500 {
+.container.border-ocean {
   border: 1px solid #0A8276;
 }
-.container.border-ocean-600 {
-  border: 1px solid #08665C;
+.container.border-grey {
+  border: 1px solid #575352;
 }
-.container.border-ocean-700 {
-  border: 1px solid #06534B;
+.container.border-light-grey {
+  border: 1px solid #BFBBBB;
 }
-.container.border-red-500 {
+.container.border-red {
   border: 1px solid #CD002F;
 }
-.container.border-red-600 {
-  border: 1px solid #A2001E;
-}
-.container.border-red-700 {
-  border: 1px solid #900021;
-}
-.container.border-orange-500 {
-  border: 1px solid #E16B25;
-}
-.container.border-green-500 {
+.container.border-green {
   border: 1px solid #4CA460;
 }
-.container.border-lawn-400 {
-  border: 1px solid #B9D257;
-}
-.container.border-lawn-500 {
-  border: 1px solid #9BBA43;
-}
-.container.border-lawn-700 {
-  border: 1px solid #3C6C0F;
-}
-.container.border-berry-400 {
-  border: 1px solid #BE3283;
-}
-.container.border-berry-500 {
+.container.border-berry {
   border: 1px solid #9C216E;
 }
-.container.border-sun-400 {
-  border: 1px solid #FF9737;
-}
-.container.border-sun-500 {
-  border: 1px solid #F97414;
-}
-.container.border-sand-400 {
-  border: 1px solid #FBE273;
-}
-.container.border-sand-500 {
-  border: 1px solid #FCD442;
-}
 
 .text {
   margin: 0;
@@ -118,84 +58,24 @@
   border-radius: 9999px;
 }
 
-.dot.engineering-100 {
-  background-color: #F7F7F7;
-}
-.dot.engineering-200 {
-  background-color: #EEEDED;
-}
-.dot.engineering-300 {
-  background-color: #BFBBBB;
-}
-.dot.engineering-400 {
-  background-color: #8D8786;
-}
-.dot.engineering-500 {
-  background-color: #575352;
-}
-.dot.engineering-600 {
-  background-color: #3C3A39;
-}
-.dot.ocean-100 {
-  background-color: #DFF4F3;
-}
-.dot.ocean-200 {
-  background-color: #B8DEDA;
-}
-.dot.ocean-300 {
-  background-color: #6CB4AD;
-}
-.dot.ocean-400 {
-  background-color: #3B9B91;
+.dot.orange {
+  background-color: #E16B25;
 }
-.dot.ocean-500 {
+.dot.ocean {
   background-color: #0A8276;
 }
-.dot.ocean-600 {
-  background-color: #08665C;
+.dot.grey {
+  background-color: #575352;
 }
-.dot.ocean-700 {
-  background-color: #06534B;
+.dot.light-grey {
+  background-color: #BFBBBB;
 }
-.dot.red-500 {
+.dot.red {
   background-color: #CD002F;
 }
-.dot.red-600 {
-  background-color: #A2001E;
-}
-.dot.red-700 {
-  background-color: #900021;
-}
-.dot.orange-500 {
-  background-color: #E16B25;
-}
-.dot.green-500 {
+.dot.green {
   background-color: #4CA460;
 }
-.dot.lawn-400 {
-  background-color: #B9D257;
-}
-.dot.lawn-500 {
-  background-color: #9BBA43;
-}
-.dot.lawn-700 {
-  background-color: #3C6C0F;
-}
-.dot.berry-400 {
-  background-color: #BE3283;
-}
-.dot.berry-500 {
+.dot.berry {
   background-color: #9C216E;
-}
-.dot.sun-400 {
-  background-color: #FF9737;
-}
-.dot.sun-500 {
-  background-color: #F97414;
-}
-.dot.sand-400 {
-  background-color: #FBE273;
-}
-.dot.sand-500 {
-  background-color: #FCD442;
 }

package/dist/collection/components/status/status.js

@@ -2,11 +2,11 @@ import { h } from "@stencil/core";
 export class Status {
     constructor() {
         this.border = false;
-        this.color = 'orange-500';
+        this.color = 'orange';
     }
     render() {
         const containerClass = this.border ? `container border-${this.color}` : 'container no-border';
-        return (h("div", { key: '65a10417bf283f3312ba0cfc503dcc5289df8390', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '5294071cb48aca92f02532b0ef09f3b7bd2842c8', class: `dot ${this.color}` }), h("p", { key: 'cf92305b5467ef56320e706be7a486f2a6cbb5a5', class: "text" }, this.label)));
+        return (h("div", { key: '6e25a145cdcaee5a2137c94531b84c97b28c8a01', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '5c43e25f62e1bafb8e856b786de7bc9a37e0ff4d', class: `dot ${this.color}` }), h("p", { key: '1d64598bbef69fc6de5e7dc529afb43f9cd0236b', class: "text" }, this.label)));
     }
     static get is() { return "ifx-status"; }
     static get encapsulation() { return "shadow"; }
@@ -65,8 +65,8 @@ export class Status {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'engineering-100' | 'engineering-200' | 'engineering-300' | 'engineering-400' | 'engineering-500' | 'engineering-600' | 'ocean-100' | 'ocean-200' | 'ocean-300' | 'ocean-400' | 'ocean-500' | 'ocean-600' | 'ocean-700' | 'red-500' | 'red-600' | 'red-700' | 'orange-500' | 'green-500' | 'lawn-400' | 'lawn-500' | 'lawn-700' | 'berry-400' | 'berry-500' | 'sun-400' | 'sun-500' | 'sand-400' | 'sand-500'",
-                    "resolved": "\"orange-500\" | \"engineering-100\" | \"engineering-200\" | \"engineering-300\" | \"engineering-400\" | \"engineering-500\" | \"engineering-600\" | \"ocean-100\" | \"ocean-200\" | \"ocean-300\" | \"ocean-400\" | \"ocean-500\" | \"ocean-600\" | \"ocean-700\" | \"red-500\" | \"red-600\" | \"red-700\" | \"green-500\" | \"lawn-400\" | \"lawn-500\" | \"lawn-700\" | \"berry-400\" | \"berry-500\" | \"sun-400\" | \"sun-500\" | \"sand-400\" | \"sand-500\"",
+                    "original": "'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry'",
+                    "resolved": "\"berry\" | \"green\" | \"grey\" | \"light-grey\" | \"ocean\" | \"orange\" | \"red\"",
                     "references": {}
                 },
                 "required": false,
@@ -79,7 +79,7 @@ export class Status {
                 "setter": false,
                 "attribute": "color",
                 "reflect": false,
-                "defaultValue": "'orange-500'"
+                "defaultValue": "'orange'"
             }
         };
     }

package/dist/collection/components/status/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,MAAM;IANnB;QAQU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAkZ,YAAY,CAAC;KAc7a;IAVC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAE9F,OAAO,CACL,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc;YAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS;YACzC,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: 'engineering-100' | 'engineering-200' | 'engineering-300' | 'engineering-400' | 'engineering-500' | 'engineering-600' | 'ocean-100' | 'ocean-200' | 'ocean-300' | 'ocean-400' | 'ocean-500' | 'ocean-600' | 'ocean-700' | 'red-500' | 'red-600' | 'red-700' | 'orange-500' | 'green-500' | 'lawn-400' | 'lawn-500' | 'lawn-700' | 'berry-400' | 'berry-500' | 'sun-400' | 'sun-500' | 'sand-400' | 'sand-500' = 'orange-500';\n\n\n\n  render() {\n    const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${this.color}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,MAAM;IANnB;QAQU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAA2E,QAAQ,CAAC;KAclG;IAVC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAE9F,OAAO,CACL,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc;YAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS;YACzC,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry' = 'orange';\n\n\n\n  render() {\n    const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${this.color}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/status/status.stories.js

@@ -3,17 +3,41 @@ export default {
     tags: ['autodocs'],
     args: {
         label: 'text',
-        color: 'orange-500',
+        color: 'orange',
         border: true,
     },
     argTypes: {
+        label: {
+            name: 'Label of Status',
+            description: 'Set the label of *<ifx-status>*.',
+            table: {
+                category: 'ifx-status props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         border: {
+            description: 'When set to **true** the status has a border.',
             control: 'boolean',
             attr: 'border',
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: true
+                }
+            }
         },
         color: {
-            options: ['engineering-100', 'engineering-200', 'engineering-300', 'engineering-400', 'engineering-500', 'engineering-600', 'ocean-100', 'ocean-200', 'ocean-300', 'ocean-400', 'ocean-500', 'ocean-600', 'ocean-700', 'red-500', 'red-600', 'red-700', 'orange-500', 'green-500', 'lawn-400', 'lawn-500', 'lawn-700', 'berry-400', 'berry-500', 'sun-400', 'sun-500', 'sand-400', 'sand-500'],
-            control: { type: 'select' },
+            description: 'Sets the color of the status.',
+            control: 'radio',
+            options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: 'orange'
+                }
+            }
         },
     },
 };

package/dist/collection/components/status/status.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;SACf;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;YAC9X,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Status',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'text',\n    color: 'orange-500',\n    border: true,\n  },\n  argTypes: {\n    border: {\n      control: 'boolean',\n      attr: 'border',\n    },\n    color: {\n      options: ['engineering-100', 'engineering-200', 'engineering-300', 'engineering-400', 'engineering-500', 'engineering-600', 'ocean-100', 'ocean-200', 'ocean-300', 'ocean-400', 'ocean-500', 'ocean-600', 'ocean-700', 'red-500', 'red-600', 'red-700', 'orange-500', 'green-500', 'lawn-400', 'lawn-500', 'lawn-700', 'berry-400', 'berry-500', 'sun-400', 'sun-500', 'sand-400', 'sand-500'],\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;YAC3E,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Status',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'text',\n    color: 'orange',\n    border: true,\n  },\n  argTypes: {\n    label: {\n      name: 'Label of Status',\n      description: 'Set the label of *<ifx-status>*.',\n      table: {\n        category: 'ifx-status props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    border: {\n      description: 'When set to **true** the status has a border.',\n      control: 'boolean',\n      attr: 'border',\n      table: {\n        category: 'ifx-status props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    color: {\n      description: 'Sets the color of the status.',\n      control: 'radio',\n      options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],\n      table: {\n        category: 'ifx-status props',\n        defaultValue: {\n          summary: 'orange'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}