@uob-web-and-digital/component-library 2.7.2 → 2.7.5

package/dist/components/organisms/Hero/Hero.d.ts

@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './hero.scss';
+import { SelectOptionsProps } from '../../atoms/FormSelect/FormSelect';
+interface Link {
+    url: string;
+    title: string;
+    externalLink?: boolean;
+}
+interface CourseSearchProps {
+    defaultSearchTerm?: string;
+    placeholder: string;
+    filterTitle: string;
+    filterFieldName: string;
+    filterOptions: SelectOptionsProps[];
+    defaultFilter?: string;
+    formSubmitHandler?: () => void | null;
+    filterChangeHandler?: () => void | null;
+    searchTermChangeHandler?: () => void | null;
+}
+export interface HeroProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4';
+    description?: string;
+    image?: {
+        src: {
+            small?: string;
+            medium?: string;
+            default: string;
+        };
+        alt: string;
+        style: 'rectangle' | 'lines-of-intent';
+        fetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
+    };
+    links?: [] | [Link] | [Link, Link];
+    courseSearchProps?: CourseSearchProps;
+}
+export default function Hero({ theme, inverse, title, titleTag, description, image, links, courseSearchProps }: HeroProps): ReactElement | null;
+export {};

package/dist/components/organisms/Hero/Hero.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+import Hero from './Hero';
+declare const meta: {
+    title: string;
+    component: typeof Hero;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Hero>;
+export declare const DarkColourBlock: Story;
+export declare const DarkColourBlockAndH1Title: Story;
+export declare const LightColourBlock: Story;
+export declare const DarkRectangleImage: Story;
+export declare const LightRectangleImage: Story;
+export declare const DarkLinesOfIntentImage: Story;
+export declare const LightLinesOfIntentImage: Story;
+export declare const LightLinseOfIntentImageAndH1Title: Story;

package/dist/components/organisms/Hero/components/LinesOfIntent.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+}
+export default function LinesOfIntent({ isMobile, isTablet }: Props): ReactElement;
+export {};

package/dist/components/organisms/Hero/components/PolygonImage.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+    image: {
+        src: {
+            small?: string;
+            medium?: string;
+            default: string;
+        };
+        alt: string;
+        fetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
+    };
+}
+export default function PolygonImage({ isMobile, isTablet, image }: Props): ReactElement;
+export {};

package/dist/components/organisms/Hero/defaultProps.d.ts

@@ -0,0 +1,7 @@
+import { HeroProps } from './Hero';
+export declare const colourBlockHeroProps: HeroProps;
+export declare const rectangleImageHeroProps: HeroProps;
+export declare const linesOfIntentImageHeroProps: HeroProps;
+export declare const newsHeroProps: HeroProps;
+export declare const accommodationHeroProps: HeroProps;
+export declare const schorlarshipsAwardPage: HeroProps;

package/dist/components/organisms/HeroArticle/HeroArticle.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { ShareButtonsProps } from '../../molecules/ShareButtons/ShareButtons';
+import { CardImageProps } from '../../molecules/CardImage/CardImage';
+import './heroArticle.scss';
+import { ParagraphLinkProps } from '../../atoms/ParagraphLink/ParagraphLink';
+export interface HeroArticleProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4';
+    description: string;
+    cardImage: CardImageProps;
+    publishDate: string;
+    readTime?: string;
+    shareButtons: ShareButtonsProps;
+    author?: ParagraphLinkProps;
+}
+export default function HeroArticle({ theme, inverse, title, titleTag, description, cardImage, publishDate, readTime, shareButtons, author }: HeroArticleProps): ReactElement | null;

package/dist/components/organisms/HeroArticle/HeroArticle.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import HeroArticle from './HeroArticle';
+declare const meta: {
+    title: string;
+    component: typeof HeroArticle;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof HeroArticle>;
+export declare const Example: Story;

package/dist/components/organisms/HeroArticle/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { HeroArticleProps } from './HeroArticle';
+export declare const heroArticleProps: HeroArticleProps;

package/dist/components/organisms/HeroCarousel/HeroCarousel.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './heroCarousel.scss';
+interface HeroCarouselCard {
+    category: string;
+    title: string;
+    description: string;
+    linkUrl: string;
+    linkLabel: string;
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+    imageAlt: string;
+}
+export interface HeroCarouselProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * A HeroCarousel can have 1-3 items
+     */
+    cards: [HeroCarouselCard] | [HeroCarouselCard, HeroCarouselCard] | [HeroCarouselCard, HeroCarouselCard, HeroCarouselCard];
+}
+export default function HeroCarousel({ theme, cards }: HeroCarouselProps): ReactElement | null;
+export {};

