@apolitical/component-library 1.13.7-beta.0 → 1.14.0

package/cards/card/card.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from './../cards.types';
+declare const Card: ({ id, card, buildCardData, cta, gtmContext, className, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/cards/card/card.data.d.ts

@@ -0,0 +1,11 @@
+export interface MetadataType {
+    basePath?: string;
+    className?: string;
+    length?: {
+        [key: string]: number;
+    };
+    gtmEvent?: string;
+}
+export declare const METADATA: {
+    [key: string]: MetadataType;
+};

package/cards/card/card.helpers.d.ts

@@ -0,0 +1,5 @@
+import { CustomIconType } from '../../cards/cards.types';
+export declare const fileNames: {
+    [key in CustomIconType]?: string;
+};
+export declare const getIconPath: (icon: CustomIconType) => string;

package/cards/card/components/details/details.d.ts

@@ -0,0 +1,9 @@
+import { CardType } from '../../../../cards/cards.types';
+interface Props {
+    /** The type of card */
+    type: string;
+    /** The card data */
+    data: CardType;
+}
+declare const Details: ({ type, data }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default Details;

package/cards/card/components/details/index.d.ts

@@ -0,0 +1 @@
+export { default as Details } from './details';

package/cards/card/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './details';
+export * from './links';

package/cards/card/components/links/index.d.ts

@@ -0,0 +1 @@
+export { default as Links } from './links';

package/cards/card/components/links/links.d.ts

@@ -0,0 +1,13 @@
+import { CardType, CardCTAType } from '../../../../cards/cards.types';
+interface Props {
+    /** The card data */
+    data: CardType;
+    /** An optional call to action to show on the card - this can behave differently to clicking elsewhere on the card */
+    cta?: CardCTAType;
+    /** The href to link to */
+    link?: string;
+    /** Context for the Google Tag Manager event */
+    gtmContext?: string;
+}
+declare const Links: ({ data, cta, link, gtmContext }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default Links;

package/cards/card/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './card';

package/cards/card-block/card-block.d.ts

@@ -0,0 +1,15 @@
+import { CardType, CardContentType, BuildCardDataType } from '../../cards/cards.types';
+interface Props {
+    /** The card data, from Contentful */
+    cards: CardType[];
+    /** The types for each card, from Contentful */
+    cardTypes: CardContentType[];
+    /** A function to parse and build the card data - this is especially needed in carousels to hydrate the cards */
+    buildCardData: BuildCardDataType;
+    /** Context for the Google Tag Manager event */
+    gtmContext?: string;
+    /** Additional classes to add to the card block */
+    className?: string;
+}
+declare const CardBlock: ({ cards, cardTypes, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CardBlock;

package/cards/card-block/index.d.ts

@@ -0,0 +1 @@
+export { default as CardBlock } from './card-block';

package/cards/cards.types.d.ts

@@ -0,0 +1,133 @@
+import { ResponsiveImageType } from '../general';
+import { MemberDetailsProps } from '../user';
+export type CardContentType = 'custom' | 'event' | 'learningHub' | 'listPage' | 'microcourse' | 'people' | 'qaQuestion' | 'solutionArticle';
+export type CustomIconType = 'calendar' | 'cube' | 'document' | 'download' | 'globe' | 'graduationCap' | 'link' | 'person' | 'star' | 'speech';
+export interface CardCTAType {
+    /** The text to show on the CTA button - different content types have different fallbacks */
+    text?: string;
+    /** A callback to run when the user clicks on the CTA button */
+    onClick?: (card: CardType) => Promise<string>;
+}
+export interface CardType {
+    /** The `sys` set-up from Contentful */
+    sys?: {
+        /** The ID of the card */
+        id?: string;
+    };
+    /** The Contentful content model type */
+    contentType?: CardContentType;
+    /** The URL the card should point to */
+    slug?: string | null;
+    /** Whether the card should open in a new tab */
+    openInNewTab?: boolean;
+    /** The image to use */
+    banner?: ResponsiveImageType;
+    /** Details of contributors, such as speakers or authors */
+    contributors?: MemberDetailsProps[];
+    /** Details of partners - this is similar to `contributors`, but won't show profile pictures */
+    partner?: {
+        title: string;
+    };
+    /** The title of the card */
+    title?: string;
+    /** The primary text */
+    text?: string;
+    /** The secondary text */
+    secondaryText?: string;
+    /** The date the card was created */
+    createdAt?: string;
+    /** Article cards */
+    /** The date the article was published */
+    publishedDate?: string;
+    /** The estimated reading time */
+    readingTime?: string;
+    /** Custom cards */
+    /** The icon to use */
+    customIcon?: CustomIconType;
+    /** The label to use */
+    customLabel?: string;
+    /** Event cards */
+    /** The date the event starts */
+    startDate?: string;
+    /** Whether the event is ongoing */
+    isOngoingEvent?: boolean;
+    /** Whether the event has passed */
+    dateHasPassed?: boolean;
+    /** The pill text to show */
+    pill?: 'premium' | 'free';
+    /** Whether the user has registered for the event/course */
+    registered?: boolean;
+    /** People cards */
+    /** The user's profile picture */
+    profile?: string;
+    /** The number of answers */
+    answers?: number;
+}
+export interface MockCardType extends CardType {
+    cardType?: string;
+}
+export type BuildCardDataType = (card: CardType | MockCardType, isLoggedIn?: boolean) => Promise<any>;
+export interface CardProps {
+    /** A unique key for the card, used as a dependency in `useEffect` */
+    id?: string;
+    /** The card data, from Contentful */
+    card: CardType;
+    /** A function to parse and build the card data - this is especially needed in carousels to hydrate the cards */
+    buildCardData: BuildCardDataType;
+    /** An optional call to action to show on the card - this can behave differently to clicking elsewhere on the card */
+    cta?: CardCTAType;
+    /** Context for the Google Tag Manager event */
+    gtmContext?: string;
+    /** Additional classes */
+    className?: string;
+}
+export interface CarouselTitleProps {
+    /** The title text */
+    text?: string;
+    /** The element for the title */
+    element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /** The styling of the title */
+    variant?: 'default' | 'highlighted';
+    /** The size of the title */
+    size?: 'medium' | 'large';
+    /** The `href` to point the 'view all' link to; it won't show unless this is defined */
+    link?: string;
+}
+export interface BaseCarouselProps {
+    /** A function to parse and build the card data - this is especially needed in carousels to hydrate the cards */
+    buildCardData: BuildCardDataType;
+    /** An optional title to show above the carousels */
+    title?: CarouselTitleProps;
+    /** Context for the Google Tag Manager event */
+    gtmContext?: string;
+    /** Additional classes to add to the card block */
+    className?: string;
+}
+export interface CarouselDataProps {
+    /** The title for the carousel */
+    title?: string;
+    /** The `href` to point the 'view all' link to; it won't show unless this is defined */
+    viewAllUrl?: string;
+    /** A non-user-facing description of the carousel */
+    internalDescription?: string;
+    /** The card data, from Contentful */
+    cards: CardType[];
+    /** The types for each card, from Contentful */
+    cardsTypes: CardContentType[];
+    /** The type of data */
+    contentType?: 'carousel';
+}
+export interface CarouselProps extends BaseCarouselProps {
+    /** The data for each carousel to display in the section */
+    carousels?: CarouselDataProps[];
+    /** If the content is still loading - this is controlled externally */
+    isLoading?: boolean;
+}
+export interface IndividualCarouselProps extends BaseCarouselProps {
+    /** The unique identifier for the carousel */
+    id?: string;
+    /** The card data, from Contentful */
+    cards: CardType[];
+    /** The types for each card, from Contentful */
+    cardTypes: CardContentType[];
+}

package/cards/carousel/carousel.d.ts

@@ -0,0 +1,3 @@
+import { CarouselProps } from '../../cards/cards.types';
+declare const CarouselWrapper: ({ carousels, isLoading, title, className, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element[] | null;
+export default CarouselWrapper;

package/cards/carousel/components/carousel/carousel.d.ts

@@ -0,0 +1,8 @@
+import { IndividualCarouselProps } from '../../../../cards/cards.types';
+export declare const breakpoints: {
+    fourCards: number;
+    threeCards: number;
+    twoCards: number;
+};
+declare const Carousel: ({ id, cards, cardTypes, buildCardData, title, className, gtmContext, }: IndividualCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/cards/carousel/components/carousel/carousel.helpers.d.ts

@@ -0,0 +1 @@
+export declare const shouldDisplayCard: (index: number, cardsPerPage: number, page: number, loadedPages: number[]) => boolean;

package/cards/carousel/components/carousel/index.d.ts

@@ -0,0 +1 @@
+export { default as Carousel } from './carousel';

package/cards/carousel/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './carousel';
+export * from './title';

package/cards/carousel/components/title/index.d.ts

@@ -0,0 +1 @@
+export { default as Title } from './title';

package/cards/carousel/components/title/title.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CarouselTitleProps } from '../../../../cards/cards.types';
+interface Props {
+    /** The unique identifier for the carousel */
+    id?: string;
+    /** The title data */
+    title?: CarouselTitleProps;
+}
+declare const Title: ({ id, title }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    children: import("react/jsx-runtime").JSX.Element;
+}, HTMLElement> | null;
+export default Title;

package/cards/carousel/index.d.ts

@@ -0,0 +1 @@
+export { default as Carousel } from './carousel';

package/cards/index.d.ts

@@ -0,0 +1,3 @@
+export * from './card';
+export * from './card-block';
+export * from './carousel';

package/cards/mocks/card.d.ts

@@ -0,0 +1,235 @@
+export namespace articleOneAuthor {
+    let contentType: string;
+    namespace banner {
+        let description: string;
+        let height: number;
+        let type: string;
+        let url: string;
+        let width: number;
+        let aspect: string;
+        let query: string;
+    }
+    let contributors: {
+        name: string;
+        image: null;
+    }[];
+    let publishedDate: Date;
+    let readingTime: number;
+    let slug: string;
+    let title: string;
+}
+export namespace articleTwoAuthors {
+    let contributors_1: {
+        name: string;
+        image: null;
+    }[];
+    export { contributors_1 as contributors };
+}
+export namespace articleMultipleAuthors {
+    let contributors_2: {
+        name: string;
+        image: null;
+    }[];
+    export { contributors_2 as contributors };
+}
+export namespace coursePremium {
+    let contentType_1: string;
+    export { contentType_1 as contentType };
+    export namespace banner_1 {
+        let description_1: string;
+        export { description_1 as description };
+        let height_1: number;
+        export { height_1 as height };
+        let type_1: string;
+        export { type_1 as type };
+        let url_1: string;
+        export { url_1 as url };
+        let width_1: number;
+        export { width_1 as width };
+        let aspect_1: string;
+        export { aspect_1 as aspect };
+        let query_1: string;
+        export { query_1 as query };
+    }
+    export { banner_1 as banner };
+    let slug_1: string;
+    export { slug_1 as slug };
+    let title_1: string;
+    export { title_1 as title };
+    export let pill: string;
+    export let registered: boolean;
+}
+export namespace courseFree {
+    let pill_1: string;
+    export { pill_1 as pill };
+}
+export namespace coursePartner {
+    namespace partner {
+        let title_2: string;
+        export { title_2 as title };
+    }
+}
+export namespace courseRegistered {
+    let registered_1: boolean;
+    export { registered_1 as registered };
+}
+export namespace eventUpcoming {
+    let contentType_2: string;
+    export { contentType_2 as contentType };
+    export namespace banner_2 {
+        let description_2: string;
+        export { description_2 as description };
+        let height_2: number;
+        export { height_2 as height };
+        let type_2: string;
+        export { type_2 as type };
+        let url_2: string;
+        export { url_2 as url };
+        let width_2: number;
+        export { width_2 as width };
+        let aspect_2: string;
+        export { aspect_2 as aspect };
+        let query_2: string;
+        export { query_2 as query };
+    }
+    export { banner_2 as banner };
+    export let dateHasPassed: boolean;
+    let title_3: string;
+    export { title_3 as title };
+    let slug_2: string;
+    export { slug_2 as slug };
+    let contributors_3: {
+        name: string;
+        image: null;
+    }[];
+    export { contributors_3 as contributors };
+    export let startDate: Date;
+}
+export namespace eventPast {
+    let dateHasPassed_1: boolean;
+    export { dateHasPassed_1 as dateHasPassed };
+    let startDate_1: Date;
+    export { startDate_1 as startDate };
+}
+export namespace eventTwoSpeakers {
+    let contributors_4: {
+        name: string;
+        image: null;
+    }[];
+    export { contributors_4 as contributors };
+}
+export namespace eventMultipleSpeakers {
+    let contributors_5: {
+        name: string;
+        image: null;
+    }[];
+    export { contributors_5 as contributors };
+}
+export namespace eventRegistered {
+    let registered_2: boolean;
+    export { registered_2 as registered };
+}
+export namespace list {
+    let contentType_3: string;
+    export { contentType_3 as contentType };
+    export namespace banner_3 {
+        let description_3: string;
+        export { description_3 as description };
+        let height_3: number;
+        export { height_3 as height };
+        let type_3: string;
+        export { type_3 as type };
+        let url_3: string;
+        export { url_3 as url };
+        let width_3: number;
+        export { width_3 as width };
+        let aspect_3: string;
+        export { aspect_3 as aspect };
+        let query_3: string;
+        export { query_3 as query };
+    }
+    export { banner_3 as banner };
+    let slug_3: string;
+    export { slug_3 as slug };
+    let title_4: string;
+    export { title_4 as title };
+}
+export namespace questionNoAnswers {
+    let contentType_4: string;
+    export { contentType_4 as contentType };
+    export let answers: number;
+    let contributors_6: {
+        id: string;
+        name: string;
+    }[];
+    export { contributors_6 as contributors };
+    let slug_4: string;
+    export { slug_4 as slug };
+    let title_5: string;
+    export { title_5 as title };
+    export let createdAt: Date;
+}
+export namespace questionOneAnswer {
+    let answers_1: number;
+    export { answers_1 as answers };
+}
+export namespace questionMultipleAnswers {
+    let answers_2: number;
+    export { answers_2 as answers };
+}
+export namespace questionShortQuestion {
+    let title_6: string;
+    export { title_6 as title };
+    let answers_3: number;
+    export { answers_3 as answers };
+}
+export namespace questionLongQuestion {
+    let title_7: string;
+    export { title_7 as title };
+    let answers_4: number;
+    export { answers_4 as answers };
+}
+export namespace people {
+    let contentType_5: string;
+    export { contentType_5 as contentType };
+    let title_8: string;
+    export { title_8 as title };
+    export let text: string;
+    export let secondaryText: string;
+    export let profile: string;
+    let slug_5: string;
+    export { slug_5 as slug };
+}
+export namespace learningHub {
+    let contentType_6: string;
+    export { contentType_6 as contentType };
+    export let label: string;
+    let title_9: string;
+    export { title_9 as title };
+    export namespace banner_4 {
+        let url_4: string;
+        export { url_4 as url };
+    }
+    export { banner_4 as banner };
+    let slug_6: string;
+    export { slug_6 as slug };
+}
+export namespace custom {
+    let contentType_7: string;
+    export { contentType_7 as contentType };
+    let slug_7: null;
+    export { slug_7 as slug };
+    export let customIcon: string;
+    export let customLabel: string;
+    let contributors_7: {
+        name: string;
+        image: {
+            thumbnail: string;
+        };
+    }[];
+    export { contributors_7 as contributors };
+    let text_1: string;
+    export { text_1 as text };
+    let secondaryText_1: string;
+    export { secondaryText_1 as secondaryText };
+}

package/cards/mocks/carousel.d.ts

@@ -0,0 +1,58 @@
+export const mockCards: {
+    contentType: string;
+    cardType: string | null;
+    sys: {
+        id: string;
+        linkType: string;
+        type: string;
+    };
+}[];
+export const mockCardTypes: string[];
+export namespace mockCarousel {
+    export { buildCardDataMock as buildCardData };
+    export let isLoading: boolean;
+    export namespace title {
+        let size: string;
+    }
+    export let carousels: ({
+        cards: {
+            contentType: string;
+            cardType: string | null;
+            sys: {
+                id: string;
+                linkType: string;
+                type: string;
+            };
+        }[];
+        cardsTypes: string[];
+        title?: undefined;
+        viewAllUrl?: undefined;
+    } | {
+        cards: {
+            contentType: string;
+            cardType: string | null;
+            sys: {
+                id: string;
+                linkType: string;
+                type: string;
+            };
+        }[];
+        cardsTypes: string[];
+        title: string;
+        viewAllUrl: string;
+    } | {
+        cards: {
+            contentType: string;
+            cardType: string | null;
+            sys: {
+                id: string;
+                linkType: string;
+                type: string;
+            };
+        }[];
+        cardsTypes: string[];
+        title: string;
+        viewAllUrl?: undefined;
+    })[];
+}
+import { buildCardDataMock } from './mocks.helpers';

package/cards/mocks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './card';
+export * from './carousel';
+export * from './mocks.helpers';