@aegov/design-system-react/dist/components/Radio/Radio.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.WithDescription = exports.Variants = exports.Sizes = exports.Required = exports.Orientation = exports.MixedDisabled = exports.Disabled = exports.Default = exports.Controlled = exports.AllVariations = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Radio = require("./Radio");
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/Radio',
  component: _Radio.Radio,
  parameters: {
    layout: 'centered'
  },
  argTypes: {
    defaultValue: {
      control: 'text'
    },
    disabled: {
      control: 'boolean'
    },
    required: {
      control: 'boolean'
    },
    size: {
      control: 'select',
      options: ['sm', 'base', 'lg']
    },
    variant: {
      control: 'select',
      options: ['primary', 'secondary']
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical']
    }
  }
}; // Basic radio group
const Default = () => /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "option1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "option1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "option2"
}, "Option 2"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "option3"
}, "Option 3"));

// Radio with additional descriptions
exports.Default = Default;
const WithDescription = () => /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "starter"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "starter",
  description: "The basic usage plan, starting at $9.99 per month"
}, "Starter plan"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "professional",
  description: "For teams and organization, starting at $29.99 per month"
}, "Professional plan"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "enterprise",
  description: "For large organisation with SAML support, starting at $99.99 per month"
}, "Enterprise plan"));

// Size variations
exports.WithDescription = WithDescription;
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-8"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Small"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "sm",
  defaultValue: "small1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "small1"
}, "Small radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "small2",
  description: "With description"
}, "Small radio button"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Base (Default)"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "base",
  defaultValue: "base1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "base1"
}, "Base radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "base2",
  description: "With description"
}, "Base radio button"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Large"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "lg",
  defaultValue: "large1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "large1"
}, "Large radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "large2",
  description: "With description"
}, "Large radio button"))));

// Color variants
exports.Sizes = Sizes;
const Variants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-8"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Primary"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  variant: "primary",
  defaultValue: "primary1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "primary1"
}, "Primary radio"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "primary2",
  description: "With description"
}, "Primary radio"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Secondary"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  variant: "secondary",
  defaultValue: "secondary1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "secondary1"
}, "Secondary radio"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "secondary2",
  description: "With description"
}, "Secondary radio"))));

// Orientation (Horizontal vs Vertical)
exports.Variants = Variants;
const Orientation = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-8"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Vertical (Default)"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  orientation: "vertical",
  defaultValue: "vertical1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "vertical1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "vertical2"
}, "Option 2"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "vertical3"
}, "Option 3"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-lg font-semibold"
}, "Horizontal"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  orientation: "horizontal",
  defaultValue: "horizontal1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "horizontal1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "horizontal2"
}, "Option 2"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "horizontal3"
}, "Option 3"))));

// Disabled state
exports.Orientation = Orientation;
const Disabled = () => /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  disabled: true,
  defaultValue: "disabled1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "disabled1"
}, "Disabled radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "disabled2",
  description: "With description"
}, "Disabled radio button"));

// Mixed enabled and disabled items
exports.Disabled = Disabled;
const MixedDisabled = () => /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "mixed1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "mixed1"
}, "Enabled radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "mixed2",
  disabled: true
}, "Disabled radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "mixed3",
  description: "With description"
}, "Enabled radio button"));

// Controlled component example
exports.MixedDisabled = MixedDisabled;
const Controlled = () => {
  const [value, setValue] = (0, _react.useState)('controlled1');
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-4"
  }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
    value: value,
    onValueChange: setValue
  }, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
    value: "controlled1"
  }, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
    value: "controlled2"
  }, "Option 2"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
    value: "controlled3"
  }, "Option 3")), /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-4 p-4 bg-slate-100 rounded"
  }, /*#__PURE__*/_react.default.createElement("p", null, "Selected value: ", /*#__PURE__*/_react.default.createElement("strong", null, value))));
};

// Required state
exports.Controlled = Controlled;
const Required = () => /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  required: true,
  defaultValue: "required1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "required1"
}, "Required radio button"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "required2"
}, "Required radio button"));

// All variations in one place
exports.Required = Required;
const AllVariations = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-12"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "Basic Radio Group"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "option1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "option1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "option2"
}, "Option 2"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "With Descriptions"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "starter"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "starter",
  description: "The basic usage plan, starting at $9.99 per month"
}, "Starter plan"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "professional",
  description: "For teams and organization, starting at $29.99 per month"
}, "Professional plan"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "enterprise",
  description: "For large organisation with SAML support, starting at $99.99 per month"
}, "Enterprise plan"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "Size Variations"), /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-6"
}, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "sm",
  defaultValue: "small"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "small"
}, "Small radio")), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "base",
  defaultValue: "base"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "base"
}, "Base radio (default)")), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  size: "lg",
  defaultValue: "large"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "large"
}, "Large radio")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "Color Variants"), /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-6"
}, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  variant: "primary",
  defaultValue: "primary"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "primary"
}, "Primary color (default)")), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  variant: "secondary",
  defaultValue: "secondary"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "secondary"
}, "Secondary color")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "Orientation"), /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-6"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
  className: "mb-2 font-medium"
}, "Vertical (default)"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  orientation: "vertical",
  defaultValue: "v1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "v1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "v2"
}, "Option 2"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
  className: "mb-2 font-medium"
}, "Horizontal"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  orientation: "horizontal",
  defaultValue: "h1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "h1"
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "h2"
}, "Option 2"))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
  className: "mb-4 text-xl font-bold"
}, "States"), /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-6"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
  className: "mb-2 font-medium"
}, "Disabled Group"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  disabled: true,
  defaultValue: "disabled1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "disabled1"
}, "Disabled option"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "disabled2"
}, "Disabled option"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
  className: "mb-2 font-medium"
}, "Mixed Disabled Items"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  defaultValue: "enabled"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "enabled"
}, "Enabled option"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "individual-disabled",
  disabled: true
}, "Individually disabled option"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
  className: "mb-2 font-medium"
}, "Required"), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
  required: true,
  defaultValue: "required1"
}, /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "required1"
}, "Required option"), /*#__PURE__*/_react.default.createElement(_Radio.RadioItem, {
  value: "required2"
}, "Required option"))))));
exports.AllVariations = AllVariations;