package/dist/components/organisms/HeroCarousel/HeroCarousel.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import HeroCarousel from './HeroCarousel';
+declare const meta: {
+    title: string;
+    component: typeof HeroCarousel;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof HeroCarousel>;
+export declare const Default: Story;
+export declare const Single: Story;

package/dist/components/organisms/HeroCarousel/animationVariants.d.ts

@@ -0,0 +1,177 @@
+export declare const mobileBackgroundVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+    visible: {
+        opacity: number;
+    };
+};
+export declare const mobileImageVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+};
+export declare const tabletBackgroundVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+    visible: {
+        opacity: number;
+    };
+};
+export declare const tabletImageVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+};
+export declare const desktopBackgroundVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+    visible: {
+        opacity: number;
+    };
+};
+export declare const desktopImageVariants: {
+    first: {
+        clipPath: string;
+    };
+    second: {
+        clipPath: string;
+    };
+    third: {
+        clipPath: string;
+    };
+};
+export declare const mobileLineOneVariants: {
+    first: {
+        left: string;
+        bottom: number;
+        transform: string;
+    };
+    second: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+};
+export declare const mobileLineTwoVariants: {
+    first: {
+        left: string;
+        bottom: number;
+        transform: string;
+    };
+    second: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+};
+export declare const tabletLineOneVariants: {
+    first: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    second: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const tabletLineTwoVariants: {
+    first: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    second: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const desktopLineOneVariants: {
+    first: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    second: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const desktopLineTwoVariants: {
+    first: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    second: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    third: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};

package/dist/components/organisms/HeroCarousel/components/HeroCardContent.d.ts

@@ -0,0 +1,17 @@
+import React, { KeyboardEvent } from 'react';
+import { ThemeProps } from '../../../../themeProps';
+interface Props {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    category: string;
+    title: string;
+    description: string;
+    linkUrl: string;
+    linkLabel: string;
+    onKeyDown?: (e: KeyboardEvent<Element>) => void;
+}
+type CTARef = HTMLAnchorElement | null;
+export declare const HeroCardContent: React.ForwardRefExoticComponent<Props & React.RefAttributes<CTARef>>;
+export default HeroCardContent;

package/dist/components/organisms/HeroCarousel/components/HeroImage.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+    activeVariant: string;
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+    imageAlt: string;
+    imageFetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
+}
+export default function HeroImage({ isMobile, isTablet, activeVariant, imageSrc, imageAlt, imageFetchPriority }: Props): ReactElement;
+export {};

package/dist/components/organisms/HeroCarousel/components/LinesOfIntent.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+    activeVariant: string;
+}
+export default function LinesOfIntent({ isMobile, isTablet, activeVariant }: Props): ReactElement;
+export {};

package/dist/components/organisms/HeroCarousel/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { HeroCarouselProps } from './HeroCarousel';
+export declare const heroCarouselProps: HeroCarouselProps;

package/dist/components/organisms/HeroCourses/HeroCourses.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './heroCourses.scss';
+import { TextButtonProps } from '../../atoms/TextButton/TextButton';
+import { ModalCTAButtonProps } from '../../molecules/ModalCTAButton/ModalCTAButton';
+import { CourseTileProps } from './components/CourseTile';
+import { CourseTileSelectProps } from './components/CourseTileSelect';
+import { CourseTileRankingProps } from './components/CourseTileRanking';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+import { LocationSelectorProps } from '../../molecules/LocationSelector/LocationSelector';
+export interface HeroCoursesProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    titleTag?: HeadingProps['htmlTag'];
+    awardShort: string;
+    links?: Omit<TextButtonProps, 'theme'>[];
+    heroType: 'UG' | 'UG Dubai' | 'PGT Dubai' | 'Other';
+    award: CourseTileProps;
+    ranking?: CourseTileRankingProps;
+    yearOfEntry?: CourseTileSelectProps;
+    startDate?: CourseTileProps;
+    campus?: CourseTileProps;
+    duration: CourseTileProps;
+    entryRequirements: CourseTileProps;
+    fees: CourseTileProps;
+    ucas?: CourseTileProps;
+    deliveryFormat?: CourseTileProps;
+    locationDetails?: LocationSelectorProps;
+    modalCTA?: ModalCTAButtonProps;
+}
+export default function HeroCourses({ theme, title, titleTag, awardShort, links, ranking, award, campus, ucas, duration, entryRequirements, startDate, yearOfEntry, fees, deliveryFormat, locationDetails, modalCTA }: HeroCoursesProps): ReactElement | null;

