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

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

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 export interface HeadingProps {
-    htmlTag: 'h2' | 'h3' | 'h4';
+    htmlTag: 'h1' | 'h2' | 'h3' | 'h4';
     classNames?: string;
     children?: ReactNode;
 }

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

@@ -3,6 +3,7 @@ import { ThemeProps } from '../../../themeProps';
 import { ImageProps } from '../../atoms/Image/Image';
 import { TextButtonProps } from '../../atoms/TextButton/TextButton';
 import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 import './ctaComponent.scss';
 export interface CTAComponentProps {
     theme: ThemeProps;
@@ -14,9 +15,10 @@ export interface CTAComponentProps {
     primaryCTA?: TextButtonProps;
     secondaryCTA?: TextButtonProps;
     link?: LinkWithArrowProps;
+    htmlTag?: HeadingProps['htmlTag'];
     /**
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
 }
-export default function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
+export default function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth, htmlTag }: CTAComponentProps): ReactElement;

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

@@ -4,7 +4,7 @@ export declare const ranking: import("./components/CourseTileRanking").CourseTil
     theme: import("../../../themeProps").ThemeProps;
     inverse?: boolean | undefined;
     title: string;
-    titleTag?: "h2" | "h3" | "h4" | undefined;
+    titleTag?: "h1" | "h2" | "h3" | "h4" | undefined;
     awardShort: string;
     links?: Omit<import("../../atoms/TextButton/TextButton").TextButtonProps, "theme">[] | undefined;
     heroType: "UG" | "UG Dubai" | "PGT Dubai" | "Other";
@@ -23,7 +23,7 @@ export declare const deliveryFormat: import("./components/CourseTile").CourseTil
     theme: import("../../../themeProps").ThemeProps;
     inverse?: boolean | undefined;
     title: string;
-    titleTag?: "h2" | "h3" | "h4" | undefined;
+    titleTag?: "h1" | "h2" | "h3" | "h4" | undefined;
     awardShort: string;
     links?: Omit<import("../../atoms/TextButton/TextButton").TextButtonProps, "theme">[] | undefined;
     heroType: "UG" | "UG Dubai" | "PGT Dubai" | "Other";

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,7 @@ export interface IntroTextProps {
     inverse?: boolean;
     fullWidth?: boolean;
     text: string;
+    removeBottomPadding?: boolean;
+    removeTopPadding?: boolean;
 }
-export default function IntroText({ text, theme, inverse, fullWidth }: IntroTextProps): ReactElement;
+export default function IntroText({ text, theme, inverse, fullWidth, removeBottomPadding, removeTopPadding }: 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/RichText/RichText.d.ts

@@ -15,5 +15,6 @@ export interface RichTextProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    removeBottomPadding?: boolean;
 }
-export default function RichText({ text, theme, inverse, fullWidth }: RichTextProps): ReactElement;
+export default function RichText({ text, theme, inverse, fullWidth, removeBottomPadding }: RichTextProps): ReactElement;

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

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 import './SignPost.scss';
 export interface SignPostProps {
     /**
@@ -18,6 +19,7 @@ export interface SignPostProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    htmlTag?: HeadingProps['htmlTag'];
 }
 type SignPostItem = {
     title: string;
@@ -29,5 +31,5 @@ type SignPostItem = {
 /**
  * Text promo block with a link
  */
-export default function SignPost({ theme, inverse, items, fullWidth }: SignPostProps): ReactElement;
+export default function SignPost({ theme, inverse, items, fullWidth, htmlTag }: SignPostProps): 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/components/organisms/TextWithBackground/TextWithBackground.d.ts

@@ -18,5 +18,6 @@ export interface TextWithBackgroundProps {
     externalLink?: boolean;
     linkStyle?: 'primary' | 'secondary' | 'paragraph-link';
     fullWidth?: boolean;
+    removeBottomPadding?: boolean;
 }
-export default function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle, fullWidth }: TextWithBackgroundProps): ReactElement;
+export default function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle, fullWidth, removeBottomPadding }: TextWithBackgroundProps): ReactElement;

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: 'h1' | '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 {
     /**
@@ -104,8 +112,9 @@ interface RichTextProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    removeBottomPadding?: boolean;
 }
-declare function RichText({ text, theme, inverse, fullWidth }: RichTextProps): ReactElement;
+declare function RichText({ text, theme, inverse, fullWidth, removeBottomPadding }: RichTextProps): ReactElement;
 
 interface AlertBannerProps {
     theme: ThemeProps;
@@ -139,12 +148,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 +156,7 @@ interface CardNewsProps {
     title: string;
     href: string;
     publishDate: string;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardFeaturedProps {
@@ -186,7 +189,7 @@ interface CardVideoProps {
     title: string;
     youtubeId: string;
     buttonLabel: string;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoProps {
@@ -202,7 +205,7 @@ interface CardPromoProps {
     location?: string;
     copy?: string;
     isSingle?: boolean;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
     cardCopyIsRichText?: boolean;
 }
 
@@ -249,7 +252,7 @@ interface CardPromoSignpostProps {
     buttonPrimary?: TextButtonProps;
     buttonSecondary?: TextButtonProps;
     link?: LinkWithArrowProps;
-    titleTag: HeadingProps['htmlTag'];
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoVideoProps {
@@ -318,7 +321,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;
@@ -430,12 +433,13 @@ interface CTAComponentProps {
     primaryCTA?: TextButtonProps;
     secondaryCTA?: TextButtonProps;
     link?: LinkWithArrowProps;
+    htmlTag?: HeadingProps$1['htmlTag'];
     /**
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
 }
-declare function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;
+declare function CTAComponent({ theme, inverse, highlight, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth, htmlTag }: CTAComponentProps): ReactElement;
 
 interface EmbedWrapperProps {
     /**
@@ -462,11 +466,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 +827,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 +870,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 +916,10 @@ interface IntroTextProps {
     inverse?: boolean;
     fullWidth?: boolean;
     text: string;
+    removeBottomPadding?: boolean;
+    removeTopPadding?: boolean;
 }
-declare function IntroText({ text, theme, inverse, fullWidth }: IntroTextProps): ReactElement;
+declare function IntroText({ text, theme, inverse, fullWidth, removeBottomPadding, removeTopPadding }: IntroTextProps): ReactElement;
 
 interface MostReadNewsProps {
     theme: ThemeProps;
@@ -1020,7 +1026,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 +1145,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 +1157,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;
@@ -1273,6 +1279,7 @@ interface SignPostProps {
      * The fullWidth version of this component is used for in study pages
      */
     fullWidth?: boolean;
