@uob-web-and-digital/component-library 0.0.42 → 0.0.44

package/dist/components/atoms/IconButton/IconButton.stories.d.ts

@@ -25,3 +25,5 @@ export declare const ArrowRightDark: Story;
 export declare const ArrowRightLight: Story;
 export declare const ArrowLeftDark: Story;
 export declare const ArrowLeftLight: Story;
+export declare const EmailDark: Story;
+export declare const EmailLight: Story;

package/dist/components/atoms/IconButton/defaultProps.d.ts

@@ -9,3 +9,4 @@ export declare const LinkedInProps: IconButtonProps;
 export declare const ArrowLeftProps: IconButtonProps;
 export declare const ArrowRightProps: IconButtonProps;
 export declare const HamburgerProps: IconButtonProps;
+export declare const EmailProps: IconButtonProps;

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

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

@@ -10,5 +10,7 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof CardPromoVideo>;
-export declare const SinglePromoVideoCard: Story;
-export declare const OneOfManyPromoVideoCards: Story;
+export declare const SinglePromoVideoCardDark: Story;
+export declare const SinglePromoVideoCardLight: Story;
+export declare const OneOfManyPromoVideoCardsDark: Story;
+export declare const OneOfManyPromoVideoCardsLight: Story;

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

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { IconButtonProps } from '../../atoms/IconButton/IconButton';
+import './shareButtons.scss';
+export interface ShareButtonsProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    label?: string;
+    icons: IconButtonProps[];
+}
+export default function ShareButtons({ theme, inverse, label, icons }: ShareButtonsProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { ShareButtonsProps } from './ShareButtons';
+export declare const shareButtonsProps: ShareButtonsProps;

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

@@ -31,12 +31,12 @@ export interface TabProps {
      */
     tabListTopRef: React.MutableRefObject<HTMLDivElement | null>;
     /**
-     * The method to set the active tab
+     * The method to handle a mouse click on the tab
      */
-    setActiveTab: (id: number) => void;
+    handleClick: (event: React.MouseEvent, activeTabId: number) => void;
     /**
      * The method to handle keyboard navigation events
      */
-    onKeyboardNavigation: (e: KeyboardEvent) => void;
+    handleKeyboardNavigation: (e: KeyboardEvent) => void;
 }
-export default function Tab({ id, theme, inverse, tabItem, isActive, hasFocus, setActiveTab, onKeyboardNavigation: onKeyboardNavigation }: TabProps): ReactElement | null;
+export default function Tab({ id, theme, inverse, tabItem, isActive, hasFocus, handleClick, handleKeyboardNavigation: handleKeyboardNavigation }: TabProps): ReactElement | null;

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

@@ -17,7 +17,8 @@ export interface CarouselProps {
     type: string;
     title?: string;
     useH3ForCards?: boolean;
+    setCardInverse?: 'dark' | 'light';
     cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
-export default function Carousel({ theme, inverse, type, title, cards, useH3ForCards, exploreMore }: CarouselProps): ReactElement;
+export default function Carousel({ theme, inverse, type, title, cards, useH3ForCards, setCardInverse, exploreMore }: CarouselProps): ReactElement;

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

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ShareButtonsProps } from '../../molecules/ShareButtons/ShareButtons';
+import './heroArticle.scss';
+export interface HeroArticleProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4';
+    description: string;
+    image: ImageProps;
+    publishDate: string;
+    readTime?: string;
+    shareButtons: ShareButtonsProps;
+}
+export default function HeroArticle({ theme, inverse, title, titleTag, description, image, publishDate, readTime, shareButtons }: 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/LeadNewsArticles/LeadNewsArticles.d.ts

@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
+import { MostReadNewsProps } from '../../molecules/MostReadNews/MostReadNews';
 import './leadNewsArticles.scss';
 export interface LeadNewsArticlesProps {
     theme: ThemeProps;
     featuredArticle: CardFeaturedNewsProps;
     otherLeadArticles: Omit<CardFeaturedNewsProps, 'theme'>[];
+    mostReadNews: MostReadNewsProps;
 }
-export default function LeadNewsArticles({ theme, featuredArticle, otherLeadArticles }: LeadNewsArticlesProps): ReactElement;
+export default function LeadNewsArticles({ theme, featuredArticle, otherLeadArticles, mostReadNews }: LeadNewsArticlesProps): ReactElement;

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

@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
+import { CardPromoVideoProps } from '../../molecules/CardPromoVideo/CardPromoVideo';
 import './newsArticlesPromoBlock.scss';
 export interface NewsArticlesPromoBlockProps {
     theme: ThemeProps;
     heading: string;
-    cards: CardFeaturedNewsProps[];
+    cards: CardFeaturedNewsProps[] | CardPromoVideoProps[];
+    cardType?: 'featured-news' | 'promo-video';
 }
-export default function NewsArticlesPromoBlock({ theme, heading, cards }: NewsArticlesPromoBlockProps): ReactElement;
+export default function NewsArticlesPromoBlock({ theme, heading, cards, cardType }: NewsArticlesPromoBlockProps): ReactElement;

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

@@ -7,4 +7,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
+export declare const FeaturedNewsExample: Story;
+export declare const VideoCardExample: Story;

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

@@ -1,2 +1,3 @@
 import { NewsArticlesPromoBlockProps } from './NewsArticlesPromoBlock';
 export declare const newsArticlesPromoBlockProps: NewsArticlesPromoBlockProps;
+export declare const videoNewsArticlesPromoBlockProps: NewsArticlesPromoBlockProps;

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

@@ -6,6 +6,7 @@ export interface RelatedCoursesProps {
     theme: ThemeProps;
     inverse?: boolean;
     heading: string;
+    fullWidth?: boolean;
     cards: CardRelatedProps[];
 }
-export default function RelatedCourses({ theme, inverse, heading, cards }: RelatedCoursesProps): ReactElement;
+export default function RelatedCourses({ theme, inverse, heading, fullWidth, cards }: RelatedCoursesProps): ReactElement;

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

@@ -1,2 +1,4 @@
 import { RichTextProps } from './RichText';
 export declare const richTextProps: RichTextProps;
+export declare const newsArticleRichText: RichTextProps;
+export declare const newsArticleRichTextBullets: RichTextProps;

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

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { TextButtonWithIconProps } from '../../atoms/TextButtonWithIcon/TextButtonWithIcon';
+import { TextButtonProps } from '../../atoms/TextButton/TextButton';
+import './singleButton.scss';
+export interface SingleButtonProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    includeIcon: boolean;
+    link: TextButtonWithIconProps | TextButtonProps;
+}
+export default function SingleButton({ theme, inverse, includeIcon, link }: SingleButtonProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { SingleButtonProps } from './SingleButton';
+export declare const singleButtonProps: SingleButtonProps;

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

@@ -1,2 +1,3 @@
 import { StaffListingCarouselProps } from './StaffListingCarousel';
 export declare const staffListingCarouselProps: StaffListingCarouselProps;
+export declare const newsStaffListingCarouselProps: StaffListingCarouselProps;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, ReactElement, PropsWithChildren, MouseEventHandler, ChangeEvent } from 'react';
+import React, { KeyboardEvent, ReactElement, PropsWithChildren, MouseEventHandler, ChangeEvent, ReactNode } from 'react';
 
 type ImageProps = {
     src: {
@@ -136,30 +136,16 @@ interface CardPromoSignpostProps {
     titleTag: 'h2' | 'h3';
 }
 
-interface ParagraphLinkProps {
-    /**
-     * The theme to use
-     */
-    theme: ThemeProps;
-    /**
-     * Whether to inverse the colours
-     */
-    inverse?: boolean;
-    label: string;
-    url: string;
-    externalLink?: boolean;
-}
-
 interface CardPromoVideoProps {
     theme: ThemeProps;
     inverse?: boolean;
     image?: ImageProps;
     title: string;
+    href: string;
     publishDate?: string;
     videoLength?: string;
     copy?: string;
     isSingle?: boolean;
-    link?: ParagraphLinkProps;
     titleTag: 'h2' | 'h3';
 }
 
@@ -217,10 +203,11 @@ interface CarouselProps {
     type: string;
     title?: string;
     useH3ForCards?: boolean;
+    setCardInverse?: 'dark' | 'light';
     cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
-declare function Carousel({ theme, inverse, type, title, cards, useH3ForCards, exploreMore }: CarouselProps): ReactElement;
+declare function Carousel({ theme, inverse, type, title, cards, useH3ForCards, setCardInverse, exploreMore }: CarouselProps): ReactElement;
 
 interface FeaturedContentProps {
     /**
@@ -673,6 +660,20 @@ interface CTAComponentProps {
 }
 declare function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
 
+interface ParagraphLinkProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    label: string;
+    url: string;
+    externalLink?: boolean;
+}
+
 interface TextButtonWithIconProps {
     /**
      * The theme to use
@@ -857,9 +858,10 @@ interface RelatedCoursesProps {
     theme: ThemeProps;
     inverse?: boolean;
     heading: string;
+    fullWidth?: boolean;
     cards: CardRelatedProps[];
 }
-declare function RelatedCourses({ theme, inverse, heading, cards }: RelatedCoursesProps): ReactElement;
+declare function RelatedCourses({ theme, inverse, heading, fullWidth, cards }: RelatedCoursesProps): ReactElement;
 
 interface AccomodationCardProps {
     theme: ThemeProps;
@@ -1048,12 +1050,20 @@ interface TopicSelectorProps {
 }
 declare function TopicSelector({ topics, theme, titleTag, heading }: TopicSelectorProps): ReactElement | null;
 
+interface MostReadNewsProps {
+    theme: ThemeProps;
+    heading: string;
+    cards: Omit<CardFeaturedNewsProps, 'theme'>[];
+    link?: LinkWithArrowProps;
+}
+
 interface LeadNewsArticlesProps {
     theme: ThemeProps;
     featuredArticle: CardFeaturedNewsProps;
     otherLeadArticles: Omit<CardFeaturedNewsProps, 'theme'>[];
+    mostReadNews: MostReadNewsProps;
 }
-declare function LeadNewsArticles({ theme, featuredArticle, otherLeadArticles }: LeadNewsArticlesProps): ReactElement;
+declare function LeadNewsArticles({ theme, featuredArticle, otherLeadArticles, mostReadNews }: LeadNewsArticlesProps): ReactElement;
 
 interface TabItemProps {
     title: string;
@@ -1106,9 +1116,18 @@ declare function ImageCarousel({ theme, inverse, title, description, linkProps,
 interface NewsArticlesPromoBlockProps {
     theme: ThemeProps;
     heading: string;
-    cards: CardFeaturedNewsProps[];
+    cards: CardFeaturedNewsProps[] | CardPromoVideoProps[];
+    cardType?: 'featured-news' | 'promo-video';
+}
+declare function NewsArticlesPromoBlock({ theme, heading, cards, cardType }: NewsArticlesPromoBlockProps): ReactElement;
+
+interface SingleButtonProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    includeIcon: boolean;
+    link: TextButtonWithIconProps | TextButtonProps;
 }
-declare function NewsArticlesPromoBlock({ theme, heading, cards }: NewsArticlesPromoBlockProps): ReactElement;
+declare function SingleButton({ theme, inverse, includeIcon, link }: SingleButtonProps): ReactElement;
 
 interface FiveArticlesGridProps {
     theme: ThemeProps;
@@ -1118,4 +1137,50 @@ interface FiveArticlesGridProps {
 }
 declare function FiveArticlesGrid({ theme, heading, featuredArticle, otherLeadArticles }: FiveArticlesGridProps): ReactElement;
 
-export { Accordion, AcreditationPromotion, Breadcrumbs, CTAComponent, Carousel, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, Header, Hero, HeroCarousel, ImageBlock, ImageCarousel, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, MainWrapper, NewsArticlesPromoBlock, Pagination, PromoBlock, QuoteBlock, RelatedCourses, RichText, SearchCourses, SignPost, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, VideoCardComponent, VideoEmbed };
+interface IconButtonProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    url?: string;
+    title: string;
+    icon: IconType$1;
+    externalLink?: boolean;
+    onClick?: () => void;
+    ariaControls?: string;
+    isSubmit?: boolean;
+    disabled?: boolean;
+}
+
+interface ShareButtonsProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    label?: string;
+    icons: IconButtonProps[];
+}
+
+interface HeroArticleProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4';
+    description: string;
+    image: ImageProps;
+    publishDate: string;
+    readTime?: string;
+    shareButtons: ShareButtonsProps;
+}
+declare function HeroArticle({ theme, inverse, title, titleTag, description, image, publishDate, readTime, shareButtons }: HeroArticleProps): ReactElement | null;
+
+interface SidebarWrapperProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    sidebarElement: ReactNode;
+    children: ReactNode;
+}
+declare function SidebarWrapper({ theme, sidebarElement, children }: SidebarWrapperProps): ReactElement;
+
+export { Accordion, AcreditationPromotion, Breadcrumbs, CTAComponent, Carousel, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, Header, Hero, HeroArticle, HeroCarousel, ImageBlock, ImageCarousel, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, MainWrapper, NewsArticlesPromoBlock, Pagination, PromoBlock, QuoteBlock, RelatedCourses, RichText, SearchCourses, SidebarWrapper, SignPost, SingleButton, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, VideoCardComponent, VideoEmbed };