orcs-design-system 3.2.4 → 3.2.6

package/es/components/Select/Select.stories.js

@@ -1,19 +1,18 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import Select from ".";
 import React, { useState } from "react";
 import Box from "../Box";
 import Spacer from "../Spacer";
 import { getOptionByValue } from "../../utils/selectUtil";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Select",
   component: Select,
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      height: "350px"
-    }, storyFn());
-  }]
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    height: "350px",
+    children: storyFn()
+  })]
 };
-var options = [{
+const options = [{
   value: "caramel",
   label: "Caramel"
 }, {
@@ -26,7 +25,7 @@ var options = [{
   value: "vanilla",
   label: "Vanilla"
 }];
-var groupedOptions = [{
+const groupedOptions = [{
   label: "Fruit",
   options: [{
     value: "apple",
@@ -51,79 +50,70 @@ var groupedOptions = [{
     label: "Celery"
   }]
 }];
-export var defaultSelect = function defaultSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    label: "Select label",
-    inputId: "defaultSelect"
-  });
-};
+export const defaultSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  label: "Select label",
+  inputId: "defaultSelect"
+});
 defaultSelect.story = {
   name: "Default"
 };
-export var invalidSelect = function invalidSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    invalid: true,
-    label: "Select label - invalid message",
-    inputId: "invalidSelect"
-  });
-};
+export const invalidSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  invalid: true,
+  label: "Select label - invalid message",
+  inputId: "invalidSelect"
+});
 invalidSelect.story = {
   name: "Invalid"
 };
-export var mandatorySelect = function mandatorySelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    mandatory: true,
-    label: "Select label",
-    inputId: "mandatorySelect"
-  });
-};
+export const mandatorySelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  mandatory: true,
+  label: "Select label",
+  inputId: "mandatorySelect"
+});
 mandatorySelect.story = {
   name: "Mandatory"
 };
-export var disabledSelect = function disabledSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    label: "Select label",
-    inputId: "defaultSelect",
-    isDisabled: true
-  });
-};
+export const disabledSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  label: "Select label",
+  inputId: "defaultSelect",
+  isDisabled: true
+});
 defaultSelect.story = {
   name: "Disabled"
 };
-export var SpecificHeightSelect = function SpecificHeightSelect() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
-    mb: "l"
-  }, /*#__PURE__*/React.createElement(Select, {
-    height: "30px",
-    padding: "0 8px",
-    options: options,
-    "aria-label": "Select label"
-  }), /*#__PURE__*/React.createElement(Select, {
-    height: "56px",
-    padding: "4px 12px",
-    options: options,
-    "aria-label": "Select label"
-  })));
-};
+export const SpecificHeightSelect = () => /*#__PURE__*/_jsx(_Fragment, {
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mb: "l",
+    children: [/*#__PURE__*/_jsx(Select, {
+      height: "30px",
+      padding: "0 8px",
+      options: options,
+      "aria-label": "Select label"
+    }), /*#__PURE__*/_jsx(Select, {
+      height: "56px",
+      padding: "4px 12px",
+      options: options,
+      "aria-label": "Select label"
+    })]
+  })
+});
 defaultSelect.story = {
   name: "SpecificHeightSelect"
 };
-export var multiSelect = function multiSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    isMulti: true,
-    "aria-label": "Select label"
-  });
-};
+export const multiSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  isMulti: true,
+  "aria-label": "Select label"
+});
 multiSelect.story = {
   name: "Multi-select"
 };
-export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions() {
-  var options = [{
+export const multiSelectWithFixedOptions = () => {
+  const options = [{
     value: "caramel",
     label: "Caramel",
     isFixed: true
@@ -140,13 +130,12 @@ export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions()
     isDisabled: true
   }];
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  var _useState = useState([options[0], options[1]]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var onChange = function onChange(value, _ref) {
-    var action = _ref.action,
-      removedValue = _ref.removedValue;
+  const [selected, setSelected] = useState([options[0], options[1]]);
+  const onChange = (value, _ref) => {
+    let {
+      action,
+      removedValue
+    } = _ref;
     switch (action) {
       case "remove-value":
       case "pop-value":
@@ -157,7 +146,7 @@ export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions()
     }
     setSelected(value);
   };
-  return /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/_jsx(Select, {
     options: options,
     value: selected,
     isMulti: true,
@@ -169,72 +158,62 @@ export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions()
 multiSelectWithFixedOptions.story = {
   name: "Multi-select-with-fixed-options"
 };
-export var invertedSelect = function invertedSelect() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    width: "100%",
-    height: "270px",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    mb: "l"
-  }, /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    inverted: true,
-    "aria-label": "Select label"
-  }), /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    inverted: true,
-    isMulti: true,
-    "aria-label": "Select label"
-  })));
-};
+export const invertedSelect = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  width: "100%",
+  height: "270px",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mb: "l",
+    children: [/*#__PURE__*/_jsx(Select, {
+      options: options,
+      inverted: true,
+      "aria-label": "Select label"
+    }), /*#__PURE__*/_jsx(Select, {
+      options: options,
+      inverted: true,
+      isMulti: true,
+      "aria-label": "Select label"
+    })]
+  })
+});
 invertedSelect.story = {
   name: "Inverted"
 };
-export var withDataIdSelect = function withDataIdSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    "data-testid": "test-this-component",
-    "aria-label": "Select label"
-  });
-};
+export const withDataIdSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  "data-testid": "test-this-component",
+  "aria-label": "Select label"
+});
 withDataIdSelect.story = {
   name: "With Data ID"
 };
-export var withSelectedValueSelect = function withSelectedValueSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    defaultValue: getOptionByValue(options, "chocolate"),
-    "aria-label": "Select label"
-  });
-};
+export const withSelectedValueSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  defaultValue: getOptionByValue(options, "chocolate"),
+  "aria-label": "Select label"
+});
 withSelectedValueSelect.storyName = "With Selected Value";
-export var withCreatableSelect = function withCreatableSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: options,
-    selectType: "creatable",
-    isMulti: true,
-    "aria-label": "Select label"
-  });
-};
+export const withCreatableSelect = () => /*#__PURE__*/_jsx(Select, {
+  options: options,
+  selectType: "creatable",
+  isMulti: true,
+  "aria-label": "Select label"
+});
 withCreatableSelect.storyName = "With Creatable";
-export var withAsyncSelect = function withAsyncSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    defaultOptions: options,
-    selectType: "async",
-    isMulti: true,
-    "aria-label": "Select label"
-  });
-};
+export const withAsyncSelect = () => /*#__PURE__*/_jsx(Select, {
+  defaultOptions: options,
+  selectType: "async",
+  isMulti: true,
+  "aria-label": "Select label"
+});
 withAsyncSelect.storyName = "With Async";
-export var withGroupedOptions = function withGroupedOptions() {
-  return /*#__PURE__*/React.createElement(Select, {
-    options: groupedOptions,
-    isMulti: true,
-    menuIsOpen: true,
-    "aria-label": "Select label"
-  });
-};
+export const withGroupedOptions = () => /*#__PURE__*/_jsx(Select, {
+  options: groupedOptions,
+  isMulti: true,
+  menuIsOpen: true,
+  "aria-label": "Select label"
+});
 withGroupedOptions.storyName = "With Grouped Options";
 defaultSelect.__docgenInfo = {
   "description": "",