@uob-web-and-digital/component-library 2.7.12 → 2.9.0

package/README.md

@@ -100,6 +100,37 @@ After installation you will need to add the following to your layout file;
 import '@uob-web-and-digital/component-library/dist/main.css';
 ```
 
+## Testing the component package library with a local consumer application
+
+In order to test the component library with you need to build and then package the library into a file using pack:
+
+```
+npm run build-package
+npm pack <filename>
+```
+
+This produces \<filename\>.tgz
+
+Copy this file into the root directory of your consuming app then change your package.json to point to that file instead of the npmjs.org package.
+
+Change:
+
+```
+"@uob-web-and-digital/component-library": "^2.7.10",
+```
+
+To:
+
+```
+"@uob-web-and-digital/component-library": "file:./<filename>.tgz",
+```
+
+Then do an npm install for that file.
+
+```
+npm install <filename>.tgz
+```
+
 ## Base64 fonts
 
 Fonts are base64 encoded so they are not hosted on a third party.

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import { HeadingProps } from '../../atoms/Heading/Heading';
+import './cardImageAndText.scss';
+export interface CardImageAndTextProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    title?: string;
+    titleTag?: HeadingProps['htmlTag'];
+    text: string;
+}
+export default function CardImageAndText({ theme, inverse, image, title, titleTag, text }: CardImageAndTextProps): ReactElement;

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import CardImageAndText from './CardImageAndText';
+declare const meta: {
+    title: string;
+    component: typeof CardImageAndText;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardImageAndText>;
+export declare const Light: Story;
+export declare const Dark: Story;
+export declare const MultipleParagraphs: Story;
+export declare const Logo: Story;
+export declare const NoHeading: Story;
+export declare const Group: Story;

package/dist/components/molecules/CardImageAndText/defaultProps.d.ts

@@ -0,0 +1,6 @@
+import { CardImageAndTextProps } from './CardImageAndText';
+export declare const cardImageAndTextLight: CardImageAndTextProps;
+export declare const cardImageAndTextLogo: CardImageAndTextProps;
+export declare const cardImageAndTextDark: CardImageAndTextProps;
+export declare const cardImageAndTextMultipleParagraphs: CardImageAndTextProps;
+export declare const cardImageAndTextNoHeading: CardImageAndTextProps;

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

@@ -7,5 +7,6 @@ export interface AnchorTargetProps {
     targetLabel: string;
     children: ReactNode;
     includeDivider?: boolean;
+    landmarkLabel?: string;
 }
-export default function AnchorTarget({ theme, inverse, includeDivider, targetLabel, children }: AnchorTargetProps): ReactElement;
+export default function AnchorTarget({ theme, inverse, includeDivider, targetLabel, landmarkLabel, children }: AnchorTargetProps): ReactElement;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import Breadcrumbs, { BreadcrumbsProps } from './components/organisms/Breadcrumb
 import Carousel, { CarouselProps } from './components/organisms/Carousel/Carousel';
 import CardProfile, { CardProfileProps } from './components/molecules/CardProfile/CardProfile';
 import CardPromoSignpost, { CardPromoSignpostProps } from './components/molecules/CardPromoSignpost/CardPromoSignpost';
+import CardImageAndText, { CardImageAndTextProps } from './components/molecules/CardImageAndText/CardImageAndText';
 import CentreWrapper, { CenterWrapperProps } from './components/organisms/CentreWrapper/CentreWrapper';
 import ClearingBanner, { ClearingBannerProps } from './components/organisms/ClearingBanner/ClearingBanner';
 import CourseDeliveryPills, { CourseDeliveryPillsProps } from './components/organisms/CourseDeliveryPills/CourseDeliveryPills';
@@ -67,5 +68,5 @@ import TwoColumnWrapper, { TwoColumnWrapperProps } from './components/organisms/
 import { FormSelectProps, SelectOptionsProps } from './components/atoms/FormSelect/FormSelect';
 import CardPromoProfile, { CardPromoProfileProps } from './components/molecules/CardPromoProfile/CardPromoProfile';
 import CardStaff, { CardStaffProps } from './components/molecules/CardStaff/CardStaff';
-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, ImageBlockProps, ImageCarouselProps, 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 };
-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, ImageBlock, ImageCarousel, 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 };
+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, ImageBlockProps, ImageCarouselProps, 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 };
+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, ImageBlock, ImageCarousel, 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 };