@aegov/design-system-react/dist/components/Checkbox/Checkbox.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.Disabled = exports.Default = exports.AllStates = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var _default = exports.default = {
  title: 'Components/Checkbox',
  component: _Checkbox.default,
  parameters: {
    layout: 'centered'
  },
  argTypes: {
    checked: {
      control: 'boolean'
    },
    disabled: {
      control: 'boolean'
    },
    size: {
      control: 'select',
      options: ['sm', 'base', 'lg']
    },
    variant: {
      control: 'select',
      options: ['primary', 'secondary']
    }
  }
};
const ControlledCheckbox = args => {
  const [checked, setChecked] = (0, _react.useState)(args.checked || false);
  return /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({}, args, {
    checked: checked,
    onCheckedChange: setChecked
  }));
};

// Basic checkbox
const Default = exports.Default = {
  render: ControlledCheckbox,
  args: {
    label: 'Accept terms and conditions'
  }
};

// Checkbox with description
const WithDescription = exports.WithDescription = {
  render: ControlledCheckbox,
  args: {
    label: 'Notifications',
    description: 'Get notified when there is a critical issue.'
  }
};

// Size variations
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
  size: "sm",
  label: "Small checkbox",
  description: "This is a small checkbox"
}), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
  size: "base",
  label: "Base checkbox",
  description: "This is a base checkbox"
}), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
  size: "lg",
  label: "Large checkbox",
  description: "This is a large checkbox"
}));

// Color variants
exports.Sizes = Sizes;
const Variants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
  variant: "primary",
  label: "Primary checkbox",
  description: "This uses the primary color scheme"
}), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
  variant: "secondary",
  label: "Secondary checkbox",
  description: "This uses the secondary color scheme"
}));

// Disabled state
exports.Variants = Variants;
const Disabled = exports.Disabled = {
  render: ControlledCheckbox,
  args: {
    label: 'Disabled checkbox',
    description: 'This checkbox cannot be interacted with',
    disabled: true
  }
};

// Required state
const Required = exports.Required = {
  render: ControlledCheckbox,
  args: {
    label: 'Required checkbox',
    description: 'This checkbox must be checked',
    required: true
  }
};

// All states
const AllStates = () => {
  const [states, setStates] = (0, _react.useState)({
    default: false,
    withDescription: false,
    disabled: false,
    required: false
  });
  const handleChange = key => checked => {
    setStates(prev => ({
      ...prev,
      [key]: checked
    }));
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-col gap-6"
  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    label: "Default checkbox",
    checked: states.default,
    onCheckedChange: handleChange('default')
  }), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    label: "With description",
    description: "Additional information about this checkbox",
    checked: states.withDescription,
    onCheckedChange: handleChange('withDescription')
  }), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    label: "Disabled checkbox",
    description: "This checkbox cannot be interacted with",
    checked: states.disabled,
    onCheckedChange: handleChange('disabled'),
    disabled: true
  }), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    label: "Required checkbox",
    description: "This checkbox must be checked",
    checked: states.required,
    onCheckedChange: handleChange('required'),
    required: true
  }));
};
exports.AllStates = AllStates;