@uob-web-and-digital/component-library 0.0.29 → 0.0.31

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/CardPromo/CardPromo.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardPromo.scss';
+export interface CardPromoProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    tag?: string;
+    title: string;
+    subtitle?: string;
+    href: string;
+    publishDate?: string;
+    authorString?: string;
+    location?: string;
+    copy?: string;
+    isSingle?: boolean;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromo({ theme, inverse, image, tag, title, subtitle, href, publishDate, authorString, location, copy, isSingle }: CardPromoProps): ReactElement;

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

@@ -0,0 +1,15 @@
+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 SinglePromoCard: Story;
+export declare const CardNoImage: Story;
+export declare const OneOfManyPromoCards: Story;

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

@@ -10,6 +10,8 @@ interface CarouselNavProps {
     prevButtonDisabled: boolean;
     nextButtonDisabled: boolean;
     carouselId: string;
+    showNumbers?: boolean;
+    lineColor?: 'black' | 'gold';
 }
-export default function CarouselNav({ theme, totalNumber, currentNumber, onClickNext, onClickPrev, prevButtonDisabled, nextButtonDisabled, carouselId }: CarouselNavProps): ReactElement;
+export default function CarouselNav({ theme, totalNumber, currentNumber, onClickNext, onClickPrev, prevButtonDisabled, nextButtonDisabled, carouselId, showNumbers, lineColor }: CarouselNavProps): ReactElement;
 export {};

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

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import './heading.scss';
+type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
+export interface HeadingProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    title?: string;
+    description?: string;
+    linkProps?: LinkProps;
+}
+export default function Heading({ title, description, linkProps, theme, inverse }: HeadingProps): ReactElement | null;
+export {};

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

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

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

@@ -0,0 +1,2 @@
+import { HeadingProps } from './Heading';
+export declare const headingProps: HeadingProps;

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

@@ -2,13 +2,14 @@ import { ReactElement } from 'react';
 import { CardNewsProps } from '../../molecules/CardNews/CardNews';
 import { CardFeaturedProps } from '../../molecules/CardFeatured/CardFeatured';
 import { CardVideoProps } from '../../molecules/CardVideo/CardVideo';
+import { CardPromoProps } from '../../molecules/CardPromo/CardPromo';
 import { ThemeProps } from '../../../themeProps';
 import './carousel.scss';
 export interface CarouselProps {
     theme: ThemeProps;
     type: string;
     title?: string;
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[];
     exploreMore?: string;
 }
 export default function Carousel({ theme, type, title, cards, exploreMore }: CarouselProps): ReactElement;

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

@@ -0,0 +1,9 @@
+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;
+    images?: Omit<CardImageProps, 'theme' | 'inverse'>[];
+}
+export default function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, images }: ImageBlockProps): ReactElement | null;

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

@@ -0,0 +1,23 @@
+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;

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

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

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

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
+import './introText.scss';
 export interface IntroTextProps {
     /**
      * The theme to use

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

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import { ThemeProps } from '../../../themeProps';
+import { CardPromoProps } from '../../molecules/CardPromo/CardPromo';
+import './promoBlock.scss';
+export interface PromoBlockProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    /**
+     * Optional title of the component
+     */
+    title?: string;
+    /**
+     * Optional description of the component
+     */
+    description?: string;
+    /**
+     * Optional link elements
+     */
+    link?: LinkWithArrowProps;
+    /**
+     * Promo block will work with three card types
+     */
+    type: 'promo' | 'signpost' | 'video';
+    /**
+     * A Promo block component can have any number of items
+     */
+    cards: CardPromoProps[];
+}
+export default function PromoBlock({ theme, inverse, type, title, description, link, cards }: PromoBlockProps): ReactElement | null;

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

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import PromoBlock from './PromoBlock';
+import './promoBlock.scss';
+declare const meta: {
+    title: string;
+    component: typeof PromoBlock;
+    tags: string[];
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof PromoBlock>;
+export declare const PromoBlockOneCardOnly: Story;
+export declare const PromoBlockTwoCardsOnly: Story;
+export declare const PromoBlockThreeCardsOnly: Story;
+export declare const PromoBlockFourCardsPlus: Story;

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

@@ -0,0 +1,2 @@
+import { PromoBlockProps } from './PromoBlock';
+export declare const promoBlockProps: PromoBlockProps;

package/dist/index.d.ts

@@ -58,11 +58,26 @@ interface CardVideoProps {
     buttonLabel: string;
 }
 
+interface CardPromoProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image?: ImageProps;
+    tag?: string;
+    title: string;
+    subtitle?: string;
+    href: string;
+    publishDate?: string;
+    authorString?: string;
+    location?: string;
+    copy?: string;
+    isSingle?: boolean;
+}
+
 interface CarouselProps {
     theme: ThemeProps;
     type: string;
     title?: string;
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[];
     exploreMore?: string;
 }
 declare function Carousel({ theme, type, title, cards, exploreMore }: CarouselProps): ReactElement;
@@ -418,4 +433,48 @@ interface TextWithBackgroundProps {
 }
 declare function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle }: TextWithBackgroundProps): ReactElement;
 
-export { Breadcrumbs, Carousel, FeaturedContent, FeaturedSignpost, FeaturedVideo, Footer, Header, HeroCarousel, IntroText, MainWrapper, RichText, SearchCourses, SignPost, SkipToContent, TextWithBackground, VideoCardComponent };
+interface LinkWithArrowProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    url: string;
+    title: string;
+    externalLink?: boolean;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
+interface HeadingProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    title?: string;
+    description?: string;
+    linkProps?: LinkProps;
+}
+
+interface CardImageProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    imageCaption?: string;
+    imageCredit?: string;
+}
+
+interface ImageBlockProps extends HeadingProps {
+    fullWidth: boolean;
+    images?: Omit<CardImageProps, 'theme' | 'inverse'>[];
+}
+declare function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, images }: ImageBlockProps): ReactElement | null;
+
+export { Breadcrumbs, Carousel, FeaturedContent, FeaturedSignpost, FeaturedVideo, Footer, Header, HeroCarousel, ImageBlock, IntroText, MainWrapper, RichText, SearchCourses, SignPost, SkipToContent, TextWithBackground, VideoCardComponent };