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

package/dist/components/molecules/CampusSelector/CampusSelector.stories.d.ts

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

package/dist/components/molecules/CardFact/CardFact.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import './cardFact.scss';
+export interface CardFactProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    stat: string;
+    description?: string;
+    source?: string;
+    link?: LinkWithArrowProps;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardFact({ theme, inverse, stat, description, source, link }: CardFactProps): ReactElement;

package/dist/components/molecules/CardFact/CardFact.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import CardFact from './CardFact';
+declare const meta: {
+    title: string;
+    component: typeof CardFact;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardFact>;
+export declare const CardFactExampleLight: Story;
+export declare const CardFactExampleDark: Story;

package/dist/components/molecules/CardFeatured/CardFeatured.d.ts

@@ -0,0 +1,32 @@
+import React, { KeyboardEvent } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardFeatured.scss';
+export interface CardFeaturedProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    imagePrimary: ImageProps;
+    imageSecondary: ImageProps;
+    imageTertiary: ImageProps;
+    categoryLabel: string;
+    slideTitle: string;
+    subTitle: string;
+    introText: string;
+    link: string;
+    linkText: string;
+    cardOrder?: number;
+    activeVariant?: string;
+    leftInitialPositionTablet?: string;
+    rightInitialPositionTablet?: string;
+    leftInitialPositionDesktop?: string;
+    rightInitialPositionDesktop?: string;
+    isMobile?: boolean;
+    isTablet?: boolean;
+    onKeyDown?: (e: KeyboardEvent<Element>) => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+type CardRef = HTMLDivElement | null;
+export declare const CardFeatured: React.ForwardRefExoticComponent<CardFeaturedProps & React.RefAttributes<CardRef>>;
+export default CardFeatured;

package/dist/components/molecules/CardFeatured/CardFeatured.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import CardFeatured from './CardFeatured';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./CardFeatured").CardFeaturedProps & React.RefAttributes<HTMLDivElement | null>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof CardFeatured>;
+export declare const Light: Story;

package/dist/components/molecules/CardFeatured/animationVariants.d.ts

@@ -0,0 +1,44 @@
+export declare const variantSecondaryImageTablet: {
+    first: {
+        top: string;
+    };
+    second: {
+        top: string;
+    };
+    third: {
+        top: string;
+    };
+};
+export declare const variantTertiaryImageTablet: {
+    first: {
+        bottom: string;
+    };
+    second: {
+        bottom: string;
+    };
+    third: {
+        bottom: string;
+    };
+};
+export declare const variantSecondaryImageDesktop: {
+    first: {
+        top: string;
+    };
+    second: {
+        top: string;
+    };
+    third: {
+        top: string;
+    };
+};
+export declare const variantTertiaryImageDesktop: {
+    first: {
+        bottom: string;
+    };
+    second: {
+        bottom: string;
+    };
+    third: {
+        bottom: string;
+    };
+};

package/dist/components/molecules/CardFeatured/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { CardFeaturedProps } from './CardFeatured';
+export declare const cardFeaturedProps: CardFeaturedProps;

package/dist/components/molecules/CardFeaturedNews/CardFeaturedNews.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardFeaturedNews.scss';
+export interface CardFeaturedNewsProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    tag?: string;
+    title: string;
+    subtitle?: string;
+    href: string;
+    publishDate?: string;
+    authorString?: string;
+    location?: string;
+    copy?: string;
+    isPrimary?: boolean;
+    titleTag: 'h2' | 'h3' | 'h4';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardFeaturedNews({ theme, inverse, image, title, href, publishDate, copy, isPrimary, titleTag }: CardFeaturedNewsProps): ReactElement;

package/dist/components/molecules/CardFeaturedNews/CardFeaturedNews.stories.d.ts

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

package/dist/components/molecules/CardImage/CardImage.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardImage.scss';
+export interface CardImageProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    imageCaption?: string;
+    imageCredit?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardImage({ theme, inverse, image, imageCaption, imageCredit }: CardImageProps): ReactElement;

package/dist/components/molecules/CardImage/CardImage.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import CardImage from './CardImage';
+import './cardImage.scss';
+declare const meta: {
+    title: string;
+    component: typeof CardImage;
+    tags: string[];
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardImage>;
+export declare const Default: Story;
+export declare const Dark: Story;
+export declare const Light: Story;

package/dist/components/molecules/CardImage/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { CardImageProps } from './CardImage';
+export declare const cardImageProps: CardImageProps;

package/dist/components/molecules/CardMenu/CardMenu.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardMenu.scss';
+export interface CardMenuProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    tag: string;
+    title: string;
+    description?: string;
+    href: string;
+    linkText?: string;
+    type: 'primary' | 'secondary';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardMenu({ theme, inverse, image, tag, title, href, linkText, description, type }: CardMenuProps): ReactElement;

package/dist/components/molecules/CardMenu/CardMenu.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import CardMenu from './CardMenu';
+declare const meta: {
+    title: string;
+    component: typeof CardMenu;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardMenu>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/components/molecules/CardModuleCard/CardModuleCard.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './cardModuleCard.scss';
+export interface CardModuleCardProps {
+    theme: ThemeProps;
+    title: string;
+    creditCount?: string;
+    href: string;
+    titleTag?: 'h2' | 'h3';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardModuleCard({ theme, title, creditCount, href, titleTag }: CardModuleCardProps): ReactElement;

package/dist/components/molecules/CardModuleCard/CardModuleCard.stories.d.ts

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

package/dist/components/molecules/CardNews/CardNews.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardNews.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+export interface CardNewsProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    tag: string;
+    title: string;
+    href: string;
+    publishDate: string;
+    titleTag: HeadingProps['htmlTag'];
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardNews({ theme, inverse, image, tag, title, href, publishDate, titleTag }: CardNewsProps): ReactElement;

package/dist/components/molecules/CardNews/CardNews.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import CardNews from './CardNews';
+declare const meta: {
+    title: string;
+    component: typeof CardNews;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardNews>;
+export declare const Light: Story;
+export declare const LightH3Title: Story;
+export declare const LightH4Title: Story;

package/dist/components/molecules/CardNews/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { CardNewsProps } from './CardNews';
+export declare const cardNewsProps: CardNewsProps;

package/dist/components/molecules/CardProfile/CardProfile.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardProfile.scss';
+export interface CardProfileProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    name: string;
+    courseTitle: string;
+    copy: string;
+    href: string;
+    titleTag?: 'h2' | 'h3';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardProfile({ theme, inverse, image, name, courseTitle, href, copy, titleTag }: CardProfileProps): ReactElement;

package/dist/components/molecules/CardProfile/CardProfile.stories.d.ts

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

package/dist/components/molecules/CardPromo/CardPromo.d.ts

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardPromo.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+import { CalendarGraphicProps } from '../../atoms/CalendarGraphic/CalendarGraphic';
+export interface CardPromoProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    tag?: string;
+    title: string;
+    subtitle?: string;
+    href: string;
+    publishDate?: string;
+    eventTime?: string;
+    authorString?: string;
+    readingTime?: string;
+    studyLevel?: string;
+    topic?: string;
+    location?: string;
+    copy?: string;
+    isSingle?: boolean;
+    titleTag: HeadingProps['htmlTag'];
+    cardCopyIsRichText?: boolean;
+    eventStatus?: CalendarGraphicProps['status'];
+    eventDay?: CalendarGraphicProps['day'];
+    eventMonth?: CalendarGraphicProps['month'];
+    inStoryCarousel?: boolean;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromo({ theme, inverse, image, tag, title, subtitle, href, publishDate, authorString, readingTime, location, copy, isSingle, titleTag, cardCopyIsRichText, eventTime, eventStatus, eventDay, eventMonth, inStoryCarousel }: CardPromoProps): ReactElement;

package/dist/components/molecules/CardPromo/CardPromo.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react';
+import CardPromo from './CardPromo';
+declare const meta: {
+    title: string;
+    component: typeof CardPromo;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardPromo>;
+export declare const SinglePromoCardLight: Story;
+export declare const SinglePromoCardDark: Story;
+export declare const SinglePromoCardLightRichTextCopy: Story;
+export declare const SinglePromoCardDarkRichTextCopy: Story;
+export declare const CardNoImage: Story;
+export declare const OneOfManyPromoCards: Story;
+export declare const EventPromoCardUpcomingExample: Story;
+export declare const EventPromoCardRecordedExample: Story;
+export declare const EventPromoCardMoreDatesExample: Story;

package/dist/components/molecules/CardPromoProfile/CardPromoProfile.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardPromoProfile.scss';
+import { SearchResultDetailProps } from '../../atoms/SearchResultDetail/SearchResultDetail';
+export interface CardPromoProfileProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    name: string;
+    jobTitle: string;
+    department: string;
+    copy: string;
+    href: string;
+    isSingle?: boolean;
+    details?: Omit<SearchResultDetailProps, 'theme'>[];
+    titleTag: 'h2' | 'h3' | 'h4';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromoProfile({ theme, inverse, image, name, jobTitle, department, href, copy, isSingle, titleTag, details }: CardPromoProfileProps): ReactElement;

package/dist/components/molecules/CardPromoProfile/CardPromoProfile.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import CardPromoProfile from './CardPromoProfile';
+declare const meta: {
+    title: string;
+    component: typeof CardPromoProfile;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardPromoProfile>;
+export declare const CardPromoProfileSingle: Story;
+export declare const CardPromoProfileSingleDark: Story;
+export declare const CardPromoProfileMultiple: Story;

package/dist/components/molecules/CardPromoSignpost/CardPromoSignpost.d.ts

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import { TextButtonProps } from '../../atoms/TextButton/TextButton';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import './cardPromoSignpost.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+export interface CardPromoSignpostProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    imageOrientation?: 'left' | 'right';
+    tag?: string;
+    title?: string;
+    subtitle?: string;
+    publishDate?: string;
+    authorString?: string;
+    location?: string;
+    copy?: string;
+    cardCopyIsRichText?: boolean;
+    isSingle?: boolean;
+    buttonPrimary?: TextButtonProps;
+    buttonSecondary?: TextButtonProps;
+    link?: LinkWithArrowProps;
+    titleTag: HeadingProps['htmlTag'];
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromoSignpost({ theme, inverse, image, tag, title, subtitle, publishDate, authorString, location, copy, isSingle, cardCopyIsRichText, buttonPrimary, buttonSecondary, link, imageOrientation, titleTag }: CardPromoSignpostProps): ReactElement;

package/dist/components/molecules/CardPromoSignpost/CardPromoSignpost.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import CardPromoSignpost from './CardPromoSignpost';
+declare const meta: {
+    title: string;
+    component: typeof CardPromoSignpost;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardPromoSignpost>;
+export declare const SinglePromoSignpostCardLight: Story;
+export declare const SinglePromoSignpostCardsDarkRightImage: Story;
+export declare const SinglePromoSignpostCardLightNoTitle: Story;
+export declare const OneOfManyPromoSignpostCardsDark: Story;
+export declare const SinglePromoSignpostCardsDarkRightImageH4Title: Story;
+export declare const ImageWithTextExampleWithMultiCopyParagraphs: Story;

package/dist/components/molecules/CardPromoVideo/CardPromoVideo.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardPromoVideo.scss';
+export interface CardPromoVideoProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    title: string;
+    href: string;
+    publishDate?: string;
+    videoLength?: string;
+    copy?: string;
+    isSingle?: boolean;
+    titleTag: 'h2' | 'h3';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromoVideo({ theme, inverse, image, title, publishDate, videoLength, copy, isSingle, href, titleTag }: CardPromoVideoProps): ReactElement;

package/dist/components/molecules/CardPromoVideo/CardPromoVideo.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import CardPromoVideo from './CardPromoVideo';
+declare const meta: {
+    title: string;
+    component: typeof CardPromoVideo;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardPromoVideo>;
+export declare const SinglePromoVideoCardDark: Story;
+export declare const SinglePromoVideoCardLight: Story;
+export declare const OneOfManyPromoVideoCardsDark: Story;
+export declare const OneOfManyPromoVideoCardsLight: Story;

package/dist/components/molecules/CardRelatedCourse/CardRelatedCourse.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './cardRelatedCourse.scss';
+export interface CardRelatedProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    subtitle: string;
+    href: string;
+    titleTag?: 'h2' | 'h3';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardRelated({ theme, inverse, title, subtitle, href, titleTag }: CardRelatedProps): ReactElement;

package/dist/components/molecules/CardRelatedCourse/CardRelatedCourse.stories.d.ts

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

package/dist/components/molecules/CardResearchStory/CardResearchStory.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+import './cardResearchStory.scss';
+export interface CardResearchStoryProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    author: string;
+    copy: string;
+    href: string;
+    date?: string;
+    titleTag?: HeadingProps['htmlTag'];
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardResearchStory({ theme, inverse, title, author, href, copy, date, titleTag }: CardResearchStoryProps): ReactElement;

package/dist/components/molecules/CardResearchStory/CardResearchStory.stories.d.ts

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

package/dist/components/molecules/CardScholarship/CardScholarship.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './cardScholarship.scss';
+export interface ScholarshipProps {
+    awardType: string;
+    value: string;
+    deadline: string;
+}
+export interface CardScholarshipProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    copy: string;
+    href: string;
+    scholarshipDetails: ScholarshipProps;
+    titleTag?: 'h2' | 'h3';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardScholarship({ theme, inverse, title, href, copy, scholarshipDetails, titleTag }: CardScholarshipProps): ReactElement;

package/dist/components/molecules/CardScholarship/CardScholarship.stories.d.ts

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