@apolitical/component-library 3.2.0 → 3.3.0-beta.1

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

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

@@ -95,6 +95,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
     } | {
@@ -179,6 +180,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
     } | {
@@ -296,6 +298,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
     } | {
@@ -330,6 +333,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
     } | {
@@ -401,6 +405,7 @@ export declare const cardMapper: {
         multipleSpeakers?: undefined;
         list?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
         custom?: undefined;
     } | {
@@ -412,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;
@@ -459,6 +473,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         custom?: undefined;
     } | {
         custom: {
@@ -493,6 +508,7 @@ export declare const cardMapper: {
         shortQuestion?: undefined;
         longQuestion?: undefined;
         people?: undefined;
+        customLink?: undefined;
         learningHub?: undefined;
     };
 };

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/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) => 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;