@muraldevkit/ui-toolkit 2.4.2 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -1
- package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
- package/dist/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts +1 -1
- package/dist/components/form/radio/MrlRadioButton/MrlRadioButton.d.ts +46 -0
- package/dist/components/form/radio/MrlRadioButton/index.d.ts +1 -0
- package/dist/components/form/utils.d.ts +12 -0
- package/dist/components/grid/MrlCol/MrlCol.d.ts +3 -8
- package/dist/components/grid/MrlGrid/MrlGrid.d.ts +3 -10
- package/dist/components/grid/MrlRow/MrlRow.d.ts +4 -8
- package/dist/components/index.d.ts +1 -0
- package/dist/components/layout/MrlMain/MrlMain.d.ts +9 -0
- package/dist/components/layout/MrlMain/index.d.ts +1 -0
- package/dist/components/layout/MrlPage/MrlPage.d.ts +11 -0
- package/dist/components/layout/MrlPage/index.d.ts +11 -0
- package/dist/components/layout/MrlSidebar/MrlSidebar.d.ts +11 -0
- package/dist/components/layout/MrlSidebar/index.d.ts +1 -0
- package/dist/components/layout/MrlTopbar/MrlTopbar.d.ts +11 -0
- package/dist/components/layout/MrlTopbar/index.d.ts +1 -0
- package/dist/components/layout/constants.d.ts +16 -0
- package/dist/components/layout/context/LayoutContext.d.ts +24 -0
- package/dist/components/layout/index.d.ts +4 -0
- package/dist/components/layout/utils.d.ts +15 -0
- package/dist/components/svg/config.d.ts +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useBreakpoint/index.d.ts +15 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlMain/module.scss +26 -0
- package/dist/styles/MrlMain/variables.scss +5 -0
- package/dist/styles/MrlPage/module.scss +13 -0
- package/dist/styles/MrlRadioButton/module.scss +8 -0
- package/dist/styles/MrlRadioButtonStandalone/module.scss +2 -2
- package/dist/styles/MrlSidebar/module.scss +61 -0
- package/dist/styles/MrlTopbar/module.scss +12 -0
- package/dist/styles/grid/global.scss +5 -1
- package/dist/styles/grid/variables.scss +6 -5
- package/dist/styles/layout/variables.scss +3 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Mural's UI Toolkit
|
|
2
2
|
Shared React components for use across the Mural platform.
|
|
3
3
|
|
|
4
|
+
## Table of contents
|
|
5
|
+
- [Quick start](#quick-start)
|
|
6
|
+
- [Documentation](#documentation)
|
|
4
7
|
- [Component standards](./docs/component-standards.md)
|
|
5
|
-
- [Contribution Guide](./CONTRIBUTING.md)
|
|
8
|
+
- [Contribution Guide](./CONTRIBUTING.md)
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
We use Storybook as both a living documentation site and dev environment. To get started:
|
|
12
|
+
|
|
13
|
+
- Clone the repo
|
|
14
|
+
- `npm install`
|
|
15
|
+
- `npm run dev`
|
|
16
|
+
|
|
17
|
+
To run tests locally:
|
|
18
|
+
- `npm run test`
|
|
19
|
+
|
|
20
|
+
If you need to verify your local changes in an external project see our [Local Enviroment Guide](./docs/local-development.md).
|
|
21
|
+
## What's included
|
|
22
|
+
|
|
23
|
+
Within the project you'll find the `src/` directory, which logically groups components together. For more information on our components see our [Component standards](./docs/component-standards.md).
|
|
24
|
+
|
|
25
|
+
## Documentation
|
|
26
|
+
Our doc site uses Storybook as living documentation and dev environment. We support [mdx](https://mdxjs.com/) files and standard Storybook files, we use [CSF version 3](https://storybook.js.org/blog/component-story-format-3-0/). You can find examples on how to add markdown docs to the doc section of our site in the `src/storybookds_docs`. For documentation on how to write [Storybook stories](https://storybook.js.org/docs/react/writing-stories/introduction).
|
|
27
|
+
|
|
28
|
+
*During deployments we remove the docs and strip comments.*
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
@@ -5,5 +5,5 @@ import './MrlAnimatedIconButton.scss';
|
|
|
5
5
|
interface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {
|
|
6
6
|
icon: MrlSvgAnimateProps;
|
|
7
7
|
}
|
|
8
|
-
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
8
|
+
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
9
|
export {};
|
|
@@ -67,4 +67,4 @@ export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.
|
|
|
67
67
|
*/
|
|
68
68
|
toggleStyle?: ToggleStyle;
|
|
69
69
|
}
|
|
70
|
-
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
70
|
+
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "icon" | "badge" | "disableEvents" | "toggleAria" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -79,4 +79,4 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
79
79
|
*/
|
|
80
80
|
wrapperClassName?: string;
|
|
81
81
|
}
|
|
82
|
-
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
82
|
+
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -3,7 +3,7 @@ interface PropTypes {
|
|
|
3
3
|
/**
|
|
4
4
|
* Elements to be rendered within the focus trap
|
|
5
5
|
*/
|
|
6
|
-
children:
|
|
6
|
+
children: React.ReactNode;
|
|
7
7
|
/**
|
|
8
8
|
* Specifies whether the focus trap should be disabled
|
|
9
9
|
*/
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StaticIconConfig } from '../../constants';
|
|
3
|
+
interface MrlRadioButtonProps extends React.ComponentPropsWithoutRef<'input'> {
|
|
4
|
+
/** Additional class to add to the container element */
|
|
5
|
+
className?: string;
|
|
6
|
+
/** Adjusts the styles of the label, icon and description when the label is multiline */
|
|
7
|
+
hasMultilineLabel?: boolean;
|
|
8
|
+
/** The text to display as the radio button's label */
|
|
9
|
+
label: string;
|
|
10
|
+
/** The radio button's name that will group it with others in a radio group */
|
|
11
|
+
name: string;
|
|
12
|
+
/** The radio button's value */
|
|
13
|
+
value: string;
|
|
14
|
+
/** Indicates if the radio button is disabled */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/** Indicates if the radio button has an error */
|
|
17
|
+
hasError?: boolean;
|
|
18
|
+
/** Leading label icon */
|
|
19
|
+
icon?: StaticIconConfig;
|
|
20
|
+
/** Styles applied to the container element */
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
/**
|
|
23
|
+
* Description, additional context text for the user.
|
|
24
|
+
* It can be a string or a React component for custom render.
|
|
25
|
+
* When using a React component it's necessary to add an id to the custom element and
|
|
26
|
+
* pass it to the MrlRadioButton through "aria-describedby" to make it accessible
|
|
27
|
+
* to screen readers.
|
|
28
|
+
* Custom description should also implement the disabled state styles
|
|
29
|
+
* for text when the input is disabled or set color: inherit.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* <MrlRadioButton aria-describedby={customId} description={
|
|
33
|
+
* <p id={customId}>description</p>
|
|
34
|
+
* }>
|
|
35
|
+
*/
|
|
36
|
+
description?: string | React.ReactNode;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Form element with an associated text label and description that allows the user to select one
|
|
40
|
+
* option from a provided list
|
|
41
|
+
*
|
|
42
|
+
* @param {MrlRadioButtonProps} props - the component props
|
|
43
|
+
* @returns an input with type "radio" with an associated label
|
|
44
|
+
*/
|
|
45
|
+
export declare function MrlRadioButton({ className, description, hasMultilineLabel, name, value, icon, disabled, hasError, label, style, ...rest }: MrlRadioButtonProps): JSX.Element;
|
|
46
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlRadioButton';
|
|
@@ -79,4 +79,16 @@ type CallbackType = (_debounce: number) => void;
|
|
|
79
79
|
* @todo - 4969 investigate combining this debounce function with the modal debounce function
|
|
80
80
|
*/
|
|
81
81
|
export declare const debounce: (func: () => void, timeout: number | undefined, debounce: DebounceType, callback: CallbackType) => (() => void);
|
|
82
|
+
type GetAriaDescribedByReturn = {
|
|
83
|
+
['aria-describedby']?: string;
|
|
84
|
+
} | {
|
|
85
|
+
['aria-describedby']: string;
|
|
86
|
+
};
|
|
87
|
+
/**
|
|
88
|
+
* Generates the 'aria-describedby' attribute from multiple ids
|
|
89
|
+
*
|
|
90
|
+
* @param {Array<string | undefined>} args ids
|
|
91
|
+
* @returns {GetAriaDescribedByReturn} an object with aria-describedby
|
|
92
|
+
*/
|
|
93
|
+
export declare function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn;
|
|
82
94
|
export {};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../../layout/constants';
|
|
2
3
|
import { GridColumns } from '../constants';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Children to be rendered within the component.
|
|
6
|
-
*/
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
className?: string;
|
|
9
|
-
}
|
|
4
|
+
type MrlCol = LayoutComponent & GridColumns;
|
|
10
5
|
/**
|
|
11
6
|
* MrlCol React component.
|
|
12
7
|
*
|
|
@@ -1,18 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../../layout/constants';
|
|
2
3
|
import '../grid.variables.scss';
|
|
3
4
|
import '../grid.global.scss';
|
|
4
|
-
interface MrlGrid {
|
|
5
|
-
/**
|
|
6
|
-
* Children to be rendered within the component.
|
|
7
|
-
*/
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
className?: string;
|
|
10
|
-
}
|
|
11
5
|
/**
|
|
12
6
|
* MrlCol React component.
|
|
13
7
|
*
|
|
14
8
|
* @param props - component props
|
|
15
9
|
* @returns a MrlCol React component.
|
|
16
10
|
*/
|
|
17
|
-
export declare function MrlGrid({ children, className }:
|
|
18
|
-
export {};
|
|
11
|
+
export declare function MrlGrid({ children, className }: LayoutComponent): JSX.Element;
|
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../../layout/constants';
|
|
2
3
|
import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
|
|
3
|
-
interface MrlRow {
|
|
4
|
+
interface MrlRow extends LayoutComponent {
|
|
4
5
|
/**
|
|
5
6
|
* Flex alignment of the children within the component.
|
|
6
7
|
*/
|
|
7
8
|
align?: AlignOptions;
|
|
8
|
-
/**
|
|
9
|
-
* Children to be rendered within the component.
|
|
10
|
-
*/
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
className?: string;
|
|
13
9
|
/**
|
|
14
10
|
* Gutter size for columns within the row
|
|
15
11
|
*/
|
|
@@ -25,5 +21,5 @@ interface MrlRow {
|
|
|
25
21
|
* @param props - component props
|
|
26
22
|
* @returns a MrlRow React component.
|
|
27
23
|
*/
|
|
28
|
-
export declare function MrlRow({ align, children, className,
|
|
24
|
+
export declare function MrlRow({ align, children, className, justify }: MrlRow): JSX.Element;
|
|
29
25
|
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../constants';
|
|
3
|
+
/**
|
|
4
|
+
* MrlMain React component.
|
|
5
|
+
*
|
|
6
|
+
* @param props - component props
|
|
7
|
+
* @returns a MrlMain React component.
|
|
8
|
+
*/
|
|
9
|
+
export declare function MrlMain({ children, className }: LayoutComponent): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MrlMain } from './MrlMain';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../constants';
|
|
3
|
+
type MrlPage = LayoutComponent;
|
|
4
|
+
/**
|
|
5
|
+
* MrlPage React component.
|
|
6
|
+
*
|
|
7
|
+
* @param props - component props
|
|
8
|
+
* @returns a MrlPage React component.
|
|
9
|
+
*/
|
|
10
|
+
export declare function MrlPage({ children, className }: MrlPage): JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent } from '../constants';
|
|
3
|
+
type MrlPage = LayoutComponent;
|
|
4
|
+
/**
|
|
5
|
+
* MrlPage Provider
|
|
6
|
+
*
|
|
7
|
+
* @param props - component props
|
|
8
|
+
* @returns a MrlPage React component.
|
|
9
|
+
*/
|
|
10
|
+
export declare function MrlPage({ ...rest }: MrlPage): JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent, LayoutSection } from '../constants';
|
|
3
|
+
type MrlSidebar = LayoutComponent & LayoutSection;
|
|
4
|
+
/**
|
|
5
|
+
* MrlSidebar React component.
|
|
6
|
+
*
|
|
7
|
+
* @param props - component props
|
|
8
|
+
* @returns a MrlSidebar React component.
|
|
9
|
+
*/
|
|
10
|
+
export declare function MrlSidebar({ children, className }: MrlSidebar): JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MrlSidebar } from './MrlSidebar';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutComponent, LayoutSection } from '../constants';
|
|
3
|
+
type MrlTopbar = LayoutComponent & LayoutSection;
|
|
4
|
+
/**
|
|
5
|
+
* MrlTopbar React component.
|
|
6
|
+
*
|
|
7
|
+
* @param props - component props
|
|
8
|
+
* @returns a MrlTopbar React component.
|
|
9
|
+
*/
|
|
10
|
+
export declare function MrlTopbar({ children, className }: MrlTopbar): JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MrlTopbar } from './MrlTopbar';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface LayoutComponent {
|
|
3
|
+
/**
|
|
4
|
+
* Children to be rendered within the component.
|
|
5
|
+
*/
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface LayoutSection {
|
|
10
|
+
/**
|
|
11
|
+
* Label to apply to region of the page
|
|
12
|
+
*/
|
|
13
|
+
ariaLabel: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare const TOPBAR_SELECTOR = "mrl-topbar";
|
|
16
|
+
export declare const SIDEBAR_SELECTOR = "mrl-sidebar";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
type LayoutContextType = {
|
|
3
|
+
isSidebarRendered: boolean;
|
|
4
|
+
isTopbarRendered: boolean;
|
|
5
|
+
};
|
|
6
|
+
type LayoutProviderProps = {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Provides layout-related context values to child components.
|
|
11
|
+
*
|
|
12
|
+
* @param {LayoutProviderProps} props - The props for the component.
|
|
13
|
+
* @returns A React element that provides the layout context to children.
|
|
14
|
+
*/
|
|
15
|
+
export declare function LayoutProvider({ children }: LayoutProviderProps): ReactElement;
|
|
16
|
+
/**
|
|
17
|
+
* Custom hook to access layout context values.
|
|
18
|
+
* This hook ensures that the component using it is wrapped within a LayoutProvider.
|
|
19
|
+
*
|
|
20
|
+
* @throws Will throw an error if not used within a `LayoutProvider`.
|
|
21
|
+
* @returns The layout context containing isSidebarRendered and isTopbarRendered.
|
|
22
|
+
*/
|
|
23
|
+
export declare const useLayoutContext: () => LayoutContextType;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns true/false depending on if we are in a mobile view
|
|
3
|
+
*
|
|
4
|
+
* @param {string} breakpoint - The breakpoint value
|
|
5
|
+
* @returns {boolean} Returns `true` if the breakpoint corresponds to a mobile size ('xs', 'sm', or 'md')
|
|
6
|
+
*/
|
|
7
|
+
export declare const isMobile: (breakpoint: string) => boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Returns true/false if the topbar is present within the given element
|
|
10
|
+
*
|
|
11
|
+
* @param element - The element to search for the topbar
|
|
12
|
+
* @param selector - The selector to search for the topbar
|
|
13
|
+
* @returns true/false if the topbar is present within the element
|
|
14
|
+
*/
|
|
15
|
+
export declare const hasElement: (element: HTMLElement | null, selector: string) => boolean;
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
type Breakpoints = {
|
|
2
|
+
xs: number;
|
|
3
|
+
sm: number;
|
|
4
|
+
md: number;
|
|
5
|
+
lg: number;
|
|
6
|
+
xl: number;
|
|
7
|
+
xxl: number;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* React Hook to return the current breakpoint
|
|
11
|
+
*
|
|
12
|
+
* @returns {keyof Breakpoints} - the current breakpoint
|
|
13
|
+
*/
|
|
14
|
+
export declare const useBreakpoint: () => keyof Breakpoints;
|
|
15
|
+
export default useBreakpoint;
|