@uob-web-and-digital/component-library 0.0.54 → 0.0.56

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

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from 'react';
+export interface HeadingProps {
+    htmlTag: 'h2' | 'h3' | 'h4';
+    classNames?: string;
+    children?: ReactNode;
+}
+export default function Heading({ htmlTag, classNames, children }: HeadingProps): ReactElement;

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

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

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

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { ImageProps } from '../../atoms/Image/Image';
 import { ThemeProps } from '../../../themeProps';
 import './cardNews.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 export interface CardNewsProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -10,7 +11,7 @@ export interface CardNewsProps {
     title: string;
     href: string;
     publishDate: string;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps['htmlTag'];
 }
 /**
  * Primary UI component for user interaction

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

@@ -11,3 +11,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof CardNews>;
 export declare const Light: Story;
+export declare const LightH3Title: Story;
+export declare const LightH4Title: Story;

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

@@ -0,0 +1,2 @@
+import { CardNewsProps } from './CardNews';
+export declare const cardNewsProps: CardNewsProps;

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

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { ImageProps } from '../../atoms/Image/Image';
 import { ThemeProps } from '../../../themeProps';
 import './cardPromo.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 export interface CardPromoProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -15,9 +16,10 @@ export interface CardPromoProps {
     location?: string;
     copy?: string;
     isSingle?: boolean;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps['htmlTag'];
+    cardCopyIsRichText?: boolean;
 }
 /**
  * Primary UI component for user interaction
  */
-export default function CardPromo({ theme, inverse, image, tag, title, subtitle, href, publishDate, authorString, location, copy, isSingle, titleTag }: CardPromoProps): ReactElement;
+export default function CardPromo({ theme, inverse, image, tag, title, subtitle, href, publishDate, authorString, location, copy, isSingle, titleTag, cardCopyIsRichText }: CardPromoProps): ReactElement;

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

@@ -12,5 +12,7 @@ export default meta;
 type Story = StoryObj<typeof CardPromo>;
 export declare const SinglePromoCardLight: Story;
 export declare const SinglePromoCardDark: Story;
+export declare const SinglePromoCardLightRichTextCopy: Story;
+export declare const SinglePromoCardDarkRichTextCopy: Story;
 export declare const CardNoImage: Story;
 export declare const OneOfManyPromoCards: Story;

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

@@ -4,6 +4,7 @@ import { ThemeProps } from '../../../themeProps';
 import { TextButtonProps } from '../../atoms/TextButton/TextButton';
 import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
 import './cardPromoSignpost.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 export interface CardPromoSignpostProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -20,7 +21,7 @@ export interface CardPromoSignpostProps {
     buttonPrimary?: TextButtonProps;
     buttonSecondary?: TextButtonProps;
     link?: LinkWithArrowProps;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps['htmlTag'];
 }
 /**
  * Primary UI component for user interaction

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

@@ -13,3 +13,4 @@ type Story = StoryObj<typeof CardPromoSignpost>;
 export declare const SinglePromoSignpostCardLight: Story;
 export declare const SinglePromoSignpostCardsDarkRightImage: Story;
 export declare const OneOfManyPromoSignpostCardsDark: Story;
+export declare const SinglePromoSignpostCardsDarkRightImageH4Title: Story;

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

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { ImageProps } from '../../atoms/Image/Image';
 import { ThemeProps } from '../../../themeProps';
 import './cardVideo.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 export interface CardVideoProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -9,7 +10,7 @@ export interface CardVideoProps {
     title: string;
     youtubeId: string;
     buttonLabel: string;
-    titleTag?: 'h2' | 'h3';
+    titleTag: HeadingProps['htmlTag'];
 }
 /**
  * Primary UI component for user interaction

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

@@ -8,7 +8,8 @@ interface CheckboxAccordionProps {
     theme: ThemeProps;
     heading: string;
     type: 'checkbox';
-    inputs: Omit<CheckboxProps, 'theme'>[];
+    inputs?: Omit<CheckboxProps, 'theme'>[];
+    selectProps?: null;
     /**
      * Whether the accordion is open or closed by default
      */
