@goodhood-web/ui 2.1.0-development.9 → 3.0.0-development.10

package/lib/Atoms/Badges/Badge/Badge.types.d.ts

@@ -1,9 +1,8 @@
 import { BadgeOwnProps } from '@mui/base';
 import { default as BadgeIconProps } from '../BadgeIcon/BadgeIcon.types';
-type BadgeIcon = BadgeIconProps['type'];
+export type BadgeIconType = BadgeIconProps['type'];
 export interface BadgeProps {
     ariaLabel?: string;
-    badgeIcons: [BadgeIcon] | [BadgeIcon, BadgeIcon] | [BadgeIcon, BadgeIcon, BadgeIcon];
+    badgeIcons: [BadgeIconType] | [BadgeIconType, BadgeIconType] | [BadgeIconType, BadgeIconType, BadgeIconType] | [];
     children: BadgeOwnProps['children'];
 }
-export {};

package/lib/Atoms/Badges/BadgeIcon/BadgeIcon.types.d.ts

@@ -1,8 +1,9 @@
 import { AriaRole } from 'react';
+import { BadgeIconType } from '../../../../../../api/src/lib/types/newsFeeds';
 export default interface BadgeIconProps {
     ariaLabel?: string;
     className?: string;
     role?: AriaRole;
     size: 'small' | 'medium';
-    type: 'ben' | 'localBiz' | 'localOrg' | 'supporter' | 'muted';
+    type: BadgeIconType;
 }

package/lib/Atoms/Badges/BadgeLabel/BadgeLabel.types.d.ts

@@ -5,5 +5,5 @@ export default interface BadgeLabelProps {
     buttonOnClick: TextButtonProps['onClick'];
     buttonText: string;
     text: string;
-    type: Extract<BadgeIconProps['type'], 'ben' | 'supporter' | 'muted'>;
+    type: Extract<BadgeIconProps['type'], 'is_super_neighbour' | 'is_supporter' | 'muted'>;
 }

