@apolitical/component-library 4.4.0 → 4.5.0-beta.1

package/discussion/components/add-post/add-post.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-import { IDiscussionForm } from '../../../discussion/components/form';
+import { type IDiscussionForm } from '../../../discussion/components/form';
 interface Props {
+    /** Whether the form should be displayed as a card */
+    isCard?: boolean;
     /** Props for the form - this uses everything the `DiscussionForm` component does */
     form: IDiscussionForm;
     /** Details about what a user needs to have to be able to access the form */

package/discussion/components/discussion-form-card/discussion-form-card.d.ts

@@ -0,0 +1,14 @@
+import { type IDiscussionForm } from './../form';
+interface Props {
+    /** Force elements to show */
+    forceShow?: {
+        /** Force the modal to show, e.g. when there's a parameter in the url */
+        modal?: boolean;
+    };
+    /** Props for the DiscussionForm component */
+    form: IDiscussionForm;
+    /** Additional classes */
+    className?: string;
+}
+declare const DiscussionFormCard: ({ forceShow, form, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DiscussionFormCard;

package/discussion/components/discussion-form-card/index.d.ts

@@ -0,0 +1 @@
+export { default as DiscussionFormCard } from './discussion-form-card';

package/discussion/components/form/components/guidelines/guidelines.d.ts

@@ -0,0 +1,13 @@
+import { IDiscussionContentType } from './../../../../discussion.d';
+interface Props {
+    /** The internationalisation path for the guidelines */
+    intlPath: string;
+    /** Whether to show the guidelines */
+    showGuidelines: boolean;
+    /** The content type */
+    type: IDiscussionContentType;
+    /** The Google Tag Manager context */
+    gtmContext: string;
+}
+declare const Guidelines: ({ intlPath, showGuidelines, type, gtmContext }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default Guidelines;

package/discussion/components/form/components/guidelines/index.d.ts

@@ -0,0 +1 @@
+export { default as Guidelines } from './guidelines';

package/discussion/components/form/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './guidelines';
+export * from './label';

package/discussion/components/form/components/label/index.d.ts

@@ -0,0 +1 @@
+export { default as Label } from './label';

package/discussion/components/form/components/label/label.d.ts

@@ -0,0 +1,13 @@
+import { IDiscussionContentType } from './../../../../discussion.d';
+interface Props {
+    /** The ID of the form */
+    formID: string;
+    /** The internationalisation path for the label */
+    intlPath: string;
+    /** Whether the label should show visually */
+    showLabel: boolean;
+    /** The content type */
+    type: IDiscussionContentType;
+}
+declare const Label: ({ formID, intlPath, showLabel, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/discussion/components/form/form.d.ts

@@ -1,66 +1,102 @@
-import { type ListMembers } from '../../../form';
-import { DiscussionCreateContentFunction, IDiscussionContent, IMentions } from './../../discussion';
+import {
+ type ListMembers,
+} from '@/components/form';
+
+import {
+  DiscussionCreateContentFunction,
+  IDiscussionContent,
+  IMentions,
+} from './../../discussion';
+
+export interface IDiscussionFormMeta {
+  /** Whether the form data is still loading */
+  isLoading?: boolean;
+
+  /** Whether the form is in a wrapper or not - used for styling */
+  isInWrapper?: boolean;
+
+  /** Whether the form should be autofocused. (It will always be autofocused when `isEditing`. */
+  isAutoFocused?: boolean;
+
+  /** Whether we're editing or creating */
+  isEditing: false | { text?: string };
+
+  /** Whether the form has a title field */
+  hasTitleField?: false | { text?: string };
+
+  /** Whether the form is prepopulated with text (different to isEditing, as we want different buttons and text to show */
+  isPrepopulated: false | { text?: string };
+
+  /** Whether title text should show above the form */
+  showTitle?: boolean;
+
+  /** Whether the community guidelines text should show beneath the form */
+  showGuidelines?: boolean;
+
+  /** Whether to show a divider before the buttons */
+  showDivider?: boolean;
+
+  /** Whether the success message should show on a successful submit */
+  showSuccessMessage?: boolean;
+}
+
 export interface IDiscussionForm {
-    /** A unique ID for the form */
-    id?: string;
-    /** Information about the content being created/edited */
-    content: IDiscussionContent;
-    /** If the user has permission to interact with the form, e.g. if they're a member of the community */
-    userHasPermissions?: boolean;
-    /** Information about the form */
-    meta?: {
-        /** Whether the form data is still loading */
-        isLoading?: boolean;
-        /** Whether the form is in a wrapper or not - used for styling */
-        isInWrapper?: boolean;
-        /** Whether the form should be autofocused. (It will always be autofocused when `isEditing`. */
-        isAutoFocused?: boolean;
-        /** Whether we're editing or creating */
-        isEditing: false | {
-            text?: string;
-        };
-        /** Whether the form is prepopulated with text (different to isEditing, as we want different buttons and text to show */
-        isPrepopulated: false | {
-            text?: string;
-        };
-        /** Whether the title should show */
-        showTitle?: boolean;
-        /** Whether the success message should show on a successful submit */
-        showSuccessMessage?: boolean;
-    };
-    /** The placeholder text - this defaults to the intl text */
-    placeholder?: string;
-    /** The maximum number of characters */
-    maxLength?: number;
-    /** Force elements on the form to show, regardless of the form state */
-    forceShow?: {
-        /** If the cancel button should always show */
-        cancel?: boolean;
-        /** If an error, created externally, should always show */
-        error?: false | string;
-    };
-    /** The functions that are passed in to handle the functionality */
-    functions: {
-        create: DiscussionCreateContentFunction;
-        handleSaveEdit?: ((arg?: string) => Promise<void>) | (() => void);
-        handleCancel?: () => void;
-        callback?: (args: void) => void;
-        listMembers?: ListMembers;
-        props?: {
-            create: {
-                projectNames: ['questions-answers'];
-            };
-        };
+  /** A unique ID for the form */
+  id?: string;
+
+  /** Information about the content being created/edited */
+  content: IDiscussionContent;
+
+  /** If the user has permission to interact with the form, e.g. if they're a member of the community */
+  userHasPermissions?: boolean;
+
+  /** Information about the form */
+  meta?: IDiscussionFormMeta;
+
+  /** The placeholder text - this defaults to the intl text */
+  placeholder?: string;
+
+  /** The maximum number of characters */
+  maxLength?: number;
+
+  /** The buttons at the bottom of the form */
+  buttons?: {
+    /** Text for the cancel button */
+    cancel?: string;
+    /** Text for the submit button */
+    submit?: string;
+  };
+
+  /** Force elements on the form to show, regardless of the form state */
+  forceShow?: {
+    /** If the cancel button should always show */
+    cancel?: boolean;
+    /** If an error, created externally, should always show */
+    error?: false | string;
+  };
+
+  /** The functions that are passed in to handle the functionality */
+  functions: {
+    create: DiscussionCreateContentFunction;
+    handleSaveEdit?: (({ title: string, body: string }) => Promise<void>) | (() => void);
+    handleCancel?: () => void;
+    callback?: (args: void) => void;
+    listMembers?: ListMembers;
+
+    props?: {
+      create: { projectNames: ['questions-answers'] };
     };
-    /** Data to be passed into the rich text editor */
-    data?: {
-        /** Mentions data */
-        mentions?: IMentions;
-    };
-    /** The context for GTM */
-    gtmContext?: string;
-    /** The language to use for the text */
-    locale?: string;
-}
-declare const Form: ({ id, content, userHasPermissions, meta, placeholder, maxLength, forceShow, functions, data, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
-export default Form;
+  };
+
+  /** Data to be passed into the rich text editor */
+  data?: {
+    /** Mentions data */
+    mentions?: IMentions;
+  };
+
+  /** The context for GTM */
+  gtmContext?: string;
+
+  /** The language to use for the text */
+  locale?: string;
+}

package/discussion/components/form/index.d.ts

@@ -1,2 +1,2 @@
-export type { IDiscussionForm } from './form';
+export type { IDiscussionForm, IDiscussionFormMeta } from './form.d';
 export { default as DiscussionForm } from './form';

package/discussion/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './add-post';
 export * from './conversation';
+export * from './discussion-form-card';
 export * from './form';
 export * from './likes';
 export * from './post';

package/discussion/sections/activity-section/cache/hooks/edit/edit.hook.d.ts

@@ -1,7 +1,8 @@
 import type { IMutationContext } from '../../../../../../discussion/shared';
 import type { ICache } from '../..';
 interface IEditVars {
+    title?: string;
     content: string;
 }
-export declare function useEditActivity({ mutationFn, mutationHandlers: { mutate: mutateWrapper, error: onError, }, }: IMutationContext<ICache, Error, IEditVars, ICache>): import("@tanstack/react-query/build/legacy/types").UseMutateFunction<import('../../../../../../discussion/shared').IActivity, Error, IEditVars, import('../../../../../../discussion/shared').IActivity>;
+export declare function useEditActivity({ mutationFn, mutationHandlers: { mutate: mutateWrapper, error: onError }, }: IMutationContext<ICache, Error, IEditVars, ICache>): import("@tanstack/react-query/build/legacy/types").UseMutateFunction<import('../../../../../../discussion/shared').IActivity, Error, IEditVars, import('../../../../../../discussion/shared').IActivity>;
 export {};

package/form/components/form/components/fields/checkbox/checkbox.d.ts

@@ -30,7 +30,7 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
     options?: import("../../../form.types").IFieldOption[] | undefined;
     placeholder?: string | undefined;
     props?: {
-        [key: string]: string | boolean | object | React.RefObject<any> | (() => void);
+        [key: string]: string | number | boolean | object | React.RefObject<any> | (() => void);
     } | undefined;
     required?: boolean | undefined;
     submitOnEnter?: boolean | undefined;

package/form/components/form/components/fields/input/input.d.ts

@@ -38,7 +38,7 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     } | undefined;
     options?: import("../../../form.types").IFieldOption[] | undefined;
     props?: {
-        [key: string]: string | boolean | object | React.RefObject<any> | (() => void);
+        [key: string]: string | number | boolean | object | React.RefObject<any> | (() => void);
     } | undefined;
     required?: boolean | undefined;
     shownValue?: InputValues | undefined;

package/form/components/form/form.d.ts

@@ -1,3 +1,3 @@
 import { IFormProps } from './form.types';
-declare const Form: ({ element, fields, className, id: formId, formRef: ref, intlPath, button, secondaryActionButton, meta, gtm, functions: { onSuccess, onCancel, onCatch, onFailure, }, ...props }: IFormProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Form: ({ element, fields, className, id: formId, formRef: ref, intlPath, button, secondaryActionButton, meta, children, gtm, functions: { onSuccess, onCancel, onCatch, onFailure, }, ...props }: IFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Form;

package/form/components/form/form.types.d.ts

@@ -142,7 +142,7 @@ export interface IField {
     placeholder?: string;
     /** Additional props to be passed to the field */
     props?: {
-        [key: string]: string | boolean | object | (() => void) | React.RefObject<any>;
+        [key: string]: string | boolean | number | object | (() => void) | React.RefObject<any>;
     };
     /** Whether the field is required */
     required?: boolean;
@@ -166,6 +166,8 @@ export interface FormButtonPropsType extends ButtonPropsType {
     customOnSubmit?: React.ReactNode | false;
     /** The text to show on the button */
     text?: string;
+    /** Whether the `text` should replace the `submitting` state of the button */
+    overwriteSubmittingText?: boolean;
     /** The option to not have the submit button at all */
     hideButton?: boolean;
 }
@@ -208,6 +210,8 @@ export interface IFormProps {
     meta?: {
         /** Whether the form should reset after submission */
         shouldReset?: boolean;
+        /** Whether the form should hide after submission */
+        shouldHide?: boolean;
         /** Whether the form should show required labels */
         showRequiredLabels?: boolean;
         /** Whether the form should show success message*/
@@ -215,6 +219,10 @@ export interface IFormProps {
         /** Whether the form should show cancel button */
         shouldShowCancelButton?: boolean;
     };
+    /** Optional children */
+    children?: React.ReactNode;
+    /** An ID for jest tests */
+    'data-testid'?: string;
 }
 export interface IFieldWrapper extends IField {
     /** The error to show */

package/form/components/form/index.d.ts

@@ -1 +1,2 @@
 export { default as Form } from './form';
+export type { IField, FormValues } from './form.types';

package/form/components/rich-text-editor/helpers/transform/transform.d.ts

@@ -11,9 +11,9 @@ export default function transform<T extends InputNodeTypes>(node: MdastNode, opt
     url?: string | undefined;
     position?: any;
     checked?: any;
+    lang?: string | undefined;
     ordered?: boolean | undefined;
     depth?: 1 | 2 | 3 | 4 | 6 | 5 | undefined;
-    lang?: string | undefined;
     spread?: any;
     indent?: any;
     text: string | undefined;

package/helpers/intl.d.ts

@@ -110,9 +110,13 @@ export declare const checkIntlPathExists: (path: string, language?: {
     discussion_reply: string;
     discussion_report_subject: string;
     discussion_report_body: string;
+    discussionFormCard_placeholder: string;
     discussion_form_title: string;
+    discussion_form_titleField_label: string;
+    discussion_form_titleField_error: string;
     discussion_form_placeholder: string;
     discussion_form_label: string;
+    discussion_form_label_action: string;
     discussion_form_explainer: string;
     discussion_form_success: string;
     discussion_form_post: string;
@@ -370,6 +374,8 @@ export declare const checkIntlPathExists: (path: string, language?: {
     loadingBlock_almostDone: string;
     loadingBlock_complete: string;
     progressBar: string;
+    discussionPostModal_title: string;
+    discussionPostModal_cta: string;
     inviteModal_title: string;
     inviteModal_formTitle: string;
     inviteModal_formLabel: string;

package/helpers/urls.d.ts

@@ -2,3 +2,4 @@ export declare const getFullAndPrettyUrl: (url: string) => {
     full: string;
     pretty: string;
 };
+export declare const getSearchParam: (param: string) => string | null;