@uob-web-and-digital/component-library 2.19.2 → 2.20.0

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' | 'rednote' | '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' | 'pause' | 'mute-on' | 'mute-off' | 'plus';
+export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'rednote' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-up' | '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' | 'pause' | 'mute-on' | 'mute-off' | 'plus' | 'minus';
 export type IconProps = {
     /**
      * The theme to use

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

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../Icons/Icons';
+import { ThemeProps } from '../../../themeProps';
+import './navigationItem.scss';
+export interface DocumentNavigationSubsectionProps {
+    /** The display name of the subsection */
+    title: string;
+    /** The URI for the subsection */
+    anchor: string;
+}
+export interface NavigationItemProps {
+    /** Theme for the component */ theme: ThemeProps;
+    /** Section title */
+    title: string;
+    /** Anchor for the section overview page */
+    anchor?: string;
+    /** Whether to use inverse colors */
+    inverse?: boolean;
+    /** Whether the section should be expanded on first render */
+    openByDefault?: boolean;
+    /** Icon name to display in the summary */
+    icon?: IconProps['icon'];
+    /** Icon position relative to the title */
+    iconPosition?: 'left' | 'right';
+    /** Subsections to display when expanded */
+    subsections?: DocumentNavigationSubsectionProps[];
+    /** Title tag for the heading */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+    /** Click handler for the section */
+    onClick?: () => void;
+}
+export default function NavigationItem({ theme, title, anchor, inverse, openByDefault, icon, iconPosition, subsections, onClick }: NavigationItemProps): ReactElement;

package/dist/components/atoms/NavigationItem/NavigationItem.stories.d.ts

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

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

@@ -1,11 +1,15 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import './accordionItem.scss';
+import { IconType } from '../../atoms/Icons/Icons';
 import { CardModuleCardProps } from '../CardModuleCard/CardModuleCard';
 export interface AccordionItemProps {
     key?: number;
     title: string;
+    icon?: IconType;
+    iconPosition?: 'left' | 'right';
     text?: string;
+    children?: ReactNode;
     theme: ThemeProps;
     inverse?: boolean;
     titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | undefined;
@@ -24,4 +28,4 @@ export interface AccordionItemProps {
         url: string;
     };
 }
-export default function AccordionItem({ theme, title, text, inverse, titleTag, cards, openByDefault, primaryButton, secondaryButton, link }: AccordionItemProps): ReactElement;
+export default function AccordionItem({ theme, title, icon, iconPosition, text, children, inverse, titleTag, cards, openByDefault, primaryButton, secondaryButton, link }: AccordionItemProps): ReactElement;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconType } from '../../atoms/Icons/Icons';
+import { ThemeProps } from '../../../themeProps';
+import './documentSectionItem.scss';
+export interface DocumentSectionSubsection {
+    title: string;
+    anchor: string;
+}
+export interface DocumentSectionItemProps {
+    title: string;
+    anchor: string;
+    subsections?: DocumentSectionSubsection[];
+    icon?: IconType;
+    iconPosition?: 'left' | 'right';
+    theme?: ThemeProps;
+    inverse?: boolean;
+    onActivate?: (data: {
+        title: string;
+        anchor: string;
+        subsections: DocumentSectionSubsection[];
+    }) => void;
+    onFocusActivate?: (data: {
+        title: string;
+        anchor: string;
+        subsections: DocumentSectionSubsection[];
+    }) => void;
+    isActive?: boolean;
+}
+export default function DocumentSectionItem({ title, anchor, subsections, onActivate, onFocusActivate, icon, iconPosition, theme, inverse, isActive }: DocumentSectionItemProps): React.ReactElement;

package/dist/components/molecules/DocumentSectionItem/DocumentSectionItem.stories.d.ts

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

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { DocumentNavigationSubsectionProps } from '../../atoms/NavigationItem/NavigationItem';
+import { ThemeProps } from '../../../themeProps';
+import './documentNavigation.scss';
+export interface DocumentNavigationSectionProps {
+    /** Section title shown in the collapsible header */
+    title: string;
+    /** Anchor for the section overview page */
+    anchor: string;
+    /** Anchored content within the page */
+    subsections?: DocumentNavigationSubsectionProps[];
+    /** Whether the section should be expanded on first render */
+    openByDefault?: boolean;
+    /** Whether this section uses the gold highlight style */
+    isGoldSection?: boolean;
+}
+export interface DocumentNavigationProps {
+    theme?: ThemeProps;
+    inverse?: boolean;
+    sections: DocumentNavigationSectionProps[];
+}
+export default function DocumentNavigation({ theme, inverse, sections }: DocumentNavigationProps): ReactElement;

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

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

