@uob-web-and-digital/component-library 0.0.39 → 0.0.41

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';
+}
+/**
+ * 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/MostReadNews/MostReadNews.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { CardFeaturedNewsProps } from '../CardFeaturedNews/CardFeaturedNews';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import './mostReadNews.scss';
+export interface MostReadNewsProps {
+    theme: ThemeProps;
+    heading: string;
+    cards: Omit<CardFeaturedNewsProps, 'theme'>[];
+    link?: LinkWithArrowProps;
+}
+export default function MostReadNews({ theme, heading, cards, link }: MostReadNewsProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { MostReadNewsProps } from './MostReadNews';
+export declare const mostReadNewsProps: MostReadNewsProps;

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

@@ -7,6 +7,7 @@ import './ctaComponent.scss';
 export interface CTAComponentProps {
     theme: ThemeProps;
     inverse: boolean;
+    highlight?: boolean;
     image?: ImageProps | null;
     heading: string;
     copy: string;
@@ -18,4 +19,4 @@ export interface CTAComponentProps {
      */
     fullWidth?: boolean;
 }
-export default function CTAComponent({ theme, inverse, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
+export default function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;

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

@@ -8,5 +8,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Dark: Story;
+export declare const Light: Story;
 export declare const Highlighted: Story;
 export declare const ExampleNoImage: Story;

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

@@ -8,6 +8,7 @@ import { CardPromoVideoProps } from '../../molecules/CardPromoVideo/CardPromoVid
 import { CardStaffProps } from '../../molecules/CardStaff/CardStaff';
 import { CardRelatedProps } from '../../molecules/CardRelatedCourse/CardRelatedCourse';
 import { CardImageProps } from '../../molecules/CardImage/CardImage';
+import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
 import { ThemeProps } from '../../../themeProps';
 import './carousel.scss';
 export interface CarouselProps {
@@ -15,7 +16,7 @@ export interface CarouselProps {
     inverse?: boolean;
     type: string;
     title?: string;
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
 export default function Carousel({ theme, inverse, type, title, cards, exploreMore }: CarouselProps): ReactElement;

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

@@ -6,7 +6,8 @@ import './clearingBanner.scss';
 export interface ClearingBannerProps {
     theme: ThemeProps;
     text: string;
+    showIcon?: boolean;
     smallLink?: ParagraphLinkProps;
     mainLink?: TextButtonWithIconProps;
 }
-export default function ClearingBanner({ theme, text, smallLink, mainLink }: ClearingBannerProps): ReactElement;
+export default function ClearingBanner({ theme, text, showIcon, smallLink, mainLink }: ClearingBannerProps): ReactElement;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { LeadNewsArticlesProps } from './LeadNewsArticles';
+export declare const leadNewsArticlesProps: LeadNewsArticlesProps;

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

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
+import './newsArticlesPromoBlock.scss';
+export interface NewsArticlesPromoBlockProps {
+    theme: ThemeProps;
+    heading: string;
+    cards: CardFeaturedNewsProps[];
+}
+export default function NewsArticlesPromoBlock({ theme, heading, cards }: NewsArticlesPromoBlockProps): ReactElement;

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

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

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

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

package/dist/index.d.ts

@@ -192,12 +192,28 @@ interface CardImageProps {
     imageCredit?: string;
 }
 
+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';
+}
+
 interface CarouselProps {
     theme: ThemeProps;
     inverse?: boolean;
     type: string;
     title?: string;
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
 declare function Carousel({ theme, inverse, type, title, cards, exploreMore }: CarouselProps): ReactElement;
@@ -639,6 +655,7 @@ declare function ImageBlock({ theme, inverse, title, description, linkProps, ful
 interface CTAComponentProps {
     theme: ThemeProps;
     inverse: boolean;
+    highlight?: boolean;
     image?: ImageProps | null;
     heading: string;
     copy: string;
@@ -650,7 +667,7 @@ interface CTAComponentProps {
      */
     fullWidth?: boolean;
 }
-declare function CTAComponent({ theme, inverse, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
+declare function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
 
 interface TextButtonWithIconProps {
     /**
@@ -689,10 +706,11 @@ interface TextButtonWithIconProps {
 interface ClearingBannerProps {
     theme: ThemeProps;
     text: string;
+    showIcon?: boolean;
     smallLink?: ParagraphLinkProps;
     mainLink?: TextButtonWithIconProps;
 }
-declare function ClearingBanner({ theme, text, smallLink, mainLink }: ClearingBannerProps): ReactElement;
+declare function ClearingBanner({ theme, text, showIcon, smallLink, mainLink }: ClearingBannerProps): ReactElement;
 
 type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
 interface QuoteBlockProps extends HeadingProps {
@@ -1001,6 +1019,37 @@ interface ListingFilterWrapperProps {
 }
 declare function ListingFilterWrapper({ theme, showFilterButtonLabel, numSelected, filterElement }: ListingFilterWrapperProps): ReactElement;
 
+interface PillProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    label: string;
+    url?: string;
+    externalLink?: boolean;
+}
+
+interface TopicSelectorProps {
+    /**
+     * The theme to use
+     */
+    theme?: string;
+    /**
+     * The pills to display the list
+     */
+    topics: Omit<PillProps, 'theme'>[];
+    titleTag: 'h2' | 'h3';
+    heading: string;
+}
+declare function TopicSelector({ topics, theme, titleTag, heading }: TopicSelectorProps): ReactElement | null;
+
+interface LeadNewsArticlesProps {
+    theme: ThemeProps;
+    featuredArticle: CardFeaturedNewsProps;
+    otherLeadArticles: Omit<CardFeaturedNewsProps, 'theme'>[];
+}
+declare function LeadNewsArticles({ theme, featuredArticle, otherLeadArticles }: LeadNewsArticlesProps): ReactElement;
+
 interface TabItemProps {
     title: string;
     content: string;
@@ -1042,4 +1091,18 @@ interface TabsBlockProps {
 }
 declare function TabsBlock({ theme, inverse, title, description, tabItems }: TabsBlockProps): ReactElement | null;
 
-export { Accordion, AcreditationPromotion, Breadcrumbs, CTAComponent, Carousel, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, Footer, GeneralSearchFilter, Header, Hero, HeroCarousel, ImageBlock, IntroText, ListingFilterWrapper, ListingResults, ListingResultsCount, MainWrapper, Pagination, PromoBlock, QuoteBlock, RelatedCourses, RichText, SearchCourses, SignPost, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, VideoCardComponent, VideoEmbed };
+interface ImageCarouselProps extends HeadingProps {
+    fullWidth?: boolean;
+    widerImage: boolean;
+    images: CardImageProps[];
+}
+declare function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images }: ImageCarouselProps): ReactElement;
+
+interface NewsArticlesPromoBlockProps {
+    theme: ThemeProps;
+    heading: string;
+    cards: CardFeaturedNewsProps[];
+}
+declare function NewsArticlesPromoBlock({ theme, heading, cards }: NewsArticlesPromoBlockProps): ReactElement;
+
+export { Accordion, AcreditationPromotion, Breadcrumbs, CTAComponent, Carousel, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, 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 };