@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.
566 lines (553 loc) • 18.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithIcons = exports.WithCustomComponents = exports.Responsive = exports.Mobile = exports.Default = exports.Complex = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Navigation = _interopRequireDefault(require("./Navigation"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
const {
MainMenu,
SecondaryMenu,
NavItem
} = _Navigation.default;
const useWindowSize = (mobileBreakpoint = 1024) => {
// Initialize with default values or actual window size if on client
const [windowSize, setWindowSize] = (0, _react.useState)({
width: typeof window !== 'undefined' ? window.innerWidth : mobileBreakpoint,
height: typeof window !== 'undefined' ? window.innerHeight : 0
});
// Derived value for mobile detection
const isMobile = windowSize.width < mobileBreakpoint;
(0, _react.useEffect)(() => {
// Handler to call on window resize
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
};
// Add event listener
window.addEventListener('resize', handleResize);
// Call handler right away to update initial state
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener('resize', handleResize);
}, []); // Empty dependency array means this effect runs once on mount
return {
width: windowSize.width,
height: windowSize.height,
isMobile
};
};
const Logo = () => /*#__PURE__*/_react.default.createElement("div", {
className: "text-aeblack-900 font-bold text-2xl"
}, "LOGO");
// Custom Link component for demonstration
const CustomLink = /*#__PURE__*/_react.default.forwardRef(({
children,
onClick,
className,
...props
}, ref) => /*#__PURE__*/_react.default.createElement("a", _extends({
ref: ref,
className: `inline-flex items-center gap-2 border-b-2 border-transparent px-3 py-4 font-bold transition-colors hover:border-primary-800 hover:text-primary-800 ${className || ''}`,
onClick: e => {
console.log('Custom link clicked');
if (onClick) onClick(e);
}
}, props), children));
CustomLink.displayName = 'CustomLink';
// Custom dropdown content component
const CustomDropdown = () => /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-bold text-primary-700 mb-3"
}, "Custom Dropdown Content"), /*#__PURE__*/_react.default.createElement("div", {
className: "grid grid-cols-2 gap-4"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
className: "font-semibold text-primary-600 mb-2"
}, "Section 1"), /*#__PURE__*/_react.default.createElement("ul", {
className: "space-y-2"
}, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 1")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 2")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 3")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
className: "font-semibold text-primary-600 mb-2"
}, "Section 2"), /*#__PURE__*/_react.default.createElement("ul", {
className: "space-y-2"
}, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 4")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 5")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "#",
className: "hover:underline hover:text-primary-500"
}, "Custom Item 6"))))));
var _default = exports.default = {
title: 'Components/Navigation',
component: _Navigation.default,
parameters: {
layout: 'fullscreen'
}
}; // Basic navigation with simple items
const Default = () => {
const {
isMobile
} = useWindowSize();
return /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: isMobile,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#",
isActive: true
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#"
}, "Our services"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#",
dropdown: [{
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}]
}, "About us")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#",
tooltipText: "Login"
}, "Login"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.PersonArmsSpread,
href: "#",
tooltipText: "Accessibility"
}, "Accessibility"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#",
tooltipText: "Switch language"
}, "Switch language")));
};
// Navigation with icons for all items
exports.Default = Default;
const WithIcons = () => {
const {
isMobile
} = useWindowSize();
return /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: isMobile,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#",
isActive: true
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Gear,
href: "#"
}, "Services"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Info,
href: "#",
dropdown: [{
title: 'Company',
items: [{
label: 'Our Story',
href: '#'
}, {
label: 'Team',
href: '#'
}, {
label: 'Careers',
href: '#'
}]
}, {
title: 'Locations',
items: [{
label: 'Headquarters',
href: '#'
}, {
label: 'Regional Offices',
href: '#'
}, {
label: 'International',
href: '#'
}]
}]
}, "About"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Phone,
href: "#"
}, "Contact")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#",
tooltipText: "Account"
}, "Account"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#",
tooltipText: "Language"
}, "Language")));
};
// Complex navigation with multiple dropdown sections
exports.WithIcons = WithIcons;
const Complex = () => {
const {
isMobile
} = useWindowSize();
return /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: isMobile,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#"
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Gear,
href: "#",
dropdown: [{
title: 'Business Services',
items: [{
label: 'Consulting',
href: '#'
}, {
label: 'Strategy',
href: '#'
}, {
label: 'Development',
href: '#'
}]
}, {
title: 'Personal Services',
items: [{
label: 'Financial Planning',
href: '#'
}, {
label: 'Education',
href: '#'
}, {
label: 'Health & Wellness',
href: '#'
}]
}]
}, "Services"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Buildings,
href: "#",
isActive: true,
dropdown: [{
title: 'Our Company',
items: [{
label: 'History',
href: '#'
}, {
label: 'Mission & Vision',
href: '#'
}, {
label: 'Leadership',
href: '#'
}]
}, {
title: 'Careers',
items: [{
label: 'Current Openings',
href: '#'
}, {
label: 'Benefits',
href: '#'
}, {
label: 'Culture',
href: '#'
}]
}, {
title: 'Press',
items: [{
label: 'News',
href: '#'
}, {
label: 'Media Kit',
href: '#'
}, {
label: 'Contact PR',
href: '#'
}]
}]
}, "About"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.FileText,
href: "#",
dropdown: [{
title: 'Documentation',
items: [{
label: 'Guides',
href: '#'
}, {
label: 'API Reference',
href: '#'
}, {
label: 'Examples',
href: '#'
}]
}, {
title: 'Learning',
items: [{
label: 'Tutorials',
href: '#'
}, {
label: 'Webinars',
href: '#'
}, {
label: 'Workshops',
href: '#'
}]
}]
}, "Resources"), /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.Envelope,
href: "#"
}, "Contact")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#",
tooltipText: "Account"
}, "Account"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.PersonArmsSpread,
href: "#",
tooltipText: "Accessibility"
}, "Accessibility"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#",
tooltipText: "Language"
}, "Language")));
};
// Mobile navigation example
exports.Complex = Complex;
const Mobile = () => {
return /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: true,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#"
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#"
}, "Our services"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#",
dropdown: [{
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}]
}, "About us")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#"
}, "Login"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.PersonArmsSpread,
href: "#"
}, "Accessibility"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#"
}, "Switch language")));
};
// Responsive navigation that shows both desktop and mobile versions
exports.Mobile = Mobile;
const Responsive = () => {
const {
width: windowWidth,
isMobile
} = useWindowSize();
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "mb-4 p-4 bg-aeblack-100 text-center"
}, /*#__PURE__*/_react.default.createElement("p", null, "Current width: ", windowWidth, "px (", isMobile ? 'Mobile' : 'Desktop', " view)"), /*#__PURE__*/_react.default.createElement("p", {
className: "text-sm text-aeblack-600"
}, "Resize your browser window to see the navigation change")), /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: isMobile,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#",
isActive: true
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#"
}, "Our services"), /*#__PURE__*/_react.default.createElement(NavItem, {
href: "#",
dropdown: [{
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}, {
title: 'Sub Title',
items: [{
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}, {
label: 'Sub Item',
href: '#'
}]
}]
}, "About us")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#",
tooltipText: "Login"
}, "Login"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.PersonArmsSpread,
href: "#",
tooltipText: "Accessibility"
}, "Accessibility"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#",
tooltipText: "Switch language"
}, "Switch language"))));
};
// Example with custom components
exports.Responsive = Responsive;
const WithCustomComponents = () => {
const {
isMobile
} = useWindowSize();
const handleCustomClick = e => {
e.preventDefault();
alert('Custom handler executed!');
};
return /*#__PURE__*/_react.default.createElement(_Navigation.default, {
isMobile: isMobile,
logo: /*#__PURE__*/_react.default.createElement(Logo, null)
}, /*#__PURE__*/_react.default.createElement(MainMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
icon: _react2.House,
href: "#",
isActive: true
}, "Home"), /*#__PURE__*/_react.default.createElement(NavItem, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(CustomLink, {
href: "#",
onClick: handleCustomClick
}, "Custom Nav Item")), /*#__PURE__*/_react.default.createElement(NavItem, {
dropdown: [{
title: 'Standard Dropdown',
items: [{
label: 'Item 1',
href: '#'
}, {
label: 'Item 2',
href: '#'
}, {
label: 'Item 3',
href: '#'
}]
}]
}, "Standard Dropdown"), /*#__PURE__*/_react.default.createElement(NavItem, {
dropdown: /*#__PURE__*/_react.default.createElement(CustomDropdown, null)
}, "Custom Dropdown")), /*#__PURE__*/_react.default.createElement(SecondaryMenu, null, /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.User,
href: "#",
tooltipText: "Account"
}, "Account"), /*#__PURE__*/_react.default.createElement(NavItem, {
type: "secondary",
icon: _react2.Globe,
href: "#",
tooltipText: "Language"
}, "Language")));
};
exports.WithCustomComponents = WithCustomComponents;