@uob-web-and-digital/component-library 0.0.30 → 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/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/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/index.d.ts

@@ -433,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 };