@apolitical/component-library 0.0.5 → 1.1.0-beta.1

package/accessibility/hidden-from-screen-readers/hidden-from-screen-readers.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Props {
+    /** The element that will render around the content */
+    element?: 'span' | 'small' | 'strong' | 'em' | 'sup' | 'sub' | 'div' | 'p' | 'li' | 'hr';
+    /** The content to be hidden from screen readers */
+    children?: React.ReactNode;
+    /** Additional classes */
+    className?: string;
+    /** Additional styling */
+    style?: React.CSSProperties;
+}
+declare const _default: React.MemoExoticComponent<({ element, children, ...props }: Props) => React.DetailedReactHTMLElement<{
+    'aria-hidden': true;
+    /** Additional classes */
+    className?: string | undefined;
+    /** Additional styling */
+    style?: React.CSSProperties | undefined;
+}, HTMLElement>>;
+export default _default;

package/accessibility/hidden-from-screen-readers/index.d.ts

@@ -0,0 +1 @@
+export { default as HiddenFromScreenReaders } from './hidden-from-screen-readers';

package/accessibility/index.d.ts

@@ -0,0 +1,2 @@
+export * from './visually-hidden';
+export * from './hidden-from-screen-readers';

package/accessibility/visually-hidden/index.d.ts

@@ -0,0 +1 @@
+export { default as VisuallyHidden } from './visually-hidden';

package/accessibility/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface Props {
+    /** The element that will render around the content. */
+    element?: 'span' | 'small' | 'strong' | 'em' | 'sup' | 'sub' | 'div' | 'p' | 'label' | 'a' | 'button';
+    /** Whether the content should be shown on focus. */
+    showOnFocus?: boolean;
+    /** The content to be hidden from screen readers. */
+    children: React.ReactNode;
+    /** An `href`, for links */
+    href?: string;
+    /** `for`, for labels */
+    htmlFor?: string;
+}
+declare const _default: React.MemoExoticComponent<({ element, showOnFocus, children, ...props }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    /** An `href`, for links */
+    href?: string | undefined;
+    /** `for`, for labels */
+    htmlFor?: string | undefined;
+}, HTMLElement>>;
+export default _default;

package/banners/banner-section/banner-section.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ResponsiveImageType } from '../../general';
+declare const allowedElements: string[];
+interface ContentPropObject {
+    text: string;
+    element?: typeof allowedElements[number];
+}
+type ContentPropType = false | string | ContentPropObject;
+interface ContentType {
+    eyebrow?: ContentPropType;
+    title?: ContentPropType;
+    text?: ContentPropType;
+}
+export interface BannerSectionType {
+    /** The content to display */
+    content: ContentType;
+    /** The image to display */
+    image?: ResponsiveImageType;
+    /** The colour variant (when there's no image) */
+    variant?: 'default' | 'light';
+    /** The CTA to display */
+    cta?: {
+        text: string;
+        link: string;
+        props?: {
+            [key: string]: string | ((e: React.MouseEvent<HTMLElement>) => void);
+        };
+    };
+    /** Any additional children */
+    children?: React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<({ content: contentProp, image, variant, cta, children }: BannerSectionType) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/banners/banner-section/index.d.ts

@@ -0,0 +1 @@
+export { default as BannerSection } from './banner-section';

package/banners/index.d.ts

@@ -0,0 +1,2 @@
+export * from './banner-section';
+export * from './marketing-block';

package/banners/marketing-block/index.d.ts

@@ -0,0 +1 @@
+export { default as MarketingBox } from './marketing-block';

package/banners/marketing-block/marketing-block.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** The colour variant to use */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /** If `button` is provided, with `link` and `text` strings, a button will be rendered on the component */
+    button?: {
+        link: string;
+        text: string;
+    } | null;
+    /** Text for the title */
+    title?: string;
+    /** Text to sit below the title */
+    text?: string;
+    /** The GTM event context */
+    gtmContext?: string;
+}
+declare const MarketingBlock: ({ variant, button, title, text, gtmContext, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default MarketingBlock;

package/constants/assets.d.ts

@@ -0,0 +1 @@
+export declare const ASSETS_BUCKET = "https://storage.googleapis.com/apolitical-assets/";

package/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './assets';
+export * from './number-of-users';

package/constants/number-of-users.d.ts

@@ -0,0 +1 @@
+export declare const NUMBER_OF_USERS = "200,000+";

package/context/index.d.ts

@@ -0,0 +1 @@
+export * from './user';

package/context/user/index.d.ts

@@ -0,0 +1,3 @@
+export type { IUserDetails } from './user.context';
+export { default as UserContext } from './user.context';
+export { default as UserProvider } from './user.provider';

package/context/user/user.context.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface IUserDetails {
+    id?: string;
+    name?: string;
+    image?: {
+        thumbnail?: string;
+    };
+}
+export interface IUserContext {
+    isLoading: boolean;
+    details: IUserDetails | null;
+}
+declare const _default: import("react").Context<IUserContext | null>;
+export default _default;

package/context/user/user.provider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IUserContext } from './user.context';
+interface Props {
+    children: React.ReactNode;
+    user: IUserContext | null;
+}
+declare const UserProvider: ({ children, user }: Props) => import("react/jsx-runtime").JSX.Element;
+export default UserProvider;

package/form/components/email-helper-text-box/email-helper-text-box.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** The type of content to show */
+    type: '' | 'gov' | 'nonGov' | 'pending' | 'verify' | 'exists';
+    /** The user's email address */
+    email: string;
+    /** Optional URL to redirect to, used after triggering the verification code */
+    redirectPath?: string;
+    /** Callback function to resend verification code, used when user already signed up but not verified */
+    resendVerificationCode: (email: string) => Promise<void>;
+    /** The language to use */
+    locale?: string;
+}
+declare const EmailHelperTextBoxWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EmailHelperTextBoxWrapper;

