@apolitical/component-library 3.3.1-ac.5 → 3.3.1-beta.0

package/accessibility/visually-hidden/visually-hidden.d.ts

@@ -10,8 +10,10 @@ interface Props {
     href?: string;
     /** `for`, for labels */
     htmlFor?: string;
+    /** Additional classes */
+    className?: string;
 }
-declare const _default: React.MemoExoticComponent<({ element, showOnFocus, children, ...props }: Props) => React.DetailedReactHTMLElement<{
+declare const _default: React.MemoExoticComponent<({ element, showOnFocus, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     className: string;
     children: React.ReactNode | JSX.Element;
     /** An `href`, for links */

package/banners/custom-content-banner/custom-content-banner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /** The image to show on the banner */
+    image?: string;
+    /** The color variant of the list */
+    variant?: 'default' | 'dark';
+    /** The content to show */
+    children: React.ReactNode;
+    /** Additional classes */
+    className?: string;
+}
+declare const CustomContentBanner: ({ image, variant, children, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CustomContentBanner;

package/banners/custom-content-banner/index.d.ts

@@ -0,0 +1 @@
+export { default as CustomContentBanner } from './custom-content-banner';

package/banners/index.d.ts

@@ -1,4 +1,5 @@
 export * from './banner';
 export * from './banner-section';
+export * from './custom-content-banner';
 export * from './highlight-section';
 export * from './marketing-block';

package/cards/cards.types.d.ts

@@ -1,7 +1,7 @@
 import { ResponsiveImageType } from '../general';
+import { CustomIconType } from '../text';
 import { MemberProps } from '../user';
-export type CardContentType = 'customCard' | 'event' | 'learningHub' | 'listPage' | 'microcourse' | 'people' | 'qaQuestion' | 'solutionArticle' | 'communityPage';
-export type CustomIconType = 'calendar' | 'cube' | 'document' | 'download' | 'globe' | 'graduationCap' | 'link' | 'person' | 'star' | 'speech';
+export type CardContentType = 'customCard' | 'event' | 'learningHub' | 'listPage' | 'microcourse' | 'people' | 'qaQuestion' | 'solutionArticle';
 export interface CardCTAType {
     /** The text to show on the CTA button - different content types have different fallbacks */
     text?: string;
@@ -25,9 +25,7 @@ export interface CardType {
     /** Details of contributors, such as speakers or authors */
     contributors?: MemberProps[];
     /** Details of partners - this is similar to `contributors`, but won't show profile pictures */
-    partner?: {
-        title: string;
-    };
+    partner?: string[];
     /** The title of the card */
     title?: string;
     /** The primary text */
@@ -46,6 +44,8 @@ export interface CardType {
     customIcon?: CustomIconType;
     /** The label to use */
     customLabel?: string;
+    /** The link text to use */
+    customLinkText?: string;
     /** Event cards */
     /** The date the event starts */
     startDate?: string;
@@ -62,12 +62,6 @@ export interface CardType {
     profile?: string;
     /** The number of answers */
     answers?: number;
-    /** Community cards */
-    members?: {
-        memberType: string;
-        isMember: boolean;
-        count: number;
-    };
 }
 export interface MockCardType extends CardType {
     cardType?: string;

package/cards/mocks/card.d.ts

@@ -214,35 +214,11 @@ export namespace learningHub {
     let slug_6: string;
     export { slug_6 as slug };
 }
-export namespace community {
+export namespace custom {
     let contentType_7: string;
     export { contentType_7 as contentType };
-    export namespace sys {
-        let id: string;
-    }
-    let title_10: string;
-    export { title_10 as title };
-    let slug_7: string;
+    let slug_7: null;
     export { slug_7 as slug };
-    let _private: boolean;
-    export { _private as private };
-    export let visible: boolean;
-    export namespace bannerSection {
-        export let eyebrow: string;
-        let title_11: string;
-        export { title_11 as title };
-        let text_1: string;
-        export { text_1 as text };
-        export let ctaLink: null;
-        export let ctaText: null;
-        export let image: null;
-    }
-}
-export namespace custom {
-    let contentType_8: string;
-    export { contentType_8 as contentType };
-    let slug_8: null;
-    export { slug_8 as slug };
     export let customIcon: string;
     export let customLabel: string;
     let contributors_7: {
@@ -252,8 +228,8 @@ export namespace custom {
         };
     }[];
     export { contributors_7 as contributors };
-    let text_2: string;
-    export { text_2 as text };
+    let text_1: string;
+    export { text_1 as text };
     let secondaryText_1: string;
     export { secondaryText_1 as secondaryText };
 }

package/cards/mocks/mocks.helpers.d.ts

@@ -7,7 +7,6 @@ export declare const CONTENT_TYPES: {
     QUESTION: string;
     PEOPLE: string;
     LEARNING_HUB: string;
-    COMMUNITY: string;
     CUSTOM: string;
 };
 export declare const buildCard: (contentType: string, cardType?: string | null) => {
@@ -96,9 +95,9 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         premium: {
             contentType: string;
@@ -181,9 +180,9 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         upcoming: {
             contentType: string;
@@ -299,9 +298,9 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         list: {
             contentType: string;
@@ -334,9 +333,9 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         noAnswers: {
             contentType: string;
@@ -406,9 +405,9 @@ export declare const cardMapper: {
         multipleSpeakers?: undefined;
         list?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         people: {
             contentType: string;
@@ -418,6 +417,15 @@ export declare const cardMapper: {
             profile: string;
             slug: string;
         };
+        customLink: {
+            slug: string;
+            customLinkText: string;
+            contentType: string;
+            title: string;
+            text: string;
+            secondaryText: string;
+            profile: string;
+        };
         oneAuthor?: undefined;
         twoAuthors?: undefined;
         multipleAuthors?: undefined;
@@ -437,7 +445,6 @@ export declare const cardMapper: {
         longQuestion?: undefined;
         learningHub?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         learningHub: {
             contentType: string;
@@ -466,8 +473,8 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         custom?: undefined;
-        community?: undefined;
     } | {
         custom: {
             contentType: string;
@@ -501,49 +508,9 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
-        community?: undefined;
-    } | {
-        community: {
-            contentType: string;
-            sys: {
-                id: string;
-            };
-            title: string;
-            slug: string;
-            private: boolean;
-            visible: boolean;
-            bannerSection: {
-                eyebrow: string;
-                title: string;
-                text: string;
-                ctaLink: null;
-                ctaText: null;
-                image: null;
-            };
-        };
-        oneAuthor?: undefined;
-        twoAuthors?: undefined;
-        multipleAuthors?: undefined;
-        premium?: undefined;
-        free?: undefined;
-        partner?: undefined;
-        registered?: undefined;
-        upcoming?: undefined;
-        past?: undefined;
-        twoSpeakers?: undefined;
-        multipleSpeakers?: undefined;
-        list?: undefined;
-        noAnswers?: undefined;
-        oneAnswer?: undefined;
-        multipleAnswers?: undefined;
-        shortQuestion?: undefined;
-        longQuestion?: undefined;
-        people?: undefined;
-        learningHub?: undefined;
-        custom?: undefined;
     };
 };
 export declare const buildCardDataMock: (card: MockCardType) => Promise<unknown>;
 export declare const buildCustomCardData: (card: CardType) => () => Promise<unknown>;
-export declare const buildCommunityCardData: (card: CardType, memberType: string) => () => Promise<unknown>;

package/constants/courses.d.ts

@@ -0,0 +1,5 @@
+export declare const COURSE_CONTENT_TYPES: {
+    ARTICLE: string;
+    DISCUSSION: string;
+    QUIZ: string;
+};

package/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './assets';
 export * from './contact-details';
+export * from './courses';
 export * from './number-of-users';

package/context/flags/flags.provider.d.ts

@@ -4,5 +4,5 @@ interface Props {
     children: React.ReactNode;
     user: IUserContext;
 }
-export declare const FlagsProvider: ({ children, user }: Props) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const FlagsProvider: ({ children, user }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/context/intl/intl.provider.d.ts

@@ -1,10 +1,22 @@
 import React from 'react';
+export type LanguageType = keyof typeof supportedLanguages;
 export interface IIntlContext {
-    locale?: 'en' | 'fr';
+    locale?: LanguageType;
     messages?: Record<string, string>;
 }
 interface Props extends IIntlContext {
     children: React.ReactNode;
 }
+interface ILanguageContext {
+    language?: LanguageType;
+    updateLanguage?: (lang: string) => void;
+}
 export declare const IntlProvider: ({ children, locale, messages }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LanguageContext: React.Context<ILanguageContext>;
+export declare const supportedLanguages: {
+    en: string;
+    es: string;
+    fr: string;
+    pt: string;
+};
 export {};

package/courses/course-progression/course-progression.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ICourseProgressionTypes } from './course-progression.types';
+declare const CourseProgression: ({ element, data: { timeLeftToFinish, percentageCompleted: { inTime, inLessons }, shouldShowTimes, }, graph, styling, className, }: ICourseProgressionTypes) => React.DetailedReactHTMLElement<{
+    className: string;
+    children: import("react/jsx-runtime").JSX.Element;
+}, HTMLElement>;
+export default CourseProgression;

package/courses/course-progression/course-progression.types.d.ts

@@ -0,0 +1,28 @@
+export interface ICourseProgressionData {
+    /** The amount of time the remaining, completeable lessons will take to finish, in minutes */
+    timeLeftToFinish: number;
+    /** The percentage of the course that has been completed */
+    percentageCompleted: {
+        /** The percentage of timed lessons complete - this is used when the course shows the time for lessons */
+        inTime?: number;
+        /** The percentage of total, completeable lessons complete - this is used when the course hides the time for lessons */
+        inLessons?: number;
+    };
+    /** Whether the course shows the time for lessons */
+    shouldShowTimes?: boolean;
+}
+export interface ICourseProgressionTypes {
+    /** The element to wrap the course progression in */
+    element?: 'p' | 'aside' | 'div';
+    /** The data to display */
+    data: ICourseProgressionData;
+    /** The type of graph to display */
+    graph?: 'bar' | 'circle' | false;
+    /** Styling options */
+    styling?: {
+        /** Whether to highlight the percentage text */
+        highlightPercentage?: boolean;
+    };
+    /** Additional classes */
+    className?: string;
+}

package/courses/course-progression/index.d.ts

@@ -0,0 +1 @@
+export { default as CourseProgression } from './course-progression';

package/courses/course-structure/course-structure.d.ts

@@ -0,0 +1,3 @@
+import { ICourseStructure } from './course-structure.types';
+declare const CourseStructure: ({ course: { articles, canAccessCourse, description, hideTimes, isEnrolled, sectionId, sectionTime, slug: microcourseSlug, timeLeft, title, }, quizScores, }: ICourseStructure) => import("react/jsx-runtime").JSX.Element;
+export default CourseStructure;

package/courses/course-structure/course-structure.mock.d.ts

@@ -0,0 +1,122 @@
+export default data;
+declare namespace data {
+    namespace course {
+        let articles: ({
+            title: string;
+            slug: string;
+            subsectionId: number;
+            humanTranslation: boolean;
+            completionTime: number;
+            type: string;
+            icon: string;
+            content: {
+                sys: {
+                    type: string;
+                    linkType: string;
+                    id: string;
+                };
+            };
+            optional: boolean;
+            contentType: string;
+            createdAt: string;
+            updatedAt: string;
+            image: null;
+            isIntroduction: boolean;
+            completed: boolean;
+            sectionId: number;
+            description?: undefined;
+            questions?: undefined;
+            question?: undefined;
+        } | {
+            title: string;
+            slug: string;
+            subsectionId: number;
+            humanTranslation: boolean;
+            completionTime: number;
+            type: string;
+            icon: string;
+            content: {
+                sys: {
+                    type: string;
+                    linkType: string;
+                    id: string;
+                };
+            };
+            optional: boolean;
+            contentType: string;
+            createdAt: string;
+            updatedAt: string;
+            image: string;
+            isIntroduction: boolean;
+            completed: boolean;
+            sectionId: number;
+            description?: undefined;
+            questions?: undefined;
+            question?: undefined;
+        } | {
+            title: string;
+            slug: string;
+            subsectionId: number;
+            description: string;
+            questions: {
+                sys: {
+                    type: string;
+                    linkType: string;
+                    id: string;
+                };
+            }[];
+            optional: boolean;
+            contentType: string;
+            createdAt: string;
+            updatedAt: string;
+            icon: string;
+            type: string;
+            completed: boolean;
+            sectionId: number;
+            humanTranslation?: undefined;
+            completionTime?: undefined;
+            content?: undefined;
+            image?: undefined;
+            isIntroduction?: undefined;
+            question?: undefined;
+        } | {
+            title: string;
+            slug: string;
+            subsectionId: number;
+            description: string;
+            question: {
+                sys: {
+                    type: string;
+                    linkType: string;
+                    id: string;
+                };
+            };
+            optional: boolean;
+            contentType: string;
+            createdAt: string;
+            updatedAt: string;
+            icon: string;
+            type: string;
+            completed: boolean;
+            sectionId: number;
+            humanTranslation?: undefined;
+            completionTime?: undefined;
+            content?: undefined;
+            image?: undefined;
+            isIntroduction?: undefined;
+            questions?: undefined;
+        })[];
+        let canAccessCourse: boolean;
+        let description: string;
+        let hideTimes: boolean;
+        let isEnrolled: boolean;
+        let sectionId: number;
+        let sectionTime: number;
+        let slug: string;
+        let timeLeft: number;
+        let title: string;
+    }
+    let quizScores: {
+        'check-what-youve-learned-vaw-data-1': number;
+    };
+}

package/courses/course-structure/course-structure.types.d.ts

@@ -0,0 +1,55 @@
+export interface ILessonType {
+    /** The time it takes to complete the article */
+    completionTime: number;
+    /** The article's icon */
+    icon: string;
+    /** Whether the article is optional */
+    optional: boolean;
+    /** The article's type */
+    type: string;
+}
+export interface ICourseStructureArticles extends ILessonType {
+    /** The article's content type */
+    contentType: string;
+    /** Whether the use has completed the article */
+    completed: boolean;
+    /** The article's image */
+    image?: string;
+    /** Whether the article is an introduction, which is visible whether the user is enrolled or not */
+    isIntroduction: boolean;
+    /** The article's slug */
+    slug: string;
+    /** The subsection ID */
+    subsectionId: number;
+    /** The article's title */
+    title: string;
+}
+export interface ICourseStructureCourse {
+    /** Articles in the course */
+    articles: ICourseStructureArticles[];
+    /** Whether the user can access the course */
+    canAccessCourse: boolean;
+    /** Description of the course */
+    description: string;
+    /** Whether to hide the times */
+    hideTimes: boolean;
+    /** Whether the user is enrolled in the course */
+    isEnrolled: boolean;
+    /** The section ID */
+    sectionId: number;
+    /** The time it takes to complete the course */
+    sectionTime: number;
+    /** The course slug */
+    slug: string;
+    /** The time left to complete the course */
+    timeLeft: number;
+    /** The course title */
+    title: string;
+}
+export interface ICourseStructure {
+    /** Details about the course */
+    course: ICourseStructureCourse;
+    quizScores?: {
+        [key: string]: number;
+    };
+}

package/courses/course-structure/index.d.ts

@@ -0,0 +1 @@
+export { default as CourseStructure } from './course-structure';

package/courses/index.d.ts

@@ -0,0 +1,5 @@
+export * from './course-progression';
+export * from './course-structure';
+export * from './lesson-name';
+export * from './lesson-type';
+export * from './mark-complete-button';

package/courses/lesson-name/index.d.ts

@@ -0,0 +1 @@
+export { default as LessonName } from './lesson-name';

package/courses/lesson-name/lesson-name.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Props {
+    /** The element to use for the lesson name */
+    element?: 'h1' | 'span';
+    /** The ID of the lesson section */
+    sectionId: number;
+    /** The ID of the section article */
+    subsectionId: number;
+    /** The title of the lesson */
+    title: string;
+    /** Additional classes */
+    className?: string;
+}
+declare const LessonName: ({ element, sectionId, subsectionId, title, className, }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    'data-number': string;
+    children: string;
+}, HTMLElement>;
+export default LessonName;

package/courses/lesson-type/index.d.ts

@@ -0,0 +1 @@
+export { default as LessonType } from './lesson-type';

package/courses/lesson-type/lesson-type.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ILessonType } from './../course-structure/course-structure.types';
+interface LessonTypeProps extends ILessonType {
+    /** The size of the component */
+    size?: 'default' | 'large';
+    /** Optional children */
+    children?: React.ReactNode;
+}
+declare const LessonType: ({ size, completionTime, icon, optional, type, children, }: LessonTypeProps) => import("react/jsx-runtime").JSX.Element;
+export default LessonType;

package/courses/mark-complete-button/index.d.ts

@@ -0,0 +1 @@
+export { default as MarkCompleteButton } from './mark-complete-button';

package/courses/mark-complete-button/mark-complete-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonPropsType } from '../../general';
+interface MarkCompleteButtonProps extends ButtonPropsType {
+    /** Whether the lesson is complete */
+    isComplete?: boolean;
+}
+declare const MarkCompleteButton: ({ isComplete, onClick, ...props }: MarkCompleteButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MarkCompleteButton;

package/general/index.d.ts

@@ -4,4 +4,6 @@ export * from './image-container';
 export * from './link';
 export * from './responsive-image';
 export * from './return-to-nav-button';
+export * from './table-of-contents';
+export * from './time-to-complete';
 export * from './tooltip';

package/general/link/link.d.ts

@@ -22,6 +22,8 @@ interface Props {
     ariaLabel?: string;
     /** Test id for link */
     'data-testid'?: string;
+    /** Data attributes for the link */
+    'data-before'?: string;
 }
-declare const Link: ({ href, children, fallbackElement, className, onClick, gtmContext, gtmType, ...props }: Props) => string | JSX.Element | JSX.Element[];
+declare const Link: ({ href, children, fallbackElement, className, onClick, gtmContext, gtmType, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/general/table-of-contents/index.d.ts

@@ -0,0 +1 @@
+export { default as TableOfContents } from './table-of-contents';

package/general/table-of-contents/table-of-contents.d.ts

@@ -0,0 +1,16 @@
+interface TableOfContentsItem {
+    /** The id of the element to link to */
+    id: string;
+    /** The text to show in the link */
+    text: string;
+}
+interface Props {
+    /** The items to show. This will default to all h1-h6s inside the `selector`. */
+    items?: TableOfContentsItem[];
+    /** A parent selector for all h1-h6s, to use if no items have been passed in. */
+    selector?: string;
+    /** Additional classes  */
+    className?: string;
+}
+declare const TableOfContents: ({ items: originalItems, selector, className, }: Props) => false | import("react/jsx-runtime").JSX.Element;
+export default TableOfContents;

package/general/time-to-complete/index.d.ts

@@ -0,0 +1 @@
+export { default as TimeToComplete } from './time-to-complete';

package/general/time-to-complete/time-to-complete.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** The time to display, in minutes */
+    time: number;
+    /** An optional number to add to `time`, showing a range rather than a specific number, like `1h 45m - 2h` */
+    rangeTime?: number;
+    /** Text to show before the time */
+    prependedText?: string;
+    /** Text to show after the time */
+    appendedText?: string;
+    /** Additional classes  */
+    className?: string;
+}
+declare const TimeToComplete: ({ time, rangeTime, prependedText, appendedText, className, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default TimeToComplete;

package/helpers/cases.d.ts

@@ -1 +1,3 @@
 export declare const camelCaseToDashCase: (str: string) => string;
+export declare const toCamelCase: (str?: string) => string;
+export declare const toSentenceCase: (str?: string) => string;