@ilo-org/react 0.19.0 → 0.21.0

package/lib/types/components/Link/Link.d.ts

@@ -1,5 +1,56 @@
-import { FC } from 'react';
-import { LinkProps } from './Link.props';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { LinkTypes } from '../../types';
 
-declare const Link: FC<LinkProps>;
-export default Link;
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * Specify the url for the link's href
+     */
+    url: string;
+    /**
+     * Specify the content of your Link.
+     */
+    children?: ReactNode;
+    /**
+     * Specify the label for the link
+     */
+    label?: string;
+    /**
+     * Specify the target for the link
+     */
+    target?: string;
+    /**
+     * Specify an optional className to be added to your Link.
+     */
+    theme?: LinkTypes;
+    /**
+     * Specify an optional className to be added to your Link.
+     */
+    className?: string;
+};
+declare const Link: import('react').ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * Specify the url for the link's href
+     */
+    url: string;
+    /**
+     * Specify the content of your Link.
+     */
+    children?: ReactNode;
+    /**
+     * Specify the label for the link
+     */
+    label?: string | undefined;
+    /**
+     * Specify the target for the link
+     */
+    target?: string | undefined;
+    /**
+     * Specify an optional className to be added to your Link.
+     */
+    theme?: LinkTypes | undefined;
+    /**
+     * Specify an optional className to be added to your Link.
+     */
+    className?: string | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { Link };

package/lib/types/components/Link/index.d.ts

@@ -1 +1 @@
-export { default as Link } from './Link';
+export * from './Link';

package/lib/types/components/LinkList/LinkList.d.ts

@@ -1,5 +1,46 @@
-import { FC } from 'react';
-import { LinkListProps } from './LinkList.props';
+import { LinkListThemes } from '../../types';
 
-declare const LinkList: FC<LinkListProps>;
-export default LinkList;
+export type LinkProps = {
+    /**
+     * Specify if this link should indent and have a triangle icon
+     */
+    indented?: boolean;
+    /**
+     * Specify the label for this link
+     */
+    label: string;
+    /**
+     * Specify the url for this link
+     */
+    url: string;
+};
+export type LinkGroupProps = {
+    /**
+     * Specify an optional headline for this link group
+     */
+    headline?: string;
+    /**
+     * Specify the links to be displayed in this link group
+     */
+    links: Array<LinkProps>;
+};
+export type LinkListProps = {
+    /**
+     * Specify an optional className to be added to your Link List component.
+     */
+    className?: string;
+    /**
+     * Specify a headline for the the Link List
+     */
+    headline?: string;
+    /**
+     * Specify the links to be displayed in the Link List
+     */
+    linkgroup: Array<LinkGroupProps>;
+    /**
+     * Specify the theme for the Link List
+     */
+    theme?: LinkListThemes;
+};
+declare const LinkList: import('react').ForwardRefExoticComponent<LinkListProps & import('react').RefAttributes<HTMLDivElement>>;
+export { LinkList };

package/lib/types/components/LinkList/index.d.ts

@@ -1 +1 @@
-export { default as LinkList } from './LinkList';
+export * from './LinkList';

package/lib/types/components/List/List.d.ts

@@ -1,5 +1,55 @@
-import { FC } from 'react';
-import { ListProps } from './List.props';
+import { HTMLAttributes, ReactNode } from 'react';
 
-declare const List: FC<ListProps>;
-export default List;
+export type ListProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the list
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your list.
+     */
+    className?: string;
+    /**
+     * The alignment of the list items
+     */
+    alignment?: "default" | "horizontal";
+    /**
+     * The type of list
+     */
+    ordered?: "unstyled" | "ordered" | "unordered";
+    /**
+     * The title of the list
+     */
+    title?: string;
+    /**
+     * The theme of the list
+     */
+    theme?: "light" | "dark";
+};
+declare const List: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the list
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your list.
+     */
+    className?: string | undefined;
+    /**
+     * The alignment of the list items
+     */
+    alignment?: "default" | "horizontal" | undefined;
+    /**
+     * The type of list
+     */
+    ordered?: "ordered" | "unstyled" | "unordered" | undefined;
+    /**
+     * The title of the list
+     */
+    title?: string | undefined;
+    /**
+     * The theme of the list
+     */
+    theme?: "light" | "dark" | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { List };

package/lib/types/components/List/ListItem.d.ts

@@ -1,5 +1,23 @@
-import { FC } from 'react';
-import { ListItemProps } from './ListItem.props';
+import { HTMLAttributes, ReactNode } from 'react';
 
