@muraldevkit/ui-toolkit 1.14.0 → 1.15.1
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/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/form/MrlSelectItem/index.d.ts +5 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/modal/MrlModalFooter/index.d.ts +3 -12
- package/dist/components/notification/MrlBlockNotification/index.d.ts +66 -0
- package/dist/components/notification/constants.d.ts +36 -0
- package/dist/components/notification/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlBlockNotification/global.scss +24 -0
- package/dist/styles/MrlBlockNotification/mixins.scss +48 -0
- package/dist/styles/MrlBlockNotification/module.scss +78 -0
- package/dist/styles/MrlBlockNotification/variables.scss +37 -0
- package/dist/styles/MrlModalFooter/global.scss +18 -0
- package/dist/styles/MrlModalFooter/module.scss +0 -4
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/noop/index.d.ts +7 -0
- package/package.json +1 -1
|
@@ -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, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "
|
|
8
|
+
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "slot" | "dir" | "role" | "name" | "id" | "lang" | "type" | "tabIndex" | "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" | "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" | "key" | "value" | "state" | "position" | "kind" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "disabled" | "badge" | "disableEvents" | "icon" | "toggleAria" | "toggleStyle" | "tipAnchor" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
9
|
export {};
|
|
@@ -71,5 +71,5 @@ interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.Compone
|
|
|
71
71
|
*/
|
|
72
72
|
toggleStyle?: ToggleStyle;
|
|
73
73
|
}
|
|
74
|
-
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "
|
|
74
|
+
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "slot" | "dir" | "role" | "name" | "id" | "lang" | "type" | "tabIndex" | "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" | "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" | "key" | "value" | "state" | "kind" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "disabled" | "badge" | "disableEvents" | "icon" | "toggleAria" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
|
|
75
75
|
export {};
|
|
@@ -71,4 +71,4 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
71
71
|
*/
|
|
72
72
|
toggleStyle?: ToggleStyle;
|
|
73
73
|
}
|
|
74
|
-
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "
|
|
74
|
+
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "className" | "color" | "size" | "attrs" | "onClick" | "text" | "form" | "style" | "title" | "children" | "slot" | "dir" | "role" | "name" | "id" | "lang" | "type" | "tabIndex" | "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" | "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" | "key" | "value" | "state" | "position" | "kind" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "disabled" | "badge" | "disableEvents" | "icon" | "toggleAria" | "toggleStyle" | "tipAnchor" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -18,6 +18,10 @@ export interface MrlSelectItemProptypes extends React.HTMLAttributes<HTMLDivElem
|
|
|
18
18
|
* Example: `attrs='{ "aria-disabled": "true" }'`
|
|
19
19
|
*/
|
|
20
20
|
attrs?: AttrsObject;
|
|
21
|
+
/**
|
|
22
|
+
* Set the item to disabled, this will prevent click and enter events.
|
|
23
|
+
*/
|
|
24
|
+
isDisabled?: boolean;
|
|
21
25
|
/**
|
|
22
26
|
* content for the item
|
|
23
27
|
*/
|
|
@@ -29,4 +33,4 @@ export interface MrlSelectItemProptypes extends React.HTMLAttributes<HTMLDivElem
|
|
|
29
33
|
* @param {MrlSelectItemProptypes} props the props for your MrlLink
|
|
30
34
|
* @returns {React.ReactElement} an a element containing the text you pass
|
|
31
35
|
*/
|
|
32
|
-
export declare const MrlSelectItem: ({ attrs, children, index, value, ...theRest }: MrlSelectItemProptypes) => React.ReactElement;
|
|
36
|
+
export declare const MrlSelectItem: ({ attrs, children, index, value, isDisabled, ...theRest }: MrlSelectItemProptypes) => React.ReactElement;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MrlComponentProps } from '../../../utils';
|
|
3
|
+
import './styles.global.scss';
|
|
3
4
|
interface MrlModalFooterProps extends MrlComponentProps {
|
|
4
5
|
/**
|
|
5
6
|
* Content of the modal footer
|
|
@@ -9,22 +10,12 @@ interface MrlModalFooterProps extends MrlComponentProps {
|
|
|
9
10
|
* Wrapper Class
|
|
10
11
|
*/
|
|
11
12
|
className?: string;
|
|
12
|
-
/**
|
|
13
|
-
* Slots for primary, secondary, and tertiary modal regions
|
|
14
|
-
*/
|
|
15
|
-
primary?: React.ReactElement;
|
|
16
|
-
secondary?: React.ReactElement;
|
|
17
|
-
tertiary?: React.ReactElement;
|
|
18
13
|
}
|
|
19
14
|
/**
|
|
20
15
|
* Modal Footer component for the MrlModal
|
|
21
16
|
*
|
|
22
|
-
* @param {
|
|
23
|
-
* @param {AttrsObject} props.attrs - Additional HTML attributes for the `mrl-modal` element
|
|
24
|
-
* @param {React.ReactElement} props.primary - primary modal element
|
|
25
|
-
* @param {React.ReactElement} props.secondary - secondary modal element
|
|
26
|
-
* @param {React.ReactElement} props.tertiary - tertiary modal element
|
|
17
|
+
* @param {AttrsObject} attrs - Additional HTML attributes for the `mrl-modal` element
|
|
27
18
|
* @returns {React.ReactElement} The rendered MrlModalFooter component
|
|
28
19
|
*/
|
|
29
|
-
export declare const MrlModalFooter: ({ attrs, children, className
|
|
20
|
+
export declare const MrlModalFooter: ({ attrs, children, className }: MrlModalFooterProps) => JSX.Element;
|
|
30
21
|
export {};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AttrsObject } from '../../../utils';
|
|
3
|
+
import { NotificationKind, NotificationIconConfig, NotificationState, NotificationLevel } from '../constants';
|
|
4
|
+
import './styles.global.scss';
|
|
5
|
+
export interface MrlBlockNotificationProps {
|
|
6
|
+
/**
|
|
7
|
+
* Adds CTA button to the notification
|
|
8
|
+
*/
|
|
9
|
+
cta?: React.ReactElement;
|
|
10
|
+
/**
|
|
11
|
+
* The kind of notification to display.
|
|
12
|
+
*
|
|
13
|
+
* Examples: warning, error, info, success
|
|
14
|
+
*/
|
|
15
|
+
kind?: NotificationKind;
|
|
16
|
+
/**
|
|
17
|
+
* Configuration of an icon. Either an icon or a configuration for an icon can be used.
|
|
18
|
+
*/
|
|
19
|
+
iconConfig?: Record<string, unknown> | string | NotificationIconConfig;
|
|
20
|
+
/**
|
|
21
|
+
* Sets header text for notification
|
|
22
|
+
*/
|
|
23
|
+
heading?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Adds a close button to notificaiton if true
|
|
26
|
+
*/
|
|
27
|
+
dismissible?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Sets the primary content for the notification
|
|
30
|
+
*/
|
|
31
|
+
message: React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Open/Close state of the notification
|
|
34
|
+
*/
|
|
35
|
+
state?: NotificationState;
|
|
36
|
+
/**
|
|
37
|
+
* Open notification callback
|
|
38
|
+
*
|
|
39
|
+
* @returns {void}
|
|
40
|
+
*/
|
|
41
|
+
hookOpen?: () => void;
|
|
42
|
+
/**
|
|
43
|
+
* Close notification callback
|
|
44
|
+
*
|
|
45
|
+
* @returns {void}
|
|
46
|
+
*/
|
|
47
|
+
hookClose?: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* Sets the header level
|
|
50
|
+
* Example output: h1, h2, h3, h4
|
|
51
|
+
*/
|
|
52
|
+
level?: NotificationLevel;
|
|
53
|
+
/**
|
|
54
|
+
* Attributes that are applied to the component during the initial render.
|
|
55
|
+
*
|
|
56
|
+
* Example usage: html attributes, custom data attributes (data-qa), aria
|
|
57
|
+
*/
|
|
58
|
+
attrs?: AttrsObject;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Block Notification Component
|
|
62
|
+
*
|
|
63
|
+
* @param props - Component props
|
|
64
|
+
* @returns {Element} Block Notification
|
|
65
|
+
*/
|
|
66
|
+
export declare const MrlBlockNotification: React.FC<MrlBlockNotificationProps>;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export declare const allowedValues: {
|
|
2
|
+
kinds: readonly ["info", "success", "warning", "error", "private", "general"];
|
|
3
|
+
levels: readonly ["2", "3", "4", "5", "6"];
|
|
4
|
+
scopes: readonly ["page", "component"];
|
|
5
|
+
states: readonly ["open", "close"];
|
|
6
|
+
};
|
|
7
|
+
export type NotificationKind = (typeof allowedValues.kinds)[number];
|
|
8
|
+
export type NotificationScope = (typeof allowedValues.scopes)[number];
|
|
9
|
+
export type NotificationState = (typeof allowedValues.states)[number];
|
|
10
|
+
export type NotificationLevel = (typeof allowedValues.levels)[number];
|
|
11
|
+
export interface NotificationDefaults {
|
|
12
|
+
dismissible: boolean;
|
|
13
|
+
kind: NotificationKind;
|
|
14
|
+
level: NotificationLevel;
|
|
15
|
+
scope: NotificationScope;
|
|
16
|
+
state: NotificationState;
|
|
17
|
+
}
|
|
18
|
+
export interface NotificationIconConfig {
|
|
19
|
+
/**
|
|
20
|
+
* SVG object from @muraldevkit/ds-icons;
|
|
21
|
+
* for pre-defined kinds, the design system handles this information out of the box
|
|
22
|
+
* but a developer can still overwrite the theme if needed.
|
|
23
|
+
*/
|
|
24
|
+
svg?: Record<string, unknown>;
|
|
25
|
+
/** icon theme if you're not using the default */
|
|
26
|
+
theme?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Default values for props on the Notification component;
|
|
30
|
+
* Shared between the component and Storybook
|
|
31
|
+
*/
|
|
32
|
+
export declare const defaults: NotificationDefaults;
|
|
33
|
+
/**
|
|
34
|
+
* Default transition duration for the notification transitions
|
|
35
|
+
*/
|
|
36
|
+
export declare const TransitionDuration = 333;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlBlockNotification';
|