package/dist/index.d.ts

@@ -32,6 +32,7 @@ import ImageBlock, { ImageBlockProps } from './components/organisms/ImageBlock/I
 import ImageMosaic, { ImageMosaicProps } from './components/organisms/ImageMosaic/ImageMosaic';
 import ImageCarousel, { ImageCarouselProps } from './components/organisms/ImageCarousel/ImageCarousel';
 import InPageNavigation, { InPageNavigationProps } from './components/organisms/InPageNavigation/InPageNavigation';
+import DocumentNavigation, { DocumentNavigationProps } from './components/organisms/DocumentNavigation/DocumentNavigation';
 import IntroText, { IntroTextProps } from './components/organisms/IntroText/IntroText';
 import LeadNewsArticles, { LeadNewsArticlesProps } from './components/organisms/LeadNewsArticles/LeadNewsArticles';
 import ListingFilterWrapper, { ListingFilterWrapperProps } from './components/organisms/ListingFilterWrapper/ListingFilterWrapper';
@@ -74,5 +75,5 @@ import LogoWall, { LogoWallProps } from './components/organisms/LogoWall/LogoWal
 import TextOverMedia, { TextOverMediaProps } from './components/organisms/TextOverMedia/TextOverMedia';
 import SocialFeed, { SocialFeedProps } from './components/organisms/SocialFeed/SocialFeed';
 import { HeaderLanding, HeaderLandingProps } from './components/organisms/HeaderLanding/HeaderLanding';
