@uob-web-and-digital/component-library 0.0.64 → 0.0.65

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import { HeadingProps as HeadingElementProps } from '../../atoms/Heading/Heading';
 import './heading.scss';
 type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
 export interface HeadingProps {
@@ -12,10 +13,11 @@ export interface HeadingProps {
      * Whether to inverse the colours
      */
     inverse?: boolean;
+    htmlTag?: HeadingElementProps['htmlTag'];
     title?: string;
     description?: string;
     linkProps?: LinkProps;
     fullWidth?: boolean;
 }
-export default function Heading({ title, description, linkProps, theme, inverse, fullWidth }: HeadingProps): ReactElement | null;
+export default function Heading({ title, description, linkProps, theme, inverse, fullWidth, htmlTag }: HeadingProps): ReactElement | null;
 export {};

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import { ImageProps } from '../../atoms/Image/Image';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 import './accreditationPromotion.scss';
 interface Accreditation {
     text: string;
@@ -8,13 +9,14 @@ interface Accreditation {
 }
 export interface AccreditationPromotionProps {
     theme: ThemeProps;
-    heading: string;
-    intro: string;
+    heading?: string;
+    htmlTag: HeadingProps['htmlTag'];
+    intro?: string;
     accreditations: Accreditation[];
     /**
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
 }
-export default function AcreditationPromotion({ theme, heading, intro, accreditations, fullWidth }: AccreditationPromotionProps): ReactElement;
+export default function AcreditationPromotion({ theme, heading, intro, accreditations, htmlTag, fullWidth }: AccreditationPromotionProps): ReactElement;
 export {};

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

@@ -8,3 +8,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Example: Story;
+export declare const ExampleNoHeading: Story;

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

@@ -6,4 +6,4 @@ export interface FactBoxesProps extends HeadingProps {
     fullWidth?: boolean;
     cards: CardFactProps[];
 }
-export default function FactBoxes({ theme, inverse, title, description, linkProps, cards, fullWidth }: FactBoxesProps): ReactElement;
+export default function FactBoxes({ theme, inverse, title, description, linkProps, cards, fullWidth, htmlTag }: FactBoxesProps): ReactElement;

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

@@ -7,4 +7,4 @@ export interface ImageBlockProps extends HeadingProps {
     makeHeadingFullWidth?: boolean;
     images?: Omit<CardImageProps, 'theme' | 'inverse'>[];
 }
-export default function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, makeHeadingFullWidth, images }: ImageBlockProps): ReactElement | null;
+export default function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, makeHeadingFullWidth, images, htmlTag }: ImageBlockProps): ReactElement | null;

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

@@ -7,4 +7,4 @@ export interface ImageCarouselProps extends HeadingProps {
     widerImage: boolean;
     images: CardImageProps[];
 }
-export default function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images }: ImageCarouselProps): ReactElement;
+export default function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images, htmlTag }: ImageCarouselProps): ReactElement;

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

@@ -12,5 +12,6 @@ export interface IntroTextProps {
     inverse?: boolean;
     fullWidth?: boolean;
     text: string;
+    removeBottomPadding?: boolean;
 }
-export default function IntroText({ text, theme, inverse, fullWidth }: IntroTextProps): ReactElement;
+export default function IntroText({ text, theme, inverse, fullWidth, removeBottomPadding }: IntroTextProps): ReactElement;

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

@@ -16,5 +16,5 @@ export interface QuoteBlockProps extends HeadingProps {
     cta?: LinkProps;
     fullWidth?: boolean;
 }
-export default function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta, fullWidth }: QuoteBlockProps): ReactElement;
+export default function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta, fullWidth, htmlTag }: QuoteBlockProps): ReactElement;
 export {};

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import { TabItemProps } from '../../molecules/Tab/TabItemProps';
+import { HeadingProps } from '../../molecules/Heading/Heading';
 import './tabsBlock.scss';
 export interface TabsBlockProps {
     /**
@@ -27,5 +28,9 @@ export interface TabsBlockProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    /**
+     * heading tag options
+     */
+    htmlTag?: HeadingProps['htmlTag'];
 }
-export default function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth }: TabsBlockProps): ReactElement | null;
+export default function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag }: TabsBlockProps): ReactElement | null;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, ReactElement, ReactNode, MouseEventHandler, ChangeEvent, PropsWithChildren } from 'react';
+import React, { KeyboardEvent, ReactNode, ReactElement, MouseEventHandler, ChangeEvent, PropsWithChildren } from 'react';
 
 type ThemeProps = 'uobmain' | 'redexample';
 
