@ilo-org/react 0.18.5 → 0.20.0

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

@@ -1,5 +1,36 @@
-import { FC } from 'react';
-import { AccordionProps } from './Accordion.props';
+import { ReactNode } from 'react';
 
-declare const Accordion: FC<AccordionProps>;
-export default Accordion;
+export type AccordionProps = {
+    /**
+     * The size of the accordion default is small
+     */
+    size?: "small" | "large";
+    /**
+     * Whether or not multiple accordion items can be expanded at the same time default is true
+     */
+    multiple?: boolean;
+    /**
+     * The value of the accordion, when multiple is true this should be an array of strings
+     */
+    value?: string | string[];
+    /**
+     * The callback function that is called when the value of the accordion changes
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * Whether or not the accordion panel should be scrollable default is false
+     */
+    scrollable?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+type AccordionContextValue = {
+    size: "small" | "large";
+    multiple: boolean;
+    value: string | string[];
+    scrollable?: boolean;
+    onChange: (value: string | string[]) => void;
+};
+declare const AccordionContext: import('react').Context<AccordionContextValue | undefined>;
+declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLUListElement>>;
+export { AccordionContext, Accordion };

package/lib/types/components/Accordion/AccordionItem.d.ts

@@ -1,5 +1,16 @@
-import { FC } from 'react';
-import { AccordionItemProps } from './AccordionItem.props';
+import { ReactNode } from 'react';
 
-declare const AccordionItem: FC<AccordionItemProps>;
-export default AccordionItem;
+export type AccordionItemProps = {
+    /**
+     * The value of the accordion item
+     */
+    value: string;
+    /**
+     * The label of the accordion item
+     */
+    label: string;
+    className?: string;
+    children: ReactNode;
+};
+declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export { AccordionItem };

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

@@ -1,4 +1,4 @@
-export { default as AccordionButton } from './AccordionButton';
-export { default as AccordionPanel } from './AccordionPanel';
-export { default as AccordionItem } from './AccordionItem';
-export { default as Accordion } from './Accordion';
+declare const Accordion: import('react').ForwardRefExoticComponent<import('./Accordion').AccordionProps & import('react').RefAttributes<HTMLUListElement>> & {
+    Item: import('react').ForwardRefExoticComponent<import('./AccordionItem').AccordionItemProps & import('react').RefAttributes<HTMLLIElement>>;
+};
+export { Accordion };

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/Breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,18 @@
-import { FC } from 'react';
-import { BreadcrumbProps } from './Breadcrumb.props';
+import { BreadcrumbItemProps } from './BreadcrumbItem';
 
-declare const Breadcrumb: FC<BreadcrumbProps>;
-export default Breadcrumb;
+export type BreadcrumbProps = {
+    /**
+     * An additional classname to add to the outer most element of the component
+     */
+    className?: string;
+    /**
+     * The accessible label to apply to the ellipsis button that appears when the Breadcrumb is collapsed
+     */
+    buttonLabel: string;
+    /**
+     * Specify the links to be displayed in the Breadcrumb
+     */
+    links: BreadcrumbItemProps[];
+};
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+export { Breadcrumb };

package/lib/types/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,20 @@
+export type BreadcrumbItemProps = {
+    /**
+     * Optional additional className of the BreadcrumbLink
+     */
+    className?: string;
+    /**
+     * Specify the label for this link
+     */
+    label: string;
+    /**
+     * Specify the url for this link
+     */
+    url: string;
+    /**
+     * Specify whether this link is the first in the Breadcrumb
+     */
+    first?: boolean;
+};
+declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<BreadcrumbItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export { BreadcrumbItem };

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

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

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';