@apolitical/component-library 4.7.17-4765.3 → 4.7.17-ac.10

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

@@ -1,9 +1,9 @@
 @import './../../../functions';
-@import 'assistant', 'banners', 'base', 'cards', 'communities', 'courses', 'discussion',
-  'form', 'general', 'layout', 'loaders', 'modals', 'navigation', 'pages', 'sections',
-  'text', 'user';
+@import 'banners', 'base', 'cards', 'communities', 'courses', 'discussion', 'form',
+  'general', 'layout', 'loaders', 'modals', 'navigation', 'pages', 'sections', 'text',
+  'user';
 
 $theme: merge-maps(
-  $assistant $banners $base $cards $communities $courses $discussion $form $general
-    $layout $loaders $modals $navigation $pages $sections $text $user
+  $banners $base $cards $communities $courses $discussion $form $general $layout $loaders
+    $modals $navigation $pages $sections $text $user
 );

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

@@ -18,8 +18,6 @@ $text: (
   helper-text-box_warning_bg: get-map($c, 'warning50'),
   helper-text-box_error_bg: get-map($c, 'error50'),
   helper-text-box_success_bg: get-map($c, 'success50'),
-  hide-show-text-box_gradient:
-    linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
   highlighted-text-box_bg: get-map($c, 'n50'),
   highlighted-text-box_secondary_bg: get-map($c, 'y50'),
   highlighted-text-box_tertiary_bg: get-map($c, 'error50'),
@@ -28,6 +26,8 @@ $text: (
   highlighted-text-box_subtle-alt_dark_bg: get-map($c, 'n50'),
   highlighted-text-box_bold_bg:
     linear-gradient(135deg, get-map($c, 'b100'), get-map($c, 'g50')),
+  highlighted-text-box_subtle_gradient:
+    linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
   highlighted-text-box_bold_icon: get-map($c, 'b500'),
   highlighted-text-box_subtle_border: get-map($c, 'n100'),
   highlighted-text-box_subtle-alt_border: get-map($c, 'n200'),

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/hide-show-text-box/hide-show-text-box.d.ts

@@ -13,10 +13,8 @@ interface Props {
     hide?: string | false;
     /** The content to show when the section is expanded */
     text: string;
-    /** Fade style to hide the text */
-    fadeStyle?: 'default' | 'none';
     markdownOptions?: MarkdownToJSX.Options;
     children?: React.ReactNode;
 }
-declare const HideShowTextBox: ({ id, className, show, hide, text, markdownOptions, fadeStyle, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HideShowTextBox: ({ id, className, show, hide, text, markdownOptions, children, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default HideShowTextBox;

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",
+    ALL = "all"
+}
+export type IBadgesObject = {
+    [key in BadgeScope.ALL | 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,6 @@
+import { BadgeScope } from '../badge/interface/badge.interfaces';
+export interface IBadgesOption {
+    showBadges?: boolean;
+    scope?: BadgeScope.ALL | 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: {
+        all: {
+            all: string[];
+        };
+        communities: {
+            'community-slug': string[];
+        };
+    };
 };
 export default _default;

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

@@ -1,11 +0,0 @@
-@use 'sass:color';
-@import './../colors';
-@import './../../../functions';
-
-$c: $default-colors;
-$assistant: (
-  ai_assistant_heading_text: get-map($c, 'n900'),
-  ai_assistant_button_text: get-map($c, 'n600'),
-  ai_assistant_button_box_shadow: color.adjust(get-map($c, 'n800'), $alpha: -0.9),
-  ai_assistant_border: get-map($c, 'n100'),
-);