@@ -36,8 +36,14 @@ interface LinkWithArrowProps {
     onKeyDown?: (e: KeyboardEvent) => void;
 }
 
-type LinkProps$1 = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
 interface HeadingProps$1 {
+    htmlTag: 'h2' | 'h3' | 'h4';
+    classNames?: string;
+    children?: ReactNode;
+}
+
+type LinkProps$1 = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
+interface HeadingProps {
     /**
      * The theme to use
      */
@@ -46,6 +52,7 @@ interface HeadingProps$1 {
      * Whether to inverse the colours
      */
     inverse?: boolean;
+    htmlTag?: HeadingProps$1['htmlTag'];
     title?: string;
     description?: string;
     linkProps?: LinkProps$1;
@@ -55,7 +62,7 @@ interface HeadingProps$1 {
 interface AccordionProps {
     theme: ThemeProps;
     inverse?: boolean;
-    heading?: Omit<HeadingProps$1, 'theme' | 'inverse'>;
+    heading?: Omit<HeadingProps, 'theme' | 'inverse'>;
     accordionItems: AccordionItemProps[];
     fullWidth?: boolean;
 }
@@ -80,15 +87,16 @@ interface Accreditation {
 }
 interface AccreditationPromotionProps {
     theme: ThemeProps;
-    heading: string;
-    intro: string;
+    heading?: string;
+    htmlTag: HeadingProps$1['htmlTag'];
+    intro?: string;
     accreditations: Accreditation[];
     /**
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
 }
-declare function AcreditationPromotion({ theme, heading, intro, accreditations, fullWidth }: AccreditationPromotionProps): ReactElement;
+declare function AcreditationPromotion({ theme, heading, intro, accreditations, htmlTag, fullWidth }: AccreditationPromotionProps): ReactElement;
 
 interface RichTextProps {
     /**
@@ -139,12 +147,6 @@ interface BreadcrumbsProps {
 }
 declare function Breadcrumbs({ theme, inverse, links }: BreadcrumbsProps): ReactElement;
 
-interface HeadingProps {
-    htmlTag: 'h2' | 'h3' | 'h4';
-    classNames?: string;
-    children?: ReactNode;
-}
-
 interface CardNewsProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -153,7 +155,7 @@ interface CardNewsProps {
     title: string;
     href: string;
     publishDate: string;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardFeaturedProps {
@@ -186,7 +188,7 @@ interface CardVideoProps {
     title: string;
     youtubeId: string;
     buttonLabel: string;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoProps {
@@ -202,7 +204,7 @@ interface CardPromoProps {
     location?: string;
     copy?: string;
     isSingle?: boolean;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
     cardCopyIsRichText?: boolean;
 }
 
@@ -249,7 +251,7 @@ interface CardPromoSignpostProps {
     buttonPrimary?: TextButtonProps;
     buttonSecondary?: TextButtonProps;
     link?: LinkWithArrowProps;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoVideoProps {
@@ -318,7 +320,7 @@ interface CarouselProps {
     inverse?: boolean;
     type: string;
     title?: string;
-    cardTitleTag?: HeadingProps['htmlTag'];
+    cardTitleTag?: HeadingProps$1['htmlTag'];
     setCardInverse?: 'dark' | 'light';
     cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
@@ -462,11 +464,11 @@ interface CardFactProps {
     link?: LinkWithArrowProps;
 }
 
-interface FactBoxesProps extends HeadingProps$1 {
+interface FactBoxesProps extends HeadingProps {
     fullWidth?: boolean;
     cards: CardFactProps[];
 }
-declare function FactBoxes({ theme, inverse, title, description, linkProps, cards, fullWidth }: FactBoxesProps): ReactElement;
+declare function FactBoxes({ theme, inverse, title, description, linkProps, cards, fullWidth, htmlTag }: FactBoxesProps): ReactElement;
 
 interface FeaturedContentProps {
     /**
@@ -823,7 +825,7 @@ interface HeroCoursesProps {
     theme: ThemeProps;
     inverse?: boolean;
     title: string;
-    titleTag?: HeadingProps['htmlTag'];
+    titleTag?: HeadingProps$1['htmlTag'];
     awardShort: string;
     links?: Omit<TextButtonProps, 'theme'>[];
     heroType: 'UG' | 'UG Dubai' | 'PGT Dubai' | 'Other';
@@ -866,19 +868,19 @@ interface HeroCarouselProps {
 }
 declare function HeroCarousel({ theme, cards }: HeroCarouselProps): ReactElement | null;
 
-interface ImageBlockProps extends HeadingProps$1 {
+interface ImageBlockProps extends HeadingProps {
     fullWidth: boolean;
     makeHeadingFullWidth?: boolean;
     images?: Omit<CardImageProps, 'theme' | 'inverse'>[];
 }
-declare function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, makeHeadingFullWidth, images }: ImageBlockProps): ReactElement | null;
+declare function ImageBlock({ theme, inverse, title, description, linkProps, fullWidth, makeHeadingFullWidth, images, htmlTag }: ImageBlockProps): ReactElement | null;
 
-interface ImageCarouselProps extends HeadingProps$1 {
+interface ImageCarouselProps extends HeadingProps {
     fullWidth?: boolean;
     widerImage: boolean;
     images: CardImageProps[];
 }
-declare function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images }: ImageCarouselProps): ReactElement;
+declare function ImageCarousel({ theme, inverse, title, description, linkProps, fullWidth, widerImage, images, htmlTag }: ImageCarouselProps): ReactElement;
 
 interface InPageNavLinkProps {
     url: string;
@@ -912,8 +914,9 @@ interface IntroTextProps {
     inverse?: boolean;
     fullWidth?: boolean;
     text: string;
+    removeBottomPadding?: boolean;
 }
-declare function IntroText({ text, theme, inverse, fullWidth }: IntroTextProps): ReactElement;
+declare function IntroText({ text, theme, inverse, fullWidth, removeBottomPadding }: IntroTextProps): ReactElement;
 
 interface MostReadNewsProps {
     theme: ThemeProps;
@@ -1020,7 +1023,7 @@ interface ListingResultsProps {
     theme: ThemeProps;
     showCategory?: boolean;
     cards: CardProps[];
-    headingInfo?: HeadingProps$1;
+    headingInfo?: HeadingProps;
 }
 declare function ListingResults({ theme, showCategory, cards, headingInfo }: ListingResultsProps): ReactElement;
 
@@ -1139,7 +1142,7 @@ interface PromoBlockProps {
 declare function PromoBlockGrid({ theme, inverse, type, title, description, link, cards, imageOrientation, fullWidth }: PromoBlockProps): ReactElement | null;
 
 type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
-interface QuoteBlockProps extends HeadingProps$1 {
+interface QuoteBlockProps extends HeadingProps {
     theme: ThemeProps;
     inverse?: boolean;
     title?: string;
@@ -1151,7 +1154,7 @@ interface QuoteBlockProps extends HeadingProps$1 {
     cta?: LinkProps;
     fullWidth?: boolean;
 }
-declare function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta, fullWidth }: QuoteBlockProps): ReactElement;
+declare function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta, fullWidth, htmlTag }: QuoteBlockProps): ReactElement;
 
 interface RelatedCoursesProps {
     theme: ThemeProps;
@@ -1342,8 +1345,12 @@ interface TabsBlockProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    /**
+     * heading tag options
+     */
+    htmlTag?: HeadingProps['htmlTag'];
 }
-declare function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth }: TabsBlockProps): ReactElement | null;
+declare function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag }: TabsBlockProps): ReactElement | null;
 
 interface TextWithBackgroundProps {
     /**
@@ -1474,7 +1481,7 @@ interface VideoEmbedProps {
         medium?: string;
         default: string;
     };
-    heading?: Omit<HeadingProps$1, 'theme' | 'inverse'>;
+    heading?: Omit<HeadingProps, 'theme' | 'inverse'>;
     transcript?: string;
     fullWidth?: boolean;
     videoCaption?: string;