@uob-web-and-digital/component-library 0.0.8 → 0.0.10

package/README.md

@@ -13,9 +13,10 @@ This is the frontend component library for the University of Birmingham website
 
 ## Installation and setup
 
-### Node Compatibility
+### Compatibility
 
-**Node:** ^18.18.0
+- **Node:** ^18.18.0
+- **React:** ^17.0.2
 
 ### Setting up the project locally
 

package/dist/components/CardFeatured/CardFeatured.d.ts

@@ -14,7 +14,6 @@ export interface CardFeaturedProps {
     introText: string;
     link: string;
     linkText: string;
-    externalLink?: boolean;
     cardOrder?: number;
     activeVariant?: string;
     leftInitialPositionTablet?: string;
@@ -28,6 +27,6 @@ export interface CardFeaturedProps {
 /**
  * Primary UI component for user interaction
  */
-type CTARef = HTMLAnchorElement | null;
-export declare const CardFeatured: React.ForwardRefExoticComponent<CardFeaturedProps & React.RefAttributes<CTARef>>;
+type CardRef = HTMLDivElement | null;
+export declare const CardFeatured: React.ForwardRefExoticComponent<CardFeaturedProps & React.RefAttributes<CardRef>>;
 export default CardFeatured;

package/dist/components/CardFeatured/CardFeatured.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import CardFeatured from './CardFeatured';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./CardFeatured").CardFeaturedProps & import("react").RefAttributes<HTMLAnchorElement | null>>;
+    component: import("react").ForwardRefExoticComponent<import("./CardFeatured").CardFeaturedProps & import("react").RefAttributes<HTMLDivElement | null>>;
     tags: string[];
 };
 export default meta;

package/dist/components/FeaturedSignpost/FeaturedSignpost.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../themeProps';
+import './featuredSignpost.scss';
+export interface FeaturedSignpostProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    position: 'left' | 'right';
+    category?: string;
+    title: string;
+    description?: string;
+    linkUrl: string;
+    linkLabel: string;
+    linkIsExternal?: boolean;
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+    imageAlt: string;
+}
+export default function FeaturedSignpost({ theme, inverse, position, category, title, description, linkUrl, linkLabel, linkIsExternal, imageAlt, imageSrc }: FeaturedSignpostProps): ReactElement;

