@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.
74 lines (73 loc) • 2.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithStatus = exports.Sizes = exports.Rounded = exports.Fallback = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Avatar = _interopRequireDefault(require("./Avatar"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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/Avatar',
component: _Avatar.default,
args: {
src: 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80',
alt: 'Colm Tuite'
},
argTypes: {
size: {
control: 'select',
options: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl']
},
variant: {
control: 'radio',
options: ['square', 'rounded']
},
status: {
control: 'radio',
options: ['none', 'online', 'offline']
}
}
};
const Default = exports.Default = {
args: {
size: 'base',
variant: 'square',
status: 'none'
}
};
const Rounded = exports.Rounded = {
args: {
variant: 'rounded'
}
};
const WithStatus = exports.WithStatus = {
args: {
variant: 'rounded',
status: 'online'
}
};
const Sizes = exports.Sizes = {
render: args => /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center gap-4"
}, /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "xs"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "sm"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "base"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "lg"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "xl"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "2xl"
})), /*#__PURE__*/_react.default.createElement(_Avatar.default, _extends({}, args, {
size: "3xl"
})))
};
const Fallback = exports.Fallback = {
args: {
src: undefined
}
};