@ilo-org/react 0.19.0 → 0.21.0

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

@@ -0,0 +1,6 @@
+export interface BlockquoteProps {
+    quote: string;
+    cite: string;
+}
+declare const Blockquote: import('react').ForwardRefExoticComponent<BlockquoteProps & import('react').RefAttributes<HTMLQuoteElement>>;
+export { Blockquote };

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

@@ -0,0 +1 @@
+export * from './Blockquote';

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

@@ -1,5 +1,84 @@
-import { FC } from 'react';
-import { ButtonProps } from './Button.props';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonTypes, PositionTypes, SizeTypes } from '../../types';
 
-declare const Button: FC<ButtonProps>;
-export default Button;
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    /**
+     * Specify the content of your Button.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string;
+    /**
+     * The size of the button: `small`, `medium`, `large`
+     */
+    size?: SizeTypes;
+    /**
+     * Types of the button: `primary`, `secondary`, `tertiary`, `ghost`
+     */
+    type?: ButtonTypes;
+    /**
+     * Specify if the button should be rendered as link
+     */
+    link?: {
+        /**
+         * Specify the url for the Button's href
+         */
+        url: string;
+        /**
+         * Specify the label for the Button
+         */
+        label: string;
+        /**
+         * Specify the target for when Button is really a link
+         */
+        target?: string;
+    };
+    icon?: {
+        name: string;
+        position?: PositionTypes;
+        only?: boolean;
+    };
+};
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    /**
+     * Specify the content of your Button.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string | undefined;
+    /**
+     * The size of the button: `small`, `medium`, `large`
+     */
+    size?: SizeTypes | undefined;
+    /**
+     * Types of the button: `primary`, `secondary`, `tertiary`, `ghost`
+     */
+    type?: ButtonTypes | undefined;
+    /**
+     * Specify if the button should be rendered as link
+     */
+    link?: {
+        /**
+         * Specify the url for the Button's href
+         */
+        url: string;
+        /**
+         * Specify the label for the Button
+         */
+        label: string;
+        /**
+         * Specify the target for when Button is really a link
+         */
+        target?: string | undefined;
+    } | undefined;
+    icon?: {
+        name: string;
+        position?: PositionTypes | undefined;
+        only?: boolean | undefined;
+    } | undefined;
+} & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { Button };

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

@@ -1,2 +1 @@
-export { default as Button } from './Button';
-export { default as buttonArgs } from './Button.args';
+export * from './Button';

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

@@ -1,5 +1,51 @@
-import { FC } from 'react';
-import { CalloutProps } from './Callout.props';
+import { CalloutTypes } from '../../types';
 
-declare const Callout: FC<CalloutProps>;
-export default Callout;
+export type CalloutProps = {
+    /**
+     * 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 an optional className to be added to your RichText.
+     */
+    className?: string;
+    /**
+     * Specify the copy
+     */
+    copy?: Required<string>;
+    /**
+     * Specify if callout is collapsible
+     */
+    isCollapsible?: boolean;
+    /**
+     * Specify if callout is open (only important for collapsible items)
+     */
+    isOpen?: boolean;
+    /**
+     * Specify the callout headline
+     */
+    headline?: string;
+    /**
+     * Specify the open label
+     */
+    toggleOpenLabel?: string;
+    /**
+     * Specify the open label
+     */
+    toggleClosedLabel?: string;
+    /**
+     * Describe the type of callout
+     */
+    type?: CalloutTypes;
+};
+declare const Callout: import('react').ForwardRefExoticComponent<CalloutProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Callout };

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

@@ -1,2 +1 @@
-export { default as Callout } from './Callout';
-export { default as calloutArgs } from './Callout.args';
+export * from './Callout';

package/lib/types/components/Cards/CardGroup.d.ts

