@apolitical/component-library 4.1.4 → 4.1.6-SW.0

package/cards/cards.types.d.ts

@@ -68,6 +68,8 @@ export interface CardType {
         isMember: boolean;
         count: number;
     };
+    /** Is the content private  */
+    isPrivate?: boolean;
 }
 export interface MockCardType extends CardType {
     cardType?: string;

package/communities/community-details/community-details.d.ts

@@ -3,6 +3,8 @@ import { IJoinButtonProps } from './../join-button';
 interface Props extends IJoinButtonProps {
     /** If the user is a member of the community */
     isMember?: boolean;
+    /** If the community is open */
+    isOpen?: boolean;
     /** The slug for the community */
     slug: string;
     /** Details about members in the community */
@@ -19,5 +21,5 @@ interface Props extends IJoinButtonProps {
     /** Additional classes */
     className?: string;
 }
-declare const CommunityDetails: ({ className, isMember, slug, members: { number: membersCount, data: membersData }, functions: { invite, ...membershipFunctions }, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CommunityDetails: ({ className, isMember, isOpen, slug, members: { number: membersCount, data: membersData }, functions: { invite, ...membershipFunctions }, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CommunityDetails;

package/communities/join-button/join-button.d.ts

@@ -1,8 +1,12 @@
 export interface IJoinButtonProps {
     /** If the user is a member of the community */
     isMember?: boolean;
+    /** If the community is open */
+    isOpen?: boolean;
     /** If the button should use the short version of the text */
     isShort?: boolean;
+    /** If the button is disabled */
+    disabled?: boolean;
     /** The function to call when the user clicks the button */
     functions?: {
         /** The function to request to join */
@@ -13,5 +17,5 @@ export interface IJoinButtonProps {
     /** The language to use */
     locale?: string;
 }
-declare const JoinButton: ({ isMember: userIsMember, isShort, functions: { join, leave }, }: IJoinButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const JoinButton: ({ isMember: userIsMember, isOpen, isShort, disabled, functions: { join, leave }, }: IJoinButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default JoinButton;

package/form/components/character-limit/character-limit.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    /** The limit of characters allowed in the field */
+    limit: number;
+    /** The number of characters in the field value */
+    valueLength: number;
+};
+declare const CharacterLimit: ({ limit, valueLength }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default CharacterLimit;

package/form/components/character-limit/character-limit.helpers.d.ts

@@ -0,0 +1,5 @@
+import { FieldOnChange, IFieldFunctions } from '../../../form/components/form/form.types';
+export declare const getValueLength: (value: string | number | boolean | null | undefined) => number;
+export declare const getCharacterLimitProps: (limit: number, onChange?: FieldOnChange | null) => {
+    [key: string]: number | IFieldFunctions;
+};

package/form/components/character-limit/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CharacterLimit } from './character-limit';
+export * from './character-limit.helpers';

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

@@ -59,6 +59,28 @@ export interface IFieldValidation {
     condition: FieldValidationConditions;
     error?: string;
 }
+export type FieldOnChange = (arg1: FormValues, arg2?: ({ type, payload, }: {
+    type: string;
+    payload?: {
+        [key: string]: string | boolean;
+    };
+}) => void) => void;
+export interface IFieldFunctions {
+    /** The function to call when the field changes */
+    onChange: FieldOnChange;
+    /** The function to call when the field is submitted */
+    onMultiSelectSubmit?: (arg1: FormValues) => void;
+    /** The function to call when the field is blurred */
+    onBlur?: () => void;
+    /** The function to call when the field is focused */
+    onFocus?: () => void;
+    /** The function to call when a key is pressed */
+    onKeyInput?: <T>(arg1: FormValues) => Promise<T>;
+    /** The function to call when a key is pressed */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    /** The function to call when the form is submitted from a field */
+    submitForm?: (arg: IFormValues) => void;
+}
 export interface IField {
     /** Optional ID of the element which describes this field, for screen readers */
     'aria-describedby'?: string;
@@ -83,27 +105,7 @@ export interface IField {
     /** What element to render the field as, defaulting to `input` */
     element?: string;
     /** The functions being passed to the field */
-    functions?: {
-        /** The function to call when the field changes */
-        onChange: (arg1: FormValues, arg2?: ({ type, payload, }: {
-            type: string;
-            payload?: {
-                [key: string]: string | boolean;
-            };
-        }) => void) => void;
-        /** The function to call when the field is submitted */
-        onMultiSelectSubmit?: (arg1: FormValues) => void;
-        /** The function to call when the field is blurred */
-        onBlur?: () => void;
-        /** The function to call when the field is focused */
-        onFocus?: () => void;
-        /** The function to call when a key is pressed */
-        onKeyInput?: <T>(arg1: FormValues) => Promise<T>;
-        /** The function to call when a key is pressed */
-        onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-        /** The function to call when the form is submitted from a field */
-        submitForm?: (arg: IFormValues) => void;
-    };
+    functions?: IFieldFunctions;
     /** The Google Tag Manager data to be passed to the field */
     gtm?: {
         /** The context of the event for GTM */

package/form/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './character-limit';
 export * from './email-helper-text-box';
 export * from './form';
 export * from './password-rules';

package/form/components/rich-text-editor/components/toolbar/toolbar.data.d.ts

@@ -1,3 +1,3 @@
-import { BlockOptionType, MarkOptionType } from '../../../../../form/components/rich-text-editor/rich-text-editor.types';
+import { BlockOptionType, MarkOptionType } from './../../rich-text-editor.types';
 export declare const marks: MarkOptionType[];
 export declare const blocks: BlockOptionType[];

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

@@ -1,12 +1,13 @@
+import { Formatting, Marks } from './../../rich-text-editor.types';
 export interface NodeTypes {
-    paragraph: string;
-    block_quote: string;
-    code_block: string;
-    link: string;
-    ul_list: string;
-    ol_list: string;
-    listItem: string;
-    heading: {
+    [Formatting.paragraph]: string;
+    [Formatting.blockquote]: string;
+    [Formatting.codeblock]: string;
+    [Formatting.link]: string;
+    [Formatting.ul]: string;
+    [Formatting.ol]: string;
+    [Formatting.li]: string;
+    [Formatting.heading]: {
         1: string;
         2: string;
         3: string;
@@ -14,21 +15,38 @@ export interface NodeTypes {
         5: string;
         6: string;
     };
-    emphasis_mark: string;
-    strong_mark: string;
-    delete_mark: string;
-    inline_code_mark: string;
-    thematic_break: string;
-    image: string;
+    [Marks.emphasis]: string;
+    [Marks.strong]: string;
+    [Marks.delete]: string;
+    [Marks.code]: string;
+    [Formatting.hr]: string;
+    [Formatting.image]: string;
 }
-export type MdastNodeType = 'paragraph' | 'heading' | 'list' | 'listItem' | 'link' | 'image' | 'blockquote' | 'code' | 'html' | 'emphasis' | 'strong' | 'delete' | 'inlineCode' | 'thematicBreak' | 'text';
+export declare enum MdastNodes {
+    paragraph = "paragraph",
+    heading = "heading",
+    list = "list",
+    listItem = "listItem",
+    link = "link",
+    image = "image",
+    blockquote = "blockquote",
+    code = "code",
+    html = "html",
+    emphasis = "emphasis",
+    strong = "strong",
+    delete = "delete",
+    inlineCode = "inlineCode",
+    thematicBreak = "thematicBreak",
+    text = "text"
+}
+export type MdastNodeType = MdastNodes.paragraph | MdastNodes.heading | MdastNodes.list | MdastNodes.listItem | MdastNodes.link | MdastNodes.image | MdastNodes.blockquote | MdastNodes.code | MdastNodes.html | MdastNodes.emphasis | MdastNodes.strong | MdastNodes.delete | MdastNodes.inlineCode | MdastNodes.thematicBreak | MdastNodes.text;
 export declare const defaultNodeTypes: NodeTypes;
 export interface LeafType {
     text: string;
-    strikeThrough?: boolean;
-    bold?: boolean;
-    italic?: boolean;
-    code?: boolean;
+    [Formatting.strikethrough]?: boolean;
+    [Formatting.bold]?: boolean;
+    [Formatting.italic]?: boolean;
+    [Formatting.code]?: boolean;
     parentType?: string;
 }
 export interface BlockType {
@@ -41,14 +59,14 @@ export interface BlockType {
     children: Array<BlockType | LeafType>;
 }
 export interface InputNodeTypes {
-    paragraph: string;
-    block_quote: string;
-    code_block: string;
-    link: string;
-    ul_list: string;
-    ol_list: string;
-    listItem: string;
-    heading: {
+    [Formatting.paragraph]: string;
+    [Formatting.blockquote]: string;
+    [Formatting.codeblock]: string;
+    [Formatting.link]: string;
+    [Formatting.ul]: string;
+    [Formatting.ol]: string;
+    [Formatting.li]: string;
+    [Formatting.heading]: {
         1: string;
         2: string;
         3: string;
@@ -56,12 +74,12 @@ export interface InputNodeTypes {
         5: string;
         6: string;
     };
-    emphasis_mark: string;
-    strong_mark: string;
-    delete_mark: string;
-    inline_code_mark: string;
-    thematic_break: string;
-    image: string;
+    [Marks.emphasis]: string;
+    [Marks.strong]: string;
+    [Marks.delete]: string;
+    [Marks.code]: string;
+    [Formatting.hr]: string;
+    [Formatting.image]: string;
 }
 type RecursivePartial<T> = {
     [P in keyof T]?: RecursivePartial<T[P]>;
@@ -91,65 +109,65 @@ export type TextNode = {
     text?: string | undefined;
 };
 export type CodeBlockNode<T extends InputNodeTypes> = {
-    type: T['code_block'];
+    type: T[Formatting.codeblock];
     language: string | undefined;
     children: Array<TextNode>;
 };
 export type HeadingNode<T extends InputNodeTypes> = {
-    type: T['heading'][1] | T['heading'][2] | T['heading'][3] | T['heading'][4] | T['heading'][5] | T['heading'][6];
+    type: T[Formatting.heading][1] | T[Formatting.heading][2] | T[Formatting.heading][3] | T[Formatting.heading][4] | T[Formatting.heading][5] | T[Formatting.heading][6];
     children: Array<DeserializedNode<T>>;
 };
 export type ListNode<T extends InputNodeTypes> = {
-    type: T['ol_list'] | T['ul_list'];
+    type: T[Formatting.ol] | T[Formatting.ul];
     children: Array<DeserializedNode<T>>;
 };
 export type ListItemNode<T extends InputNodeTypes> = {
-    type: T['listItem'];
+    type: T[Formatting.li];
     children: Array<DeserializedNode<T>>;
 };
 export type ParagraphNode<T extends InputNodeTypes> = {
-    type: T['paragraph'];
+    type: T[Formatting.paragraph];
     break?: true;
     children: Array<DeserializedNode<T>>;
 };
 export type LinkNode<T extends InputNodeTypes> = {
-    type: T['link'];
+    type: T[Formatting.link];
     children: Array<DeserializedNode<T>>;
     [urlKey: string]: string | undefined | Array<DeserializedNode<T>>;
 };
 export type ImageNode<T extends InputNodeTypes> = {
-    type: T['image'];
+    type: T[Formatting.image];
     children: Array<DeserializedNode<T>>;
     [sourceOrCaptionKey: string]: string | undefined | Array<DeserializedNode<T>>;
 };
 export type BlockQuoteNode<T extends InputNodeTypes> = {
-    type: T['block_quote'];
+    type: T[Formatting.blockquote];
     children: Array<DeserializedNode<T>>;
 };
 export type InlineCodeMarkNode<T extends InputNodeTypes> = {
-    type: T['inline_code_mark'];
+    type: T[Marks.code];
     children: Array<TextNode>;
     language: string | undefined;
 };
 export type ThematicBreakNode<T extends InputNodeTypes> = {
-    type: T['thematic_break'];
+    type: T[Formatting.hr];
     children: Array<DeserializedNode<T>>;
 };
 export type ItalicNode<T extends InputNodeTypes> = {
-    [K in T['emphasis_mark']]: true;
+    [K in T[Marks.emphasis]]: true;
 } & {
     children: TextNode;
 };
 export type BoldNode = {
-    bold: true;
+    [Formatting.bold]: true;
     children: TextNode;
 };
 export type StrikeThoughNode = {
-    strikeThrough: true;
+    [Formatting.strikethrough]: true;
     children: TextNode;
 };
 export type InlineCodeNode = {
-    code: true;
+    [Formatting.code]: true;
     text: string | undefined;
 };
 export type DeserializedNode<T extends InputNodeTypes> = CodeBlockNode<T> | HeadingNode<T> | ListNode<T> | ListItemNode<T> | ParagraphNode<T> | LinkNode<T> | ImageNode<T> | BlockQuoteNode<T> | InlineCodeMarkNode<T> | ThematicBreakNode<T> | ItalicNode<T> | BoldNode | StrikeThoughNode | InlineCodeNode | TextNode;

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

@@ -0,0 +1,3 @@
+import { BaseEditor } from 'slate';
+export declare const getSelectedText: (editor: BaseEditor) => string | null;
+export declare const getAllText: (editor: BaseEditor) => string;

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

@@ -0,0 +1 @@
+export * from './handle-text';

package/form/components/rich-text-editor/helpers/hot-keys/hot-keys.config.d.ts

@@ -0,0 +1,4 @@
+declare const HOTKEYS: {
+    [key: string]: string;
+};
+export default HOTKEYS;

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

@@ -1,4 +1,3 @@
-declare const HOTKEYS: {
-    [key: string]: string;
-};
-export default HOTKEYS;
+import { Dispatch } from 'react';
+import { BaseEditor } from 'slate';
+export declare const handleHotKeys: (e: React.KeyboardEvent<HTMLDivElement> | React.KeyboardEvent<HTMLTextAreaElement>, editor: BaseEditor, dispatch: Dispatch<any>, reportError: (message: string) => void) => void;

package/form/components/rich-text-editor/helpers/hot-keys/index.d.ts

@@ -1 +1,2 @@
-export { default as HOTKEYS } from './hot-keys';
+export * from './hot-keys';
+export { default as HOTKEYS } from './hot-keys.config';

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

@@ -1,5 +1,6 @@
 export * from './ast-types';
 export * from './deserialize';
+export * from './handle-text';
 export * from './hot-keys';
 export * from './serialize';
 export * from './transform';

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

@@ -1,6 +1,7 @@
+import { Formatting } from './../../rich-text-editor.types';
 import { BlockQuoteNode, CodeBlockNode, HeadingNode, ImageNode, InputNodeTypes, ItalicNode, LinkNode, ListItemNode, ListNode, MdastNode, OptionType, ParagraphNode, ThematicBreakNode } from './../ast-types';
 export default function transform<T extends InputNodeTypes>(node: MdastNode, opts?: OptionType<T>): CodeBlockNode<T> | HeadingNode<T> | ListNode<T> | ListItemNode<T> | ParagraphNode<T> | LinkNode<T> | ImageNode<T> | BlockQuoteNode<T> | ThematicBreakNode<T> | ItalicNode<T> | {
-    type: string;
+    type: Formatting;
     children: {
         text: string;
     }[];

package/form/components/rich-text-editor/hooks/use-selected-link/use-selected-link.d.ts

@@ -2,5 +2,6 @@ import { BaseEditor } from 'slate';
 declare const useSelectedLink: (editor: BaseEditor) => {
     full: string;
     pretty: string;
+    text: string;
 } | null;
 export default useSelectedLink;

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

@@ -6,6 +6,8 @@ interface Props {
     value?: string;
     /** The placeholder text of the rich text editor */
     placeholder?: string;
+    /** The maximum length of the rich text editor */
+    maxLength?: number;
     /** Optional functions */
     functions?: {
         /** An optional event handler, called when the rich text editor is changed */
@@ -20,5 +22,5 @@ interface Props {
     /**  Optional aria error message */
     'aria-errormessage'?: string;
 }
-declare const RichTextEditor: ({ id, value, placeholder, functions, autoFocus, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const RichTextEditor: ({ id, value, placeholder, maxLength, functions, autoFocus, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default RichTextEditor;

package/form/components/rich-text-editor/rich-text-editor.types.d.ts

@@ -1,24 +1,47 @@
 import { BaseElement, BaseText, Descendant } from 'slate';
+export declare enum Formatting {
+    blockquote = "block_quote",
+    bold = "bold",
+    code = "code",
+    codeblock = "code_block",
+    heading = "heading",
+    hr = "thematic_break",
+    image = "image",
+    italic = "italic",
+    li = "list_item",
+    link = "link",
+    ol = "ol_list",
+    paragraph = "paragraph",
+    ul = "ul_list",
+    strikethrough = "strikeThrough",
+    span = "span"
+}
+export declare enum Marks {
+    delete = "delete_mark",
+    emphasis = "emphasis_mark",
+    code = "inline_code_mark",
+    strong = "strong_mark"
+}
 export interface BaseProps {
     className?: string;
     [key: string]: unknown;
 }
-export type BlockOptionType = 'block_quote' | 'link' | 'list_item' | 'ol_list' | 'ul_list' | 'paragraph' | 'span';
+export type BlockOptionType = Formatting.blockquote | Formatting.link | Formatting.li | Formatting.ol | Formatting.ul | Formatting.paragraph | Formatting.span;
 export interface TypeElement extends BaseElement {
     type: BlockOptionType;
 }
-export type MarkOptionType = 'bold' | 'italic' | 'strikeThrough';
+export type MarkOptionType = Formatting.bold | Formatting.italic | Formatting.strikethrough;
 export interface TypeText extends BaseText {
-    bold?: boolean;
-    italic?: boolean;
-    strikeThrough?: boolean;
+    [Formatting.bold]?: boolean;
+    [Formatting.italic]?: boolean;
+    [Formatting.strikethrough]?: boolean;
 }
 export type OptionTypes = {
     format: BlockOptionType | MarkOptionType;
     hasDivider?: boolean;
 };
 export type LinkElement = {
-    type: 'link';
+    type: Formatting.link;
     link: string;
     children: Descendant[];
 };

package/general/buttons/button/button.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import addClasses from 'classnames';
 export type ButtonIconType = false | string | {
     icon: string;
     position?: 'left' | 'right';
@@ -42,6 +41,8 @@ export interface ButtonPropsType {
     disabled?: boolean | {
         isClickable: boolean;
     };
+    /** An optional tooltip for the button. This will only apply when disabled is true */
+    tooltip?: string;
     /** This is an optional way to pass in text which is only for screen readers
      * It's rendered on the page (so the page is still functional without CSS, unlike ARIA labels) but hidden
      * with CSS, for cases where the whole button should be an icon
@@ -66,7 +67,5 @@ export interface ButtonPropsType {
     /** The test ID for Jest tests */
     'data-testid'?: string;
 }
-declare const Button: ({ variant, size, styling, icon, href, element, onClick, className, disabled, screenreaderText, children, ...rest }: ButtonPropsType) => React.DOMElement<{
-    [key: string]: string | boolean | addClasses.ArgumentArray | (() => void) | ((e: React.KeyboardEvent<HTMLElement>) => void) | ((e: React.MouseEvent<HTMLElement>) => void) | React.RefObject<HTMLButtonElement>;
-}, Element>;
+declare const Button: ({ variant, size, styling, icon, href, element, onClick, className, disabled, tooltip, screenreaderText, children, ...rest }: ButtonPropsType) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/helpers/dates.d.ts

@@ -25,4 +25,5 @@ export declare const getShortDateHowLongAgo: IGetShortDateHowLongAgo;
 export declare const getDateWithDelta: IGetDateWithDelta;
 export declare const dateToUTC: (date?: Date) => Date;
 export declare const dateWithin: (dateInPast: DateType, number: number, unit: 'seconds' | 'minutes' | 'hours') => boolean;
+export declare const isDateWithinXDays: (dateInPast: DateType, days: number) => boolean;
 export {};

package/helpers/intl.d.ts

@@ -51,6 +51,7 @@ export declare const checkIntlPathExists: (path: string, language?: {
     joinCommunityButton_member_aria: string;
     joinCommunityButton_leave: string;
     joinCommunityButton_leaving: string;
+    joinCommunityButton_closed_tooltip: string;
     member_apolitical: string;
     member_community: string;
     membersList: string;
@@ -181,6 +182,8 @@ export declare const checkIntlPathExists: (path: string, language?: {
     emailHelperTextBox_error_noFunction: string;
     form_fieldWrapper_required: string;
     form_fieldWrapper_characterLimit: string;
+    form_fieldWrapper_characterLimit_aria_default: string;
+    form_fieldWrapper_characterLimit_aria_over: string;
     form_error_generalError: string;
     form_error_required: string;
     form_error_numbers: string;
@@ -226,6 +229,9 @@ export declare const checkIntlPathExists: (path: string, language?: {
     richTextEditor_italic: string;
     richTextEditor_strikeThrough: string;
     richTextEditor_link: string;
+    richTextEditor_link_text: string;
+    richTextEditor_link_text_aria: string;
+    richTextEditor_link_url: string;
     richTextEditor_link_placeholder: string;
     richTextEditor_link_error_required: string;
     richTextEditor_link_open: string;