@uob-web-and-digital/component-library 0.0.46 → 0.0.48

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import './icons.scss';
-export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'slim-cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks' | 'calendar' | 'clock' | 'internet' | 'slim-location' | 'bathroom' | 'catering' | 'pound' | 'scroll' | 'settings' | 'rocket' | 'staggered-arrow' | 'segmented-pie-chart' | 'home';
+export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'slim-cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'mortar-board' | 'document' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks' | 'calendar' | 'clock' | 'internet' | 'slim-location' | 'bathroom' | 'catering' | 'pound' | 'scroll' | 'settings' | 'rocket' | 'staggered-arrow' | 'segmented-pie-chart' | 'home';
 export type IconProps = {
     /**
      * The theme to use

package/dist/components/molecules/ListingResultCard/Cards/CourseCard.d.ts

@@ -12,7 +12,10 @@ export interface CourseCardProps {
     department?: string;
     studyLevel: string;
     studyMode: string;
+    courseType?: string;
+    qualification?: string;
+    studyLocation?: string;
     fundingType?: string;
     showCategory?: boolean;
 }
-export default function CourseCard({ theme, type, image, title, url, description, supervisors, department, studyLevel, studyMode, fundingType, showCategory }: CourseCardProps): ReactElement;
+export default function CourseCard({ theme, type, image, title, url, description, supervisors, department, studyLevel, studyMode, fundingType, courseType, qualification, studyLocation, showCategory }: CourseCardProps): ReactElement;

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

@@ -0,0 +1,10 @@
+import { ReactNode, ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './anchorTarget.scss';
+export interface AnchorTargetProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    targetLabel: string;
+    children: ReactNode;
+}
+export default function AnchorTarget({ theme, inverse, targetLabel, children }: AnchorTargetProps): ReactElement;

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

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

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

@@ -0,0 +1,11 @@
+import { ReactElement, ReactNode } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './centreWrapper.scss';
+export interface CenterWrapperProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    children: ReactNode;
+}
+export default function CenterWrapper({ theme, children }: CenterWrapperProps): ReactElement;

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

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

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

@@ -1,2 +1,3 @@
 import { FeaturedSignpostProps } from './FeaturedSignpost';
 export declare const featuredSignpostProps: FeaturedSignpostProps;
+export declare const featuredSignpostCourseListingProps: FeaturedSignpostProps;

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

@@ -6,12 +6,13 @@ import './QuoteBlock.scss';
 type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
 export interface QuoteBlockProps extends HeadingProps {
     theme: ThemeProps;
+    inverse?: boolean;
     title?: string;
-    cite: string;
-    role: string;
+    cite?: string;
+    role?: string;
     quote: string;
-    quoteeProfileImage: string;
-    quoteeProfileImageAltText: string;
+    quoteeProfileImage?: string;
+    quoteeProfileImageAltText?: string;
     cta?: LinkProps;
 }
 export default function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta }: QuoteBlockProps): ReactElement;

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

@@ -13,4 +13,7 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof QuoteBlock>;
-export declare const Default: Story;
+export declare const ExampleIncludingHeading: Story;
+export declare const ExampleIncludingHeadingLight: Story;
+export declare const ExampleQuoteOnly: Story;
+export declare const ExampleQuoteWithCite: Story;

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

@@ -1,2 +1,4 @@
 import { QuoteBlockProps } from './QuoteBlock';
 export declare const quoteBlockProps: QuoteBlockProps;
+export declare const quoteWithCite: QuoteBlockProps;
+export declare const quoteOnly: QuoteBlockProps;

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

@@ -7,6 +7,7 @@ export interface RelatedCoursesProps {
     inverse?: boolean;
     heading: string;
     fullWidth?: boolean;
+    headingStyle?: 'news' | null;
     cards: CardRelatedProps[];
 }
-export default function RelatedCourses({ theme, inverse, heading, fullWidth, cards }: RelatedCoursesProps): ReactElement;
+export default function RelatedCourses({ theme, inverse, heading, headingStyle, fullWidth, cards }: RelatedCoursesProps): ReactElement;

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

@@ -7,5 +7,8 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
+export declare const ExampleFourOrMoreCourses: Story;
+export declare const ExampleWithNewsStyleHeading: Story;
 export declare const ExampleOneCourse: Story;
+export declare const ExampleTwoCourses: Story;
+export declare const ExampleThreeCourses: Story;

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

@@ -27,6 +27,10 @@ export interface SearchCoursesProps {
      * Placeholder text
      */
     placeholder: string;
+    /**
+     * Facet of the filter
+     */
+    facet?: string;
     /**
      * Display name of the filter
      */
@@ -60,8 +64,12 @@ export interface SearchCoursesProps {
      */
     onGrid?: boolean;
     titleTag?: 'h1' | 'h2';
+    /**
+     * Use onClick event on Search button (eg to update search results on the same page)
+     */
+    useOnClickHandler?: () => void | null;
 }
 /**
  * Search component
  */
-export default function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag }: SearchCoursesProps): ReactElement;
+export default function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, facet, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag, useOnClickHandler }: SearchCoursesProps): ReactElement;

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

