@uob-web-and-digital/component-library 0.0.108 → 1.0.1

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardPromoProfile.scss';
+import { SearchResultDetailProps } from '../../atoms/SearchResultDetail/SearchResultDetail';
+export interface CardPromoProfileProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    name: string;
+    jobTitle: string;
+    department: string;
+    copy: string;
+    href: string;
+    isSingle?: boolean;
+    details?: Omit<SearchResultDetailProps, 'theme'>[];
+    titleTag: 'h2' | 'h3' | 'h4';
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardPromoProfile({ theme, inverse, image, name, jobTitle, department, href, copy, isSingle, titleTag, details }: CardPromoProfileProps): ReactElement;

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

@@ -5,5 +5,6 @@ import './searchResultDetailList.scss';
 export interface SearchResultDetailListProps {
     theme: ThemeProps;
     details: Omit<SearchResultDetailProps, 'theme'>[];
+    verticalDetails?: boolean;
 }
-export default function SearchResultDetailList({ theme, details }: SearchResultDetailListProps): ReactElement;
+export default function SearchResultDetailList({ theme, details, verticalDetails }: SearchResultDetailListProps): ReactElement;

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

@@ -11,6 +11,7 @@ import { CardImageProps } from '../../molecules/CardImage/CardImage';
 import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
 import { CardResearchStoryProps } from '../../molecules/CardResearchStory/CardResearchStory';
 import { CardScholarshipProps } from '../../molecules/CardScholarship/CardScholarship';
+import { CardPromoProfileProps } from '../../molecules/CardPromoProfile/CardPromoProfile';
 import { ThemeProps } from '../../../themeProps';
 import './carousel.scss';
 import { HeadingProps } from '../../atoms/Heading/Heading';