-declare const ListItem: FC<ListItemProps>;
-export default ListItem;
+export type ListItemProps = HTMLAttributes<HTMLLIElement> & {
+    /**
+     * Specify the content of your ListItem.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your ListItem.
+     */
+    className?: string;
+};
+declare const ListItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    /**
+     * Specify the content of your ListItem.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your ListItem.
+     */
+    className?: string | undefined;
+} & import('react').RefAttributes<HTMLLIElement>>;
+export { ListItem };

package/lib/types/components/List/index.d.ts

@@ -1,2 +1,18 @@
-export { default as List } from './List';
-export { default as ListItem } from './ListItem';
+import { ListProps } from './List';
+import { ListItemProps } from './ListItem';
+
+declare const List: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    children: import('react').ReactNode;
+    className?: string | undefined;
+    alignment?: "default" | "horizontal" | undefined;
+    ordered?: "ordered" | "unstyled" | "unordered" | undefined;
+    title?: string | undefined;
+    theme?: "light" | "dark" | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & {
+        children: import('react').ReactNode;
+        className?: string | undefined;
+    } & import('react').RefAttributes<HTMLLIElement>>;
+};
+export { List };
+export type { ListProps, ListItemProps };

package/lib/types/components/Nav/Navigation.props.d.ts

@@ -0,0 +1,112 @@
+import { ElementType, ReactNode } from 'react';
+import { LanguageToggleProps } from '../LanguageToggle';
+
+export interface NavigationLinkProps {
+    href?: string;
+    target?: string;
+    className?: string;
+    label: ReactNode;
+    isActive?: boolean;
+    /**
+     * The component to render the link
+     */
+    component?: ElementType;
+}
+export interface SubsiteNavCoreProps {
+    branding: {
+        /**
+         * The branding to display in the SubsiteNav like a primary logo
+         */
+        logo: {
+            main: ReactNode;
+            /**
+             * The logo to display in the drawer
+             */
+            drawer?: ReactNode;
+        };
+        /**
+         * The site or product name
+         */
+        name: string;
+        /**
+         * The handler to call when the branding is clicked
+         */
+        onClick?: () => void;
+    };
+    /**
+     * The menu configuration
+     */
+    menu: {
+        /**
+         * The navigation items to display
+         */
+        items: NavigationLinkProps[];
+        labels: {
+            /**
+             * The label to display for the more button
+             */
+            more?: string;
+            /**
+             * The label to display for the back to menu button
+             */
+            backToMenu?: string;
+        };
+    };
+    /**
+     * The widgets to display in the SubsiteNav
+     */
+    widgets?: {
+        /**
+         * The link inside the widget bar
+         */
+        link?: NavigationLinkProps;
+        /**
+         * The language toggler pros
+         */
+        language?: LanguageToggleProps & {
+            /**
+             * The label to display for the language toggle, used for mobile
+             */
+            label: string;
+        };
+        /**
+         * The search bar props
+         */
+        search?: {
+            type: "redirect";
+            url: string;
+            /**
+             * The label to display for the search bar
+             */
+            label?: string;
+        };
+    };
+}
+export interface CompactNavProps {
+    /**
+     * The type of SubsiteNav to render
+     */
+    type?: "compact";
+    props: SubsiteNavCoreProps;
+}
+export interface ComplexNavProps {
+    /**
+     * The type of SubsiteNav to render
+     */
+    type?: "complex";
+    props: SubsiteNavCoreProps & {
+        branding: {
+            logo: SubsiteNavCoreProps["branding"]["logo"] & {
+                /**
+                 * The logo to display for the mobile screens
+                 */
+                mobile?: ReactNode;
+            };
+            tag?: {
+                main: string;
+                sub?: string;
+            };
+        };
+    };
+}
+export type SubsiteNavProps = CompactNavProps | ComplexNavProps;

package/lib/types/components/Nav/NavigationDropdown.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+
+type NavigationDropdownProps = {
+    /**
+     * Whether the dropdown is open
+     */
+    isOpen: boolean;
+    /**
+     * The ref to the navigation element
+     */
+    navRef: RefObject<HTMLElement>;
+    className?: string;
+    /**
+     * The children to render in the dropdown
+     */
+    children?: React.ReactNode;
+};
+declare const NavigationDropdown: import('react').MemoExoticComponent<({ isOpen, className, navRef, children, }: NavigationDropdownProps) => import('react').ReactPortal>;
+export { NavigationDropdown };

package/lib/types/components/Nav/NavigationLink.d.ts

@@ -0,0 +1,4 @@
+import { NavigationLinkProps } from './Navigation.props';
+
+declare const NavigationLink: (props: NavigationLinkProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationLink };

package/lib/types/components/Nav/NavigationMenu.d.ts