@@ -13,6 +13,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof SearchCourses>;
 export declare const Dark: Story;
+export declare const DarkFunctionNotUrl: Story;
 export declare const Light: Story;
 export declare const WithDefaultValues: Story;
 export declare const Wrapped: Story;

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

@@ -7,5 +7,6 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
-export declare const ExampleOneCard: Story;
+export declare const ExampleThreeOrMoreStaff: Story;
+export declare const ExampleOneStaff: Story;
+export declare const ExampleTwoStaff: Story;

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

@@ -13,9 +13,9 @@ export interface TextWithBackgroundProps {
     headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     headingText: string;
     text: string;
-    url: string;
-    linkTitle: string;
+    url?: string;
+    linkTitle?: string;
     externalLink?: boolean;
-    linkStyle: 'primary' | 'secondary' | 'paragraph-link';
+    linkStyle?: 'primary' | 'secondary' | 'paragraph-link';
 }
 export default function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle }: TextWithBackgroundProps): ReactElement;

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

@@ -15,6 +15,8 @@ type Story = StoryObj<typeof TextWithBackground>;
 export declare const DarkWithPrimaryButton: Story;
 export declare const DarkWithSecondaryButton: Story;
 export declare const DarkWithParagraphLink: Story;
+export declare const DarkNoLink: Story;
 export declare const LightWithPrimaryButton: Story;
 export declare const LightWithSecondaryButton: Story;
 export declare const LightWithParagraphLink: Story;
+export declare const LightNoLink: Story;

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

