@apolitical/component-library 4.8.4-SW.0 → 4.8.4

package/styles/variables/colors/theme/_user.scss

@@ -3,6 +3,12 @@
 
 $c: $default-colors;
 $user: (
+  badge_bg: get-map($c, 'n200'),
+  badge_bg_blue: #a2daf9,
+  badge_bg_green: #a4f9a2,
+  badge_bg_pink: #fae1f5,
+  badge_bg_purple: #e2e1fa,
+  badge_bg_orange: #f9dba2,
   contributor: get-map($c, 'n700'),
   contributor_bg: get-map($c, 'white'),
   contributor_medium_bg: get-map($c, 'n200'),

package/text/empty-state-box/empty-state-box.d.ts

@@ -7,7 +7,7 @@ interface ButtonType extends ButtonPropsType {
     };
     component?: React.ReactNode;
 }
-export interface IEmptyStateBoxProps {
+interface Props {
     /** Box styling */
     variant?: 'empty' | 'error';
     /** Optional text */
@@ -17,5 +17,5 @@ export interface IEmptyStateBoxProps {
     /** Additional classes */
     className?: string;
 }
-declare const EmptyStateBox: ({ variant, text, button, className, }: IEmptyStateBoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmptyStateBox: ({ variant, text, button, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default EmptyStateBox;

package/text/empty-state-box/index.d.ts

@@ -1,2 +1 @@
-export type { IEmptyStateBoxProps } from './empty-state-box';
 export { default as EmptyStateBox } from './empty-state-box';

package/text/hide-show-text-box/hide-show-text-box.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MarkdownToJSX } from 'markdown-to-jsx';
-export interface IHideShowTextBoxProps {
+interface Props {
     /** The language for the box text */
     locale?: string;
     /** An optional id for the box */
@@ -18,5 +18,5 @@ export interface IHideShowTextBoxProps {
     markdownOptions?: MarkdownToJSX.Options;
     children?: React.ReactNode;
 }
-declare const HideShowTextBox: ({ id, className, show, hide, text, markdownOptions, fadeStyle, children, }: IHideShowTextBoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const HideShowTextBox: ({ id, className, show, hide, text, markdownOptions, fadeStyle, children, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HideShowTextBox;

package/text/hide-show-text-box/index.d.ts

@@ -1,2 +1 @@
-export type { IHideShowTextBoxProps } from './hide-show-text-box';
 export { default as HideShowTextBox } from './hide-show-text-box';

package/text/highlighted-text-box/highlighted-text-box.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface IHighlightedTextBoxProps {
+interface Props {
     /** The style of box being rendered */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'subtle' | 'subtle-alt' | 'bold' | 'muted';
     /** The name of an icon file to display at the top */
@@ -18,5 +18,5 @@ export interface IHighlightedTextBoxProps {
     /** Additional props to pass to the box */
     style?: React.CSSProperties;
 }
-declare const HighlightedTextBoxWrapper: ({ variant, icon, styling, className, children, ...props }: IHighlightedTextBoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const HighlightedTextBoxWrapper: ({ variant, icon, styling, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HighlightedTextBoxWrapper;

package/text/highlighted-text-box/index.d.ts

@@ -1,2 +1 @@
-export type { IHighlightedTextBoxProps } from './highlighted-text-box';
 export { default as HighlightedTextBox } from './highlighted-text-box';

package/user/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    /** The slug of the badge */
+    slug: string;
+}
+declare const Badge: React.FC<Props>;
+export default Badge;

package/user/badge/icon-mapping.d.ts

@@ -0,0 +1,11 @@
+export interface IconMapping {
+    [key: string]: string;
+}
+declare const iconMapping: {
+    globe: string;
+    heart: string;
+    pencil: string;
+    star: string;
+    'speech-bubble': string;
+};
+export default iconMapping;

package/user/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge';
+export { BadgeScope, type IBadgesObject } from './interface/badge.interfaces';

package/user/badge/interface/badge.interfaces.d.ts

@@ -0,0 +1,9 @@
+export declare enum BadgeScope {
+    COMMUNITIES = "communities",
+    PLATFORM = "platform"
+}
+export type IBadgesObject = {
+    [key in BadgeScope.PLATFORM | BadgeScope.COMMUNITIES]: {
+        [key: string]: string[];
+    };
+};

package/user/badges/badges.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IBadgesOption } from './badges.interface';
+import { IBadgesObject } from '../badge/interface/badge.interfaces';
+interface Props {
+    element?: 'span' | 'div';
+    /** The user badges */
+    userBadges: IBadgesObject;
+    /** The badge options */
+    badgeOptions: IBadgesOption;
+}
+declare const Badges: React.FC<Props>;
+export default Badges;

package/user/badges/badges.interface.d.ts

@@ -0,0 +1,10 @@
+import { BadgeScope } from '../badge/interface/badge.interfaces';
+export interface IBadgesOption {
+    showBadges?: boolean;
+    scope?: BadgeScope.PLATFORM | BadgeScope.COMMUNITIES;
+    area?: string;
+    scopes?: {
+        scope: BadgeScope.PLATFORM | BadgeScope.COMMUNITIES;
+        area: string;
+    }[];
+}

package/user/badges/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badges } from './badges';
+export type { IBadgesOption } from './badges.interface';

package/user/member/member.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { type IProfileFormProps } from '../../form';
+import { IBadgesObject } from '../badge';
+import { IBadgesOption } from '../badges';
 export type MemberDetailsProps = {
     /** The user's unique ID */
     id?: string;
@@ -22,6 +24,8 @@ export type MemberDetailsProps = {
     };
     /** An error, shown if the user doesn't exist */
     error?: string;
+    /** The user's badges */
+    badges?: IBadgesObject;
 };
 export type MemberProps = 'apolitical' | 'community' | 'deleted' | MemberDetailsProps;
 interface Props {
@@ -36,6 +40,8 @@ interface Props {
         createdAt?: Date | string;
         didEdit?: boolean;
     };
+    /** Whether to show badges and the scope of the badge */
+    badges?: IBadgesOption;
     /**  Optional styling */
     styling?: {
         /** The size of the component */
@@ -61,7 +67,7 @@ interface Props {
     /** Additional classes */
     className?: string;
 }
-declare const Member: ({ element, member: memberDetails, alt, additionalContent, styling, functions, gtmContext, gtmType, className, ...props }: Props) => React.DetailedReactHTMLElement<{
+declare const Member: ({ element, member: memberDetails, alt, additionalContent, styling, functions, gtmContext, gtmType, className, badges, ...props }: Props) => React.DetailedReactHTMLElement<{
     children: import("react/jsx-runtime").JSX.Element;
     /** Optional onclick function */
     onClick?: ((e: React.MouseEvent) => void) | undefined;

package/user/member/member.helpers.d.ts

@@ -6,6 +6,7 @@ export declare const getMember: (member: MemberProps) => {
     organisation?: undefined;
     country?: undefined;
     url?: undefined;
+    badges?: undefined;
 } | {
     name: string | undefined;
     role: string;
@@ -13,6 +14,7 @@ export declare const getMember: (member: MemberProps) => {
     country: string;
     url: string;
     image: string | undefined;
+    badges: import("../badge").IBadgesObject | undefined;
 };
 export declare const getUserDetails: ({ role, organisation, country, maximumCharacters, }: {
     role?: string | undefined;

package/user/member/member.mock.d.ts

@@ -9,5 +9,13 @@ declare const _default: {
     image: {
         thumbnail: string;
     };
+    badges: {
+        platform: {
+            all: string[];
+        };
+        communities: {
+            'community-slug': string[];
+        };
+    };
 };
 export default _default;

package/user/profile-picture/index.d.ts

@@ -1,2 +1 @@
-export type { IProfilePictureProps } from './profile-picture';
 export { default as ProfilePicture } from './profile-picture';

package/user/profile-picture/profile-picture.d.ts

@@ -1,4 +1,4 @@
-export interface IProfilePictureProps {
+interface Props {
     /** The user's name, to create initials */
     name: string;
     /** The user's image */
@@ -16,5 +16,5 @@ export interface IProfilePictureProps {
     /** Optional test ID */
     'data-testid'?: string;
 }
-declare const ProfilePicture: ({ className, src, name, alt, width, height, showInitials, ...props }: IProfilePictureProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProfilePicture: ({ className, src, name, alt, width, height, showInitials, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProfilePicture;