@muraldevkit/ui-toolkit 2.4.2 → 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 {};

package/dist/styles/MrlRadioButton/module.scss

@@ -0,0 +1,8 @@
+
+.MrlRadioButton {
+	align-items: center;
+	display: flex;
+	:first-child {
+		align-self: flex-start;
+	}
+}

package/dist/styles/MrlRadioButtonStandalone/module.scss

@@ -5,11 +5,11 @@
 @use './MrlRadioButtonStandalone.variables.scss';
 .MrlRadioButtonStandalone {
 	display: inline-block;
-	height: var(--mrl-radio-button-height);
 	margin: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
 	margin-left: var(--mrl-spacing-01);
+	min-height: var(--mrl-radio-button-height);
+	min-width: var(--mrl-radio-button-width);
 	position: relative;
-	width: var(--mrl-radio-button-width);
 }
 .MrlRadioButtonStandalone-input {
 	appearance: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "2.4.2",
+	"version": "2.5.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -100,6 +100,7 @@
 		"lint-staged": "13.2.2",
 		"null-loader": "4.0.1",
 		"prettier": "2.8.8",
+		"react-markdown": "8.0.7",
 		"rimraf": "5.0.0",
 		"sass": "1.62.1",
 		"sass-loader": "13.2.2",