@veeqo/ui 14.13.0 → 14.14.0-beta-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/Alerts/Alert/Alert.cjs +16 -12
- package/dist/components/Alerts/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.d.ts +4 -1
- package/dist/components/Alerts/Alert/Alert.js +16 -12
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Alerts/Alert/Alert.module.scss.cjs +2 -2
- package/dist/components/Alerts/Alert/Alert.module.scss.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.module.scss.js +2 -2
- package/dist/components/Alerts/Alert/Alert.module.scss.js.map +1 -1
- package/dist/components/Alerts/Alert/index.d.ts +1 -0
- package/dist/components/Alerts/Alert/types.d.ts +15 -1
- package/dist/components/Alerts/Alerts.module.scss.cjs +2 -2
- package/dist/components/Alerts/Alerts.module.scss.cjs.map +1 -1
- package/dist/components/Alerts/Alerts.module.scss.js +2 -2
- package/dist/components/Alerts/Alerts.module.scss.js.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.cjs +7 -4
- package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.d.ts +4 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.js +7 -4
- package/dist/components/Alerts/MiniAlert/MiniAlert.js.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs +2 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js +2 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js.map +1 -1
- package/dist/components/Alerts/MiniAlert/index.d.ts +1 -0
- package/dist/components/Alerts/MiniAlert/types.d.ts +10 -2
- package/dist/components/Alerts/constants.cjs.map +1 -1
- package/dist/components/Alerts/constants.d.ts +2 -2
- package/dist/components/Alerts/constants.js.map +1 -1
- package/dist/components/Alerts/types.d.ts +7 -1
- package/dist/components/index.d.ts +3 -2
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var Text = require('../../Text/Text.cjs');
|
|
5
5
|
var Button = require('../../Button/Button.cjs');
|
|
6
|
+
var Action = require('../../Action/Action.cjs');
|
|
6
7
|
var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
|
|
7
8
|
var constants = require('../constants.cjs');
|
|
8
9
|
var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
|
|
@@ -17,26 +18,29 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
17
18
|
|
|
18
19
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Alert component for displaying contextual feedback messages with optional actions and close button.
|
|
23
|
+
*/
|
|
24
|
+
const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
|
|
21
25
|
const DefaultIcon = constants.IconMap[variant];
|
|
22
26
|
const isXsSize = size === 'xs';
|
|
23
|
-
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", className: buildClassnames.buildClassnames([
|
|
27
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames.buildClassnames([
|
|
24
28
|
Alert_module.alertContainer,
|
|
25
29
|
Alert_module[`${size}-size`],
|
|
30
|
+
Alert_module[`${direction}-layout`],
|
|
26
31
|
Alerts_module[`${variant}-alert-variant`],
|
|
27
32
|
className,
|
|
28
|
-
]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }),
|
|
29
|
-
React__default.default.createElement(FlexRow.FlexRow, {
|
|
30
|
-
|
|
31
|
-
children || (React__default.default.createElement(FlexCol.FlexCol, { gap:
|
|
33
|
+
]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
|
|
34
|
+
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
35
|
+
React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: Alert_module[direction] },
|
|
36
|
+
children || (React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
|
|
32
37
|
titleSlot ||
|
|
33
38
|
(title && (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
|
|
34
|
-
messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", size: "sm" }))))));
|
|
39
|
+
messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
|
|
40
|
+
((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" },
|
|
41
|
+
rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
|
|
42
|
+
rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
|
|
43
|
+
onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? Alert_module.closeButton : Alert_module.closeButtonVertical }))));
|
|
40
44
|
};
|
|
41
45
|
|
|
42
46
|
exports.Alert = Alert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n
|
|
1
|
+
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n role={variant === 'error' ? 'alert' : 'status'}\n alignItems={isXsSize ? 'center' : 'flex-start'}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n styles[`${direction}-layout`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n flexWrap=\"nowrap\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol\n gap={isXsSize ? 'xs' : 'sm'}\n flexGrow={1}\n flexWrap=\"nowrap\"\n className={styles[direction]}\n >\n {children || (\n <FlexCol gap=\"xs\">\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n\n {((rightActions && rightActions.length > 0) || rightActionsSlot) && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","Action","CrossIcon"],"mappings":"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"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AlertProps } from './types';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Alert component for displaying contextual feedback messages with optional actions and close button.
|
|
5
|
+
*/
|
|
6
|
+
export declare const Alert: ({ size, variant, direction, colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }: AlertProps) => React.JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Text } from '../../Text/Text.js';
|
|
3
3
|
import { Button } from '../../Button/Button.js';
|
|
4
|
+
import { Action } from '../../Action/Action.js';
|
|
4
5
|
import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
|
|
5
6
|
import { IconMap } from '../constants.js';
|
|
6
7
|
import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
|
|
@@ -11,26 +12,29 @@ import { assignCssVars } from '../../../utils/assignCssVars.js';
|
|
|
11
12
|
import alertStyles from '../Alerts.module.scss.js';
|
|
12
13
|
import styles from './Alert.module.scss.js';
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Alert component for displaying contextual feedback messages with optional actions and close button.
|
|
17
|
+
*/
|
|
18
|
+
const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
|
|
15
19
|
const DefaultIcon = IconMap[variant];
|
|
16
20
|
const isXsSize = size === 'xs';
|
|
17
|
-
return (React__default.createElement(FlexRow, { justifyContent: "space-between", className: buildClassnames([
|
|
21
|
+
return (React__default.createElement(FlexRow, { role: variant === 'error' ? 'alert' : 'status', alignItems: isXsSize ? 'center' : 'flex-start', justifyContent: "space-between", flexWrap: "nowrap", gap: "none", className: buildClassnames([
|
|
18
22
|
styles.alertContainer,
|
|
19
23
|
styles[`${size}-size`],
|
|
24
|
+
styles[`${direction}-layout`],
|
|
20
25
|
alertStyles[`${variant}-alert-variant`],
|
|
21
26
|
className,
|
|
22
|
-
]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }),
|
|
23
|
-
React__default.createElement(FlexRow, {
|
|
24
|
-
|
|
25
|
-
children || (React__default.createElement(FlexCol, { gap:
|
|
27
|
+
]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.background }), ...divProps },
|
|
28
|
+
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === void 0 ? void 0 : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start", flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
29
|
+
React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm', flexGrow: 1, flexWrap: "nowrap", className: styles[direction] },
|
|
30
|
+
children || (React__default.createElement(FlexCol, { gap: "xs" },
|
|
26
31
|
titleSlot ||
|
|
27
32
|
(title && (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
|
|
28
|
-
messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", size: "sm" }))))));
|
|
33
|
+
messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message)))),
|
|
34
|
+
((rightActions && rightActions.length > 0) || rightActionsSlot) && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" },
|
|
35
|
+
rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
|
|
36
|
+
rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label)))))),
|
|
37
|
+
onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical }))));
|
|
34
38
|
};
|
|
35
39
|
|
|
36
40
|
export { Alert };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n role={variant === 'error' ? 'alert' : 'status'}\n alignItems={isXsSize ? 'center' : 'flex-start'}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n styles[`${direction}-layout`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n flexWrap=\"nowrap\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol\n gap={isXsSize ? 'xs' : 'sm'}\n flexGrow={1}\n flexWrap=\"nowrap\"\n className={styles[direction]}\n >\n {children || (\n <FlexCol gap=\"xs\">\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n\n {((rightActions && rightActions.length > 0) || rightActionsSlot) && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={direction === 'horizontal' ? styles.closeButton : styles.closeButtonVertical}\n />\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("._base-
|
|
6
|
-
var styles = {"base-size":"_base-
|
|
5
|
+
___$insertStyle("._base-size_f9sjk_1 {\n --alert-icon-size: var(--sizes-md);\n --alert-padding: var(--sizes-base);\n --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-3);\n --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-1);\n --alert-padding-left: var(--sizes-sm);\n --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n border-radius: var(--radius-base);\n background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n padding: var(--alert-padding);\n padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n flex-direction: column;\n align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n align-self: flex-start;\n}");
|
|
6
|
+
var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Alert.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n --alert-icon-size: var(--sizes-md);\n --alert-
|
|
1
|
+
{"version":3,"file":"Alert.module.scss.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n --alert-icon-size: var(--sizes-md);\n --alert-padding: var(--sizes-base);\n --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-3);\n --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-1);\n --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n border-radius: var(--radius-base);\n background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n padding: var(--alert-padding);\n padding-left: var(--alert-padding-left, var(--alert-padding));\n\n // Specificity boost needed to override FlexRow's gap-none utility class\n &.vertical-layout,\n &.horizontal-layout {\n gap: var(--alert-gap);\n }\n}\n\n.alertContainer .vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.closeButton {\n align-self: center;\n}\n\n.closeButtonVertical {\n align-self: flex-start;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("._base-
|
|
4
|
-
var styles = {"base-size":"_base-
|
|
3
|
+
insertStyle("._base-size_f9sjk_1 {\n --alert-icon-size: var(--sizes-md);\n --alert-padding: var(--sizes-base);\n --alert-gap: var(--sizes-base);\n}\n\n._sm-size_f9sjk_7 {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-3);\n --alert-gap: var(--sizes-3);\n}\n\n._xs-size_f9sjk_13 {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-1);\n --alert-padding-left: var(--sizes-sm);\n --alert-gap: var(--sizes-sm);\n}\n\n._alertContainer_f9sjk_20 {\n border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n border-radius: var(--radius-base);\n background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n padding: var(--alert-padding);\n padding-left: var(--alert-padding-left, var(--alert-padding));\n}\n._alertContainer_f9sjk_20._vertical-layout_f9sjk_27, ._alertContainer_f9sjk_20._horizontal-layout_f9sjk_27 {\n gap: var(--alert-gap);\n}\n\n._alertContainer_f9sjk_20 ._vertical_f9sjk_27 {\n flex-direction: column;\n align-items: flex-start;\n}\n\n._alertContainer_f9sjk_20 ._horizontal_f9sjk_27 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n._closeButton_f9sjk_42 {\n align-self: center;\n}\n\n._closeButtonVertical_f9sjk_46 {\n align-self: flex-start;\n}");
|
|
4
|
+
var styles = {"base-size":"_base-size_f9sjk_1","sm-size":"_sm-size_f9sjk_7","xs-size":"_xs-size_f9sjk_13","alertContainer":"_alertContainer_f9sjk_20","vertical-layout":"_vertical-layout_f9sjk_27","horizontal-layout":"_horizontal-layout_f9sjk_27","vertical":"_vertical_f9sjk_27","horizontal":"_horizontal_f9sjk_27","closeButton":"_closeButton_f9sjk_42","closeButtonVertical":"_closeButtonVertical_f9sjk_46"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Alert.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n --alert-icon-size: var(--sizes-md);\n --alert-
|
|
1
|
+
{"version":3,"file":"Alert.module.scss.js","sources":["../../../../src/components/Alerts/Alert/Alert.module.scss"],"sourcesContent":[".base-size {\n --alert-icon-size: var(--sizes-md);\n --alert-padding: var(--sizes-base);\n --alert-gap: var(--sizes-base);\n}\n\n.sm-size {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-3);\n --alert-gap: var(--sizes-3);\n}\n\n.xs-size {\n --alert-icon-size: var(--sizes-5);\n --alert-padding: var(--sizes-1);\n --alert-padding-left: var(--sizes-sm); // xs has asymmetric padding to match designs\n --alert-gap: var(--sizes-sm);\n}\n\n.alertContainer {\n border: 1px solid var(--primary-color, var(--colors-neutral-ink-base));\n border-radius: var(--radius-base);\n background-color: var(--background-color, var(--colors-neutral-grey-lightest));\n padding: var(--alert-padding);\n padding-left: var(--alert-padding-left, var(--alert-padding));\n\n // Specificity boost needed to override FlexRow's gap-none utility class\n &.vertical-layout,\n &.horizontal-layout {\n gap: var(--alert-gap);\n }\n}\n\n.alertContainer .vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.alertContainer .horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.closeButton {\n align-self: center;\n}\n\n.closeButtonVertical {\n align-self: flex-start;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,owCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA;;;;"}
|
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { Action } from '../../Modal/types';
|
|
3
3
|
import { AlertColours, BaseAlertProps } from '../types';
|
|
4
|
+
/** Controls the padding density of the alert */
|
|
5
|
+
export type AlertSizes = 'base' | 'sm' | 'xs';
|
|
6
|
+
/** Direction of content flow */
|
|
7
|
+
export type AlertDirection = 'horizontal' | 'vertical';
|
|
4
8
|
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
|
|
9
|
+
/** Controls padding density */
|
|
5
10
|
size?: AlertSizes;
|
|
11
|
+
/** Direction of content flow. `'horizontal'` places content side-by-side, `'vertical'` stacks content */
|
|
12
|
+
direction?: AlertDirection;
|
|
13
|
+
/** Override the primary and background colours */
|
|
6
14
|
colours?: AlertColours;
|
|
15
|
+
/** Action buttons rendered on the right (horizontal) or below the content (vertical) */
|
|
7
16
|
rightActions?: Action[];
|
|
17
|
+
/** Custom content rendered in the actions area, replacing or alongside `rightActions` */
|
|
8
18
|
rightActionsSlot?: ReactNode;
|
|
19
|
+
/** Replaces the default title text with custom content */
|
|
9
20
|
titleSlot?: ReactNode;
|
|
21
|
+
/** Replaces the default message text with custom content */
|
|
10
22
|
messageSlot?: ReactNode;
|
|
23
|
+
/** Message text displayed below the title */
|
|
11
24
|
message?: string;
|
|
25
|
+
/** Replaces the title/message content area with custom content */
|
|
12
26
|
children?: ReactNode;
|
|
27
|
+
/** Close handler. When provided, renders a close button */
|
|
13
28
|
onClickClose?: () => void;
|
|
14
29
|
};
|
|
15
|
-
export type AlertSizes = 'base' | 'sm' | 'xs';
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("._default-alert-
|
|
6
|
-
var alertStyles = {"default-alert-variant":"_default-alert-
|
|
5
|
+
___$insertStyle("._default-alert-variant_4imrs_1 {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_4imrs_6 {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_4imrs_11 {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_4imrs_16 {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_4imrs_21 {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n._recommend-alert-variant_4imrs_26 {\n --primary-color: var(--colors-secondary-purple-dark);\n --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_4imrs_31 > svg {\n min-width: var(--alert-icon-size);\n max-width: var(--alert-icon-size);\n width: var(--alert-icon-size);\n height: var(--alert-icon-size);\n color: var(--icon-color, var(--primary-color));\n}");
|
|
6
|
+
var alertStyles = {"default-alert-variant":"_default-alert-variant_4imrs_1","error-alert-variant":"_error-alert-variant_4imrs_6","success-alert-variant":"_success-alert-variant_4imrs_11","info-alert-variant":"_info-alert-variant_4imrs_16","warning-alert-variant":"_warning-alert-variant_4imrs_21","recommend-alert-variant":"_recommend-alert-variant_4imrs_26","icon":"_icon_4imrs_31"};
|
|
7
7
|
|
|
8
8
|
module.exports = alertStyles;
|
|
9
9
|
//# sourceMappingURL=Alerts.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alerts.module.scss.cjs","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-
|
|
1
|
+
{"version":3,"file":"Alerts.module.scss.cjs","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n.recommend-alert-variant {\n --primary-color: var(--colors-secondary-purple-dark);\n --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n min-width: var(--alert-icon-size);\n max-width: var(--alert-icon-size);\n width: var(--alert-icon-size);\n height: var(--alert-icon-size);\n color: var(--icon-color, var(--primary-color));\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("._default-alert-
|
|
4
|
-
var alertStyles = {"default-alert-variant":"_default-alert-
|
|
3
|
+
insertStyle("._default-alert-variant_4imrs_1 {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n._error-alert-variant_4imrs_6 {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n._success-alert-variant_4imrs_11 {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n._info-alert-variant_4imrs_16 {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n._warning-alert-variant_4imrs_21 {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n._recommend-alert-variant_4imrs_26 {\n --primary-color: var(--colors-secondary-purple-dark);\n --background-color: var(--colors-secondary-purple-lightest);\n}\n\n._icon_4imrs_31 > svg {\n min-width: var(--alert-icon-size);\n max-width: var(--alert-icon-size);\n width: var(--alert-icon-size);\n height: var(--alert-icon-size);\n color: var(--icon-color, var(--primary-color));\n}");
|
|
4
|
+
var alertStyles = {"default-alert-variant":"_default-alert-variant_4imrs_1","error-alert-variant":"_error-alert-variant_4imrs_6","success-alert-variant":"_success-alert-variant_4imrs_11","info-alert-variant":"_info-alert-variant_4imrs_16","warning-alert-variant":"_warning-alert-variant_4imrs_21","recommend-alert-variant":"_recommend-alert-variant_4imrs_26","icon":"_icon_4imrs_31"};
|
|
5
5
|
|
|
6
6
|
export { alertStyles as default };
|
|
7
7
|
//# sourceMappingURL=Alerts.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alerts.module.scss.js","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-
|
|
1
|
+
{"version":3,"file":"Alerts.module.scss.js","sources":["../../../src/components/Alerts/Alerts.module.scss"],"sourcesContent":[".default-alert-variant {\n --primary-color: var(--colors-neutral-ink-base);\n --background-color: var(--colors-neutral-grey-lightest);\n}\n\n.error-alert-variant {\n --primary-color: var(--colors-secondary-red-base);\n --background-color: var(--colors-secondary-red-lightest);\n}\n\n.success-alert-variant {\n --primary-color: var(--colors-secondary-green-base);\n --background-color: var(--colors-secondary-green-lightest);\n}\n\n.info-alert-variant {\n --primary-color: var(--colors-secondary-blue-base);\n --background-color: var(--colors-secondary-blue-lightest);\n}\n\n.warning-alert-variant {\n --primary-color: var(--colors-secondary-orange-base);\n --background-color: var(--colors-secondary-yellow-lightest);\n}\n\n.recommend-alert-variant {\n --primary-color: var(--colors-secondary-purple-dark);\n --background-color: var(--colors-secondary-purple-lightest);\n}\n\n.icon > svg {\n min-width: var(--alert-icon-size);\n max-width: var(--alert-icon-size);\n width: var(--alert-icon-size);\n height: var(--alert-icon-size);\n color: var(--icon-color, var(--primary-color));\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kpCAAA;AACA,kBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,qBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,yBAAA,CAAA,mCAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -14,15 +14,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
/**
|
|
18
|
+
* MiniAlert component for compact inline status indicators with an icon and text label.
|
|
19
|
+
*/
|
|
20
|
+
const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
|
|
18
21
|
const DefaultIcon = constants.IconMap[variant];
|
|
19
|
-
return (React__default.default.createElement(FlexRow.FlexRow, { gap: "
|
|
22
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
|
|
20
23
|
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: customIconColour }), className: buildClassnames.buildClassnames([
|
|
21
24
|
Alerts_module.icon,
|
|
22
25
|
Alerts_module[`${variant}-alert-variant`],
|
|
23
26
|
MiniAlert_module['mini-alert-size'],
|
|
24
|
-
]) }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
25
|
-
React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title)));
|
|
27
|
+
]), flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
28
|
+
titleSlot || (React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title))));
|
|
26
29
|
};
|
|
27
30
|
|
|
28
31
|
exports.MiniAlert = MiniAlert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"
|
|
1
|
+
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n title,\n titleSlot,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n flexWrap=\"nowrap\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n {titleSlot || (\n <Text\n variant={isBold ? 'bodyBold' : 'body'}\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,sBAAA,CAAA,aAAA,CAACM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MiniAlertProps } from './types';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* MiniAlert component for compact inline status indicators with an icon and text label.
|
|
5
|
+
*/
|
|
6
|
+
export declare const MiniAlert: ({ title, titleSlot, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;
|
|
@@ -8,15 +8,18 @@ import { Text } from '../../Text/Text.js';
|
|
|
8
8
|
import styles from './MiniAlert.module.scss.js';
|
|
9
9
|
import alertStyles from '../Alerts.module.scss.js';
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
/**
|
|
12
|
+
* MiniAlert component for compact inline status indicators with an icon and text label.
|
|
13
|
+
*/
|
|
14
|
+
const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
|
|
12
15
|
const DefaultIcon = IconMap[variant];
|
|
13
|
-
return (React__default.createElement(FlexRow, { gap: "
|
|
16
|
+
return (React__default.createElement(FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
|
|
14
17
|
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: customIconColour }), className: buildClassnames([
|
|
15
18
|
alertStyles.icon,
|
|
16
19
|
alertStyles[`${variant}-alert-variant`],
|
|
17
20
|
styles['mini-alert-size'],
|
|
18
|
-
]) }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
19
|
-
React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title)));
|
|
21
|
+
]), flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
22
|
+
titleSlot || (React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title))));
|
|
20
23
|
};
|
|
21
24
|
|
|
22
25
|
export { MiniAlert };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"
|
|
1
|
+
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n title,\n titleSlot,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n flexWrap=\"nowrap\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n {titleSlot || (\n <Text\n variant={isBold ? 'bodyBold' : 'body'}\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"text":"
|
|
5
|
+
___$insertStyle("._text_1x68v_1 {\n color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n --alert-icon-size: var(--sizes-base);\n}");
|
|
6
|
+
var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=MiniAlert.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n --text-color: var(--colors-secondary-red-
|
|
1
|
+
{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n --alert-icon-size: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AAEE,eAAA,CAAA,kcAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"text":"
|
|
3
|
+
insertStyle("._text_1x68v_1 {\n color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n --alert-icon-size: var(--sizes-base);\n}");
|
|
4
|
+
var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=MiniAlert.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n --text-color: var(--colors-secondary-red-
|
|
1
|
+
{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n --alert-icon-size: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEEA,WAAA,CAAA,kcAAA;;;;;"}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BaseAlertProps } from '../types';
|
|
3
|
-
export type
|
|
2
|
+
import { BaseAlertProps, MiniAlertVariants } from '../types';
|
|
3
|
+
export type { MiniAlertVariants } from '../types';
|
|
4
|
+
export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & Omit<BaseAlertProps, 'variant'> & {
|
|
5
|
+
/** Visual style variant */
|
|
6
|
+
variant?: MiniAlertVariants;
|
|
7
|
+
/** Replaces the default title text with custom content (e.g. text with inline links) */
|
|
8
|
+
titleSlot?: React.ReactNode;
|
|
9
|
+
/** Override the icon colour */
|
|
4
10
|
customIconColour?: string;
|
|
11
|
+
/** Override the title text colour */
|
|
5
12
|
customTitleColour?: string;
|
|
13
|
+
/** Whether the title text is bold. Defaults to `true` */
|
|
6
14
|
isBold?: boolean;
|
|
7
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport {
|
|
1
|
+
{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n CriticalIcon,\n HelpFillIcon,\n InfoFillIcon,\n RecommendIcon,\n SuccessFillIcon,\n WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n default: InfoFillIcon,\n error: CriticalIcon,\n success: SuccessFillIcon,\n info: HelpFillIcon,\n warning: WarningIcon,\n recommend: RecommendIcon,\n};\n"],"names":["InfoFillIcon","CriticalIcon","SuccessFillIcon","HelpFillIcon","WarningIcon","RecommendIcon"],"mappings":";;;;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAEA,2BAAY;AACrB,IAAA,KAAK,EAAEC,2BAAY;AACnB,IAAA,OAAO,EAAEC,8BAAe;AACxB,IAAA,IAAI,EAAEC,2BAAY;AAClB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { IconComponent } from 'src/icons/types';
|
|
2
|
-
import {
|
|
3
|
-
export declare const IconMap: Record<
|
|
2
|
+
import { MiniAlertVariants } from './types';
|
|
3
|
+
export declare const IconMap: Record<MiniAlertVariants, IconComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport {
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n CriticalIcon,\n HelpFillIcon,\n InfoFillIcon,\n RecommendIcon,\n SuccessFillIcon,\n WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n default: InfoFillIcon,\n error: CriticalIcon,\n success: SuccessFillIcon,\n info: HelpFillIcon,\n warning: WarningIcon,\n recommend: RecommendIcon,\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;;;;"}
|
|
@@ -3,9 +3,15 @@ export type AlertColours = {
|
|
|
3
3
|
primary: string;
|
|
4
4
|
background: string;
|
|
5
5
|
};
|
|
6
|
-
|
|
6
|
+
/** Visual style variants for the Alert component */
|
|
7
|
+
export type AlertVariants = 'default' | 'error' | 'success' | 'warning';
|
|
8
|
+
/** Extended variants available to MiniAlert only */
|
|
9
|
+
export type MiniAlertVariants = AlertVariants | 'info' | 'recommend';
|
|
7
10
|
export type BaseAlertProps = {
|
|
11
|
+
/** Alert heading text */
|
|
8
12
|
title?: string;
|
|
13
|
+
/** Visual style variant */
|
|
9
14
|
variant?: AlertVariants;
|
|
15
|
+
/** Replaces the default variant icon */
|
|
10
16
|
iconSlot?: React.ReactNode;
|
|
11
17
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
export { Accordion } from './Accordion';
|
|
2
2
|
export { Action, type ActionProps, type ActionVariant } from './Action';
|
|
3
3
|
export { ActionMenu } from './ActionMenu';
|
|
4
|
-
export { Alert } from './Alerts/Alert';
|
|
5
|
-
export { MiniAlert } from './Alerts/MiniAlert';
|
|
4
|
+
export { Alert, type AlertProps, type AlertSizes, type AlertDirection } from './Alerts/Alert';
|
|
5
|
+
export { MiniAlert, type MiniAlertProps } from './Alerts/MiniAlert';
|
|
6
|
+
export type { AlertVariants, MiniAlertVariants } from './Alerts/types';
|
|
6
7
|
export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
|
|
7
8
|
export { AnimatedDropdown } from './AnimatedDropdown';
|
|
8
9
|
export { Avatar } from './Avatar';
|