@muraldevkit/ui-toolkit 2.5.0 → 2.7.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 +26 -0
- 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/index.d.ts +3 -0
- package/dist/components/form/radio/MrlRadioGroup/MrlRadioGroup.d.ts +22 -0
- package/dist/components/form/radio/MrlRadioGroup/index.d.ts +1 -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/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 +1 -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
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
|
*/
|
|
@@ -8,3 +8,6 @@ export * from './fieldset/MrlFieldset';
|
|
|
8
8
|
export * from './checkbox/MrlCheckbox';
|
|
9
9
|
export * from './checkbox/MrlCheckboxStandalone';
|
|
10
10
|
export * from './constants';
|
|
11
|
+
export * from './radio/MrlRadioGroup';
|
|
12
|
+
export * from './radio/MrlRadioButton';
|
|
13
|
+
export * from './radio/MrlRadioButtonStandalone';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MrlRadioGroupProps extends React.ComponentPropsWithoutRef<'fieldset'> {
|
|
3
|
+
/** List of radio buttons */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/** Additional class to add to the fieldset element */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** The radio group label, text for the fieldset's legend */
|
|
8
|
+
label: string;
|
|
9
|
+
/**
|
|
10
|
+
* Adds the "aria-required" and "aria-invalid" attributes to the fieldset
|
|
11
|
+
* element to announce the error state to screen readers
|
|
12
|
+
*/
|
|
13
|
+
hasError?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Radio button group that allows the user to select one option from a provided list
|
|
17
|
+
*
|
|
18
|
+
* @param {MrlRadioGroupProps} props - the component props
|
|
19
|
+
* @returns a radio group
|
|
20
|
+
*/
|
|
21
|
+
export declare function MrlRadioGroup({ className, children, label, hasError, ...rest }: MrlRadioGroupProps): JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlRadioGroup';
|
|
@@ -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;
|