@apolitical/component-library 4.7.14 → 4.7.15-beta.1

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

@@ -30,7 +30,6 @@ $navigation: (
   navigation-menu_link_hover_bg: get-map($c, 'n50'),
   navigation-menu_link_active_bg: get-map($c, 'b100'),
   navigation-menu_link_active_box-shadow: get-map($c, 'b300'),
-  navigation-menu_profile-picture_border: get-map($c, 'n700'),
   share-links: get-map($c, 'n800'),
   share-links_muted: get-map($c, 'n600'),
   tabs: get-map($c, 'n700'),

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

@@ -13,5 +13,8 @@ $user: (
   member_highlighted_name: get-map($c, 'p500'),
   member_additional-content: get-map($c, 'n700'),
   member_small: get-map($c, 'n700'),
+  member_card: get-map($c, 'n900'),
+  member_card_profile-picture_border: get-map($c, 'n700'),
+  member_card_border: get-map($c, 'n200'),
   profile-picture_img_bg: get-map($c, 'b50'),
 );

package/user/member/member.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IProfileFormProps } from '../../form';
 export type MemberDetailsProps = {
     /** The user's unique ID */
     id?: string;
@@ -26,6 +27,8 @@ interface Props {
     element?: 'li' | 'div';
     /** Details about the Apolitical member */
     member?: MemberProps;
+    /** The alt text for the image */
+    alt?: string;
     /** Additional content to show with the member details */
     additionalContent?: false | {
         createdAt?: Date | string;
@@ -35,27 +38,33 @@ interface Props {
     styling?: {
         /** The size of the component */
         size?: 'medium' | 'large';
+        /** The type of component to render, e.g. with card styling */
+        variant?: 'inline' | 'card';
+        /** Whether the user details should be condensed into one line */
+        isCondensed?: boolean;
     };
     /** Optional functions for the wrapper */
     functions?: {
         /** Optional onclick function */
         onClick?: (e: React.MouseEvent) => void;
+        /** Props for the profile modal */
+        profile?: IProfileFormProps;
     };
+    /** The optional test ID for Jest */
+    'data-testid'?: string;
     /** The GTM context to use */
     gtmContext?: string;
     /** The GTM event to use */
     gtmType?: string;
     /** Additional classes */
     className?: string;
-    /** The language to use for the text */
-    locale?: string;
-    /** The alt text for the image */
-    alt?: string;
 }
-declare const Member: ({ element, member: memberDetails, additionalContent, styling, functions, gtmContext, gtmType, className, alt, }: Props) => React.DetailedReactHTMLElement<{
+declare const Member: ({ element, member: memberDetails, alt, additionalContent, styling, functions, gtmContext, gtmType, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     children: import("react/jsx-runtime").JSX.Element;
     /** Optional onclick function */
     onClick?: ((e: React.MouseEvent) => void) | undefined;
     className: string;
+    /** The optional test ID for Jest */
+    'data-testid'?: string | undefined;
 }, HTMLElement>;
 export default Member;

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

@@ -14,7 +14,7 @@ export declare const getMember: (member: MemberProps) => {
     url: string;
     image: string | undefined;
 };
-export declare const getJob: ({ role, organisation, country, maximumCharacters, }: {
+export declare const getUserDetails: ({ role, organisation, country, maximumCharacters, }: {
     role?: string | undefined;
     organisation?: string | undefined;
     country?: string | undefined;

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

@@ -0,0 +1,13 @@
+declare const _default: {
+    name: string;
+    id: string;
+    jobTitle: string;
+    organization: string;
+    location: {
+        country: string;
+    };
+    image: {
+        thumbnail: string;
+    };
+};
+export default _default;