@@ -0,0 +1,13 @@
+import { NavigationLinkProps } from './Navigation.props';
+
+type NavigationMenuProps = {
+    className?: string;
+    menu: NavigationLinkProps[];
+    more?: {
+        label?: string;
+        onClick: () => void;
+        isOpen: boolean;
+    };
+};
+declare const NavigationMenu: ({ className, menu, more }: NavigationMenuProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu };

package/lib/types/components/Nav/NavigationMenuGrid.d.ts

@@ -0,0 +1,7 @@
+import { NavigationLinkProps } from './Navigation.props';
+
+type NavigationMenuGridProps = {
+    menu: NavigationLinkProps[];
+};
+declare const NavigationMenuGrid: ({ menu }: NavigationMenuGridProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationMenuGrid };

package/lib/types/components/Nav/Subsite/CompactNav.d.ts

@@ -0,0 +1,4 @@
+import { CompactNavProps } from '../Navigation.props';
+
+declare const CompactNav: import('react').ForwardRefExoticComponent<CompactNavProps & import('react').RefAttributes<HTMLElement>>;
+export { CompactNav };

package/lib/types/components/Nav/Subsite/ComplexNav.d.ts

@@ -0,0 +1,4 @@
+import { ComplexNavProps } from '../Navigation.props';
+
+declare const ComplexNav: import('react').ForwardRefExoticComponent<ComplexNavProps & import('react').RefAttributes<HTMLElement>>;
+export { ComplexNav };

package/lib/types/components/Nav/Subsite/SubsiteNav.d.ts

@@ -0,0 +1,4 @@
+import { SubsiteNavProps } from '../Navigation.props';
+
+declare const SubsiteNav: import('react').ForwardRefExoticComponent<SubsiteNavProps & import('react').RefAttributes<HTMLElement>>;
+export { SubsiteNav };

package/lib/types/components/Nav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Subsite/SubsiteNav';
+export type { CompactNavProps, ComplexNavProps, SubsiteNavProps, } from './Navigation.props';

package/lib/types/components/Nav/mobile/MobileDrawer.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+type MobileDrawerProps = {
+    /**
+     * Whether the drawer is open or not
+     */
+    isOpen: boolean;
+    /**
+     * The handler to call when the drawer is closed
+     */
+    onClose?: () => void;
+    /**
+     * The Header part of the drawer
+     */
+    header: ReactNode;
+    /**
+     * The Widgets part of the drawer
+     */
+    widgets: ReactNode;
+    /**
+     * The Main content
+     */
+    children: ReactNode;
+    className?: string;
+};
+declare const MobileDrawer: ({ isOpen, onClose, header, widgets, children, className, }: MobileDrawerProps) => import('react').ReactPortal;
+export { MobileDrawer };

package/lib/types/components/Nav/mobile/MobileLanguageList.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { LanguageToggleProps } from '../../LanguageToggle';
+
+type MobileLanguageListProps = {
+    options: LanguageToggleProps["options"];
+    selected: string;
+};
+declare const MobileLanguageList: ({ options, selected, }: HTMLAttributes<HTMLUListElement> & MobileLanguageListProps) => import("react/jsx-runtime").JSX.Element;
+export { MobileLanguageList };

package/lib/types/components/Nav/mobile/MobileMenuList.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { NavigationLinkProps } from '../Navigation.props';
+
+type MobileMenuListProps = {
+    menu: NavigationLinkProps[];
+};
+declare const MobileMenuList: ({ menu, }: HTMLAttributes<HTMLUListElement> & MobileMenuListProps) => import("react/jsx-runtime").JSX.Element;
+export { MobileMenuList };

package/lib/types/components/Nav/mobile/MobileNavigation.d.ts

