@aegov/design-system-react/dist/components/Button/Button.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.Sizes = exports.SecondaryVariants = exports.PrimaryVariants = exports.IconWithSizes = exports.DisabledButton = exports.Default = exports.BlockButton = exports.AsLink = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("./Button"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Button',
  component: _Button.default,
  argTypes: {
    variant: {
      control: 'select',
      options: ['solid', 'soft', 'link', 'outline']
    },
    style: {
      control: 'select',
      options: ['primary', 'secondary']
    },
    size: {
      control: 'select',
      options: ['xs', 'sm', 'base', 'lg']
    },
    block: {
      control: 'boolean'
    },
    isIcon: {
      control: 'boolean'
    },
    disabled: {
      control: 'boolean'
    }
  }
}; // Template for all stories
const Template = args => /*#__PURE__*/_react.default.createElement(_Button.default, args);
const Default = exports.Default = Template.bind({});
Default.args = {
  children: 'Button'
};
const PrimaryVariants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "solid",
  style: "primary"
}, "Solid Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "soft",
  style: "primary"
}, "Soft Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "link",
  style: "primary"
}, "Link Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "outline",
  style: "primary"
}, "Outline Button"));
exports.PrimaryVariants = PrimaryVariants;
const SecondaryVariants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "solid",
  style: "secondary"
}, "Solid Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "soft",
  style: "secondary"
}, "Soft Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "link",
  style: "secondary"
}, "Link Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "outline",
  style: "secondary"
}, "Outline Button"));

// Sizes
exports.SecondaryVariants = SecondaryVariants;
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  size: "xs"
}, "Extra Small"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  size: "sm"
}, "Small"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  size: "base"
}, "Base"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  size: "lg"
}, "Large"));

// Block button
exports.Sizes = Sizes;
const BlockButton = exports.BlockButton = Template.bind({});
BlockButton.args = {
  children: 'Block Button',
  block: true
};

// Disabled state
const DisabledButton = exports.DisabledButton = Template.bind({});
DisabledButton.args = {
  children: 'Disabled Button',
  disabled: true
};

// Icon button example
const IconWithSizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "xs"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "sm"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "base"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "lg"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "xs",
  style: "secondary"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "sm",
  style: "secondary"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "base",
  style: "secondary"
}, "\uD83D\uDC4B"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  isIcon: true,
  size: "lg",
  style: "secondary"
}, "\uD83D\uDC4B"));

// Using asChild with anchor tag
exports.IconWithSizes = IconWithSizes;
const AsLink = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  asChild: true
}, /*#__PURE__*/_react.default.createElement("a", {
  href: "https://example.com",
  target: "_blank",
  rel: "noopener noreferrer"
}, "Link as Button")), /*#__PURE__*/_react.default.createElement(_Button.default, {
  asChild: true,
  variant: "soft",
  style: "secondary"
}, /*#__PURE__*/_react.default.createElement("a", {
  href: "https://example.com",
  target: "_blank",
  rel: "noopener noreferrer"
}, "Secondary Soft Link")), /*#__PURE__*/_react.default.createElement(_Button.default, {
  asChild: true,
  variant: "outline"
}, /*#__PURE__*/_react.default.createElement("a", {
  href: "https://example.com",
  target: "_blank",
  rel: "noopener noreferrer"
}, "Outline Link")));
exports.AsLink = AsLink;