@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.
228 lines (220 loc) • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StackedCards = exports.Sizes = exports.ServiceCard = exports.NewsCard = exports.Default = exports.CreativeCard = exports.CardsWithGap = exports.ArabicHorizontalStack = void 0;
var _react = _interopRequireDefault(require("react"));
var _Card = _interopRequireDefault(require("./Card"));
var _react2 = require("@phosphor-icons/react");
var _tailwindMerge = require("tailwind-merge");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components/Card',
component: _Card.default,
parameters: {
layout: 'padded'
},
argTypes: {
variant: {
control: 'select',
options: ['default', 'news', 'service', 'creative']
},
size: {
control: 'select',
options: ['sm', 'base', 'lg']
},
bordered: {
control: 'boolean'
},
glow: {
control: 'boolean'
}
}
}; // Default Card
const Default = exports.Default = {
args: {
bordered: true,
children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "The title of the card"), /*#__PURE__*/_react.default.createElement("p", null, "The description of a card, and this may be variable based on the device or width of the viewport."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details"))
}
};
// News Card
const NewsCard = exports.NewsCard = {
args: {
variant: 'news',
bordered: true,
glow: true,
children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
href: "#"
}, /*#__PURE__*/_react.default.createElement("img", {
src: "https://placehold.co/800x400/png",
alt: "News",
className: "w-full h-auto rounded-xl"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "py-6 space-y-6"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-wrap gap-3 text-sm text-gray-600"
}, /*#__PURE__*/_react.default.createElement("span", null, "11th Jun 2023"), /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:text-primary-600"
}, "Press release")), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold line-clamp-3"
}, "TDRA empowers youth for a sustainable future through \"Digital Skills Forum\""), /*#__PURE__*/_react.default.createElement("p", {
className: "line-clamp-3"
}, "In alignment with the UAE government's visionary theme for 2023, \"Today for Tomorrow,\" the forum epitomized TDRA's dedication to fostering the next generation of leaders."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details")))
}
};
// Service Card
const ServiceCard = exports.ServiceCard = {
args: {
variant: 'service',
bordered: true,
glow: true,
children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "text-gray-800 hover:text-primary-800"
}, "Issuance of a vehicle registration")), /*#__PURE__*/_react.default.createElement("p", null, "Through this service, you may register a vehicle, the license for the vehicle and the number plate issued to the driver."), /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center justify-between gap-4"
}, /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "Start service"), /*#__PURE__*/_react.default.createElement("button", {
className: "text-primary-600 hover:text-primary-500"
}, /*#__PURE__*/_react.default.createElement(_react2.Bookmark, {
className: "w-8 h-8"
}))))
}
};
// Creative Card
const CreativeCard = exports.CreativeCard = {
args: {
variant: 'creative',
children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
src: "https://placehold.co/800x600/png",
alt: "Creative",
className: "w-full h-[33.5rem] object-cover"
}), /*#__PURE__*/_react.default.createElement("div", {
className: "absolute inset-x-0 bottom-0 z-10 p-7"
}, /*#__PURE__*/_react.default.createElement("h2", {
className: "text-[2.5rem] leading-[1.15] font-extrabold text-white"
}, "Empowering women in tech and science")))
}
};
// Card Sizes
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Card.default, {
size: "sm",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-7 h-7"
}), /*#__PURE__*/_react.default.createElement("h6", {
className: "text-h6 font-extrabold"
}, "Small Card"), /*#__PURE__*/_react.default.createElement("p", null, "A small sized card with compact content."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details")), /*#__PURE__*/_react.default.createElement(_Card.default, {
size: "base",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "Base Card"), /*#__PURE__*/_react.default.createElement("p", null, "A base sized card with standard content."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details")), /*#__PURE__*/_react.default.createElement(_Card.default, {
size: "lg",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-14 h-14"
}), /*#__PURE__*/_react.default.createElement("h4", {
className: "text-h4 font-extrabold"
}, "Large Card"), /*#__PURE__*/_react.default.createElement("p", null, "A large sized card with expanded content."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details")));
// Stacked Cards
exports.Sizes = Sizes;
const StackedCards = () => /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-8"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-semibold"
}, "Horizontal Stack (Collapsed)"), /*#__PURE__*/_react.default.createElement(_Card.default.Stack, {
direction: "horizontal",
collapsed: true
}, [1, 2, 3].map(i => /*#__PURE__*/_react.default.createElement(_Card.default, {
key: i,
className: "bg-white",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "Card ", i), /*#__PURE__*/_react.default.createElement("p", null, "A card in a collapsed stack."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details"))))), /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-semibold"
}, "Vertical Stack (Collapsed)"), /*#__PURE__*/_react.default.createElement(_Card.default.Stack, {
direction: "vertical",
collapsed: true
}, [1, 2, 3].map(i => /*#__PURE__*/_react.default.createElement(_Card.default, {
key: i,
className: "bg-white",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "Card ", i), /*#__PURE__*/_react.default.createElement("p", null, "A card in a collapsed stack."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details"))))));
// Stacked Cards
exports.StackedCards = StackedCards;
const ArabicHorizontalStack = () => /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-8",
dir: "rtl"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-semibold"
}, "Horizontal Stack (Collapsed)"), /*#__PURE__*/_react.default.createElement(_Card.default.Stack, {
direction: "horizontal",
collapsed: true
}, [1, 2, 3].map(i => /*#__PURE__*/_react.default.createElement(_Card.default, {
key: i,
className: "bg-white",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "Card ", i), /*#__PURE__*/_react.default.createElement("p", null, "A card in a collapsed stack."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details"))))));
// Cards with Gap
exports.ArabicHorizontalStack = ArabicHorizontalStack;
const CardsWithGap = () => /*#__PURE__*/_react.default.createElement(_Card.default.Stack, {
direction: "horizontal",
gap: 4
}, [1, 2, 3].map(i => /*#__PURE__*/_react.default.createElement(_Card.default, {
key: i,
className: "bg-white",
bordered: true
}, /*#__PURE__*/_react.default.createElement(_react2.Note, {
className: "text-primary-500 w-10 h-10"
}), /*#__PURE__*/_react.default.createElement("h5", {
className: "text-h5 font-extrabold"
}, "Card ", i), /*#__PURE__*/_react.default.createElement("p", null, "A card with gap spacing."), /*#__PURE__*/_react.default.createElement(_Card.default.Link, {
href: "#"
}, "View details"))));
exports.CardsWithGap = CardsWithGap;