@@ -0,0 +1,15 @@
+import { SubsiteNavCoreProps } from '../Navigation.props';
+
+type MobileNavigationProps = {
+    /**
+     * Whether the navigation is open or not
+     */
+    isOpen: boolean;
+    /**
+     * The handler to call when the navigation is clicked
+     */
+    onClose?: () => void;
+    navigationProps: Omit<SubsiteNavCoreProps, "type">;
+};
+declare const MobileNavigation: ({ isOpen, navigationProps: { branding, menu: { items, labels }, widgets, }, onClose, }: MobileNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export { MobileNavigation };

package/lib/types/components/Nav/useNavSetup.d.ts

@@ -0,0 +1,22 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { NavigationLinkProps } from './Navigation.props';
+
+interface UseNavSetupArgs {
+    menu: NavigationLinkProps[];
+    split: {
+        desktop: number;
+        mobile: number;
+    };
+}
+interface UseNavSetupResponse {
+    menu: {
+        facade: NavigationLinkProps[];
+        more: NavigationLinkProps[];
+    };
+    more: [boolean, Dispatch<SetStateAction<boolean>>];
+    mobile: [boolean, Dispatch<SetStateAction<boolean>>];
+    ref: RefObject<HTMLElement>;
+    isDesktop: boolean;
+}
+declare function useNavSetup({ menu, split }: UseNavSetupArgs): UseNavSetupResponse;
+export { useNavSetup };

package/lib/types/components/Notification/Notification.d.ts

@@ -1,5 +1,56 @@
-import { FC } from 'react';
-import { NotificationProps } from './Notification.props';
+import { NotificationPlacement, NotificationTypes } from '../../types';
 
-declare const Notification: FC<NotificationProps>;
-export default Notification;
+export type NotificationProps = {
+    /**
+     * Specify an optional className to be added to your Notification component.
+     */
+    className?: string;
+    /**
+     * Specify the label for the close button
+     */
+    closelabel?: string;
+    /**
+     * Specify the copy
+     */
+    copy: string;
+    /**
+     * Specify the settings for an option CTA
+     */
+    cta?: {
+        /**
+         * Specify the label of the CTA
+         */
+        label: string;
+        /**
+         * Specify the url of the CTA
+         */
+        url: string;
+    };
+    /**
+     * Specify the headline
+     */
+    headline?: Required<string>;
+    /**
+     * Specify whether the notification is inline in the DOM or absolutely-positioned at a higher z-index
+     */
+    placement?: NotificationPlacement;
+    /**
+     * Specify an optional timestamp
+     */
+    timestamp?: {
+        /**
+         * Specify the human-readable time
+         */
+        human: string;
+        /**
+         * Specify the UNIX timestamp
+         */
+        unix: string;
+    };
+    /**
+     * Specify the icon for the Notification
+     */
+    type?: NotificationTypes;
+};
+declare const Notification: import('react').ForwardRefExoticComponent<NotificationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Notification };

package/lib/types/components/Notification/index.d.ts

@@ -1 +1 @@
-export { default as Notification } from './Notification';
+export * from './Notification';

package/lib/types/components/Profile/Profile.d.ts

@@ -1,5 +1,47 @@
-import { FC } from 'react';
-import { ProfileProps } from './Profile.props';
+import { ThemeTypes, SizeTypes } from '../../types';
 
-declare const Profile: FC<ProfileProps>;
-export default Profile;
+export type ProfileProps = {
+    /**
+     * Specify the theme for your profile component.
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the size for your profile component.
+     */
+    size?: SizeTypes;
+    /**
+     * Specify an avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
+     */
+    avatar: string;
+    /**
+     * Specify a role to be added to your Profile component.
+     */
+    role?: string;
+    /**
+     * Specify the name to be added to your Profile component.
+     */
+    name: string;
+    /**
+     * Specify an optional className to be added to your Profile component.
+     */
+    className?: string;
+    /**
+     * Specify an optional description to be added to your Profile component.
+     */
+    description?: string;
+    /**
+     * Specify an optional link to be added to your Profile component.
+     */
+    link?: {
+        /**
+         * Specify the label for the Profile's link
+         */
+        label: string;
+        /**
+         * Specify the url for the Profile's link
+         */
+        url: string;
+    };
+};
+declare const Profile: import('react').ForwardRefExoticComponent<ProfileProps & import('react').RefAttributes<HTMLElement>>;
+export { Profile };

package/lib/types/components/Profile/index.d.ts

@@ -1 +1 @@
-export { default as Profile } from './Profile';
+export * from './Profile';

package/lib/types/components/SocialMedia/SocialMedia.d.ts

@@ -1,45 +1,4 @@
-import { SocialTypes } from '../../types';
+import { SocialMediaProps } from './SocialMedia.props';
 
-export type SocialMediaIcons = {
-    /**
-     * The name of the icon to display
-     */
-    icon: SocialTypes;
-    /**
-     * The url to link to
-     */
-    url: string;
-    /**
-     * The alt text of the link
-     */
-    label: string;
-    className?: string;
-};
-export type SocialMediaProps = {
-    /**
-     * An optional headline to display above the icons
-     */
-    headline?: string;
-    /**
-     * Specify an optional className to be added to your SocialMedia.
-     */
-    className?: string;
-    /**
-     * Specify the theme of the SocialMedia.
-     */
-    theme?: "light" | "dark";
-    /**
-     * The justification of the icons
-     */
-    justify?: "start" | "center";
-    /**
-     * Specify the icons to display.
-     */
-    icons: SocialMediaIcons[];
-    /**
-     * The size of the social media icons
-     */
-    iconSize: "normal" | "large";
-};
 declare const SocialMedia: import('react').ForwardRefExoticComponent<SocialMediaProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SocialMedia };
+export default SocialMedia;