@aegov/design-system-react/dist/components/Select/Select.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithHelperText = exports.WithError = exports.Variants = exports.Sizes = exports.Required = exports.LongList = exports.Disabled = exports.Controlled = exports.Basic = void 0;
var _react = _interopRequireWildcard(require("react"));
var _index = require("./index");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _default = exports.default = {
  title: 'Components/Select',
  component: _index.Select,
  parameters: {
    layout: 'padded'
  },
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'base', 'lg']
    },
    variant: {
      control: 'select',
      options: ['primary', 'secondary']
    },
    disabled: {
      control: 'boolean'
    },
    required: {
      control: 'boolean'
    }
  }
};
const countryOptions = [{
  value: 'uae',
  label: 'United Arab Emirates'
}, {
  value: 'india',
  label: 'India'
}, {
  value: 'uk',
  label: 'United Kingdom'
}, {
  value: 'usa',
  label: 'USA'
}];

// Basic Select
const Basic = exports.Basic = {
  args: {
    label: 'Select an option',
    placeholder: 'Choose a country',
    id: 'country',
    options: countryOptions
  }
};

// Select with Helper Text
const WithHelperText = exports.WithHelperText = {
  args: {
    label: 'Country',
    placeholder: 'Choose a country',
    helperText: 'Select your country of residence',
    id: 'country-helper',
    options: countryOptions
  }
};

// Select with Error
const WithError = exports.WithError = {
  args: {
    label: 'Country',
    placeholder: 'Choose a country',
    error: 'Please select a country',
    id: 'country-error',
    options: countryOptions
  }
};

// Select Sizes
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_index.Select, {
  size: "sm",
  label: "Small Select",
  placeholder: "Small size",
  id: "small",
  options: countryOptions
}), /*#__PURE__*/_react.default.createElement(_index.Select, {
  size: "base",
  label: "Base Select",
  placeholder: "Base size",
  id: "base",
  options: countryOptions
}), /*#__PURE__*/_react.default.createElement(_index.Select, {
  size: "lg",
  label: "Large Select",
  placeholder: "Large size",
  id: "large",
  options: countryOptions
}));

// Select Variants
exports.Sizes = Sizes;
const Variants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_index.Select, {
  variant: "primary",
  label: "Primary Select",
  placeholder: "Primary variant",
  id: "primary",
  options: countryOptions
}), /*#__PURE__*/_react.default.createElement(_index.Select, {
  variant: "secondary",
  label: "Secondary Select",
  placeholder: "Secondary variant",
  id: "secondary",
  options: countryOptions
}));

// Required Select
exports.Variants = Variants;
const Required = exports.Required = {
  args: {
    label: 'Country',
    placeholder: 'Choose a country',
    required: true,
    id: 'required-country',
    options: countryOptions
  }
};

// Disabled Select
const Disabled = exports.Disabled = {
  args: {
    label: 'Disabled Select',
    placeholder: 'This select is disabled',
    disabled: true,
    id: 'disabled',
    options: countryOptions
  }
};

// Controlled Select
const Controlled = () => {
  const [value, setValue] = (0, _react.useState)('');
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-col space-y-4"
  }, /*#__PURE__*/_react.default.createElement(_index.Select, {
    label: "Controlled Select",
    placeholder: "Choose a country",
    id: "controlled",
    options: countryOptions,
    value: value,
    onChange: setValue
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "text-sm"
  }, "Selected value: ", /*#__PURE__*/_react.default.createElement("span", {
    className: "font-bold"
  }, value || 'none')));
};

// Long List Select
exports.Controlled = Controlled;
const LongList = exports.LongList = {
  args: {
    label: 'Country',
    placeholder: 'Select a country',
    id: 'long-list',
    options: [{
      value: 'af',
      label: 'Afghanistan'
    }, {
      value: 'al',
      label: 'Albania'
    }, {
      value: 'dz',
      label: 'Algeria'
    }, {
      value: 'ar',
      label: 'Argentina'
    }, {
      value: 'au',
      label: 'Australia'
    }, {
      value: 'at',
      label: 'Austria'
    }, {
      value: 'bd',
      label: 'Bangladesh'
    }, {
      value: 'be',
      label: 'Belgium'
    }, {
      value: 'br',
      label: 'Brazil'
    }, {
      value: 'bg',
      label: 'Bulgaria'
    }, {
      value: 'kh',
      label: 'Cambodia'
    }, {
      value: 'ca',
      label: 'Canada'
    }, {
      value: 'cl',
      label: 'Chile'
    }, {
      value: 'cn',
      label: 'China'
    }, {
      value: 'co',
      label: 'Colombia'
    }, {
      value: 'hr',
      label: 'Croatia'
    }, {
      value: 'dk',
      label: 'Denmark'
    }, {
      value: 'eg',
      label: 'Egypt'
    }, {
      value: 'fi',
      label: 'Finland'
    }, {
      value: 'fr',
      label: 'France'
    }, {
      value: 'de',
      label: 'Germany'
    }, {
      value: 'gr',
      label: 'Greece'
    }, {
      value: 'in',
      label: 'India'
    }, {
      value: 'id',
      label: 'Indonesia'
    }, {
      value: 'ir',
      label: 'Iran'
    }, {
      value: 'iq',
      label: 'Iraq'
    }, {
      value: 'ie',
      label: 'Ireland'
    }, {
      value: 'it',
      label: 'Italy'
    }, {
      value: 'jp',
      label: 'Japan'
    }]
  }
};