package/dist/components/FeaturedSignpost/FeaturedSignpost.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import FeaturedSignpost from './FeaturedSignpost';
+declare const meta: {
+    title: string;
+    component: typeof FeaturedSignpost;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof FeaturedSignpost>;
+export declare const LeftDark: Story;
+export declare const RightDark: Story;
+export declare const LeftLight: Story;
+export declare const RightLight: Story;

package/dist/components/FeaturedSignpost/animationProperties.d.ts

@@ -0,0 +1,104 @@
+export declare const mobileOriginClipPath: {
+    left: string;
+    right: string;
+};
+export declare const mobileBackgroundClipPath: {
+    left: string;
+    right: string;
+};
+export declare const mobileImageClipPath: {
+    left: string;
+    right: string;
+};
+export declare const tabletAndDesktopOriginClipPath: {
+    left: string;
+    right: string;
+};
+export declare const tabletBackgroundClipPath: {
+    left: string;
+    right: string;
+};
+export declare const tabletImageClipPath: {
+    left: string;
+    right: string;
+};
+export declare const desktopBackgroundClipPath: {
+    left: string;
+    right: string;
+};
+export declare const desktopImageClipPath: {
+    left: string;
+    right: string;
+};
+export declare const mobileLineOnePosition: {
+    left: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const mobileLineTwoPosition: {
+    left: {
+        left: string;
+        bottom: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const tabletLineOnePosition: {
+    left: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const tabletLineTwoPosition: {
+    left: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const desktopLineOnePosition: {
+    left: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};
+export declare const desktopLineTwoPosition: {
+    left: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+    right: {
+        left: string;
+        top: string;
+        transform: string;
+    };
+};

package/dist/components/FeaturedSignpost/components/LinesOfIntent.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+    position: 'left' | 'right';
+}
+export default function LinesOfIntent({ isMobile, isTablet, position }: Props): ReactElement;
+export {};

package/dist/components/FeaturedSignpost/components/SignpostImage.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+interface Props {
+    isMobile: boolean;
+    isTablet: boolean;
+    position: 'left' | 'right';
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+    imageAlt: string;
+}
+export default function SignpostImage({ isMobile, isTablet, position, imageSrc, imageAlt }: Props): ReactElement;
+export {};

package/dist/components/FeaturedSignpost/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { FeaturedSignpostProps } from './FeaturedSignpost';
+export declare const featuredSignpostProps: FeaturedSignpostProps;

package/dist/components/FeaturedVideo/FeaturedVideo.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../themeProps';
+import './featuredVideo.scss';
+import { ImageProps } from '../Image/Image';
+export interface FeaturedVideoProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    title: string;
+    youtubeId: string;
+    audioYoutubeId?: string;
+    youtubeButtonLabel?: string;
+    audioYoutubeButtonLabel?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function FeaturedVideo({ theme, title, image, youtubeId, youtubeButtonLabel, audioYoutubeButtonLabel, audioYoutubeId }: FeaturedVideoProps): ReactElement | null;

package/dist/components/FeaturedVideo/FeaturedVideo.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import FeaturedVideo from './FeaturedVideo';
+declare const meta: {
+    title: string;
+    component: typeof FeaturedVideo;
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        theme: import("../../themeProps").ThemeProps;
+        inverse?: boolean | undefined;
+        image: import("../Image/Image").ImageProps;
+        title: string;
+        youtubeId: string;
+        audioYoutubeId?: string | undefined;
+        youtubeButtonLabel?: string | undefined;
+        audioYoutubeButtonLabel?: string | undefined;
+    }>) => JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof FeaturedVideo>;
+export declare const Dark: Story;

package/dist/components/FeaturedVideo/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { FeaturedVideoProps } from './FeaturedVideo';
+export declare const featuredVideoProps: FeaturedVideoProps;

package/dist/components/FullModal/FullModal.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { ThemeProps } from '../../themeProps';
+import './fullModal.scss';
+export interface FullModalProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    /**
+     * Contents of the modal
+     */
+    children: ReactNode;
+    /**
+     * Handler for closing the modal
+     */
+    closeModal: () => void;
+    /**
+     * Pass in the is open state
+     */
+    isOpen: boolean;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const FullModal: ({ theme, isOpen, closeModal, children }: FullModalProps) => ReactElement;

package/dist/components/Header/Header.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../themeProps';
 import { HeaderLink } from './types';
+import { SearchMenuProps } from './components/SearchMenu';
 import './header.scss';
 export interface HeaderProps {
     /**
@@ -19,5 +20,6 @@ export interface HeaderProps {
     dubaiUrl: string;
     ukUrl: string;
     activeCampus?: 'uk' | 'dubai';
+    searchProps: SearchMenuProps;
 }
-export declare const Header: ({ theme, primaryLinks, secondaryLinks, homepageUrl, dubaiUrl, ukUrl, activeCampus }: HeaderProps) => ReactElement;
+export declare const Header: ({ theme, primaryLinks, secondaryLinks, homepageUrl, dubaiUrl, ukUrl, activeCampus, searchProps }: HeaderProps) => ReactElement;

package/dist/components/Header/Header.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import { Header } from './Header';
 declare const meta: {
     title: string;
-    component: ({ theme, primaryLinks, secondaryLinks, homepageUrl, dubaiUrl, ukUrl, activeCampus }: import("./Header").HeaderProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    component: ({ theme, primaryLinks, secondaryLinks, homepageUrl, dubaiUrl, ukUrl, activeCampus, searchProps }: import("./Header").HeaderProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     tags: string[];
 };
 export default meta;

package/dist/components/Header/components/SearchMenu.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+export interface SearchMenuProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    /**
+     * Title for module
+     */
+    title?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Results url
+     */
+    resultsUrl?: string;
+    /**
+     * Introductory text
+     */
+    introText?: string;
+    /**
+     * On change event
+     */
+    handleSearchChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On search submit event
+     */
+    handleSearchSubmit?: (e: React.SyntheticEvent) => void;
+    onClickGoBack?: () => void;
+    backLinkLabel?: string;
+}
+/**
+ * Search component
+ */
+export declare const SearchMenu: ({ title, placeholder, introText, handleSearchChange, handleSearchSubmit, theme, inverse, onClickGoBack, backLinkLabel }: SearchMenuProps) => ReactElement;

package/dist/components/Header/types.d.ts

@@ -4,4 +4,4 @@ export interface HeaderLink {
     description?: string;
     children?: HeaderLink[];
 }
-export type MenuLevel = 0 | 1 | 2;
+export type MenuLevel = 0 | 1 | 2 | 3;

package/dist/components/IconButton/IconButton.d.ts

@@ -11,7 +11,6 @@ export interface IconButtonProps {
     externalLink?: boolean;
     onClick?: () => void;
     ariaControls?: string;
-    autoFocus?: boolean;
     isSubmit?: boolean;
     disabled?: boolean;
 }

package/dist/components/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' | 'instagram' | 'linkedin' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'arrow-left' | 'search' | 'arrow-down';
+export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play';
 export type IconProps = {
     /**
      * The theme to use

package/dist/components/Parallax/Parallax.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type ParallaxProps = {
+    children: ReactNode;
+    offset: number;
+};
+export declare const Parallax: ({ children, offset }: ParallaxProps) => JSX.Element;
+export {};

package/dist/components/TextButtonWithIcon/TextButtonWithIcon.d.ts

@@ -0,0 +1,34 @@
+import { MouseEventHandler, ReactElement } from 'react';
+import { IconType } from '../Icons/Icons';
+import { ThemeProps } from '../../themeProps';
+import './textButtonWithIcon.scss';
+export interface TextButtonWithIconProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    label: string;
+    /**
+     * Handler to use if it's a <button />
+     */
+    onClick?: MouseEventHandler;
+    url?: string;
+    externalLink?: boolean;
+    /**
+     * Whether the button has a background color or is hollow
+     */
+    hollow?: boolean;
+    /**
+     * Whether the button is used as a submit button in a form
+     */
+    isSubmit?: boolean;
+    /**
+     * The icon to be used
+     */
+    icon: IconType;
+}
+export default function TextButtonWithIcon({ theme, inverse, label, onClick, url, externalLink, hollow, isSubmit, icon }: TextButtonWithIconProps): ReactElement;

package/dist/components/TextButtonWithIcon/TextButtonWithIcon.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import TextButtonWithIcon from './TextButtonWithIcon';
+import './textButtonWithIcon.scss';
+declare const meta: {
+    title: string;
+    component: typeof TextButtonWithIcon;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DarkFilled: Story;
+export declare const DarkHollow: Story;
+export declare const Light: Story;
+export declare const LightHollow: Story;

package/dist/components/Video/Video.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../themeProps';
+import './video.scss';
+export interface VideoProps {
+    theme: ThemeProps;
+    id?: string;
+    url?: string;
+    autoPlay?: boolean;
+}
+export default function Video({ theme, id, url, autoPlay }: VideoProps): ReactElement;

package/dist/components/Video/Video.stories.d.ts

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

package/dist/components/Video/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { VideoProps } from './Video';
+export declare const videoProps: VideoProps;

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode, ReactElement } from 'react';
+export interface FocusTrapProps {
+    children: ReactNode;
+}
+export default function FocusTrap(props: FocusTrapProps): ReactElement;