package/dist/components/organisms/HeroCourses/HeroCourses.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import HeroCourses from './HeroCourses';
+declare const meta: {
+    title: string;
+    component: typeof HeroCourses;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof HeroCourses>;
+export declare const CoursesHeroSixColumnDesktop: Story;
+export declare const CoursesHeroFiveColumnDesktop: Story;
+export declare const CoursesHeroPostGraduate: Story;
+export declare const CoursesHeroFourColumnDesktop: Story;
+export declare const CoursesHeroApplyNowWithOnClick: Story;

package/dist/components/organisms/HeroCourses/components/CourseTile.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { LinkWithIconProps } from '../../../atoms/LinkWithIcon/LinkWithIcon';
+export interface CourseTileProps {
+    title: string;
+    value: string;
+    link?: LinkWithIconProps;
+}
+export default function CourseTile({ title, value, link }: CourseTileProps): ReactElement;

package/dist/components/organisms/HeroCourses/components/CourseTileRanking.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { LinkWithIconProps } from '../../../atoms/LinkWithIcon/LinkWithIcon';
+export interface CourseTileRankingProps {
+    title: string;
+    rank: string;
+    rankText: string;
+    link?: LinkWithIconProps;
+}
+export default function CourseTileRanking({ title, rank, rankText, link }: CourseTileRankingProps): ReactElement;

package/dist/components/organisms/HeroCourses/components/CourseTileSelect.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { FormSelectProps } from '../../../atoms/FormSelect/FormSelect';
+export interface CourseTileSelectProps {
+    title: string;
+    selectProps: FormSelectProps;
+}
+export default function CourseTileSelect({ title, selectProps }: CourseTileSelectProps): ReactElement;

package/dist/components/organisms/HeroCourses/components/tileLinkClickHandler.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+/// <reference types="react" />
+export declare const tileLinkClickHandler: (e: React.MouseEvent, target: string) => void;

package/dist/components/organisms/HeroCourses/defaultProps.d.ts

@@ -0,0 +1,43 @@
+import { HeroCoursesProps } from './HeroCourses';
+export declare const heroCoursesProps: HeroCoursesProps;
+export declare const heroCoursesAnchorsProps: HeroCoursesProps;
+export declare const ranking: import("./components/CourseTileRanking").CourseTileRankingProps | undefined, heroCoursesNoRankingProps: {
+    theme: import("../../../themeProps").ThemeProps;
+    inverse?: boolean | undefined;
+    title: string;
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | undefined;
+    awardShort: string;
+    links?: Omit<import("../../atoms/TextButton/TextButton").TextButtonProps, "theme">[] | undefined;
+    heroType: "UG" | "UG Dubai" | "PGT Dubai" | "Other";
+    award: import("./components/CourseTile").CourseTileProps;
+    yearOfEntry?: import("./components/CourseTileSelect").CourseTileSelectProps | undefined;
+    startDate?: import("./components/CourseTile").CourseTileProps | undefined;
+    campus?: import("./components/CourseTile").CourseTileProps | undefined;
+    duration: import("./components/CourseTile").CourseTileProps;
+    entryRequirements: import("./components/CourseTile").CourseTileProps;
+    fees: import("./components/CourseTile").CourseTileProps;
+    ucas?: import("./components/CourseTile").CourseTileProps | undefined;
+    deliveryFormat?: import("./components/CourseTile").CourseTileProps | undefined;
+    locationDetails?: import("../../..").LocationSelectorProps | undefined;
+    modalCTA?: import("../../molecules/ModalCTAButton/ModalCTAButton").ModalCTAButtonProps | undefined;
+};
+export declare const deliveryFormat: import("./components/CourseTile").CourseTileProps | undefined, heroCoursesNoRankingNoDeliveryFormat: {
+    theme: import("../../../themeProps").ThemeProps;
+    inverse?: boolean | undefined;
+    title: string;
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | undefined;
+    awardShort: string;
+    links?: Omit<import("../../atoms/TextButton/TextButton").TextButtonProps, "theme">[] | undefined;
+    heroType: "UG" | "UG Dubai" | "PGT Dubai" | "Other";
+    award: import("./components/CourseTile").CourseTileProps;
+    yearOfEntry?: import("./components/CourseTileSelect").CourseTileSelectProps | undefined;
+    startDate?: import("./components/CourseTile").CourseTileProps | undefined;
+    campus?: import("./components/CourseTile").CourseTileProps | undefined;
+    duration: import("./components/CourseTile").CourseTileProps;
+    entryRequirements: import("./components/CourseTile").CourseTileProps;
+    fees: import("./components/CourseTile").CourseTileProps;
+    ucas?: import("./components/CourseTile").CourseTileProps | undefined;
+    locationDetails?: import("../../..").LocationSelectorProps | undefined;
+    modalCTA?: import("../../molecules/ModalCTAButton/ModalCTAButton").ModalCTAButtonProps | undefined;
+};
+export declare const heroCoursesPGProps: HeroCoursesProps;

package/dist/components/organisms/HeroProfile/HeroProfile.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './heroProfile.scss';
+export interface HeroProfileProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse: boolean;
+    studentName: string;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4';
+    image: {
+        src: {
+            small?: string;
+            medium?: string;
+            default: string;
+        };
+        alt: string;
+        fetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
+    };
+    studentStatus?: string;
+    courseName?: string;
+    courseDetails?: string[];
+    studyLevel?: string;
+    homeCountry?: string;
+    studentIntro?: string;
+}
+export default function HeroProfile({ theme, studentName, studentStatus, courseName, courseDetails, studyLevel, titleTag, homeCountry, studentIntro, image, inverse }: HeroProfileProps): ReactElement | null;