package/form/components/email-helper-text-box/index.d.ts

@@ -0,0 +1 @@
+export { default as EmailHelperTextBox } from './email-helper-text-box';

package/form/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './email-helper-text-box';
+export * from './password-rules';
+export * from './rating';

package/form/components/password-rules/index.d.ts

@@ -0,0 +1 @@
+export { default as PasswordRules } from './password-rules';

package/form/components/password-rules/password-rules.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type MatchingRules = {
+    isMoreThanEightCharacters: boolean;
+    includesNumberAndSymbol: boolean;
+    includesLowerAndUppercase: boolean;
+};
+interface Props {
+    /** Results of the validator check */
+    matchingRules?: MatchingRules;
+    /** Additional classes */
+    className?: string;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const _default: React.MemoExoticComponent<({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/form/components/rating/index.d.ts

@@ -0,0 +1 @@
+export { default as Rating } from './rating';

package/form/components/rating/rating.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** The text to display alongside the rating */
+    text?: {
+        text?: string;
+        low?: string;
+        high?: string;
+        success?: string;
+    };
+    /** The maximum rating */
+    topRating?: number;
+    /** The functions to create, update, and handle errors with the rating */
+    functions: {
+        createRating: (() => Promise<any>) | (() => void);
+        updateRating: (({ id, value }: {
+            id: string;
+            value: number;
+        }) => Promise<any>) | (({ id, value }: {
+            id: string;
+            value: number;
+        }) => void);
+        reportError: (error: any) => void;
+    };
+    /** Whether the rating has loaded */
+    hasLoaded?: boolean;
+    /** Additional classes */
+    className?: string;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const RatingWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default RatingWrapper;

package/form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/form/types/index.d.ts

@@ -0,0 +1 @@
+export * from './search-form';

package/form/types/search-form/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchForm } from './search-form';

package/form/types/search-form/search-form.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    /** The id of the search form */
+    id?: string;
+    /** Data on if the search form can be toggled */
+    handleToggle?: false | {
+        searchIsOpen: boolean;
+        isDesktopVersion: boolean;
+    };
+    /** The default value of the search input */
+    defaultValue?: string;
+    /** The GTM context to use */
+    gtmContext?: string;
+    /** The GTM event to use */
+    gtmEvent?: string;
+    /** Additional classes */
+    className?: string;
+    /** The language to use */
+    locale?: string;
+}
+declare const SearchFormWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SearchFormWrapper;

package/general/button/button.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import addClasses from 'classnames';
+export type ButtonIconType = false | string | {
+    icon: string;
+    position?: 'left' | 'right';
+    hover?: string;
+    animate?: true | string;
+};
+export interface ButtonSizeType {
+    [key: string]: 'large' | 'medium' | 'small';
+}
+export type ButtonVariantType = 'primary' | 'secondary' | 'tertiary';
+export interface ButtonPropsType {
+    /** The style of the button */
+    variant?: ButtonVariantType;
+    /** The size of the button */
+    size?: 'large' | 'medium' | 'small' | ButtonSizeType;
+    /** Additional styling, such as `muted` or `full-width` */
+    styling?: {
+        muted?: boolean;
+        fullWidth?: boolean;
+    };
+    /** The icon to show on the button */
+    icon?: ButtonIconType;
+    /** The link the button should go to */
+    href?: false | string;
+    /** The element the button should be rendered as */
+    element?: string;
+    /** The function the button should run when clicked */
+    onClick?: false | ((e: React.MouseEvent<HTMLElement>) => void);
+    /** Additional classes to add to the button */
+    className?: string;
+    /** `disabled` is usually true or false, but we will want nuance in some places, for example the ability
+     * to run form validation when clicking a button, even though the button appears disabled.
+     * The `disabled` attribute can't be set in this case, or the click functionality will never run. */
+    disabled?: boolean | {
+        isClickable: boolean;
+    };
+    /** This is an optional way to pass in text which is only for screen readers
+     * It's rendered on the page (so the page is still functional without CSS, unlike ARIA labels) but hidden
+     * with CSS, for cases where the whole button should be an icon
+     * (The same effect could be handled with `children` or `className`, but we can ensure consistency by using a prop.) */
+    screenreaderText?: boolean | string;
+    /** Text for the button */
+    children?: false | string | React.ReactNode;
+    /** The target, for links */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+}
+declare const Button: ({ variant, size, styling, icon, href, element, onClick, className, disabled, screenreaderText, children, ...rest }: ButtonPropsType) => React.DOMElement<{
+    [key: string]: string | boolean | addClasses.ArgumentArray | ((e: React.MouseEvent<HTMLElement>) => void);
+}, Element>;
+export default Button;

package/general/button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonIconType, ButtonPropsType, ButtonSizeType, ButtonVariantType, } from './button';
+export { default as Button } from './button';

