orcs-design-system/es/components/Select/Select.stories.js

TeamForm's Design System, aka: ORCS

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",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    height: "270px",
    children: storyFn()
  })],
  component: Select
};
const options = [{
  value: "caramel",
  label: "Caramel"
}, {
  value: "chocolate",
  label: "Chocolate"
}, {
  value: "strawberry",
  label: "Strawberry"
}, {
  value: "vanilla",
  label: "Vanilla"
}];
const groupedOptions = [{
  label: "Fruit",
  options: [{
    value: "apple",
    label: "Apple"
  }, {
    value: "pear",
    label: "Pear"
  }, {
    value: "orange",
    label: "Orange"
  }]
}, {
  label: "Veg",
  options: [{
    value: "carrot",
    label: "Carrot"
  }, {
    value: "zucchini",
    label: "Zucchini"
  }, {
    value: "celery",
    label: "Celery"
  }]
}];
export const defaultSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  label: "Select label",
  inputId: "defaultSelect"
});
defaultSelect.story = {
  name: "Default"
};
export const invalidSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  invalid: true,
  label: "Select label - invalid message",
  inputId: "invalidSelect"
});
invalidSelect.story = {
  name: "Invalid"
};
export const mandatorySelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  mandatory: true,
  label: "Select label",
  inputId: "mandatorySelect"
});
mandatorySelect.story = {
  name: "Mandatory"
};
export const disabledSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  label: "Select label",
  inputId: "defaultSelect",
  isDisabled: true
});
defaultSelect.story = {
  name: "Disabled"
};
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 const multiSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  isMulti: true,
  "aria-label": "Select label"
});
multiSelect.story = {
  name: "Multi-select"
};
export const multiSelectWithFixedOptions = () => {
  const options = [{
    value: "caramel",
    label: "Caramel",
    isFixed: true
  }, {
    value: "chocolate",
    label: "Chocolate",
    isFixed: true
  }, {
    value: "strawberry",
    label: "Strawberry"
  }, {
    value: "vanilla",
    label: "Vanilla",
    isDisabled: true
  }];
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [selected, setSelected] = useState([options[0], options[1]]);
  const onChange = (value, _ref) => {
    let {
      action,
      removedValue
    } = _ref;
    switch (action) {
      case "remove-value":
      case "pop-value":
        if (removedValue.isFixed) {
          return;
        }
        break;
    }
    setSelected(value);
  };
  return /*#__PURE__*/_jsx(Select, {
    options: options,
    value: selected,
    isMulti: true,
    isClearable: false,
    onChange: onChange,
    "aria-label": "Select label"
  });
};
multiSelectWithFixedOptions.story = {
  name: "Multi-select-with-fixed-options"
};
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 const withDataIdSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  "data-testid": "test-this-component",
  "aria-label": "Select label"
});
withDataIdSelect.story = {
  name: "With Data ID"
};
export const withSelectedValueSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  defaultValue: getOptionByValue(options, "chocolate"),
  "aria-label": "Select label"
});
withSelectedValueSelect.storyName = "With Selected Value";
export const withCreatableSelect = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  selectType: "creatable",
  isMulti: true,
  "aria-label": "Select label"
});
withCreatableSelect.storyName = "With Creatable";
export const withAsyncSelect = () => /*#__PURE__*/_jsx(Select, {
  defaultOptions: options,
  selectType: "async",
  isMulti: true,
  "aria-label": "Select label"
});
withAsyncSelect.storyName = "With Async";
export const withGroupedOptions = () => /*#__PURE__*/_jsx(Select, {
  options: groupedOptions,
  isMulti: true,
  menuIsOpen: true,
  "aria-label": "Select label"
});
withGroupedOptions.storyName = "With Grouped Options";

/**
 * Regression story: Option padding and spacing.
 * Used by Chromatic for visual regression. If options become cramped
 * (minimal vertical/horizontal padding), Chromatic will flag the change.
 * Spec: vertical padding space.xs, horizontal padding space.s, 4px gap between options.
 */
export const regressionOptionPadding = () => /*#__PURE__*/_jsx(Select, {
  options: options,
  menuIsOpen: true,
  ariaLabel: "Select label",
  inputId: "regressionOptionPadding"
});
regressionOptionPadding.story = {
  name: "Regression: Option Padding"
};
defaultSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultSelect"
};
invalidSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "invalidSelect"
};
mandatorySelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "mandatorySelect"
};
disabledSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "disabledSelect"
};
SpecificHeightSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SpecificHeightSelect"
};
multiSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "multiSelect"
};
multiSelectWithFixedOptions.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "multiSelectWithFixedOptions"
};
invertedSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "invertedSelect"
};
withDataIdSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withDataIdSelect"
};
withSelectedValueSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withSelectedValueSelect"
};
withCreatableSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withCreatableSelect"
};
withAsyncSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withAsyncSelect"
};
withGroupedOptions.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withGroupedOptions"
};
regressionOptionPadding.__docgenInfo = {
  "description": "Regression story: Option padding and spacing.\nUsed by Chromatic for visual regression. If options become cramped\n(minimal vertical/horizontal padding), Chromatic will flag the change.\nSpec: vertical padding space.xs, horizontal padding space.s, 4px gap between options.",
  "methods": [],
  "displayName": "regressionOptionPadding"
};