-export type { AccordionProps, AccreditationPromotionProps, AlertBannerProps, AnchorTargetProps, BreadcrumbsProps, CarouselProps, CardProfileProps, CardStaffProps, CenterWrapperProps, ClearingBannerProps, CourseDeliveryPillsProps, CTAComponentProps, EmbedWrapperProps, FactBoxesProps, FeaturedContentProps, FeaturedSignpostProps, FeaturedVideoProps, FiveArticlesGridProps, FooterProps, FormSelectProps, GenericDetailSectionProps, GeneralSearchFilterProps, HeaderProps, HeadingProps, HeroProps, HeroArticleProps, HeroCarouselProps, HeroCoursesProps, HeroProfileProps, HeroVideoProps, ImageBlockProps, ImageCarouselProps, ImageMosaicProps, InPageNavigationProps, IntroTextProps, LeadNewsArticlesProps, ListingFilterWrapperProps, ListingResultsProps, ListingResultsCountProps, ListTableProps, LocationSelectorProps, MainWrapperProps, ModuleCardGroupProps, NewsArticlesPromoBlockProps, PaginationProps, PromoBlockProps, QuoteBlockProps, RelatedCoursesProps, ResearchStoryCarouselProps, RichTextProps, ScholarshipCarouselProps, SearchCoursesProps, SelectOptionsProps, StaffListingCarouselProps, SidebarWrapperProps, SignPostProps, SingleButtonProps, SkipToContentProps, TabsBlockProps, TextWithBackgroundProps, TwoColumnWrapperProps, TopicSelectorProps, StandardListingFilterProps, VideoCardComponentProps, VideoEmbedProps, ScrollableTableProps, ScrollableTableCategory, ModalCTAProps, LocationSectionProps, CardPromoProfileProps, CardPromoSignpostProps, CardImageAndTextProps, LogoWallProps, TextOverMediaProps, SocialFeedProps, HeaderLandingProps };
-export { Accordion, AcreditationPromotion, AlertBanner, AnchorTarget, Breadcrumbs, Carousel, CardProfile, CardPromoSignpost, CardStaff, CentreWrapper, ClearingBanner, CourseDeliveryPills, CTAComponent, EmbedWrapper, FactBoxes, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, GenericDetailSection, Header, Heading, Hero, HeroArticle, HeroCarousel, HeroCourses, HeroProfile, HeroVideo, ImageBlock, ImageCarousel, ImageMosaic, InPageNavigation, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, ListTable, LocationSelector, MainWrapper, ModuleCardGroup, NewsArticlesPromoBlock, Pagination, PromoBlock, PromoBlockGrid, QuoteBlock, RelatedCourses, ResearchStoryCarousel, RichText, ScholarshipCarousel, SearchCourses, SidebarWrapper, SignPost, SingleButton, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, TwoColumnWrapper, VideoCardComponent, VideoEmbed, ScrollableTable, ModalCTA, LocationSection, CardPromoProfile, CardImageAndText, LogoWall, TextOverMedia, SocialFeed, HeaderLanding };
+export type { AccordionProps, AccreditationPromotionProps, AlertBannerProps, AnchorTargetProps, BreadcrumbsProps, CarouselProps, CardProfileProps, CardStaffProps, CenterWrapperProps, ClearingBannerProps, CourseDeliveryPillsProps, CTAComponentProps, EmbedWrapperProps, FactBoxesProps, FeaturedContentProps, FeaturedSignpostProps, FeaturedVideoProps, FiveArticlesGridProps, FooterProps, FormSelectProps, GenericDetailSectionProps, GeneralSearchFilterProps, HeaderProps, HeadingProps, HeroProps, HeroArticleProps, HeroCarouselProps, HeroCoursesProps, HeroProfileProps, HeroVideoProps, ImageBlockProps, ImageCarouselProps, ImageMosaicProps, InPageNavigationProps, DocumentNavigationProps, IntroTextProps, LeadNewsArticlesProps, ListingFilterWrapperProps, ListingResultsProps, ListingResultsCountProps, ListTableProps, LocationSelectorProps, MainWrapperProps, ModuleCardGroupProps, NewsArticlesPromoBlockProps, PaginationProps, PromoBlockProps, QuoteBlockProps, RelatedCoursesProps, ResearchStoryCarouselProps, RichTextProps, ScholarshipCarouselProps, SearchCoursesProps, SelectOptionsProps, StaffListingCarouselProps, SidebarWrapperProps, SignPostProps, SingleButtonProps, SkipToContentProps, TabsBlockProps, TextWithBackgroundProps, TwoColumnWrapperProps, TopicSelectorProps, StandardListingFilterProps, VideoCardComponentProps, VideoEmbedProps, ScrollableTableProps, ScrollableTableCategory, ModalCTAProps, LocationSectionProps, CardPromoProfileProps, CardPromoSignpostProps, CardImageAndTextProps, LogoWallProps, TextOverMediaProps, SocialFeedProps, HeaderLandingProps };
+export { Accordion, AcreditationPromotion, AlertBanner, AnchorTarget, Breadcrumbs, Carousel, CardProfile, CardPromoSignpost, CardStaff, CentreWrapper, ClearingBanner, CourseDeliveryPills, CTAComponent, EmbedWrapper, FactBoxes, FeaturedContent, FeaturedSignpost, FeaturedVideo, FiveArticlesGrid, Footer, GeneralSearchFilter, GenericDetailSection, Header, Heading, Hero, HeroArticle, HeroCarousel, HeroCourses, HeroProfile, HeroVideo, ImageBlock, ImageCarousel, ImageMosaic, InPageNavigation, DocumentNavigation, IntroText, LeadNewsArticles, ListingFilterWrapper, ListingResults, ListingResultsCount, ListTable, LocationSelector, MainWrapper, ModuleCardGroup, NewsArticlesPromoBlock, Pagination, PromoBlock, PromoBlockGrid, QuoteBlock, RelatedCourses, ResearchStoryCarousel, RichText, ScholarshipCarousel, SearchCourses, SidebarWrapper, SignPost, SingleButton, SkipToContent, StaffListingCarousel, StandardListingFilter, TabsBlock, TextWithBackground, TopicSelector, TwoColumnWrapper, VideoCardComponent, VideoEmbed, ScrollableTable, ModalCTA, LocationSection, CardPromoProfile, CardImageAndText, LogoWall, TextOverMedia, SocialFeed, HeaderLanding };