package/dist/components/organisms/HeroProfile/HeroProfile.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import HeroProfile from './HeroProfile';
+declare const meta: {
+    title: string;
+    component: typeof HeroProfile;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof HeroProfile>;
+export declare const AlternativeCourseName: Story;
+export declare const OneCourse: Story;
+export declare const TwoCourses: Story;
+export declare const ThreeCourses: Story;

package/dist/components/organisms/HeroProfile/defaultProps.d.ts

@@ -0,0 +1,5 @@
+import { HeroProfileProps } from './HeroProfile';
+export declare const heroProfileProps: HeroProfileProps;
+export declare const heroProfilePropsOneCourse: HeroProfileProps;
+export declare const heroProfilePropsTwoCourses: HeroProfileProps;
+export declare const heroProfilePropsThreeCourses: HeroProfileProps;

package/dist/components/organisms/ImageBlock/ImageBlock.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import './imageBlock.scss';
+import { HeadingProps } from '../../molecules/Heading/Heading';
+import { CardImageProps } from '../../molecules/CardImage/CardImage';
+export interface ImageBlockProps extends HeadingProps {
+    fullWidth: boolean;
+    makeHeadingFullWidth?: boolean;
+    images?: Omit<CardImageProps, 'theme' | 'inverse'>[];
+}
+export default function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, makeHeadingFullWidth, images, htmlTag }: ImageBlockProps): ReactElement | null;

package/dist/components/organisms/ImageBlock/ImageBlock.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import ImageBlock from './ImageBlock';
+import './imageBlock.scss';
+declare const meta: {
+    title: string;
+    component: typeof ImageBlock;
+    tags: string[];
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageBlock>;
+export declare const Default: Story;
+export declare const Dark: Story;
+export declare const Light: Story;
+export declare const OneImageFullWidth: Story;
+export declare const TwoImagesFullWidth: Story;
+export declare const OneImage: Story;
+export declare const TwoImages: Story;
+export declare const NoImages: Story;
+export declare const OneImageNoHeading: Story;

package/dist/components/organisms/ImageBlock/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { ImageBlockProps } from './ImageBlock';
+export declare const imageBlockProps: ImageBlockProps;
+export declare const imageBlockPropsNoHeading: ImageBlockProps;

package/dist/components/organisms/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import './imageCarousel.scss';
+import { HeadingProps } from '../../molecules/Heading/Heading';
+import { CardImageProps } from '../../molecules/CardImage/CardImage';
+export interface ImageCarouselProps extends HeadingProps {
+    fullWidth?: boolean;
+    widerImage: boolean;
+    images: CardImageProps[];
+}
+export default function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images, htmlTag }: ImageCarouselProps): ReactElement;

package/dist/components/organisms/ImageCarousel/ImageCarousel.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import ImageCarousel from './ImageCarousel';
+declare const meta: {
+    title: string;
+    component: typeof ImageCarousel;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Dark: Story;
+export declare const DarkWiderImage: Story;
+export declare const Light: Story;
+export declare const LightWiderImage: Story;

package/dist/components/organisms/ImageCarousel/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { ImageCarouselProps } from './ImageCarousel';
+export declare const imageCarouselProps: ImageCarouselProps;
+export declare const imageCarouselPropsAccommodation: ImageCarouselProps;