package/general/index.d.ts

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './link';
+export * from './responsive-image';

package/general/link/index.d.ts

@@ -0,0 +1 @@
+export { default as Link } from './link';

package/general/link/link.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface Props {
+    /** URL for link */
+    href?: string | undefined;
+    /** Content to rendered */
+    children: React.ReactNode | string;
+    /** Additonal classes */
+    className?: string;
+    /** Function to be called when clicked */
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    /** GTM event context */
+    gtmContext?: string;
+    /** GTM event type */
+    gtmType?: string;
+    /** Target for link */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Test id for link */
+    'data-testid'?: string;
+}
+declare const Link: ({ href, children, className, onClick, gtmContext, gtmType, ...props }: Props) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export default Link;

package/general/responsive-image/index.d.ts

@@ -0,0 +1,2 @@
+export type { ResponsiveImageType } from './responsive-image';
+export { default as ResponsiveImage } from './responsive-image';

package/general/responsive-image/responsive-image.helpers.d.ts

@@ -0,0 +1,68 @@
+export namespace IMAGE_ASPECTS {
+    namespace card {
+        let range: {
+            height: number;
+            width: number;
+        }[];
+        let sizes: string;
+    }
+    namespace responsiveCard {
+        let range_1: {
+            height: number;
+            width: number;
+        }[];
+        export { range_1 as range };
+        let sizes_1: string;
+        export { sizes_1 as sizes };
+    }
+    namespace banner {
+        let range_2: {
+            height: number;
+            width: number;
+        }[];
+        export { range_2 as range };
+        let sizes_2: string;
+        export { sizes_2 as sizes };
+    }
+    namespace feed {
+        let range_3: {
+            height: number;
+            width: number;
+        }[];
+        export { range_3 as range };
+        let sizes_3: string;
+        export { sizes_3 as sizes };
+    }
+    namespace fallback {
+        let range_4: {
+            height: number;
+            width: number;
+        }[];
+        export { range_4 as range };
+        let sizes_4: string;
+        export { sizes_4 as sizes };
+    }
+    namespace thumbnail {
+        let range_5: {
+            height: number;
+            width: number;
+        }[];
+        export { range_5 as range };
+        let sizes_5: string;
+        export { sizes_5 as sizes };
+    }
+}
+export function buildSourceParameters({ aspect: customAspect, range: customRange, sizes: customSizes, }: {
+    aspect: any;
+    range: any;
+    sizes: any;
+}): {
+    range: any;
+    sizes: any;
+};
+export function buildSourceSet({ format, range, url, query }: {
+    format: any;
+    range: any;
+    url: any;
+    query: any;
+}): any;

