@amboss/design-system 4.1.0 → 4.2.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/build/cjs/components/InlineMessage/InlineMessage.d.ts +19 -0
- package/build/cjs/components/InlineMessage/InlineMessage.js +1 -0
- package/build/cjs/index.d.ts +24 -23
- package/build/cjs/index.js +1 -1
- package/build/cjs/shared/intl/translations/de.json +5 -1
- package/build/cjs/shared/intl/translations/en.json +5 -1
- package/build/esm/components/InlineMessage/InlineMessage.d.ts +19 -0
- package/build/esm/components/InlineMessage/InlineMessage.js +1 -0
- package/build/esm/index.d.ts +24 -23
- package/build/esm/index.js +1 -1
- package/build/esm/shared/intl/translations/de.json +5 -1
- package/build/esm/shared/intl/translations/en.json +5 -1
- package/package.json +1 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactElement } from "react";
|
|
2
|
+
export type InlineMessageVariant = "error" | "warning" | "success" | "info";
|
|
3
|
+
export type InlineMessageLiveRegion = "assertive" | "polite" | "off";
|
|
4
|
+
export type InlineMessageProps = {
|
|
5
|
+
/** The message. Keep it short and actionable; may contain inline elements such as a Link */
|
|
6
|
+
text: string | ReactElement;
|
|
7
|
+
/** Functional variant; sets icon, color, and the default screen-reader announcement urgency */
|
|
8
|
+
variant: InlineMessageVariant;
|
|
9
|
+
/**
|
|
10
|
+
* Live-region behavior; defaults from `variant` (error → "assertive", others → "polite").
|
|
11
|
+
* Set to "off" when the message is not dynamically shown as feedback — e.g. it is
|
|
12
|
+
* a permanent part of the page, or it is referenced by a form field via aria-describedby
|
|
13
|
+
*/
|
|
14
|
+
liveRegion?: InlineMessageLiveRegion;
|
|
15
|
+
/** Allows a form control to reference the message via aria-describedby */
|
|
16
|
+
id?: string;
|
|
17
|
+
"data-e2e-test-id"?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare function InlineMessage({ text, variant, liveRegion, id, "data-e2e-test-id": dataE2eTestId, }: InlineMessageProps): ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"InlineMessage",{enumerable:!0,get:function(){return InlineMessage}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_useIntl=require("../../shared/intl/useIntl"),_Box=require("../Box/Box"),_Icon=require("../Icon/Icon"),_Inline=require("../Inline/Inline"),_Text=require("../Typography/Text/Text"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),CONFIG_BY_VARIANT={error:{iconName:"alert-triangle",color:"error",defaultLiveRegion:"assertive",iconLabelId:"InlineMessage.ErrorIcon.AriaLabel"},warning:{iconName:"alert-circle",color:"warning",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.WarningIcon.AriaLabel"},success:{iconName:"check-circle",color:"success",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.SuccessIcon.AriaLabel"},info:{iconName:"info",color:"info",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.InfoIcon.AriaLabel"}},ROLE_BY_LIVE_REGION={assertive:"alert",polite:"status"};function InlineMessage({text,variant,liveRegion,id,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=(0,_useIntl.useIntl)(),{iconName,color,defaultLiveRegion,iconLabelId}=CONFIG_BY_VARIANT[variant],resolvedLiveRegion=liveRegion??defaultLiveRegion,role="off"===resolvedLiveRegion?void 0:ROLE_BY_LIVE_REGION[resolvedLiveRegion],iconLabel=formatMessage(iconLabelId),textRef=(0,_react.useRef)(null),[messageText,setMessageText]=(0,_react.useState)(""),[announcement,setAnnouncement]=(0,_react.useState)("");return(0,_react.useEffect)(()=>{setMessageText(textRef.current?.textContent??"")},[text]),(0,_react.useEffect)(()=>{if(!role||!messageText)return void setAnnouncement("");let announceTimeoutId=setTimeout(()=>setAnnouncement(`${iconLabel}: ${messageText}`),100),clearTimeoutId=setTimeout(()=>setAnnouncement(""),7100);return()=>{clearTimeout(announceTimeoutId),clearTimeout(clearTimeoutId)}},[role,iconLabel,messageText]),_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Inline.Inline,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"InlineMessage",noWrap:!0,vAlignItems:"top"},_react.default.createElement(_Box.Box,{space:"zero",tSpace:"xxs"},_react.default.createElement(_Icon.Icon,{name:iconName,color:color,size:"s",role:"img","aria-label":iconLabel})),_react.default.createElement(_Text.Text,{color:color,size:"m"},_react.default.createElement("span",{ref:textRef},text))),role&&_react.default.createElement(_ScreenReaderText.ScreenReaderText,{role:role},announcement))}
|
package/build/cjs/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { VisualConfig } from "./web-tokens/visualConfig";
|
|
2
2
|
export type { VisualConfig };
|
|
3
3
|
export declare const dark: VisualConfig, light: VisualConfig;
|
|
4
|
-
export { ThemeProvider, CacheProvider } from "@emotion/react";
|
|
5
4
|
export { default as createCache } from "@emotion/cache";
|
|
5
|
+
export { CacheProvider, ThemeProvider } from "@emotion/react";
|
|
6
6
|
export * from "./components/AccessCardItem/AccessCardItem";
|
|
7
|
+
export * from "./components/AIButton/AIButton";
|
|
7
8
|
export * from "./components/AIFloatingButton/AIFloatingButton";
|
|
8
9
|
export * from "./components/Avatar/Avatar";
|
|
9
10
|
export * from "./components/AvatarGroup/AvatarGroup";
|
|
@@ -23,15 +24,27 @@ export * from "./components/Collapsible/Collapsible";
|
|
|
23
24
|
export * from "./components/ColorIndicator/ColorIndicator";
|
|
24
25
|
export * from "./components/ColorPicker/ColorPicker";
|
|
25
26
|
export * from "./components/Column/Columns";
|
|
27
|
+
export type { FilterDialogConfig, FilterDialogOption, FilterDialogProps, FilterDialogValues, } from "./components/Composite/FilterDialog/-types";
|
|
28
|
+
export * from "./components/Composite/FilterDialog/FilterDialog";
|
|
26
29
|
export * from "./components/Container";
|
|
30
|
+
export * from "./components/Content/ContentBox/ContentBox";
|
|
31
|
+
export * from "./components/Content/ContentCheckbox/ContentCheckbox";
|
|
32
|
+
export * from "./components/Content/ContentFontResizer";
|
|
33
|
+
export * from "./components/Content/ContentHeading/ContentHeading";
|
|
34
|
+
export * from "./components/Content/ContentLink/ContentLink";
|
|
35
|
+
export * from "./components/Content/ContentList";
|
|
36
|
+
export * from "./components/Content/ContentPictogramButton/ContentPictogramButton";
|
|
37
|
+
export * from "./components/Content/ContentTable";
|
|
38
|
+
export * from "./components/Content/ContentTableModal/ContentTableModal";
|
|
39
|
+
export * from "./components/Content/ContentText/ContentText";
|
|
40
|
+
export * from "./components/Content/DosageButton";
|
|
41
|
+
export * from "./components/Content/ReferenceButton";
|
|
27
42
|
export * from "./components/CountButton/CountButton";
|
|
28
43
|
export * from "./components/DataTable";
|
|
29
44
|
export * from "./components/Divider/Divider";
|
|
30
45
|
export * from "./components/DropdownMenu/DropdownMenu";
|
|
31
46
|
export * from "./components/EntityList";
|
|
32
47
|
export * from "./components/EntityTree";
|
|
33
|
-
export * from "./components/Composite/FilterDialog/FilterDialog";
|
|
34
|
-
export type { FilterDialogProps, FilterDialogValues, FilterDialogConfig, FilterDialogOption, } from "./components/Composite/FilterDialog/-types";
|
|
35
48
|
export * from "./components/Form/Checkbox/Checkbox";
|
|
36
49
|
export * from "./components/Form/Combobox/Combobox";
|
|
37
50
|
export * from "./components/Form/DateInput/DateInput";
|
|
@@ -46,16 +59,18 @@ export * from "./components/Form/RangeInput/RangeInput";
|
|
|
46
59
|
export * from "./components/Form/SearchInput/SearchInput";
|
|
47
60
|
export * from "./components/Form/SegmentedControl/SegmentedControl";
|
|
48
61
|
export * from "./components/Form/Select";
|
|
49
|
-
export * from "./components/Form/ToolbarToggle/ToolbarToggle";
|
|
50
62
|
export * from "./components/Form/Textarea/Textarea";
|
|
51
63
|
export * from "./components/Form/Toggle/Toggle";
|
|
52
64
|
export * from "./components/Form/ToggleButton/ToggleButton";
|
|
65
|
+
export * from "./components/Form/ToolbarToggle/ToolbarToggle";
|
|
53
66
|
export * from "./components/Grid/Grid";
|
|
54
67
|
export * from "./components/Icon/Icon";
|
|
55
68
|
export * from "./components/IconTile/IconTile";
|
|
56
69
|
export * from "./components/Image/Image";
|
|
57
70
|
export * from "./components/Inline/Inline";
|
|
71
|
+
export * from "./components/InlineMessage/InlineMessage";
|
|
58
72
|
export * from "./components/InteractiveBox/InteractiveBox";
|
|
73
|
+
export * from "./components/Layout";
|
|
59
74
|
export * from "./components/Lightbox/Lightbox";
|
|
60
75
|
export * from "./components/Link/Link";
|
|
61
76
|
export * from "./components/LoadingSpinner/LoadingSpinner";
|
|
@@ -67,20 +82,22 @@ export * from "./components/NavBar";
|
|
|
67
82
|
export * from "./components/Notification/Notification";
|
|
68
83
|
export * from "./components/Pagination/Pagination";
|
|
69
84
|
export * from "./components/Patterns/ButtonGroup/ButtonGroup";
|
|
85
|
+
export * from "./components/Patterns/EmptyState/EmptyState";
|
|
70
86
|
export * from "./components/Patterns/Modal/Modal";
|
|
71
87
|
export * from "./components/PictogramButton/PictogramButton";
|
|
72
88
|
export * from "./components/Popover/Popover";
|
|
73
89
|
export * from "./components/ProgressBar/ProgressBar";
|
|
74
90
|
export * from "./components/PromptButton/PromptButton";
|
|
75
91
|
export * from "./components/PromptInput/PromptInput";
|
|
76
|
-
export * from "./components/SplashCard/SplashCard";
|
|
77
|
-
export * from "./components/SplashCardMedia/SplashCardMedia";
|
|
78
92
|
export * from "./components/QBankRichText/QBankRichText";
|
|
79
93
|
export * from "./components/RadioCard/RadioCard";
|
|
94
|
+
export * from "./components/RangePopover/RangePopover";
|
|
80
95
|
export * from "./components/RoundButton/RoundButton";
|
|
81
96
|
export * from "./components/SearchResult/SearchResult";
|
|
82
97
|
export * from "./components/SegmentedProgressBar/SegmentedProgressBar";
|
|
83
98
|
export * from "./components/Sheet/Sheet";
|
|
99
|
+
export * from "./components/SplashCard/SplashCard";
|
|
100
|
+
export * from "./components/SplashCardMedia/SplashCardMedia";
|
|
84
101
|
export * from "./components/Stack/Stack";
|
|
85
102
|
export * from "./components/SubThemeProvider/SubThemeProvider";
|
|
86
103
|
export * from "./components/Tabs/Tabs";
|
|
@@ -95,24 +112,8 @@ export * from "./components/Typography/StyledText/StyledText";
|
|
|
95
112
|
export * from "./components/Typography/Text";
|
|
96
113
|
export * from "./components/Typography/TextClamped/TextClamped";
|
|
97
114
|
export * from "./components/UserHighlightTooltip/UserHighlightTooltip";
|
|
98
|
-
export * from "./components/RangePopover/RangePopover";
|
|
99
|
-
export * from "./shared/useSelectionRange";
|
|
100
115
|
export * from "./components/Utilities/AnimatedBorder/useAnimatedBorder";
|
|
101
116
|
export * from "./components/Utilities/ContainerQuery/ContainerQuery";
|
|
102
117
|
export * from "./components/Utilities/Expandable/Expandable";
|
|
103
118
|
export * from "./components/Utilities/ScreenReaderText/ScreenReaderText";
|
|
104
|
-
export * from "./
|
|
105
|
-
export * from "./components/Content/ContentBox/ContentBox";
|
|
106
|
-
export * from "./components/Content/ContentCheckbox/ContentCheckbox";
|
|
107
|
-
export * from "./components/Content/ContentFontResizer";
|
|
108
|
-
export * from "./components/Content/ContentHeading/ContentHeading";
|
|
109
|
-
export * from "./components/Content/ContentLink/ContentLink";
|
|
110
|
-
export * from "./components/Content/ContentPictogramButton/ContentPictogramButton";
|
|
111
|
-
export * from "./components/Content/ContentText/ContentText";
|
|
112
|
-
export * from "./components/Content/ContentList";
|
|
113
|
-
export * from "./components/Content/ContentTable";
|
|
114
|
-
export * from "./components/Content/ContentTableModal/ContentTableModal";
|
|
115
|
-
export * from "./components/Content/DosageButton";
|
|
116
|
-
export * from "./components/Content/ReferenceButton";
|
|
117
|
-
export * from "./components/AIButton/AIButton";
|
|
118
|
-
export * from "./components/Layout";
|
|
119
|
+
export * from "./shared/useSelectionRange";
|
package/build/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),_cache=/*#__PURE__*/_interop_require_default._(require("@emotion/cache")),_react=require("@emotion/react");_export_star._(require("./components/AccessCardItem/AccessCardItem"),exports),_export_star._(require("./components/AIButton/AIButton"),exports),_export_star._(require("./components/AIFloatingButton/AIFloatingButton"),exports),_export_star._(require("./components/Avatar/Avatar"),exports),_export_star._(require("./components/AvatarGroup/AvatarGroup"),exports),_export_star._(require("./components/Badge/Badge"),exports),_export_star._(require("./components/BinaryFeedback/BinaryFeedback"),exports),_export_star._(require("./components/Box/Box"),exports),_export_star._(require("./components/BulkActionsToolbar/BulkActionsToolbar"),exports),_export_star._(require("./components/Button/Button"),exports),_export_star._(require("./components/Callout/Callout"),exports),_export_star._(require("./components/Card/Card"),exports),_export_star._(require("./components/Card/CardBox/CardBox"),exports),_export_star._(require("./components/CatalogCard/CatalogCard"),exports),_export_star._(require("./components/ChatMessage"),exports),_export_star._(require("./components/ChatResponse"),exports),_export_star._(require("./components/CheckboxCard/CheckboxCard"),exports),_export_star._(require("./components/Collapsible/Collapsible"),exports),_export_star._(require("./components/ColorIndicator/ColorIndicator"),exports),_export_star._(require("./components/ColorPicker/ColorPicker"),exports),_export_star._(require("./components/Column/Columns"),exports),_export_star._(require("./components/Composite/FilterDialog/FilterDialog"),exports),_export_star._(require("./components/Container"),exports),_export_star._(require("./components/Content/ContentBox/ContentBox"),exports),_export_star._(require("./components/Content/ContentCheckbox/ContentCheckbox"),exports),_export_star._(require("./components/Content/ContentFontResizer"),exports),_export_star._(require("./components/Content/ContentHeading/ContentHeading"),exports),_export_star._(require("./components/Content/ContentLink/ContentLink"),exports),_export_star._(require("./components/Content/ContentList"),exports),_export_star._(require("./components/Content/ContentPictogramButton/ContentPictogramButton"),exports),_export_star._(require("./components/Content/ContentTable"),exports),_export_star._(require("./components/Content/ContentTableModal/ContentTableModal"),exports),_export_star._(require("./components/Content/ContentText/ContentText"),exports),_export_star._(require("./components/Content/DosageButton"),exports),_export_star._(require("./components/Content/ReferenceButton"),exports),_export_star._(require("./components/CountButton/CountButton"),exports),_export_star._(require("./components/DataTable"),exports),_export_star._(require("./components/Divider/Divider"),exports),_export_star._(require("./components/DropdownMenu/DropdownMenu"),exports),_export_star._(require("./components/EntityList"),exports),_export_star._(require("./components/EntityTree"),exports),_export_star._(require("./components/Form/Checkbox/Checkbox"),exports),_export_star._(require("./components/Form/Combobox/Combobox"),exports),_export_star._(require("./components/Form/DateInput/DateInput"),exports),_export_star._(require("./components/Form/DatePicker"),exports),_export_star._(require("./components/Form/FormFieldGroup/FormFieldGroup"),exports),_export_star._(require("./components/Form/Input"),exports),_export_star._(require("./components/Form/MaskedInput/MaskedInput"),exports),_export_star._(require("./components/Form/PasswordInput"),exports),_export_star._(require("./components/Form/Radio/Radio"),exports),_export_star._(require("./components/Form/RadioButton/RadioButton"),exports),_export_star._(require("./components/Form/RangeInput/RangeInput"),exports),_export_star._(require("./components/Form/SearchInput/SearchInput"),exports),_export_star._(require("./components/Form/SegmentedControl/SegmentedControl"),exports),_export_star._(require("./components/Form/Select"),exports),_export_star._(require("./components/Form/Textarea/Textarea"),exports),_export_star._(require("./components/Form/Toggle/Toggle"),exports),_export_star._(require("./components/Form/ToggleButton/ToggleButton"),exports),_export_star._(require("./components/Form/ToolbarToggle/ToolbarToggle"),exports),_export_star._(require("./components/Grid/Grid"),exports),_export_star._(require("./components/Icon/Icon"),exports),_export_star._(require("./components/IconTile/IconTile"),exports),_export_star._(require("./components/Image/Image"),exports),_export_star._(require("./components/Inline/Inline"),exports),_export_star._(require("./components/InlineMessage/InlineMessage"),exports),_export_star._(require("./components/InteractiveBox/InteractiveBox"),exports),_export_star._(require("./components/Layout"),exports),_export_star._(require("./components/Lightbox/Lightbox"),exports),_export_star._(require("./components/Link/Link"),exports),_export_star._(require("./components/LoadingSpinner/LoadingSpinner"),exports),_export_star._(require("./components/Logo/Logo"),exports),_export_star._(require("./components/MediaItem"),exports),_export_star._(require("./components/MediaViewerBar/MediaViewerBar"),exports),_export_star._(require("./components/MediaViewerCarousel/MediaViewerCarousel"),exports),_export_star._(require("./components/NavBar"),exports),_export_star._(require("./components/Notification/Notification"),exports),_export_star._(require("./components/Pagination/Pagination"),exports),_export_star._(require("./components/Patterns/ButtonGroup/ButtonGroup"),exports),_export_star._(require("./components/Patterns/EmptyState/EmptyState"),exports),_export_star._(require("./components/Patterns/Modal/Modal"),exports),_export_star._(require("./components/PictogramButton/PictogramButton"),exports),_export_star._(require("./components/Popover/Popover"),exports),_export_star._(require("./components/ProgressBar/ProgressBar"),exports),_export_star._(require("./components/PromptButton/PromptButton"),exports),_export_star._(require("./components/PromptInput/PromptInput"),exports),_export_star._(require("./components/QBankRichText/QBankRichText"),exports),_export_star._(require("./components/RadioCard/RadioCard"),exports),_export_star._(require("./components/RangePopover/RangePopover"),exports),_export_star._(require("./components/RoundButton/RoundButton"),exports),_export_star._(require("./components/SearchResult/SearchResult"),exports),_export_star._(require("./components/SegmentedProgressBar/SegmentedProgressBar"),exports),_export_star._(require("./components/Sheet/Sheet"),exports),_export_star._(require("./components/SplashCard/SplashCard"),exports),_export_star._(require("./components/SplashCardMedia/SplashCardMedia"),exports),_export_star._(require("./components/Stack/Stack"),exports),_export_star._(require("./components/SubThemeProvider/SubThemeProvider"),exports),_export_star._(require("./components/Tabs/Tabs"),exports),_export_star._(require("./components/Tag/Tag"),exports),_export_star._(require("./components/TagGroup/TagGroup"),exports),_export_star._(require("./components/Toast"),exports),_export_star._(require("./components/Toggletip/Toggletip"),exports),_export_star._(require("./components/Tooltip/Tooltip"),exports),_export_star._(require("./components/Tutorialtip/Tutorialtip"),exports),_export_star._(require("./components/Typography/Header"),exports),_export_star._(require("./components/Typography/StyledText/StyledText"),exports),_export_star._(require("./components/Typography/Text"),exports),_export_star._(require("./components/Typography/TextClamped/TextClamped"),exports),_export_star._(require("./components/UserHighlightTooltip/UserHighlightTooltip"),exports),_export_star._(require("./components/Utilities/AnimatedBorder/useAnimatedBorder"),exports),_export_star._(require("./components/Utilities/ContainerQuery/ContainerQuery"),exports),_export_star._(require("./components/Utilities/Expandable/Expandable"),exports),_export_star._(require("./components/Utilities/ScreenReaderText/ScreenReaderText"),exports),_export_star._(require("./shared/useSelectionRange"),exports);const{dark,light}=_visualConfig.ambossVisualConfiguration;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"FormField.ErrorIcon.AriaLabel": "Fehler"
|
|
2
|
+
"FormField.ErrorIcon.AriaLabel": "Fehler",
|
|
3
|
+
"InlineMessage.ErrorIcon.AriaLabel": "Fehler",
|
|
4
|
+
"InlineMessage.WarningIcon.AriaLabel": "Warnung",
|
|
5
|
+
"InlineMessage.SuccessIcon.AriaLabel": "Erfolg",
|
|
6
|
+
"InlineMessage.InfoIcon.AriaLabel": "Info"
|
|
3
7
|
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"FormField.ErrorIcon.AriaLabel": "Error"
|
|
2
|
+
"FormField.ErrorIcon.AriaLabel": "Error",
|
|
3
|
+
"InlineMessage.ErrorIcon.AriaLabel": "Error",
|
|
4
|
+
"InlineMessage.WarningIcon.AriaLabel": "Warning",
|
|
5
|
+
"InlineMessage.SuccessIcon.AriaLabel": "Success",
|
|
6
|
+
"InlineMessage.InfoIcon.AriaLabel": "Info"
|
|
3
7
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactElement } from "react";
|
|
2
|
+
export type InlineMessageVariant = "error" | "warning" | "success" | "info";
|
|
3
|
+
export type InlineMessageLiveRegion = "assertive" | "polite" | "off";
|
|
4
|
+
export type InlineMessageProps = {
|
|
5
|
+
/** The message. Keep it short and actionable; may contain inline elements such as a Link */
|
|
6
|
+
text: string | ReactElement;
|
|
7
|
+
/** Functional variant; sets icon, color, and the default screen-reader announcement urgency */
|
|
8
|
+
variant: InlineMessageVariant;
|
|
9
|
+
/**
|
|
10
|
+
* Live-region behavior; defaults from `variant` (error → "assertive", others → "polite").
|
|
11
|
+
* Set to "off" when the message is not dynamically shown as feedback — e.g. it is
|
|
12
|
+
* a permanent part of the page, or it is referenced by a form field via aria-describedby
|
|
13
|
+
*/
|
|
14
|
+
liveRegion?: InlineMessageLiveRegion;
|
|
15
|
+
/** Allows a form control to reference the message via aria-describedby */
|
|
16
|
+
id?: string;
|
|
17
|
+
"data-e2e-test-id"?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare function InlineMessage({ text, variant, liveRegion, id, "data-e2e-test-id": dataE2eTestId, }: InlineMessageProps): ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";import{useIntl}from"../../shared/intl/useIntl";import{Box}from"../Box/Box";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Text}from"../Typography/Text/Text";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";let CONFIG_BY_VARIANT={error:{iconName:"alert-triangle",color:"error",defaultLiveRegion:"assertive",iconLabelId:"InlineMessage.ErrorIcon.AriaLabel"},warning:{iconName:"alert-circle",color:"warning",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.WarningIcon.AriaLabel"},success:{iconName:"check-circle",color:"success",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.SuccessIcon.AriaLabel"},info:{iconName:"info",color:"info",defaultLiveRegion:"polite",iconLabelId:"InlineMessage.InfoIcon.AriaLabel"}},ROLE_BY_LIVE_REGION={assertive:"alert",polite:"status"};export function InlineMessage({text,variant,liveRegion,id,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=useIntl(),{iconName,color,defaultLiveRegion,iconLabelId}=CONFIG_BY_VARIANT[variant],resolvedLiveRegion=liveRegion??defaultLiveRegion,role="off"===resolvedLiveRegion?void 0:ROLE_BY_LIVE_REGION[resolvedLiveRegion],iconLabel=formatMessage(iconLabelId),textRef=useRef(null),[messageText,setMessageText]=useState(""),[announcement,setAnnouncement]=useState("");return useEffect(()=>{setMessageText(textRef.current?.textContent??"")},[text]),useEffect(()=>{if(!role||!messageText)return void setAnnouncement("");let announceTimeoutId=setTimeout(()=>setAnnouncement(`${iconLabel}: ${messageText}`),100),clearTimeoutId=setTimeout(()=>setAnnouncement(""),7100);return()=>{clearTimeout(announceTimeoutId),clearTimeout(clearTimeoutId)}},[role,iconLabel,messageText]),React.createElement(React.Fragment,null,React.createElement(Inline,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"InlineMessage",noWrap:!0,vAlignItems:"top"},React.createElement(Box,{space:"zero",tSpace:"xxs"},React.createElement(Icon,{name:iconName,color:color,size:"s",role:"img","aria-label":iconLabel})),React.createElement(Text,{color:color,size:"m"},React.createElement("span",{ref:textRef},text))),role&&React.createElement(ScreenReaderText,{role:role},announcement))}
|
package/build/esm/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { VisualConfig } from "./web-tokens/visualConfig";
|
|
2
2
|
export type { VisualConfig };
|
|
3
3
|
export declare const dark: VisualConfig, light: VisualConfig;
|
|
4
|
-
export { ThemeProvider, CacheProvider } from "@emotion/react";
|
|
5
4
|
export { default as createCache } from "@emotion/cache";
|
|
5
|
+
export { CacheProvider, ThemeProvider } from "@emotion/react";
|
|
6
6
|
export * from "./components/AccessCardItem/AccessCardItem";
|
|
7
|
+
export * from "./components/AIButton/AIButton";
|
|
7
8
|
export * from "./components/AIFloatingButton/AIFloatingButton";
|
|
8
9
|
export * from "./components/Avatar/Avatar";
|
|
9
10
|
export * from "./components/AvatarGroup/AvatarGroup";
|
|
@@ -23,15 +24,27 @@ export * from "./components/Collapsible/Collapsible";
|
|
|
23
24
|
export * from "./components/ColorIndicator/ColorIndicator";
|
|
24
25
|
export * from "./components/ColorPicker/ColorPicker";
|
|
25
26
|
export * from "./components/Column/Columns";
|
|
27
|
+
export type { FilterDialogConfig, FilterDialogOption, FilterDialogProps, FilterDialogValues, } from "./components/Composite/FilterDialog/-types";
|
|
28
|
+
export * from "./components/Composite/FilterDialog/FilterDialog";
|
|
26
29
|
export * from "./components/Container";
|
|
30
|
+
export * from "./components/Content/ContentBox/ContentBox";
|
|
31
|
+
export * from "./components/Content/ContentCheckbox/ContentCheckbox";
|
|
32
|
+
export * from "./components/Content/ContentFontResizer";
|
|
33
|
+
export * from "./components/Content/ContentHeading/ContentHeading";
|
|
34
|
+
export * from "./components/Content/ContentLink/ContentLink";
|
|
35
|
+
export * from "./components/Content/ContentList";
|
|
36
|
+
export * from "./components/Content/ContentPictogramButton/ContentPictogramButton";
|
|
37
|
+
export * from "./components/Content/ContentTable";
|
|
38
|
+
export * from "./components/Content/ContentTableModal/ContentTableModal";
|
|
39
|
+
export * from "./components/Content/ContentText/ContentText";
|
|
40
|
+
export * from "./components/Content/DosageButton";
|
|
41
|
+
export * from "./components/Content/ReferenceButton";
|
|
27
42
|
export * from "./components/CountButton/CountButton";
|
|
28
43
|
export * from "./components/DataTable";
|
|
29
44
|
export * from "./components/Divider/Divider";
|
|
30
45
|
export * from "./components/DropdownMenu/DropdownMenu";
|
|
31
46
|
export * from "./components/EntityList";
|
|
32
47
|
export * from "./components/EntityTree";
|
|
33
|
-
export * from "./components/Composite/FilterDialog/FilterDialog";
|
|
34
|
-
export type { FilterDialogProps, FilterDialogValues, FilterDialogConfig, FilterDialogOption, } from "./components/Composite/FilterDialog/-types";
|
|
35
48
|
export * from "./components/Form/Checkbox/Checkbox";
|
|
36
49
|
export * from "./components/Form/Combobox/Combobox";
|
|
37
50
|
export * from "./components/Form/DateInput/DateInput";
|
|
@@ -46,16 +59,18 @@ export * from "./components/Form/RangeInput/RangeInput";
|
|
|
46
59
|
export * from "./components/Form/SearchInput/SearchInput";
|
|
47
60
|
export * from "./components/Form/SegmentedControl/SegmentedControl";
|
|
48
61
|
export * from "./components/Form/Select";
|
|
49
|
-
export * from "./components/Form/ToolbarToggle/ToolbarToggle";
|
|
50
62
|
export * from "./components/Form/Textarea/Textarea";
|
|
51
63
|
export * from "./components/Form/Toggle/Toggle";
|
|
52
64
|
export * from "./components/Form/ToggleButton/ToggleButton";
|
|
65
|
+
export * from "./components/Form/ToolbarToggle/ToolbarToggle";
|
|
53
66
|
export * from "./components/Grid/Grid";
|
|
54
67
|
export * from "./components/Icon/Icon";
|
|
55
68
|
export * from "./components/IconTile/IconTile";
|
|
56
69
|
export * from "./components/Image/Image";
|
|
57
70
|
export * from "./components/Inline/Inline";
|
|
71
|
+
export * from "./components/InlineMessage/InlineMessage";
|
|
58
72
|
export * from "./components/InteractiveBox/InteractiveBox";
|
|
73
|
+
export * from "./components/Layout";
|
|
59
74
|
export * from "./components/Lightbox/Lightbox";
|
|
60
75
|
export * from "./components/Link/Link";
|
|
61
76
|
export * from "./components/LoadingSpinner/LoadingSpinner";
|
|
@@ -67,20 +82,22 @@ export * from "./components/NavBar";
|
|
|
67
82
|
export * from "./components/Notification/Notification";
|
|
68
83
|
export * from "./components/Pagination/Pagination";
|
|
69
84
|
export * from "./components/Patterns/ButtonGroup/ButtonGroup";
|
|
85
|
+
export * from "./components/Patterns/EmptyState/EmptyState";
|
|
70
86
|
export * from "./components/Patterns/Modal/Modal";
|
|
71
87
|
export * from "./components/PictogramButton/PictogramButton";
|
|
72
88
|
export * from "./components/Popover/Popover";
|
|
73
89
|
export * from "./components/ProgressBar/ProgressBar";
|
|
74
90
|
export * from "./components/PromptButton/PromptButton";
|
|
75
91
|
export * from "./components/PromptInput/PromptInput";
|
|
76
|
-
export * from "./components/SplashCard/SplashCard";
|
|
77
|
-
export * from "./components/SplashCardMedia/SplashCardMedia";
|
|
78
92
|
export * from "./components/QBankRichText/QBankRichText";
|
|
79
93
|
export * from "./components/RadioCard/RadioCard";
|
|
94
|
+
export * from "./components/RangePopover/RangePopover";
|
|
80
95
|
export * from "./components/RoundButton/RoundButton";
|
|
81
96
|
export * from "./components/SearchResult/SearchResult";
|
|
82
97
|
export * from "./components/SegmentedProgressBar/SegmentedProgressBar";
|
|
83
98
|
export * from "./components/Sheet/Sheet";
|
|
99
|
+
export * from "./components/SplashCard/SplashCard";
|
|
100
|
+
export * from "./components/SplashCardMedia/SplashCardMedia";
|
|
84
101
|
export * from "./components/Stack/Stack";
|
|
85
102
|
export * from "./components/SubThemeProvider/SubThemeProvider";
|
|
86
103
|
export * from "./components/Tabs/Tabs";
|
|
@@ -95,24 +112,8 @@ export * from "./components/Typography/StyledText/StyledText";
|
|
|
95
112
|
export * from "./components/Typography/Text";
|
|
96
113
|
export * from "./components/Typography/TextClamped/TextClamped";
|
|
97
114
|
export * from "./components/UserHighlightTooltip/UserHighlightTooltip";
|
|
98
|
-
export * from "./components/RangePopover/RangePopover";
|
|
99
|
-
export * from "./shared/useSelectionRange";
|
|
100
115
|
export * from "./components/Utilities/AnimatedBorder/useAnimatedBorder";
|
|
101
116
|
export * from "./components/Utilities/ContainerQuery/ContainerQuery";
|
|
102
117
|
export * from "./components/Utilities/Expandable/Expandable";
|
|
103
118
|
export * from "./components/Utilities/ScreenReaderText/ScreenReaderText";
|
|
104
|
-
export * from "./
|
|
105
|
-
export * from "./components/Content/ContentBox/ContentBox";
|
|
106
|
-
export * from "./components/Content/ContentCheckbox/ContentCheckbox";
|
|
107
|
-
export * from "./components/Content/ContentFontResizer";
|
|
108
|
-
export * from "./components/Content/ContentHeading/ContentHeading";
|
|
109
|
-
export * from "./components/Content/ContentLink/ContentLink";
|
|
110
|
-
export * from "./components/Content/ContentPictogramButton/ContentPictogramButton";
|
|
111
|
-
export * from "./components/Content/ContentText/ContentText";
|
|
112
|
-
export * from "./components/Content/ContentList";
|
|
113
|
-
export * from "./components/Content/ContentTable";
|
|
114
|
-
export * from "./components/Content/ContentTableModal/ContentTableModal";
|
|
115
|
-
export * from "./components/Content/DosageButton";
|
|
116
|
-
export * from "./components/Content/ReferenceButton";
|
|
117
|
-
export * from "./components/AIButton/AIButton";
|
|
118
|
-
export * from "./components/Layout";
|
|
119
|
+
export * from "./shared/useSelectionRange";
|
package/build/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ambossVisualConfiguration}from"./web-tokens/visualConfig";export const{dark,light}=ambossVisualConfiguration;export{
|
|
1
|
+
import{ambossVisualConfiguration}from"./web-tokens/visualConfig";export const{dark,light}=ambossVisualConfiguration;export{default as createCache}from"@emotion/cache";export{CacheProvider,ThemeProvider}from"@emotion/react";export*from"./components/AccessCardItem/AccessCardItem";export*from"./components/AIButton/AIButton";export*from"./components/AIFloatingButton/AIFloatingButton";export*from"./components/Avatar/Avatar";export*from"./components/AvatarGroup/AvatarGroup";export*from"./components/Badge/Badge";export*from"./components/BinaryFeedback/BinaryFeedback";export*from"./components/Box/Box";export*from"./components/BulkActionsToolbar/BulkActionsToolbar";export*from"./components/Button/Button";export*from"./components/Callout/Callout";export*from"./components/Card/Card";export*from"./components/Card/CardBox/CardBox";export*from"./components/CatalogCard/CatalogCard";export*from"./components/ChatMessage";export*from"./components/ChatResponse";export*from"./components/CheckboxCard/CheckboxCard";export*from"./components/Collapsible/Collapsible";export*from"./components/ColorIndicator/ColorIndicator";export*from"./components/ColorPicker/ColorPicker";export*from"./components/Column/Columns";export*from"./components/Composite/FilterDialog/FilterDialog";export*from"./components/Container";export*from"./components/Content/ContentBox/ContentBox";export*from"./components/Content/ContentCheckbox/ContentCheckbox";export*from"./components/Content/ContentFontResizer";export*from"./components/Content/ContentHeading/ContentHeading";export*from"./components/Content/ContentLink/ContentLink";export*from"./components/Content/ContentList";export*from"./components/Content/ContentPictogramButton/ContentPictogramButton";export*from"./components/Content/ContentTable";export*from"./components/Content/ContentTableModal/ContentTableModal";export*from"./components/Content/ContentText/ContentText";export*from"./components/Content/DosageButton";export*from"./components/Content/ReferenceButton";export*from"./components/CountButton/CountButton";export*from"./components/DataTable";export*from"./components/Divider/Divider";export*from"./components/DropdownMenu/DropdownMenu";export*from"./components/EntityList";export*from"./components/EntityTree";export*from"./components/Form/Checkbox/Checkbox";export*from"./components/Form/Combobox/Combobox";export*from"./components/Form/DateInput/DateInput";export*from"./components/Form/DatePicker";export*from"./components/Form/FormFieldGroup/FormFieldGroup";export*from"./components/Form/Input";export*from"./components/Form/MaskedInput/MaskedInput";export*from"./components/Form/PasswordInput";export*from"./components/Form/Radio/Radio";export*from"./components/Form/RadioButton/RadioButton";export*from"./components/Form/RangeInput/RangeInput";export*from"./components/Form/SearchInput/SearchInput";export*from"./components/Form/SegmentedControl/SegmentedControl";export*from"./components/Form/Select";export*from"./components/Form/Textarea/Textarea";export*from"./components/Form/Toggle/Toggle";export*from"./components/Form/ToggleButton/ToggleButton";export*from"./components/Form/ToolbarToggle/ToolbarToggle";export*from"./components/Grid/Grid";export*from"./components/Icon/Icon";export*from"./components/IconTile/IconTile";export*from"./components/Image/Image";export*from"./components/Inline/Inline";export*from"./components/InlineMessage/InlineMessage";export*from"./components/InteractiveBox/InteractiveBox";export*from"./components/Layout";export*from"./components/Lightbox/Lightbox";export*from"./components/Link/Link";export*from"./components/LoadingSpinner/LoadingSpinner";export*from"./components/Logo/Logo";export*from"./components/MediaItem";export*from"./components/MediaViewerBar/MediaViewerBar";export*from"./components/MediaViewerCarousel/MediaViewerCarousel";export*from"./components/NavBar";export*from"./components/Notification/Notification";export*from"./components/Pagination/Pagination";export*from"./components/Patterns/ButtonGroup/ButtonGroup";export*from"./components/Patterns/EmptyState/EmptyState";export*from"./components/Patterns/Modal/Modal";export*from"./components/PictogramButton/PictogramButton";export*from"./components/Popover/Popover";export*from"./components/ProgressBar/ProgressBar";export*from"./components/PromptButton/PromptButton";export*from"./components/PromptInput/PromptInput";export*from"./components/QBankRichText/QBankRichText";export*from"./components/RadioCard/RadioCard";export*from"./components/RangePopover/RangePopover";export*from"./components/RoundButton/RoundButton";export*from"./components/SearchResult/SearchResult";export*from"./components/SegmentedProgressBar/SegmentedProgressBar";export*from"./components/Sheet/Sheet";export*from"./components/SplashCard/SplashCard";export*from"./components/SplashCardMedia/SplashCardMedia";export*from"./components/Stack/Stack";export*from"./components/SubThemeProvider/SubThemeProvider";export*from"./components/Tabs/Tabs";export*from"./components/Tag/Tag";export*from"./components/TagGroup/TagGroup";export*from"./components/Toast";export*from"./components/Toggletip/Toggletip";export*from"./components/Tooltip/Tooltip";export*from"./components/Tutorialtip/Tutorialtip";export*from"./components/Typography/Header";export*from"./components/Typography/StyledText/StyledText";export*from"./components/Typography/Text";export*from"./components/Typography/TextClamped/TextClamped";export*from"./components/UserHighlightTooltip/UserHighlightTooltip";export*from"./components/Utilities/AnimatedBorder/useAnimatedBorder";export*from"./components/Utilities/ContainerQuery/ContainerQuery";export*from"./components/Utilities/Expandable/Expandable";export*from"./components/Utilities/ScreenReaderText/ScreenReaderText";export*from"./shared/useSelectionRange";
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"FormField.ErrorIcon.AriaLabel": "Fehler"
|
|
2
|
+
"FormField.ErrorIcon.AriaLabel": "Fehler",
|
|
3
|
+
"InlineMessage.ErrorIcon.AriaLabel": "Fehler",
|
|
4
|
+
"InlineMessage.WarningIcon.AriaLabel": "Warnung",
|
|
5
|
+
"InlineMessage.SuccessIcon.AriaLabel": "Erfolg",
|
|
6
|
+
"InlineMessage.InfoIcon.AriaLabel": "Info"
|
|
3
7
|
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"FormField.ErrorIcon.AriaLabel": "Error"
|
|
2
|
+
"FormField.ErrorIcon.AriaLabel": "Error",
|
|
3
|
+
"InlineMessage.ErrorIcon.AriaLabel": "Error",
|
|
4
|
+
"InlineMessage.WarningIcon.AriaLabel": "Warning",
|
|
5
|
+
"InlineMessage.SuccessIcon.AriaLabel": "Success",
|
|
6
|
+
"InlineMessage.InfoIcon.AriaLabel": "Info"
|
|
3
7
|
}
|