@@ -18,7 +19,8 @@ interface RadioButtonAccordionProps {
     theme: ThemeProps;
     heading: string;
     type: 'radio';
-    inputs: Omit<RadioButtonProps, 'theme'>[];
+    inputs?: Omit<RadioButtonProps, 'theme'>[];
+    selectProps?: null;
     /**
      * Whether the accordion is open or closed by default
      */

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { FormSelectProps } from '../../atoms/FormSelect/FormSelect';
+import './filterAccordionSelect.scss';
+export type FilterAccordionSelectProps = {
+    theme: ThemeProps;
+    heading: string;
+    selectContent: Omit<FormSelectProps, 'theme'>;
+    /**
+     * Whether the accordion is open or closed by default
+     */
+    defaultIsOpen?: boolean;
+};
+export default function FilterAccordionSelect({ theme, heading, selectContent, defaultIsOpen }: FilterAccordionSelectProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { FilterAccordionSelectProps } from './FilterAccordionSelect';
+export declare const selectFilterProps: FilterAccordionSelectProps;

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

@@ -11,14 +11,15 @@ import { CardImageProps } from '../../molecules/CardImage/CardImage';
 import { CardFeaturedNewsProps } from '../../molecules/CardFeaturedNews/CardFeaturedNews';
 import { ThemeProps } from '../../../themeProps';
 import './carousel.scss';
+import { HeadingProps } from '../../atoms/Heading/Heading';
 export interface CarouselProps {
     theme: ThemeProps;
     inverse?: boolean;
     type: string;
     title?: string;
-    useH3ForCards?: boolean;
+    cardTitleTag?: HeadingProps['htmlTag'];
     setCardInverse?: 'dark' | 'light';
     cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
-export default function Carousel({ theme, inverse, type, title, cards, useH3ForCards, setCardInverse, exploreMore }: CarouselProps): ReactElement;
+export default function Carousel({ theme, inverse, type, title, cards, cardTitleTag, setCardInverse, exploreMore }: CarouselProps): ReactElement;

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

@@ -18,6 +18,14 @@ export interface PromoBlockProps {
      * Optional title of the component
      */
     title?: string;
+    /**
+     * Optional titleTag of the component
+     */
+    titleTag?: 'h2' | 'h3';
+    /**
+     * Optional cardTitleTag of the component
+     */
+    cardTitleTag?: 'h2' | 'h3' | 'h4';
     /**
      * Optional description of the component
      */
@@ -38,5 +46,9 @@ export interface PromoBlockProps {
      * Only applies to the signpost card and if there is only one
      */
     imageOrientation: 'left' | 'right';
+    /**
+     * The copy prop of the card may need to be rendered as Rich Text
+     */
+    cardCopyIsRichText?: boolean;
 }
-export default function PromoBlock({ theme, inverse, type, title, description, link, cards, imageOrientation }: PromoBlockProps): ReactElement | null;
+export default function PromoBlock({ theme, inverse, type, title, description, link, cards, imageOrientation, titleTag, cardTitleTag, cardCopyIsRichText }: PromoBlockProps): ReactElement | null;

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

@@ -19,6 +19,10 @@ export interface SearchCoursesProps {
      * Title for module
      */
     title?: string;
+    /**
+     * Optional description for module
+     */
+    description?: string;
     /**
      * Default value to use for the search term
      */
@@ -27,10 +31,6 @@ export interface SearchCoursesProps {
      * Placeholder text
      */
     placeholder: string;
-    /**
-     * Facet of the filter
-     */
-    facet?: string;
     /**
      * Display name of the filter
      */
@@ -47,10 +47,6 @@ export interface SearchCoursesProps {
      * Default value for filter
      */
     defaultFilter?: string;
-    /**
-     * Results url
-     */
-    resultsUrl: string;
     /**
      * The wrapped version of this component is used for Hero
      */
@@ -65,11 +61,19 @@ export interface SearchCoursesProps {
     onGrid?: boolean;
     titleTag?: 'h1' | 'h2';
     /**
-     * Use onClick event on Search button (eg to update search results on the same page)
+     * Function to handle what happen whens when form is submitted
+     */
+    formSubmitHandler?: () => void | null;
+    /**
+     * Function to handle what happen whens when filters change
+     */
+    filterChangeHandler?: () => void | null;
+    /**
+     * Function to handle what happen whens when search term changes
      */
-    useOnClickHandler?: () => void | null;
+    searchTermChangeHandler?: () => void | null;
 }
 /**
  * Search component
  */
-export default function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, facet, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag, useOnClickHandler }: SearchCoursesProps): ReactElement;
+export default function SearchCourses({ theme, inverse, title, description, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, wrapped, fullWidth, onGrid, titleTag, formSubmitHandler, filterChangeHandler, searchTermChangeHandler }: SearchCoursesProps): ReactElement;

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

@@ -1,4 +1,5 @@
 import { ChangeEvent, ReactElement } from 'react';
+import { FilterAccordionSelectProps } from '../../molecules/FilterAccordionSelect/FilterAccordionSelect';
 import { ThemeProps } from '../../../themeProps';
 import './standardListingFilter.scss';
 export interface StandardListingFilterProps {
@@ -7,7 +8,7 @@ export interface StandardListingFilterProps {
     listingGroups: ListingGroup[];
     onClearFilters: () => void;
 }
-type ListingGroup = DateProps | RadioProps | CheckboxProps;
+type ListingGroup = DateProps | RadioProps | CheckboxProps | SelectProps;
 export interface RadioProps {
     type: 'radio';
     heading: string;
@@ -40,5 +41,12 @@ export interface DateProps {
     onChange?: (e: ChangeEvent) => void;
     defaultValue?: string;
 }
+export interface SelectProps extends FilterAccordionSelectProps {
+    type: 'select';
+    onChange?: (e: ChangeEvent) => void;
+    defaultValue?: string;
+    name: string;
+    id: string;
+}
 export default function StandardListingFilter({ theme, heading, listingGroups, onClearFilters }: StandardListingFilterProps): ReactElement;
 export {};

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

@@ -8,7 +8,7 @@ declare const meta: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
         theme: import("../../../themeProps").ThemeProps;
         heading: string;
-        listingGroups: (import("./StandardListingFilter").DateProps | import("./StandardListingFilter").RadioProps | import("./StandardListingFilter").CheckboxProps)[];
+        listingGroups: (import("./StandardListingFilter").DateProps | import("./StandardListingFilter").RadioProps | import("./StandardListingFilter").CheckboxProps | import("./StandardListingFilter").SelectProps)[];
         onClearFilters: () => void;
     }>) => JSX.Element)[];
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, ReactElement, PropsWithChildren, MouseEventHandler, ChangeEvent, ReactNode } from 'react';
+import React, { ReactNode, KeyboardEvent, ReactElement, PropsWithChildren, MouseEventHandler, ChangeEvent } from 'react';
 
 type ImageProps = {
     src: {
@@ -15,6 +15,12 @@ type ImageProps = {
 
 type ThemeProps = 'uobmain' | 'redexample';
 
+interface HeadingProps$1 {
+    htmlTag: 'h2' | 'h3' | 'h4';
+    classNames?: string;
+    children?: ReactNode;
+}
+
 interface CardNewsProps {
     theme: ThemeProps;
     inverse?: boolean;
@@ -23,7 +29,7 @@ interface CardNewsProps {
     title: string;
     href: string;
     publishDate: string;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardFeaturedProps {
@@ -56,7 +62,7 @@ interface CardVideoProps {
     title: string;
     youtubeId: string;
     buttonLabel: string;
-    titleTag?: 'h2' | 'h3';
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoProps {
@@ -72,7 +78,8 @@ interface CardPromoProps {
     location?: string;
     copy?: string;
     isSingle?: boolean;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps$1['htmlTag'];
+    cardCopyIsRichText?: boolean;
 }
 
 interface TextButtonProps {
@@ -133,7 +140,7 @@ interface CardPromoSignpostProps {
     buttonPrimary?: TextButtonProps;
     buttonSecondary?: TextButtonProps;
     link?: LinkWithArrowProps;
-    titleTag: 'h2' | 'h3';
+    titleTag: HeadingProps$1['htmlTag'];
 }
 
 interface CardPromoVideoProps {
@@ -202,12 +209,12 @@ interface CarouselProps {
     inverse?: boolean;
     type: string;
     title?: string;
-    useH3ForCards?: boolean;
+    cardTitleTag?: HeadingProps$1['htmlTag'];
     setCardInverse?: 'dark' | 'light';
     cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[] | CardImageProps[] | CardFeaturedNewsProps[];
     exploreMore?: string;
 }
-declare function Carousel({ theme, inverse, type, title, cards, useH3ForCards, setCardInverse, exploreMore }: CarouselProps): ReactElement;
+declare function Carousel({ theme, inverse, type, title, cards, cardTitleTag, setCardInverse, exploreMore }: CarouselProps): ReactElement;
 
 interface FeaturedContentProps {
     /**
@@ -411,6 +418,18 @@ interface SelectOptionsProps {
     value: string;
     selected?: boolean;
 }
+interface FormSelectProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    fieldName: string;
+    title: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    ariaControls?: string;
+    autoFocus?: boolean;
+    selectOptions: SelectOptionsProps[];
+    defaultValue: string;
+    hiddenLabel?: boolean;
+}
 
 interface SearchCoursesProps {
     /**
@@ -425,6 +444,10 @@ interface SearchCoursesProps {
      * Title for module
      */
     title?: string;
+    /**
+     * Optional description for module
+     */
+    description?: string;
     /**
      * Default value to use for the search term
      */
@@ -433,10 +456,6 @@ interface SearchCoursesProps {
      * Placeholder text
      */
     placeholder: string;
-    /**
-     * Facet of the filter
-     */
-    facet?: string;
     /**
      * Display name of the filter
      */
@@ -453,10 +472,6 @@ interface SearchCoursesProps {
      * Default value for filter
      */
     defaultFilter?: string;
-    /**
-     * Results url
-     */
-    resultsUrl: string;
     /**
      * The wrapped version of this component is used for Hero
      */
@@ -471,14 +486,22 @@ interface SearchCoursesProps {
     onGrid?: boolean;
     titleTag?: 'h1' | 'h2';
     /**
-     * Use onClick event on Search button (eg to update search results on the same page)
+     * Function to handle what happen whens when form is submitted
+     */
+    formSubmitHandler?: () => void | null;
+    /**
+     * Function to handle what happen whens when filters change
+     */
+    filterChangeHandler?: () => void | null;
+    /**
+     * Function to handle what happen whens when search term changes
      */
-    useOnClickHandler?: () => void | null;
+    searchTermChangeHandler?: () => void | null;
 }
 /**
  * Search component
  */
-declare function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, facet, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag, useOnClickHandler }: SearchCoursesProps): ReactElement;
+declare function SearchCourses({ theme, inverse, title, description, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, wrapped, fullWidth, onGrid, titleTag, formSubmitHandler, filterChangeHandler, searchTermChangeHandler }: SearchCoursesProps): ReactElement;
 
 interface SignPostProps {
     /**
@@ -800,6 +823,14 @@ interface PromoBlockProps$1 {
      * Optional title of the component
      */
     title?: string;
+    /**
+     * Optional titleTag of the component
+     */
+    titleTag?: 'h2' | 'h3';
+    /**
+     * Optional cardTitleTag of the component
+     */
+    cardTitleTag?: 'h2' | 'h3' | 'h4';
     /**
      * Optional description of the component
      */
@@ -820,8 +851,12 @@ interface PromoBlockProps$1 {
      * Only applies to the signpost card and if there is only one
      */
     imageOrientation: 'left' | 'right';
+    /**
+     * The copy prop of the card may need to be rendered as Rich Text
+     */
+    cardCopyIsRichText?: boolean;
 }
-declare function PromoBlock({ theme, inverse, type, title, description, link, cards, imageOrientation }: PromoBlockProps$1): ReactElement | null;
+declare function PromoBlock({ theme, inverse, type, title, description, link, cards, imageOrientation, titleTag, cardTitleTag, cardCopyIsRichText }: PromoBlockProps$1): ReactElement | null;
 
 type IconType = 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad';
 interface CourseDeliveryPillProps {
@@ -972,13 +1007,23 @@ interface ListingResultsProps {
 }
 declare function ListingResults({ theme, showCategory, cards, headingInfo }: ListingResultsProps): ReactElement;
 
+type FilterAccordionSelectProps = {
+    theme: ThemeProps;
+    heading: string;
+    selectContent: Omit<FormSelectProps, 'theme'>;
+    /**
+     * Whether the accordion is open or closed by default
+     */
+    defaultIsOpen?: boolean;
+};
+
 interface StandardListingFilterProps {
     theme: ThemeProps;
     heading: string;
     listingGroups: ListingGroup[];
     onClearFilters: () => void;
 }
-type ListingGroup = DateProps | RadioProps | CheckboxProps;
+type ListingGroup = DateProps | RadioProps | CheckboxProps | SelectProps;
 interface RadioProps {
     type: 'radio';
     heading: string;
@@ -1011,6 +1056,13 @@ interface DateProps {
     onChange?: (e: ChangeEvent) => void;
     defaultValue?: string;
 }
+interface SelectProps extends FilterAccordionSelectProps {
+    type: 'select';
+    onChange?: (e: ChangeEvent) => void;
+    defaultValue?: string;
+    name: string;
+    id: string;
+}
 declare function StandardListingFilter({ theme, heading, listingGroups, onClearFilters }: StandardListingFilterProps): ReactElement;
 
 interface GeneralSearchFilterProps {