package/general/responsive-image/responsive-image.mock.d.ts

@@ -0,0 +1,9 @@
+export namespace SAMPLE_IMAGE_OBJECT {
+    let description: string;
+    let height: number;
+    let type: string;
+    let url: string;
+    let width: number;
+    let query: string;
+    let aspect: string;
+}

package/helpers/basic-reducer.d.ts

@@ -0,0 +1,2 @@
+declare function _default(state: any, action: any): any;
+export default _default;

package/helpers/breakpoints.d.ts

@@ -0,0 +1,5 @@
+import { ButtonSizeType } from '../general';
+export declare const orderBreakpoints: (sizes: string[]) => number[];
+export declare const getOption: (screenWidth: number, sizes: number[], sizesObj: ButtonSizeType | {
+    [key: string]: boolean;
+}) => boolean | "small" | "large" | "medium";

package/helpers/index.d.ts

@@ -0,0 +1,5 @@
+export { default as basicReducer } from './basic-reducer';
+export * from './breakpoints';
+export { default as IntlWrapper } from './intl-wrapper';
+export { default as passPropsToChildren } from './pass-props-to-children';
+export * from './test-utils';

package/helpers/intl-wrapper.d.ts

@@ -0,0 +1,6 @@
+export default IntlWrapper;
+declare function IntlWrapper({ children, locale, text }: {
+    children: any;
+    locale?: string | undefined;
+    text?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/helpers/pass-props-to-children.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const passPropsToChildren: (children: React.ReactElement, props: object) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export default passPropsToChildren;

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useEffectAfterMount } from './use-effect-after-mount';
+export { default as useScreenWidth } from './use-screen-width';
+export { default as useScrollListener } from './use-scroll-listener';

package/hooks/use-effect-after-mount.d.ts

@@ -0,0 +1,2 @@
+declare function _default(callback: any, dependencies: any): void;
+export default _default;

package/hooks/use-screen-width.d.ts

@@ -0,0 +1,2 @@
+declare function _default(shouldGetWidth?: boolean, shouldAddClass?: boolean): number | undefined;
+export default _default;

package/hooks/use-scroll-listener.d.ts

@@ -0,0 +1,15 @@
+declare function _default({ scrollPosition, offset, callbacks: { scrollDown, scrollUp }, }: {
+    scrollPosition?: number | undefined;
+    offset?: {
+        down: number;
+        up: number;
+    } | undefined;
+    callbacks: {
+        scrollDown?: (() => void) | undefined;
+        scrollUp?: (() => void) | undefined;
+    };
+}): {
+    current: number;
+    past: number;
+} | undefined;
+export default _default;

package/index.d.ts

@@ -1,2 +1,12 @@
-export * from './demo';
+export * from './accessibility';
+export * from './banners';
+export * from './general';
+export * from './constants';
+export * from './context';
+export * from './form';
+export * from './hooks';
 export * from './layout';
+export * from './loaders';
+export * from './navigation';
+export * from './text';
+export * from './user';