zmp-ui/esm/components/button/index.stories.js

Zalo Mini App framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import Button from ".";
import Icon from "../icon"; // ZaUI Icon
import { inlineCenterParameters } from "../../../../.storybook/parameters";

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
var meta = _objectSpread({
  title: "Form/Button",
  component: Button,
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {}
}, inlineCenterParameters);
export default meta;
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
var Base = {
  name: "Mặc định",
  args: {
    children: "Thanh toán"
  }
};
export var Primary = {
  name: "Nút chính",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "primary"
  })
};
export var Secondary = {
  name: "Nút phụ",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "secondary"
  })
};
export var Tertiary = {
  name: "Nút cấp ba",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "tertiary"
  })
};
export var Danger = {
  name: "Nút nguy hiểm",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    type: "danger"
  })
};
export var SecondaryDanger = {
  name: "Nút phụ nguy hiểm",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "secondary",
    type: "danger"
  })
};
export var TertiaryDanger = {
  name: "Nút cấp ba nguy hiểm",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "tertiary",
    type: "danger"
  })
};
export var SecondaryNeutral = {
  name: "Nút phụ trung tính",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "secondary",
    type: "neutral"
  })
};
export var TertiaryNeutral = {
  name: "Nút cấp ba trung tính",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    variant: "tertiary",
    type: "neutral"
  })
};
export var Small = {
  name: "Nút nhỏ",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    size: "small"
  })
};
export var Large = {
  name: "Nút lớn",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    size: "large"
  })
};
export var Loading = {
  name: "Nút đang tải",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    loading: true
  })
};
export var Disabled = {
  name: "Nút bị vô hiệu hóa",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    disabled: true
  })
};
export var FullWidth = {
  name: "Nút toàn chiều rộng",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    fullWidth: true
  }),
  parameters: {
    layout: "padded"
  }
};
export var WithIcon = {
  name: "Nút biểu tượng",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    icon: /*#__PURE__*/React.createElement(Icon, {
      icon: "zi-star"
    }) // Use ZaUI icon
  })
};
export var PrefixIcon = {
  name: "Nút có biểu tượng ở đầu",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    prefixIcon: /*#__PURE__*/React.createElement(Icon, {
      icon: "zi-arrow-left"
    }) // Use ZaUI icon
  })
};
export var SuffixIcon = {
  name: "Nút có biểu tượng ở cuối",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    suffixIcon: /*#__PURE__*/React.createElement(Icon, {
      icon: "zi-arrow-right"
    }) // Use ZaUI icon
  })
};
export var PrefixAndSuffixIcon = {
  name: "Nút có biểu tượng ở đầu và cuối",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    prefixIcon: /*#__PURE__*/React.createElement(Icon, {
      icon: "zi-arrow-left"
    }),
    suffixIcon: /*#__PURE__*/React.createElement(Icon, {
      icon: "zi-arrow-right"
    })
  })
};
export var Submit = {
  name: "Nút submit form",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    htmlType: "submit"
  })
};
export var Reset = {
  name: "Nút reset form",
  args: _objectSpread(_objectSpread({}, Base.args), {}, {
    htmlType: "reset"
  })
};