@@ -1,11 +1,12 @@
 import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
 import './topicSelector.scss';
 import { PillProps } from '../../atoms/Pill/Pill';
 export interface TopicSelectorProps {
     /**
      * The theme to use
      */
-    theme?: string;
+    theme: ThemeProps;
     /**
      * The pills to display the list
      */

package/dist/index.d.ts

@@ -261,7 +261,7 @@ interface FeaturedVideoProps {
  */
 declare function FeaturedVideo({ theme, title, image, youtubeId, youtubeButtonLabel, audioYoutubeButtonLabel, audioYoutubeId }: FeaturedVideoProps): ReactElement | null;
 
-type IconType$1 = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'slim-cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks' | 'calendar' | 'clock' | 'internet' | 'slim-location' | 'bathroom' | 'catering' | 'pound' | 'scroll' | 'settings' | 'rocket' | 'staggered-arrow' | 'segmented-pie-chart' | 'home';
+type IconType$1 = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'slim-cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'mortar-board' | 'document' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks' | 'calendar' | 'clock' | 'internet' | 'slim-location' | 'bathroom' | 'catering' | 'pound' | 'scroll' | 'settings' | 'rocket' | 'staggered-arrow' | 'segmented-pie-chart' | 'home';
 
 interface FooterLinkProps {
     label: string;
@@ -433,6 +433,10 @@ interface SearchCoursesProps {
      * Placeholder text
      */
     placeholder: string;
+    /**
+     * Facet of the filter
+     */
+    facet?: string;
     /**
      * Display name of the filter
      */
@@ -466,11 +470,15 @@ interface SearchCoursesProps {
      */
     onGrid?: boolean;
     titleTag?: 'h1' | 'h2';
+    /**
+     * Use onClick event on Search button (eg to update search results on the same page)
+     */
+    useOnClickHandler?: () => void | null;
 }
 /**
  * Search component
  */
-declare function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag }: SearchCoursesProps): ReactElement;
+declare function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, facet, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag, useOnClickHandler }: SearchCoursesProps): ReactElement;
 
 interface SignPostProps {
     /**
@@ -578,10 +586,10 @@ interface TextWithBackgroundProps {
     headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     headingText: string;
     text: string;
-    url: string;
-    linkTitle: string;
+    url?: string;
+    linkTitle?: string;
     externalLink?: boolean;
-    linkStyle: 'primary' | 'secondary' | 'paragraph-link';
+    linkStyle?: 'primary' | 'secondary' | 'paragraph-link';
 }
 declare function TextWithBackground({ text, theme, inverse, headingLevel, headingText, url, linkTitle, externalLink, linkStyle }: TextWithBackgroundProps): ReactElement;
 
@@ -720,12 +728,13 @@ declare function ClearingBanner({ theme, text, showIcon, smallLink, mainLink }:
 type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
 interface QuoteBlockProps extends HeadingProps {
     theme: ThemeProps;
+    inverse?: boolean;
     title?: string;
-    cite: string;
-    role: string;
+    cite?: string;
+    role?: string;
     quote: string;
-    quoteeProfileImage: string;
-    quoteeProfileImageAltText: string;
+    quoteeProfileImage?: string;
+    quoteeProfileImageAltText?: string;
     cta?: LinkProps;
 }
 declare function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta }: QuoteBlockProps): ReactElement;
@@ -859,9 +868,10 @@ interface RelatedCoursesProps {
     inverse?: boolean;
     heading: string;
     fullWidth?: boolean;
+    headingStyle?: 'news' | null;
     cards: CardRelatedProps[];
 }
-declare function RelatedCourses({ theme, inverse, heading, fullWidth, cards }: RelatedCoursesProps): ReactElement;
+declare function RelatedCourses({ theme, inverse, heading, headingStyle, fullWidth, cards }: RelatedCoursesProps): ReactElement;
 
 interface AccomodationCardProps {
     theme: ThemeProps;
@@ -887,6 +897,9 @@ interface CourseCardProps {
     department?: string;
     studyLevel: string;
     studyMode: string;
+    courseType?: string;
+    qualification?: string;
+    studyLocation?: string;
     fundingType?: string;
     showCategory?: boolean;
 }
@@ -1040,7 +1053,7 @@ interface TopicSelectorProps {
     /**
      * The theme to use
      */
-    theme?: string;
+    theme: ThemeProps;
     /**
      * The pills to display the list
      */
@@ -1183,4 +1196,21 @@ interface SidebarWrapperProps {
 }
 declare function SidebarWrapper({ theme, sidebarElement, children }: SidebarWrapperProps): ReactElement;
 
-export { Accordion, AcreditationPromotion, Breadcrumbs, CTAComponent, Carousel, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, Header, Hero, HeroArticle, HeroCarousel, ImageBlock, ImageCarousel, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, MainWrapper, NewsArticlesPromoBlock, Pagination, PromoBlock, QuoteBlock, RelatedCourses, RichText, SearchCourses, SidebarWrapper, SignPost, SingleButton, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, VideoCardComponent, VideoEmbed };
+interface AnchorTargetProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    targetLabel: string;
+    children: ReactNode;
+}
+declare function AnchorTarget({ theme, inverse, targetLabel, children }: AnchorTargetProps): ReactElement;
+
+interface CenterWrapperProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    children: ReactNode;
+}
+declare function CenterWrapper({ theme, children }: CenterWrapperProps): ReactElement;
+
+export { Accordion, AcreditationPromotion, AnchorTarget, Breadcrumbs, CTAComponent, Carousel, CenterWrapper as CentreWrapper, ClearingBanner, CourseDeliveryPills, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, Header, Hero, HeroArticle, HeroCarousel, ImageBlock, ImageCarousel, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, MainWrapper, NewsArticlesPromoBlock, Pagination, PromoBlock, QuoteBlock, RelatedCourses, RichText, SearchCourses, SidebarWrapper, SignPost, SingleButton, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, VideoCardComponent, VideoEmbed };