+    htmlTag?: HeadingProps$1['htmlTag'];
 }
 type SignPostItem = {
     title: string;
@@ -1284,7 +1291,7 @@ type SignPostItem = {
 /**
  * Text promo block with a link
  */
-declare function SignPost({ theme, inverse, items, fullWidth }: SignPostProps): ReactElement;
+declare function SignPost({ theme, inverse, items, fullWidth, htmlTag }: SignPostProps): ReactElement;
 
 interface SingleButtonProps {
     theme: ThemeProps;
@@ -1342,8 +1349,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 {
     /**
@@ -1362,8 +1373,9 @@ interface TextWithBackgroundProps {
     externalLink?: boolean;
     linkStyle?: 'primary' | 'secondary' | 'paragraph-link';
     fullWidth?: boolean;
+    removeBottomPadding?: boolean;
 }
-declare function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle, fullWidth }: TextWithBackgroundProps): ReactElement;
+declare function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle, fullWidth, removeBottomPadding }: TextWithBackgroundProps): ReactElement;
 
 interface PillProps {
     /**
@@ -1474,7 +1486,7 @@ interface VideoEmbedProps {
         medium?: string;
         default: string;
     };
-    heading?: Omit<HeadingProps$1, 'theme' | 'inverse'>;
+    heading?: Omit<HeadingProps, 'theme' | 'inverse'>;
     transcript?: string;
     fullWidth?: boolean;
     videoCaption?: string;