@muraldevkit/ui-toolkit 2.0.1 → 2.2.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';

package/dist/components/grid/MrlCol/MrlCol.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { GridColumns } from '../constants';
+interface MrlCol extends GridColumns {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * MrlCol React component.
+ *
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlCol(props: MrlCol): JSX.Element;
+export {};

package/dist/components/grid/MrlCol/index.d.ts

@@ -0,0 +1 @@
+export { MrlCol } from './MrlCol';

package/dist/components/grid/MrlGrid/MrlGrid.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../grid.variables.scss';
+import '../grid.global.scss';
+interface MrlGrid {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * MrlCol React component.
+ *
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlGrid({ children, className }: MrlGrid): JSX.Element;
+export {};

package/dist/components/grid/MrlGrid/index.d.ts

@@ -0,0 +1 @@
+export { MrlGrid } from './MrlGrid';

package/dist/components/grid/MrlRow/MrlRow.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
+interface MrlRow {
+    /**
+     * Flex alignment of the children within the component.
+     */
+    align?: AlignOptions;
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Gutter size for columns within the row
+     */
+    gutter?: GutterSizes;
+    /**
+     * Justify content of the children within the component.
+     */
+    justify?: JustifyOptions;
+}
+/**
+ * MrlRow React component.
+ *
+ * @param props - component props
+ * @returns a MrlRow React component.
+ */
+export declare function MrlRow({ align, children, className, gutter, justify }: MrlRow): JSX.Element;
+export {};

package/dist/components/grid/MrlRow/index.d.ts

@@ -0,0 +1 @@
+export { MrlRow } from './MrlRow';

package/dist/components/grid/constants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Alignment & justification options for grid containers
+ */
+export type AlignOptions = 'start' | 'center' | 'end';
+export type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Available grid sizes
+ */
+export declare const GridSizes: string[];
+/**
+ * Number of columns that will be span on the grid.
+ */
+export type NumCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * The type of classes that can be configured based on the bootstrap API.
+ * Current supported:
+ * - columns "col-<size>-<number>"
+ * - offsets "offset-<size>-<number>""
+ */
+type GridClass = 'col' | 'offset';
+/**
+ * Interface of available class selectors based on GridClass
+ *
+ * Example interface:
+ * {
+ *    col?: number,
+ *    offset?: number
+ * }
+ */
+type GridClassConfig = {
+    [key in GridClass]?: NumCols;
+};
+/**
+ * Options to configure the number of columns to span on different screen sizes.
+ */
+type ColumnConfig = NumCols | 'auto' | GridClassConfig | undefined;
+export interface GridColumns {
+    xs?: ColumnConfig;
+    sm?: ColumnConfig;
+    md?: ColumnConfig;
+    lg?: ColumnConfig;
+    xl?: ColumnConfig;
+    xxl?: ColumnConfig;
+}
+/**
+ * Available gutter sizes for customizing the grid
+ */
+export type GutterSizes = 0 | 1 | 2;
+export {};

package/dist/components/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlGrid';
+export * from './MrlRow';
+export * from './MrlCol';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './button';
 export * from './divider';
 export * from './focus-trap';
 export * from './form';
+export * from './grid';
 export * from './link';
 export * from './modal';
 export * from './notification';