@muraldevkit/ui-toolkit 2.4.1 → 2.5.0

package/README.md

@@ -2,4 +2,4 @@
 Shared React components for use across the Mural platform.
 
 - [Component standards](./docs/component-standards.md)
-- [Contribution Guide](./CONTRIBUTING.md)
+- [Contribution Guide](./CONTRIBUTING.md)

package/dist/components/form/radio/MrlRadioButton/MrlRadioButton.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StaticIconConfig } from '../../constants';
+interface MrlRadioButtonProps extends React.ComponentPropsWithoutRef<'input'> {
+    /** Additional class to add to the container element */
+    className?: string;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** The text to display as the radio button's label */
+    label: string;
+    /** The radio button's name that will group it with others in a radio group */
+    name: string;
+    /** The radio button's value */
+    value: string;
+    /** Indicates if the radio button is disabled */
+    disabled?: boolean;
+    /** Indicates if the radio button has an error */
+    hasError?: boolean;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /** Styles applied to the container element */
+    style?: React.CSSProperties;
+    /**
+     * Description, additional context text for the user.
+     * It can be a string or a React component for custom render.
+     * When using a React component it's necessary to add an id to the custom element and
+     * pass it to the MrlRadioButton through "aria-describedby" to make it accessible
+     * to screen readers.
+     * Custom description should also implement the disabled state styles
+     * for text when the input is disabled or set color: inherit.
+     *
+     * @example
+     * <MrlRadioButton aria-describedby={customId} description={
+     *   <p id={customId}>description</p>
+     * }>
+     */
+    description?: string | React.ReactNode;
+}
+/**
+ * Form element with an associated text label and description that allows the user to select one
+ * option from a provided list
+ *
+ * @param {MrlRadioButtonProps} props - the component props
+ * @returns an input with type "radio" with an associated label
+ */
+export declare function MrlRadioButton({ className, description, hasMultilineLabel, name, value, icon, disabled, hasError, label, style, ...rest }: MrlRadioButtonProps): JSX.Element;
+export {};

package/dist/components/form/radio/MrlRadioButton/index.d.ts

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

package/dist/components/form/utils.d.ts

@@ -79,4 +79,16 @@ type CallbackType = (_debounce: number) => void;
  * @todo - 4969 investigate combining this debounce function with the modal debounce function
  */
 export declare const debounce: (func: () => void, timeout: number | undefined, debounce: DebounceType, callback: CallbackType) => (() => void);
+type GetAriaDescribedByReturn = {
+    ['aria-describedby']?: string;
+} | {
+    ['aria-describedby']: string;
+};
+/**
+ * Generates the 'aria-describedby' attribute from multiple ids
+ *
+ * @param {Array<string | undefined>} args ids
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
+ */
+export declare function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn;
 export {};