@uob-web-and-digital/component-library 2.20.17 → 2.20.18

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

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { HeadingProps } from '../../molecules/Heading/Heading';
+import { HeadingProps as HeadingElementProps } from '../../atoms/Heading/Heading';
+import { TimelinePoint } from './TimelineItem';
+import './timeline.scss';
+export interface TimelineProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours. Defaults to true (light background, dark
+     * text). Set to false for the dark background variant (dark background, light
+     * text). The gold labels are unchanged in both.
+     */
+    inverse?: boolean;
+    /**
+     * Optional component heading. Accepts the Heading molecule's props directly
+     * (title, description, linkProps, htmlTag). theme and inverse are taken from the
+     * Timeline and override any set here, so the heading always matches the component.
+     */
+    heading?: HeadingProps;
+    /**
+     * Heading level for each timeline point heading. Not hardcoded so the CMS can
+     * set h2, h3 or h4 depending on the page context and whether a component
+     * heading is present.
+     */
+    pointHeadingLevel?: Extract<HeadingElementProps['htmlTag'], 'h2' | 'h3' | 'h4'>;
+    /**
+     * Timeline points (3-12)
+     */
+    points: TimelinePoint[];
+}
+export default function Timeline({ theme, inverse, heading, pointHeadingLevel, points }: TimelineProps): ReactElement;

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

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import Timeline from './Timeline';
+declare const meta: {
+    title: string;
+    component: typeof Timeline;
+    tags: string[];
+    argTypes: {
+        pointHeadingLevel: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        inverse: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DarkBackground: Story;
+export declare const WithoutComponentHeading: Story;
+export declare const FewPoints: Story;

package/dist/components/organisms/Timeline/TimelineItem.d.ts

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+import { ImageProps } from '../../atoms/Image/Image';
+export interface TimelinePointLink {
+    url: string;
+    title: string;
+    externalLink?: boolean;
+}
+export interface TimelinePoint {
+    /**
+     * Date or short label shown in the gold badge (required, max 20 characters)
+     */
+    label: string;
+    /**
+     * Optional point heading (max 30 characters)
+     */
+    heading?: string;
+    /**
+     * Description text (required, max 100 characters)
+     */
+    description: string;
+    /**
+     * Optional link rendered with a trailing arrow (max 25 characters)
+     */
+    link?: TimelinePointLink;
+    /**
+     * Optional image, converted to webp and resized via URL params
+     */
+    image?: ImageProps;
+}
+export interface TimelineItemProps extends TimelinePoint {
+    theme: ThemeProps;
+    inverse?: boolean;
+    /**
+     * Heading level for the point heading. Not hardcoded so the CMS can set the
+     * correct level (h2/h3/h4) for the page context.
+     */
+    headingTag: HeadingProps['htmlTag'];
+}
+export default function TimelineItem({ theme, inverse, label, heading, description, link, image, headingTag }: TimelineItemProps): ReactElement;

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

@@ -0,0 +1,4 @@
+import { TimelineProps } from './Timeline';
+import { TimelinePoint } from './TimelineItem';
+export declare const timelinePoints: TimelinePoint[];
+export declare const timelineProps: TimelineProps;

package/dist/components/organisms/Timeline/timelineLayout.d.ts

@@ -0,0 +1,33 @@
+export interface TimelinePagePoint {
+    /** Index of the point in the source `points` array. */
+    index: number;
+    /** translateX (px) of the point within its page (desktop only; 0 on mobile). */
+    x: number;
+    /** 0 = above the line, 1 = below. */
+    row: number;
+}
+export interface TimelinePage {
+    points: TimelinePagePoint[];
+}
+export interface TimelineLayout {
+    pages: TimelinePage[];
+    /** Width (px) of one grid column at this viewport - drives the --timeline-col CSS var. */
+    colWidth: number;
+}
+/** Column span for a point, by whether it has an image. */
+export declare function pointSpan(hasImage: boolean): number;
+/**
+ * Group points into viewport-wide pages.
+ *
+ * Mobile: one point per page (full width), so Embla snaps one point at a time.
+ *
+ * Desktop: pack points in source order, alternating above (even index) / below (odd)
+ * rows. A single left-to-right cursor drives placement: each point starts at least
+ * STAGGER columns right of the previous one (so points read in source order regardless
+ * of row) AND clear of the last point in its own row (so same-row points never overlap).
+ * When a point would overrun the 12 columns it starts a new page. So each page is a
+ * contiguous run of points, the top/bottom alternation stays in sync across pages (a
+ * page can begin with a below point), and a page only ever holds whole points (no
+ * partials) - leftover columns are quiet whitespace.
+ */
+export declare function computeTimelinePages(spans: number[], viewportWidth: number, isDesktop: boolean): TimelineLayout;

package/dist/components/organisms/Timeline/useTimelineEmbla.d.ts

@@ -0,0 +1,26 @@
+import { TimelinePoint } from './TimelineItem';
+import { TimelinePage } from './timelineLayout';
+export interface TimelineEmbla {
+    /** Ref for the Embla viewport (the overflow-hidden scroller). */
+    emblaRef: (node: HTMLElement | null) => void;
+    /** Pages to render; each page is one Embla slide (one viewport wide). */
+    pages: TimelinePage[];
+    /** Current grid column width (px) - set as the --timeline-col CSS var. */
+    colWidth: number;
+    /** true on desktop (>=768px), where points fan out into the staggered two-row layout. */
+    isDesktop: boolean;
+    /** Whether the track scrolls (controls whether the nav renders). */
+    canScroll: boolean;
+    canPrev: boolean;
+    canNext: boolean;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+}
+/**
+ * Wires embla-carousel to the timeline. Embla owns the scroll/drag/snap mechanics; the
+ * page composition and per-point positions still come from computeTimelinePages (the
+ * staggered, paged, no-partials packing Embla cannot express). Each page is one Embla
+ * slide, so Embla snaps page-by-page on desktop and point-by-point on mobile. Pages are
+ * recomputed from the live viewport width, and Embla is re-initialised when they change.
+ */
+export declare function useTimelineEmbla(points: TimelinePoint[]): TimelineEmbla;

package/dist/index.d.ts

@@ -76,5 +76,6 @@ 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, DocumentNavigationProps, DocumentPageNavigationProps, 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, DocumentPageNavigation, 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 };
+import Timeline, { TimelineProps } from './components/organisms/Timeline/Timeline';
+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, DocumentPageNavigationProps, 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, TimelineProps };
+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, DocumentPageNavigation, 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, Timeline };