@@ -0,0 +1,31 @@
+import { CardTypes } from '../../types';
+import { StatCardProps } from './StatCard';
+import { MultiLinkCardProps } from './MultiLinkCard';
+import { TextCardProps } from './TextCard';
+import { PromoCardProps } from './PromoCard';
+import { FeatureCardProps } from './FeatureCard';
+import { DetailCardProps } from './DetailCard';
+import { FactListCardProps } from './FactListCard';
+import { DataCardProps } from './DataCard';
+import { LinkProps } from '../Link';
+
+type CardPropsMap = {
+    stat: StatCardProps;
+    multilink: MultiLinkCardProps;
+    text: TextCardProps;
+    promo: PromoCardProps;
+    feature: FeatureCardProps;
+    detail: DetailCardProps;
+    factlist: FactListCardProps;
+    data: DataCardProps;
+};
+type CardGroupComponentProps<T extends CardTypes> = CardPropsMap[T];
+export type CardGroupProps<T extends CardTypes> = {
+    type: T;
+    group: CardGroupComponentProps<T>[];
+    cardCount: "one" | "two" | "three" | "four";
+    cta?: LinkProps;
+    collapsed?: boolean;
+};
+declare const CardGroup: import('react').ForwardRefExoticComponent<CardGroupProps<CardTypes> & import('react').RefAttributes<HTMLDivElement>>;
+export { CardGroup };

package/lib/types/components/Cards/DataCard.d.ts

@@ -0,0 +1,50 @@
+import { LinkProps } from '../Link';
+import { CardSize } from '../../types';
+
+export type DataCardProps = {
+    /**
+     * A line of text that appears as a small heading at the top of the card
+     */
+    eyebrow?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url)
+     */
+    dataset?: {
+        content?: {
+            items: Array<{
+                label: string;
+                copy: string;
+            }>;
+        };
+        files?: {
+            headline: string;
+            items: Array<LinkProps>;
+        };
+        links?: {
+            headline: string;
+            items: Array<LinkProps>;
+        };
+        cta?: {
+            headline: string;
+            items: Array<LinkProps>;
+        };
+    };
+    /**
+     * Make the content appear in one or two columns. Only applies when the size is set to `wide` or `fluid`
+     */
+    columns?: "one" | "two";
+    /**
+     * Specify an optional className to be added to your DataCard.
+     */
+    className?: string;
+};
+declare const DataCard: import('react').ForwardRefExoticComponent<DataCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataCard };

package/lib/types/components/Cards/DetailCard.d.ts

@@ -0,0 +1,54 @@
+import { CardSize, EventDate, HeadingTypes, ThemeTypes } from '../../types';
+
+export type DetailCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    /**
+     * Additional date information
+     */
+    details?: string;
+    /**
+     * Intro text for the card
+     */
+    intro?: string;
+    /**
+     * Specify the URL for the card link
+     */
+    link?: string;
+    /**
+     * Specify the image for the card
+     */
+    image?: string;
+    /**
+     * Specify if the card is a video
+     */
+    isVideo?: boolean;
+    /**
+     * Specify an optional className to be added to your DetailCard.
+     */
+    className?: string;
+};
+declare const DetailCard: import('react').ForwardRefExoticComponent<DetailCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DetailCard };

package/lib/types/components/Cards/FactListCard.d.ts

@@ -0,0 +1,30 @@
+import { CardSize, HeadingTypes, ThemeTypes } from '../../types';
+
+export type FactListCardProps = {
+    /**
+     * The title of the card
+     */
+    title?: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * The list of facts to display
+     */
+    list: string[];
+    /**
+     * Specify an optional className to be added to your FactListCard.
+     */
+    className?: string;
+};
+declare const FactListCard: import('react').ForwardRefExoticComponent<FactListCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FactListCard };

package/lib/types/components/Cards/{FeatureCard/FeatureCard.props.d.ts → FeatureCard.d.ts}

