@apolitical/component-library 1.4.1-beta.0 → 1.5.0

package/layout/page-layout/page-layout.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface Props {
     /** Content to show on the page */
-    children: React.ReactNode;
+    children: React.ReactNode | JSX.Element | React.ReactPortal;
     /** Handle errors */
     reportError: () => void;
     background?: 'default' | 'gradient';

package/modals/index.d.ts

@@ -1 +1,2 @@
 export * from './modal';
+export * from './overlay';

package/modals/modal/modal.d.ts

@@ -1,9 +1,26 @@
 import React from 'react';
 interface Props {
+    /** The element that will render around the content */
+    element?: 'section' | 'div' | 'ul';
     /** The content to display */
-    children: React.ReactNode | string;
+    children: React.ReactNode | JSX.Element | string;
+    /** The ID of the element */
+    id?: string;
     /** Additional classes */
     className?: string;
+    /** If the element should be hidden */
+    hidden?: boolean | string;
+    /** Optional styling */
+    style?: React.CSSProperties;
 }
-declare const Modal: ({ children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ element, children, className, ...props }: Props) => React.DOMElement<{
+    /** The ID of the element */
+    id?: string | undefined;
+    /** If the element should be hidden */
+    hidden?: string | boolean | undefined;
+    /** Optional styling */
+    style?: React.CSSProperties | undefined;
+    className: string;
+    children: number | boolean | Iterable<React.ReactNode> | JSX.Element | null | undefined;
+}, Element>;
 export default Modal;

package/modals/overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Overlay } from './overlay';
+export { addAriaProps } from './overlay.helpers';

package/modals/overlay/overlay.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { ButtonPropsType } from '../../general';
+interface Props {
+    /** ID of the overlay */
+    id?: string;
+    /** If the overlay is showing or not */
+    isOpen?: boolean;
+    /** The maximum width of the modal */
+    maxWidth?: number;
+    /** Functions to handle the overlay */
+    functions?: {
+        /** Function to call when the user opens the modal */
+        onOpen?: () => void;
+        /** Function to call when the user closes the modal */
+        onClose?: () => void;
+    };
+    /** Force elements on the form to show, regardless of the overlay state */
+    forceShow?: {
+        /** If an error, created externally, should always show */
+        error?: false | string;
+    };
+    /** The title to show */
+    title?: string | undefined;
+    /** The content to show */
+    children: JSX.Element | string;
+    /** The buttons to render; these can also be handled inside `children` */
+    buttons?: ButtonPropsType[];
+    /** Additional classes */
+    className?: string;
+    /** GTM context */
+    gtmContext?: string;
+    /** Language to use */
+    locale?: string;
+}
+declare const Overlay: ({ id, isOpen, maxWidth, functions: { onOpen, onClose }, forceShow: { error }, title, children, buttons, className, gtmContext }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Overlay;

package/modals/overlay/overlay.helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const addAriaProps: (id: string, isOpen: boolean) => {
+    'aria-haspopup': boolean;
+    'aria-expanded': boolean;
+    'aria-controls': string;
+};

package/navigation/index.d.ts

@@ -1,4 +1,5 @@
 export * from './filters';
 export * from './load-more';
+export * from './more-menu';
 export * from './logo';
 export * from './tags';

package/navigation/more-menu/index.d.ts

@@ -0,0 +1,2 @@
+export type { IMoreMenuOptions } from './more-menu';
+export { default as MoreMenu } from './more-menu';

package/navigation/more-menu/more-menu.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface IMoreMenuOptions {
+    /** The link to use */
+    href?: string;
+    /** The function to call when the user clicks the button */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** The text to show */
+    text: string;
+    /** The icon to show */
+    icon?: string;
+    /** Additional classes */
+    className?: string;
+    /** The GTM context */
+    'data-gtm-event-context'?: string;
+    /** The GTM event type */
+    'data-gtm-event-type'?: string;
+    /** The Jest test ID */
+    'data-testid'?: string;
+}
+interface Props {
+    /** The element to wrap around the content */
+    element?: 'div' | 'li' | 'p';
+    /** An id for the menu */
+    id?: string;
+    /** The menu items */
+    options: Array<IMoreMenuOptions>;
+    /** Additional classes */
+    className?: string;
+    /** The language to use */
+    locale?: string;
+}
+declare const MoreMenu: ({ element, id, options, className }: Props) => React.DetailedReactHTMLElement<{
+    ref: React.RefObject<HTMLDivElement | HTMLParagraphElement | HTMLLIElement>;
+    className: string;
+    children: import("react/jsx-runtime").JSX.Element;
+}, HTMLDivElement | HTMLParagraphElement | HTMLLIElement>;
+export default MoreMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "1.4.1-beta.0",
+  "version": "1.5.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {