@apolitical/component-library 4.8.3 → 4.8.4-ac.0

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/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,8 @@
+import { BadgeScope } from '../badge/interface/badge.interfaces';
+export interface IBadgesOption {
+    showBadges?: boolean;
+    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;