@@ -1,8 +1,8 @@
-import { ThemeTypes, CardSize, EventDate, HeadingTypes } from '../../../types';
-import { LinkListProps } from '../../LinkList/LinkList.props';
+import { LinkListProps } from '../LinkList';
+import { CardSize, EventDate, HeadingTypes, ThemeTypes } from '../../types';
 
-export interface FeatureCardProps {
-    isvideo?: boolean;
+export type FeatureCardProps = {
+    isVideo?: boolean;
     /**
      * A line of text that appears as a small heading above the title of the card
      */
@@ -27,10 +27,22 @@ export interface FeatureCardProps {
      * Specify the event Date, in both human and Unix format.
      */
     date?: EventDate;
+    /**
+     * Link to the card
+     */
     link?: string;
+    /**
+     * Link list to show in the card
+     */
     linklist?: LinkListProps;
     /**
      * The image to show in the card
      */
     image?: string;
-}
+    /**
+     * Specify an optional className to be added to your TextCard.
+     */
+    className?: string;
+};
+declare const FeatureCard: import('react').ForwardRefExoticComponent<FeatureCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FeatureCard };

package/lib/types/components/Cards/MultiLinkCard.d.ts

@@ -0,0 +1,52 @@
+import { LinkListProps } from '../LinkList';
+import { CardAlignment, CardSize, HeadingTypes } from '../../types';
+
+export type MultiLinkCardProps = {
+    isVideo?: boolean;
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * How big should the card be
+     */
+    size?: CardSize;
+    /**
+     * How should the card be aligned
+     */
+    alignment?: CardAlignment;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    /**
+     * Link to the card
+     */
+    link?: string;
+    /**
+     * Link list to show in the card
+     */
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * Specify an optional className to be added to your TextCard.
+     */
+    className?: string;
+    /**
+     * Specify a theme for the component, either `light` or `blue`
+     */
+    theme?: "light" | "soft";
+};
+declare const MultiLinkCard: import('react').ForwardRefExoticComponent<MultiLinkCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { MultiLinkCard };

package/lib/types/components/Cards/{PromoCard/PromoCard.props.d.ts → PromoCard.d.ts}

@@ -1,7 +1,7 @@
-import { ThemeTypes, CardCornerType, CardSize, HeadingTypes } from '../../../types';
-import { LinkProps } from '../../LinkList/LinkList.props';
+import { CardCornerType, CardSize, HeadingTypes, ThemeTypes } from '../../types';
+import { LinkProps } from '../Link';
 
-export interface PromoCardProps {
+export type PromoCardProps = {
     /**
      * A line of text that appears as a small heading above the title of the card
      */
@@ -30,6 +30,18 @@ export interface PromoCardProps {
      * Introductory text in the card
      */
     intro?: string;
+    /**
+     * Source link for the card
+     */
     link?: string;
+    /**
+     * Call to action link
+     */
     cta?: LinkProps;
-}
+    /**
+     * Specify an optional className to be added to your PromoCard.
+     */
+    className?: string;
+};
+declare const PromoCard: import('react').ForwardRefExoticComponent<PromoCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PromoCard };

package/lib/types/components/Cards/StatCard.d.ts

@@ -0,0 +1,39 @@
+import { LinkProps } from '../Link';
+import { CardColor, CardSize, HeadingTypes, ThemeTypes } from '../../types';
+
+export interface StatCardProps {
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * Background color of stat card
+     */
+    color?: CardColor;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "narrow" | "wide">;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    /**
+     * Source link for the card
+     */
+    source?: LinkProps;
+    /**
+     * Specify an optional className to be added to your StatCard.
+     */
+    className?: string;
+}
+declare const StatCard: import('react').ForwardRefExoticComponent<StatCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { StatCard };

package/lib/types/components/Cards/{TextCard/TextCard.props.d.ts → TextCard.d.ts}

