@aegov/design-system-react
Version:
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.
58 lines (57 loc) • 1.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithFirstLast = exports.ManyPages = exports.FewPages = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Pagination = _interopRequireDefault(require("./Pagination"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components/Pagination',
component: _Pagination.default,
parameters: {
layout: 'centered'
},
argTypes: {
currentPage: {
control: 'number',
description: 'Current active page'
},
totalPages: {
control: 'number',
description: 'Total number of pages'
},
showFirstLast: {
control: 'boolean',
description: 'Show/hide first and last page buttons'
},
onPageChange: {
action: 'page changed'
}
}
};
const Template = args => /*#__PURE__*/_react.default.createElement(_Pagination.default, args);
const Default = exports.Default = Template.bind({});
Default.args = {
currentPage: 3,
totalPages: 17,
showFirstLast: false
};
const WithFirstLast = exports.WithFirstLast = Template.bind({});
WithFirstLast.args = {
currentPage: 3,
totalPages: 17,
showFirstLast: true
};
const FewPages = exports.FewPages = Template.bind({});
FewPages.args = {
currentPage: 2,
totalPages: 5,
showFirstLast: false
};
const ManyPages = exports.ManyPages = Template.bind({});
ManyPages.args = {
currentPage: 50,
totalPages: 100,
showFirstLast: true
};