package/lib/Atoms/Badges/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import { default as TooltipProps } from './Tooltip.types';
-declare const Tooltip: ({ children, className, hasPointer, id, position, showTooltip, text, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, className, customSpacing, hasPointer, id, position, showTooltip, text, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/lib/Atoms/Badges/Tooltip/Tooltip.types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export default interface TooltipProps {
     children: ReactNode;
     className?: string;
+    customSpacing?: string;
     hasPointer?: boolean;
     id: string;
     position?: 'top' | 'bottom';

package/lib/Atoms/Buttons/Button/Button.types.d.ts

@@ -8,6 +8,7 @@ interface CommonProps {
     className?: string;
     'data-testid'?: string;
     disabled?: boolean;
+    isToggleButton?: boolean;
     ref?: ForwardedRef<null>;
     role?: AriaRole;
     selected?: boolean;
@@ -16,7 +17,7 @@ export interface BaseButtonProps extends ButtonOwnProps, CommonProps {
     onClick: (event: MouseEvent<HTMLElement>) => void;
 }
 export interface LinkProps extends CommonProps {
-    children: ReactNode;
+    children?: ReactNode;
     href?: string;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     rel?: string;

package/lib/Atoms/Buttons/ButtonTertiary/ButtonTertiary.types.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 import { ButtonProps, ButtonVariationProps } from '../Button/Button.types';
 export interface ButtonTertiaryProps extends ButtonVariationProps, Omit<ButtonProps, 'children'> {
     children?: ReactNode;
-    color?: 'green' | 'pink' | 'blue' | 'deepPurple';
+    color?: 'green' | 'pink' | 'blue' | 'grey';
 }

package/lib/Atoms/Buttons/IconButton/IconButton.types.d.ts

@@ -1,4 +1,4 @@
-import { Icon24, Icon32 } from '../../../Base/Icon/Icon.types';
+import { Icon16, Icon24, Icon32 } from '../../../Base/Icon/Icon.types';
 import { ButtonProps } from '../Button/Button.types';
 type BaseIconButtonProps = Omit<ButtonProps, 'children' | 'ref' | 'className'> & ({
     ariaLabel: string;
@@ -9,8 +9,12 @@ type BaseIconButtonProps = Omit<ButtonProps, 'children' | 'ref' | 'className'> &
     iconClassName?: string;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'green' | 'white';
+    variant?: 'green' | 'white' | 'grey';
 };
+export type IconButtonIcon16Props = {
+    icon: Icon16;
+    size?: 'extraSmall';
+} & BaseIconButtonProps;
 export type IconButtonIcon24Props = {
     icon: Icon24;
     size?: 'small';
@@ -19,5 +23,5 @@ export type IconButtonIcon32Props = {
     icon: Icon32;
     size?: 'medium' | 'large';
 } & BaseIconButtonProps;
-export type IconButtonProps = IconButtonIcon32Props | IconButtonIcon24Props;
+export type IconButtonProps = IconButtonIcon32Props | IconButtonIcon24Props | IconButtonIcon16Props;
 export {};

package/lib/Atoms/Buttons/IconButton/utils.d.ts

@@ -1,3 +1,3 @@
-type IconButtonSize = 'large' | 'medium' | 'small';
-export declare const getIconSize: (size: IconButtonSize) => "32" | "24";
+type IconButtonSize = 'large' | 'medium' | 'small' | 'extraSmall';
+export declare const getIconSize: (size: IconButtonSize) => "32" | "24" | "16";
 export {};

package/lib/Atoms/Buttons/Tiles/FeedTile/FeedTile.d.ts

@@ -1,3 +1,3 @@
 import { default as FeedTileProps } from './FeedTile.types';
-declare const FeedTile: ({ fullWidth, icon, onClick, text }: FeedTileProps) => import("react/jsx-runtime").JSX.Element;
+declare const FeedTile: ({ ariaLabel, fullWidth, icon, onClick, text }: FeedTileProps) => import("react/jsx-runtime").JSX.Element;
 export default FeedTile;

package/lib/Atoms/Buttons/Tiles/FeedTile/FeedTile.types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { Icon32 } from '../../../../Base/Icon/Icon.types';
 import { BaseButtonProps } from '../../../Buttons/Button/Button.types';
 export default interface FeedTileProps {
+    ariaLabel?: string;
     fullWidth?: boolean;
     icon: Icon32;
     onClick?: BaseButtonProps['onClick'];

package/lib/Atoms/Buttons/Tiles/MenuTile/MenuTile.d.ts

@@ -1,3 +1,3 @@
 import { default as MenuTileProps } from './MenuTile.type';
-declare const MenuTile: ({ fullWidth, icon, primaryText, secondaryText, ...props }: MenuTileProps) => import("react/jsx-runtime").JSX.Element;
+declare const MenuTile: ({ ariaLabel, fullWidth, icon, primaryText, secondaryText, ...props }: MenuTileProps) => import("react/jsx-runtime").JSX.Element;
 export default MenuTile;

package/lib/Atoms/Buttons/Tiles/MenuTile/MenuTile.type.d.ts

@@ -1,6 +1,7 @@
 import { Icon32 } from '../../../../Base/Icon/Icon.types';
 import { ButtonProps } from '../../Button/Button.types';
 export default interface MenuTileProps extends Omit<ButtonProps, 'children'> {
+    ariaLabel?: string;
     fullWidth?: boolean;
     icon?: Icon32;
     primaryText?: string;

package/lib/Atoms/Content/BodyText/BodyText.d.ts

@@ -1,3 +1,3 @@
 import { default as BodyTextProps } from './BodyText.types';
-declare const BodyText: ({ bodyText, headlineText, type }: BodyTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const BodyText: ({ bodyText, headlineText, parseContent, type }: BodyTextProps) => import("react/jsx-runtime").JSX.Element;
 export default BodyText;

package/lib/Atoms/Content/BodyText/BodyText.types.d.ts

@@ -1,5 +1,6 @@
 export default interface BodyTextProps {
     bodyText?: string;
     headlineText?: string;
+    parseContent?: boolean;
     type: 'post' | 'modal';
 }

package/lib/Atoms/Content/GroupAvatar/GroupAvatar.d.ts

@@ -0,0 +1,3 @@
+import { GroupAvatarProps } from './GroupAvatar.types';
+declare const GroupAvatar: ({ alt, groupId, size, userImageSrc }: GroupAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupAvatar;

package/lib/Atoms/Content/GroupAvatar/GroupAvatar.types.d.ts

@@ -0,0 +1,10 @@
+import { TSquareSize } from '../Thumbnail/Thumbnail.type';
+type BaseUserAvatarProps = {
+    alt: string;
+    size: TSquareSize;
+    userImageSrc?: string;
+};
+export type GroupAvatarProps = BaseUserAvatarProps & {
+    groupId?: number;
+};
+export {};

package/lib/Atoms/Content/UserAvatarCluster/UserAvatarCluster.d.ts

@@ -0,0 +1,3 @@
+import { UserAvatarClusterProps } from './UserAvatarCluster.types';
+declare const UserAvatarCluster: ({ maxUsers, onAvatarClick, onMoreClick, size, users, }: UserAvatarClusterProps) => import("react/jsx-runtime").JSX.Element;
+export default UserAvatarCluster;

package/lib/Atoms/Content/UserAvatarCluster/UserAvatarCluster.types.d.ts

@@ -0,0 +1,42 @@
+export type User = {
+    achievements: unknown[];
+    address: string | null;
+    business_profile_id: number | null;
+    city: string;
+    created_at: string;
+    firstname: string;
+    hood_access_granted_at: string | null;
+    hood_id: number;
+    hood_sex_id: number;
+    hood_title: string;
+    house_number: string | null;
+    id: number;
+    is_business_user: boolean;
+    is_deleted: boolean;
+    is_organization_user: boolean;
+    is_super_neighbour: boolean;
+    is_supporter: boolean;
+    lastname: string;
+    organization_profile_id: number | null;
+    photo_medium_url: string;
+    photo_original_url: string;
+    photo_thumb_url: string;
+    photo_transform_params: Record<string, unknown>;
+    photo_updated_at: string;
+    photo_url: string;
+    profile_type: number;
+    salutation_id: number;
+    sex_id: number;
+    street: string | null;
+    successful_invites_count: number;
+    user_type: string;
+    view_type: string;
+    zip_code: string;
+};
+export type UserAvatarClusterProps = {
+    maxUsers?: number;
+    onAvatarClick?: (userId: number) => void;
+    onMoreClick?: () => void;
+    size: 'small' | 'medium';
+    users: User[];
+};

package/lib/Atoms/Content/UserAvatarCluster/utils.d.ts

@@ -0,0 +1,41 @@
+export declare const generateSampleUser: ({ firstname, id, lastname, photo_thumb_url, }: {
+    firstname: string;
+    id: number;
+    lastname: string;
+    photo_thumb_url: string;
+}) => {
+    achievements: never[];
+    address: null;
+    business_profile_id: null;
+    city: string;
+    created_at: string;
+    firstname: string;
+    hood: null;
+    hood_access_granted_at: null;
+    hood_id: number;
+    hood_sex_id: number;
+    hood_title: string;
+    house_number: null;
+    id: number;
+    is_business_user: boolean;
+    is_deleted: boolean;
+    is_organization_user: boolean;
+    is_super_neighbour: boolean;
+    is_supporter: boolean;
+    lastname: string;
+    organization_profile_id: null;
+    photo_medium_url: string;
+    photo_original_url: string;
+    photo_thumb_url: string;
+    photo_transform_params: {};
+    photo_updated_at: string;
+    photo_url: string;
+    profile_type: number;
+    salutation_id: number;
+    sex_id: number;
+    street: null;
+    successful_invites_count: number;
+    user_type: string;
+    view_type: string;
+    zip_code: string;
+};

package/lib/Atoms/Dropdowns/DropdownCard/DropdownCard.d.ts

@@ -0,0 +1,3 @@
+import { DropdownCardProps } from './DropdownCard.types';
+declare const DropdownCard: ({ className, hasHeader, headerProps, items, onClose, }: DropdownCardProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownCard;

package/lib/Atoms/Dropdowns/DropdownCard/DropdownCard.types.d.ts

@@ -0,0 +1,9 @@
+import { DropdownHeaderProps } from '../DropdownHeader/DropdownHeader.types';
+import { DropdownItemProps } from '../DropdownItem/DropdownItem.types';
+export type DropdownCardProps = {
+    className?: string;
+    hasHeader?: boolean;
+    headerProps?: DropdownHeaderProps;
+    items: DropdownItemProps[];
+    onClose: () => void;
+};

package/lib/Atoms/Dropdowns/DropdownItem/DropdownItem.d.ts

@@ -0,0 +1,3 @@
+import { DropdownItemProps } from './DropdownItem.types';
+declare const DropdownItem: ({ alt, isSelected, src, text, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownItem;

package/lib/Atoms/Dropdowns/{DropdownOption/DropdownOption.types.d.ts → DropdownItem/DropdownItem.types.d.ts}

@@ -1,5 +1,5 @@
 import { ButtonProps } from '../../Buttons/Button/Button.types';
-export type DropdownOptionProps = Pick<ButtonProps, 'onClick' | 'ariaLabel' | 'ariaLabelledBy' | 'disabled' | 'role'> & {
+export type DropdownItemProps = Pick<ButtonProps, 'onClick' | 'ariaLabel' | 'ariaLabelledBy' | 'disabled' | 'role'> & {
     alt?: string;
     isSelected?: boolean;
     src?: string;

package/lib/Base/Icon/Icon.types.d.ts

@@ -1,10 +1,14 @@
 import { AriaRole } from 'react';
-import { default as icons16 } from './icons/16x16';
-import { default as icons24 } from './icons/24x24';
-import { default as icons32 } from './icons/32x32';
-export type Icon32 = keyof typeof icons32;
-export type Icon24 = keyof typeof icons24;
-export type Icon16 = keyof typeof icons16;
+import { default as icons32_coloured } from './icons/coloured/32x32';
+import { default as icons16_filled } from './icons/filled/16x16';
+import { default as icons24_filled } from './icons/filled/24x24';
+import { default as icons32_filled } from './icons/filled/32x32';
+import { default as icons16_outline } from './icons/outline/16x16';
+import { default as icons24_outline } from './icons/outline/24x24';
+import { default as icons32_outline } from './icons/outline/32x32';
+export type Icon32 = keyof typeof icons32_outline | keyof typeof icons32_filled | keyof typeof icons32_coloured;
+export type Icon24 = keyof typeof icons24_outline | keyof typeof icons24_filled;
+export type Icon16 = keyof typeof icons16_outline | keyof typeof icons16_filled;
 export declare const iconNames16: string[];
 export declare const iconNames24: string[];
 export declare const iconNames32: string[];

package/lib/Base/Icon/icons/coloured/32x32/index.d.ts

@@ -0,0 +1,39 @@
+declare const IconsMap: {
+    readonly bubble_heart_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly event_calendar_plus_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly gift_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly group_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly heart_handshake_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly supporter_new_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+};
+export default IconsMap;

package/lib/Base/Icon/icons/coloured/index.d.ts

@@ -0,0 +1,43 @@
+declare const iconsMap: {
+    '16': undefined;
+    '24': undefined;
+    '32': {
+        readonly bubble_heart_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly event_calendar_plus_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly gift_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly group_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly heart_handshake_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly supporter_new_coloured: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+    };
+};
+export default iconsMap;

package/lib/Base/Icon/icons/filled/16x16/index.d.ts

@@ -0,0 +1,9 @@
+declare const IconsMap: {
+    heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+};
+export default IconsMap;

package/lib/Base/Icon/icons/filled/24x24/index.d.ts

@@ -0,0 +1,15 @@
+declare const IconsMap: {
+    readonly bookmark_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+};
+export default IconsMap;

package/lib/Base/Icon/icons/filled/32x32/index.d.ts

@@ -0,0 +1,21 @@
+declare const IconsMap: {
+    readonly heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly quotation_left_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    readonly quotation_right_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+};
+export default IconsMap;

package/lib/Base/Icon/icons/filled/index.d.ts

@@ -0,0 +1,45 @@
+declare const iconsMap: {
+    '16': {
+        heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+    };
+    '24': {
+        readonly bookmark_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+    };
+    '32': {
+        readonly heart_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly quotation_left_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+        readonly quotation_right_filled: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+            title?: string;
+            titleId?: string;
+            desc?: string;
+            descId?: string;
+        }>;
+    };
+};
+export default iconsMap;