@@ -1,7 +1,7 @@
-import { ThemeTypes, CardSize, EventDate, HeadingTypes } from '../../../types';
-import { ProfileProps } from '../../Profile/Profile.props';
+import { ProfileProps } from '../Profile';
+import { CardSize, EventDate, HeadingTypes, ThemeTypes } from '../../types';
 
-export interface TextCardProps {
+export type TextCardProps = {
     /**
      * A line of text that appears as a small heading above the title of the card
      */
@@ -26,6 +26,18 @@ export interface TextCardProps {
      * Specify the event Date, in both human and Unix format.
      */
     date?: EventDate;
+    /**
+     * Profile information to be displayed on the card
+     */
     profile: ProfileProps;
+    /**
+     * Specify the URL for the card link
+     */
     link?: string;
-}
+    /**
+     * Specify an optional className to be added to your TextCard.
+     */
+    className?: string;
+};
+declare const TextCard: import('react').ForwardRefExoticComponent<TextCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TextCard };

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

@@ -0,0 +1,9 @@
+export * from './TextCard';
+export * from './StatCard';
+export * from './PromoCard';
+export * from './MultiLinkCard';
+export * from './FeatureCard';
+export * from './FactListCard';
+export * from './DetailCard';
+export * from './DataCard';
+export * from './CardGroup';

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

@@ -22,6 +22,10 @@ export type ContextMenuProps = {
      * Specify the links to be displayed in the Context Menu
      */
     links: Array<LinkProps>;
+    /**
+     * Specify whether the Context Menu should be rendered in a portal
+     */
+    withPortal?: boolean;
 };
 declare const ContextMenu: import('react').ForwardRefExoticComponent<ContextMenuProps & import('react').RefAttributes<HTMLOListElement>>;
 export { ContextMenu };

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

@@ -1,5 +1,51 @@
-import { FC } from 'react';
-import { FooterProps } from './Footer.props';
+import { LinkGroupProps, LinkProps } from '../LinkList';
+import { SocialMediaProps } from '../SocialMedia';
 
-declare const Footer: FC<FooterProps>;
-export default Footer;
+export type FooterProps = {
+    /**
+     * Specify an optional className to be added to your Footer.
+     */
+    className?: string;
+    /**
+     * Props for the logo of the Footer
+     */
+    logo: string;
+    /**
+     * Specify the tagline for the Footer
+     */
+    tagline?: string;
+    /**
+     * Specify the subtagline for the Footer
+     */
+    subtagline?: string;
+    /**
+     * Specify the address for the Footer, in multiple lines
+     */
+    address?: string[];
+    /**
+     * Specify the linkgroup for the Footer's links
+     */
+    linkgroup: Required<Array<LinkGroupProps>>;
+    /**
+     * Specify the links to be displayed in this link group
+     */
+    socialmedia?: SocialMediaProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    subscribe?: LinkProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    legal?: string;
+    /**
+     * Specify the secondary links for the Footer
+     */
+    secondarylinks?: LinkProps[];
+    /**
+     * Specify the anchor link for the Footer
+     */
+    anchorlink?: LinkProps;
+};
+declare const Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLElement>>;
+export { Footer };

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

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

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { ThemeTypes } from '../../types';
+import { ContextMenuProps } from '../ContextMenu';
+
+export type LanguageToggleProps = {
+    /**
+     * The language string to display
+     */
+    language: string;
+    /**
+     * Specify an optional className to be added to your LanguageToggle component.
+     */
+    theme?: ThemeTypes;
+    /**
+     * Hide the glob icon
+     */
+    hideIcon?: boolean;
+    /**
+     * Specify the languages to be displayed in the Context Menu
+     */
+    options?: ContextMenuProps["links"];
+    className?: string;
+};
+declare const LanguageToggle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & LanguageToggleProps & import('react').RefAttributes<HTMLDivElement>>;
+export { LanguageToggle };

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

@@ -0,0 +1 @@
+export * from './LanguageToggle';