@@ -21,7 +22,7 @@ export interface CarouselProps {
     title?: string;
     cardTitleTag?: HeadingProps['htmlTag'];
     setCardInverse?: 'dark' | 'light';
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[] | CardResearchStoryProps[] | CardScholarshipProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[] | CardResearchStoryProps[] | CardScholarshipProps[] | CardPromoProfileProps[];
     exploreMore?: string;
     cardCopyIsRichText?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import './heroProfile.scss';
 export interface HeroProfileProps {
@@ -16,6 +16,7 @@ export interface HeroProfileProps {
             default: string;
         };
         alt: string;
+        fetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
     };
     studentStatus?: string;
     courseName?: string;

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

@@ -4,6 +4,7 @@ import { ThemeProps } from '../../../themeProps';
 import { CardPromoProps } from '../../molecules/CardPromo/CardPromo';
 import { CardPromoSignpostProps } from '../../molecules/CardPromoSignpost/CardPromoSignpost';
 import { CardPromoVideoProps } from '../../molecules/CardPromoVideo/CardPromoVideo';
+import { CardPromoProfileProps } from '../../molecules/CardPromoProfile/CardPromoProfile';
 import './promoBlock.scss';
 import { FormSelectProps } from '../../atoms/FormSelect/FormSelect';
 export interface PromoBlockProps {
@@ -38,11 +39,11 @@ export interface PromoBlockProps {
     /**
      * Promo block will work with three card types
      */
-    type: 'promo' | 'promo-signpost' | 'promo-video';
+    type: 'promo' | 'promo-signpost' | 'promo-video' | 'promo-profile';
     /**
      * A Promo block component can have any number of items
      */
-    cards: CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[];
+    cards: CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardPromoProfileProps[];
     /**
      * Only applies to the signpost card and if there is only one
      */

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

@@ -32,3 +32,4 @@ export declare const PromoBlockVideoTwoCardsOnly: Story;
 export declare const PromoBlockVideoThreeCardsOnly: Story;
 export declare const PromoBlockVideoFourCardsPlus: Story;
 export declare const PromoBlockFilters: Story;
+export declare const PromoBlockProfileThreeCards: Story;

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

@@ -1,4 +1,5 @@
 import { PromoBlockProps } from './PromoBlock';
+import { CardPromoProfileProps } from '../../molecules/CardPromoProfile/CardPromoProfile';
 import { FormSelectProps, SelectOptionsProps } from '../../atoms/FormSelect/FormSelect';
 export declare const promoBlockProps: PromoBlockProps;
 export declare const promoBlockPropsAccommodation: PromoBlockProps;
@@ -6,6 +7,8 @@ export declare const promoBlockEventsProps: PromoBlockProps;
 export declare const promoBlockSignpostProps: PromoBlockProps;
 export declare const promoBlockVideoProps: PromoBlockProps;
 export declare const promoBlockForCoursePage: PromoBlockProps;
+export declare const promoBlockProfileCards: CardPromoProfileProps[];
+export declare const promoBlockForProfile: PromoBlockProps;
 export declare const promoBlockForScholarshipAward: PromoBlockProps;
 export declare const studyLevelSelectOptions: SelectOptionsProps[];
 export declare const studyLevelFilterSelect: FormSelectProps;

package/dist/index.d.ts

@@ -359,6 +359,46 @@ interface CardScholarshipProps {
     titleTag?: 'h2' | 'h3';
 }
 
+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' | 'domain' | 'note-add' | 'flight' | 'one' | 'two' | 'one-two-three' | 'camping' | 'groups' | 'bed' | 'restaurant' | 'success' | 'award_star' | 'warning-light' | 'warning-dark' | 'information' | 'star' | 'menu' | 'co-present' | 'assignment-add' | 'cast-for-education' | 'live-tv' | 'supervisor-account' | 'experiment' | 'footprint' | 'flag' | 'chat' | 'payments' | 'award-star';
+type IconProps = {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    icon: IconType;
+    name?: string;
+    ariaHidden?: boolean;
+};
+
+interface SearchResultDetailProps {
+    theme: ThemeProps;
+    iconType: IconType;
+    name: string;
+    value: string;
+}
+
+interface CardPromoProfileProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    name: string;
+    jobTitle: string;
+    department: string;
+    copy: string;
+    href: string;
+    isSingle?: boolean;
+    details?: Omit<SearchResultDetailProps, 'theme'>[];
+    titleTag: 'h2' | 'h3' | 'h4';
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare function CardPromoProfile({ theme, inverse, image, name, jobTitle, department, href, copy, isSingle, titleTag, details }: CardPromoProfileProps): ReactElement;
+
 interface CarouselProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -366,7 +406,7 @@ interface CarouselProps {
     title?: string;
     cardTitleTag?: HeadingProps$1['htmlTag'];
     setCardInverse?: 'dark' | 'light';
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[] | CardResearchStoryProps[] | CardScholarshipProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[] | CardResearchStoryProps[] | CardScholarshipProps[] | CardPromoProfileProps[];
     exploreMore?: string;
     cardCopyIsRichText?: boolean;
 }
@@ -410,21 +450,6 @@ interface ParagraphLinkProps {
     externalLink?: boolean;
 }
 
-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' | 'domain' | 'note-add' | 'flight' | 'one' | 'two' | 'one-two-three' | 'camping' | 'groups' | 'bed' | 'restaurant' | 'success' | 'award_star' | 'warning-light' | 'warning-dark' | 'information' | 'star' | 'menu' | 'co-present' | 'assignment-add' | 'cast-for-education' | 'live-tv' | 'supervisor-account' | 'experiment' | 'footprint' | 'flag' | 'chat' | 'payments' | 'award-star';
-type IconProps = {
-    /**
-     * The theme to use
-     */
-    theme: ThemeProps;
-    /**
-     * Whether to inverse the colours
-     */
-    inverse?: boolean;
-    icon: IconType;
-    name?: string;
-    ariaHidden?: boolean;
-};
-
 interface TextButtonWithIconProps {
     /**
      * The theme to use
@@ -1030,13 +1055,6 @@ interface ListingFilterWrapperProps {
 }
 declare function ListingFilterWrapper({ theme, showFilterButtonLabel, numSelected, filterElement }: ListingFilterWrapperProps): ReactElement;
 
-interface SearchResultDetailProps {
-    theme: ThemeProps;
-    iconType: IconType;
-    name: string;
-    value: string;
-}
-
 interface AccomodationCardProps {
     theme: ThemeProps;
     type: 'accomodation';
@@ -1191,11 +1209,11 @@ interface PromoBlockProps$1 {
     /**
      * Promo block will work with three card types
      */
-    type: 'promo' | 'promo-signpost' | 'promo-video';
+    type: 'promo' | 'promo-signpost' | 'promo-video' | 'promo-profile';
     /**
      * A Promo block component can have any number of items
      */
-    cards: CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[];
+    cards: CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardPromoProfileProps[];
     /**
      * Only applies to the signpost card and if there is only one
      */
@@ -1695,6 +1713,7 @@ interface HeroProfileProps {
             default: string;
         };
         alt: string;
+        fetchPriority?: React.ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
     };
     studentStatus?: string;
     courseName?: string;
@@ -1714,4 +1733,4 @@ interface TwoColumnWrapperProps {
 }
 declare function TwoColumnWrapper({ theme, firstColumn, secondColumn }: TwoColumnWrapperProps): ReactElement;
 
-export { Accordion, type AccordionProps, type AccreditationPromotionProps, AcreditationPromotion, AlertBanner, type AlertBannerProps, AnchorTarget, type AnchorTargetProps, Breadcrumbs, type BreadcrumbsProps, CTAComponent, type CTAComponentProps, CardProfile, type CardProfileProps, Carousel, type CarouselProps, type CenterWrapperProps, CenterWrapper as CentreWrapper, ClearingBanner, type ClearingBannerProps, CourseDeliveryPills, type CourseDeliveryPillsProps, EmbedWrapper, type EmbedWrapperProps, FactBoxes, type FactBoxesProps, FeaturedContent, type FeaturedContentProps, FeaturedSignpost, type FeaturedSignpostProps, FeaturedVideo, type FeaturedVideoProps, FiveArticlesGrid, type FiveArticlesGridProps, Footer, type FooterProps, type FormSelectProps, GeneralSearchFilter, type GeneralSearchFilterProps, GenericDetailSection, type GenericDetailSectionProps, Header, type HeaderProps, Hero, HeroArticle, type HeroArticleProps, HeroCarousel, type HeroCarouselProps, HeroCourses, type HeroCoursesProps, HeroProfile, type HeroProfileProps, type HeroProps, ImageBlock, type ImageBlockProps, ImageCarousel, type ImageCarouselProps, InPageNavigation, type InPageNavigationProps, IntroText, type IntroTextProps, LeadNewsArticles, type LeadNewsArticlesProps, ListingFilterWrapper, type ListingFilterWrapperProps, ListingResults, ListingResultsCount, type ListingResultsCountProps, type ListingResultsProps, LocationSection, type LocationSectionProps, LocationSelector, type LocationSelectorProps, MainWrapper, type MainWrapperProps, ModalCTA, type ModalCTAProps, NewsArticlesPromoBlock, type NewsArticlesPromoBlockProps, Pagination, type PaginationProps, PromoBlock, PromoBlockGrid, type PromoBlockProps$1 as PromoBlockProps, QuoteBlock, type QuoteBlockProps, RelatedCourses, type RelatedCoursesProps, ResearchStoryCarousel, type ResearchStoryCarouselProps, RichText, type RichTextProps, ScholarshipCarousel, type ScholarshipCarouselProps, ScrollableTable, ScrollableTableCategory, type ScrollableTableProps, SearchCourses, type SearchCoursesProps, type SelectOptionsProps, SidebarWrapper, type SidebarWrapperProps, SignPost, type SignPostProps, SingleButton, type SingleButtonProps, SkipToContent, type SkipToContentProps, StaffListingCarousel, type StaffListingCarouselProps, StandardListingFilter, type StandardListingFilterProps, TabsBlock, type TabsBlockProps, TextWithBackground, type TextWithBackgroundProps, TopicSelector, type TopicSelectorProps, TwoColumnWrapper, type TwoColumnWrapperProps, VideoCardComponent, type VideoCardComponentProps, VideoEmbed, type VideoEmbedProps };
+export { Accordion, type AccordionProps, type AccreditationPromotionProps, AcreditationPromotion, AlertBanner, type AlertBannerProps, AnchorTarget, type AnchorTargetProps, Breadcrumbs, type BreadcrumbsProps, CTAComponent, type CTAComponentProps, CardProfile, type CardProfileProps, CardPromoProfile, type CardPromoProfileProps, Carousel, type CarouselProps, type CenterWrapperProps, CenterWrapper as CentreWrapper, ClearingBanner, type ClearingBannerProps, CourseDeliveryPills, type CourseDeliveryPillsProps, EmbedWrapper, type EmbedWrapperProps, FactBoxes, type FactBoxesProps, FeaturedContent, type FeaturedContentProps, FeaturedSignpost, type FeaturedSignpostProps, FeaturedVideo, type FeaturedVideoProps, FiveArticlesGrid, type FiveArticlesGridProps, Footer, type FooterProps, type FormSelectProps, GeneralSearchFilter, type GeneralSearchFilterProps, GenericDetailSection, type GenericDetailSectionProps, Header, type HeaderProps, Hero, HeroArticle, type HeroArticleProps, HeroCarousel, type HeroCarouselProps, HeroCourses, type HeroCoursesProps, HeroProfile, type HeroProfileProps, type HeroProps, ImageBlock, type ImageBlockProps, ImageCarousel, type ImageCarouselProps, InPageNavigation, type InPageNavigationProps, IntroText, type IntroTextProps, LeadNewsArticles, type LeadNewsArticlesProps, ListingFilterWrapper, type ListingFilterWrapperProps, ListingResults, ListingResultsCount, type ListingResultsCountProps, type ListingResultsProps, LocationSection, type LocationSectionProps, LocationSelector, type LocationSelectorProps, MainWrapper, type MainWrapperProps, ModalCTA, type ModalCTAProps, NewsArticlesPromoBlock, type NewsArticlesPromoBlockProps, Pagination, type PaginationProps, PromoBlock, PromoBlockGrid, type PromoBlockProps$1 as PromoBlockProps, QuoteBlock, type QuoteBlockProps, RelatedCourses, type RelatedCoursesProps, ResearchStoryCarousel, type ResearchStoryCarouselProps, RichText, type RichTextProps, ScholarshipCarousel, type ScholarshipCarouselProps, ScrollableTable, ScrollableTableCategory, type ScrollableTableProps, SearchCourses, type SearchCoursesProps, type SelectOptionsProps, SidebarWrapper, type SidebarWrapperProps, SignPost, type SignPostProps, SingleButton, type SingleButtonProps, SkipToContent, type SkipToContentProps, StaffListingCarousel, type StaffListingCarouselProps, StandardListingFilter, type StandardListingFilterProps, TabsBlock, type TabsBlockProps, TextWithBackground, type TextWithBackgroundProps, TopicSelector, type TopicSelectorProps, TwoColumnWrapper, type TwoColumnWrapperProps, VideoCardComponent, type VideoCardComponentProps, VideoEmbed, type VideoEmbedProps };