@muraldevkit/ui-toolkit 2.0.0 → 2.1.0

package/dist/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { AttrsObject } from '../../../../utils';
 import { CheckboxSelected, CheckboxStates, StaticIconConfig } from '../../constants';
 import './MrlCheckbox.global.scss';
@@ -7,6 +7,8 @@ interface MrlCheckboxProps {
     attrs?: AttrsObject;
     /** Additional class to add to the container of the checkbox and label */
     className?: string;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
     /** The current state of the checkbox input based on user interactions or permissions */
     state?: CheckboxStates;
     /** Sets what selection state the checkbox is in. */
@@ -15,6 +17,21 @@ interface MrlCheckboxProps {
     label: string;
     /** Leading label icon */
     icon?: StaticIconConfig;
+    /**
+     * 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 MrlCheckbox through 'attrs["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
+     * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={
+     *   <p id={customId}>description</p>
+     * }>
+     */
+    description?: string | React.ReactNode;
 }
 /**
  * Form element with an associated text label that allows the user to select one or more options
@@ -23,5 +40,5 @@ interface MrlCheckboxProps {
  * @param {MrlCheckboxProps} props - the component props
  * @returns a checkbox element with an associated label
  */
-export declare function MrlCheckbox({ attrs, className, state, selected, icon, label }: MrlCheckboxProps): JSX.Element;
+export declare function MrlCheckbox({ attrs, className, description, hasMultilineLabel, state, selected, icon, label }: MrlCheckboxProps): JSX.Element;
 export {};

package/dist/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StaticIconConfig } from '../../constants';
+interface MrlLabelWithDescriptionProps {
+    /** Additional class to add to the container of the label and description */
+    className?: string;
+    /** Description text or a custom component */
+    description?: string | React.ReactNode;
+    /** The id that's linked to the form element "aria-describedby" attribute */
+    descriptionId?: string;
+    /** disabled state */
+    isDisabled?: boolean;
+    /** indeterminate state */
+    isIndeterminate?: boolean;
+    /** selected state */
+    isSelected?: boolean;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** ID of the form elements so all users can understand the relationship between the two elements */
+    htmlFor: string;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /** The text to display as the label */
+    label: string;
+}
+/**
+ * Form control label that can render a label, an icon and description text
+ *
+ * @param {MrlLabelWithDescriptionProps} props - the component props
+ * @returns a form control label with description
+ */
+export declare function MrlLabelWithDescription({ className, description, descriptionId, isDisabled, isIndeterminate, isSelected, hasMultilineLabel, htmlFor, icon, label }: MrlLabelWithDescriptionProps): JSX.Element;
+export {};

package/dist/components/form/label/MrlLabelWithDescription/index.d.ts

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