carbon-react 158.46.4 → 158.47.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/esm/components/message/message.component.d.ts +22 -11
- package/esm/components/message/message.component.js +1 -1
- package/esm/components/message/message.config.d.ts +72 -0
- package/esm/components/message/message.config.js +1 -0
- package/esm/components/message/message.style.d.ts +13 -3
- package/esm/components/message/message.style.js +1 -1
- package/esm/style/utils/add-focus-styling.js +1 -1
- package/lib/components/message/message.component.d.ts +22 -11
- package/lib/components/message/message.component.js +1 -1
- package/lib/components/message/message.config.d.ts +72 -0
- package/lib/components/message/message.config.js +1 -0
- package/lib/components/message/message.style.d.ts +13 -3
- package/lib/components/message/message.style.js +1 -1
- package/lib/style/utils/add-focus-styling.js +1 -1
- package/package.json +1 -1
|
@@ -4,27 +4,38 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
|
4
4
|
export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "error-subtle" | "info-subtle" | "success-subtle" | "warning-subtle" | "ai-subtle" | "callout-subtle";
|
|
5
5
|
export type InternalMessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "callout";
|
|
6
6
|
export interface MessageProps extends MarginProps, TagProps {
|
|
7
|
-
/**
|
|
7
|
+
/** Content to be rendered within the Message. */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
|
-
/** Set custom aria-label for component's close button */
|
|
9
|
+
/** Set custom aria-label for component's close button. */
|
|
10
10
|
closeButtonAriaLabel?: string;
|
|
11
|
-
/** Set custom id to component root */
|
|
11
|
+
/** Set custom id to component root. */
|
|
12
12
|
id?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Callback triggered on dismiss, will render the close button.
|
|
15
|
+
*/
|
|
14
16
|
onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
|
-
/** Flag to determine if the message is rendered */
|
|
17
|
+
/** Flag to determine if the message is rendered. */
|
|
16
18
|
open?: boolean;
|
|
17
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Flag to determine if the close button is rendered.
|
|
21
|
+
* @deprecated Please use the `onDismiss` prop to determine whether the close button is rendered instead.
|
|
22
|
+
*/
|
|
18
23
|
showCloseIcon?: boolean;
|
|
19
|
-
/** Set message title */
|
|
24
|
+
/** Set message title. */
|
|
20
25
|
title?: React.ReactNode;
|
|
21
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* Set transparent styling.
|
|
28
|
+
* @deprecated The transparent prop is deprecated and will be removed in a future release, please use the subtle variants instead.
|
|
29
|
+
*/
|
|
22
30
|
transparent?: boolean;
|
|
23
|
-
/** Set the component's variant */
|
|
31
|
+
/** Set the component's variant. */
|
|
24
32
|
variant?: MessageVariant;
|
|
25
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* Set the component's width, accepts any valid css string.
|
|
35
|
+
* Please note the component has a max-width of 720px.
|
|
36
|
+
*/
|
|
26
37
|
width?: string;
|
|
27
|
-
/** Set the component's size */
|
|
38
|
+
/** Set the component's size. */
|
|
28
39
|
size?: "medium" | "large";
|
|
29
40
|
}
|
|
30
41
|
export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{useRef as o}from"react";import{Typography as i}from"../typography/typography.component.js";import{MessageStyle as s,MessageWrapper as a,MessageContent as l,MessageContentWrapper as c,TypeIconStyle as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{useRef as o}from"react";import{Typography as i}from"../typography/typography.component.js";import{MessageStyle as s,MessageWrapper as a,MessageContent as l,MessageContentWrapper as c,CloseButtonWrapper as p,TypeIconStyle as u,MessageTitle as d}from"./message.style.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"../icon/icon.component.js";import{Button as b}from"../button/__next__/button.component.js";import{AiIcon as y,AiIconInverse as g}from"../../__internal__/ai-icon/ai-icon.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import h from"../../style/utils/filter-styled-system-margin-props.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import j from"../../__internal__/utils/logger/index.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){w(e,t,r[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let P=!1,S=!1,x=!1;const z=n.forwardRef(((n,w)=>{var{open:z=!0,transparent:D=!1,title:k,variant:I="info",children:L,onDismiss:M,id:T,closeButtonAriaLabel:C,showCloseIcon:A=!0,width:B,size:E="medium"}=n,R=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(n,["open","transparent","title","variant","children","onDismiss","id","closeButtonAriaLabel","showCloseIcon","width","size"]);D&&!P&&(j.deprecate("The 'transparent' prop in `Message` is deprecated and will soon be removed."),P=!0),"neutral"!==I||S||(j.deprecate("The 'neutral' variant in `Message` is deprecated and will soon be removed."),S=!0),!1!==A||x||(j.deprecate("The 'showCloseIcon' prop in `Message` is deprecated and will soon be removed. To prevent the close button from being rendered, don't pass the `onDismiss` prop."),x=!0);const N=o(null),W=w||N,q=O(),F=h(R),G={neutral:"info",success:"tick_circle",error:"error",warning:"warning",info:"info",callout:"tag"},H=I.endsWith("-subtle"),J=I.replace("-subtle",""),K=()=>{var n,o;return e(r,{children:[t(u,{"aria-hidden":"true",variant:J,isSubtle:H,transparent:D,children:"ai"===I?t(y,{"data-role":"ai-icon"}):"ai-subtle"===I?t(g,{"data-role":"ai-icon-subtle"}):t(f,{type:G[J]})}),t(i,{screenReaderOnly:!0,children:null===(n=(o=q.message)[J])||void 0===n?void 0:n.call(o)})]})};return z?e(s,_(v(_(v({},m("Message",R)),{transparent:D,variant:J,isSubtle:H,id:T,width:B,ref:W}),F),{tabIndex:-1,children:[!H&&K(),e(a,{children:[e(l,{"data-role":"message-content",size:E,isSubtle:H,children:[H&&K(),e(c,{size:E,children:[k?"string"==typeof k?t(d,{size:E,children:k}):k:null,L]})]}),A&&M&&t(p,{size:E,children:t(b,{"data-role":"close","data-element":"close","aria-label":C||q.message.closeButtonAriaLabel(),variantType:"subtle",size:"small",onClick:e=>{M(e)},children:t(f,{type:"cross"})})})]})]})):null}));z.displayName="Message";export{z as Message,z as default};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Primary variant colours applied to icon background.
|
|
3
|
+
*/
|
|
4
|
+
export declare const variantPrimaryColor: {
|
|
5
|
+
error: string;
|
|
6
|
+
info: string;
|
|
7
|
+
success: string;
|
|
8
|
+
warning: string;
|
|
9
|
+
neutral: string;
|
|
10
|
+
ai: string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Primary variant colours applied to the border.
|
|
14
|
+
*/
|
|
15
|
+
export declare const variantPrimaryColorBorder: {
|
|
16
|
+
error: string;
|
|
17
|
+
info: string;
|
|
18
|
+
success: string;
|
|
19
|
+
warning: string;
|
|
20
|
+
neutral: string;
|
|
21
|
+
ai: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Subtle variant colours applied to background.
|
|
25
|
+
*/
|
|
26
|
+
export declare const variantSubtleColor: {
|
|
27
|
+
error: string;
|
|
28
|
+
info: string;
|
|
29
|
+
success: string;
|
|
30
|
+
warning: string;
|
|
31
|
+
ai: string;
|
|
32
|
+
callout: string;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Subtle variant colours applied to icon.
|
|
36
|
+
*/
|
|
37
|
+
export declare const variantSubtleIconColor: {
|
|
38
|
+
error: string;
|
|
39
|
+
info: string;
|
|
40
|
+
success: string;
|
|
41
|
+
warning: string;
|
|
42
|
+
ai: string;
|
|
43
|
+
callout: string;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Size map for medium and large sizes
|
|
47
|
+
*
|
|
48
|
+
* padding: Padding applied do MessageContent
|
|
49
|
+
* subtleGap: Gap applied to MessageContent when variant is subtle
|
|
50
|
+
* contentGap: Gap applied to MessageContentWrapper
|
|
51
|
+
* closeButtonPadding: Padding applied to CloseButtonWrapper
|
|
52
|
+
* contentFont: Font applied to the Message content
|
|
53
|
+
* titleFont: Font applied to the Message title
|
|
54
|
+
*/
|
|
55
|
+
export declare const sizeMap: {
|
|
56
|
+
medium: {
|
|
57
|
+
padding: string;
|
|
58
|
+
subtleGap: string;
|
|
59
|
+
contentGap: string;
|
|
60
|
+
closeButtonPadding: string;
|
|
61
|
+
contentFont: string;
|
|
62
|
+
titleFont: string;
|
|
63
|
+
};
|
|
64
|
+
large: {
|
|
65
|
+
padding: string;
|
|
66
|
+
subtleGap: string;
|
|
67
|
+
contentGap: string;
|
|
68
|
+
closeButtonPadding: string;
|
|
69
|
+
contentFont: string;
|
|
70
|
+
titleFont: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const a={error:"var(--message-contextual-error-bg-default)",info:"var(--message-contextual-info-bg-default)",success:"var(--message-contextual-success-bg-default)",warning:"var(--message-contextual-warning-bg-default)",neutral:"var(--colorsSemanticNeutral500)",ai:"var(--message-contextual-ai-bg-default)"},e={error:"var(--message-contextual-error-border-default)",info:"var(--message-contextual-info-border-default)",success:"var(--message-contextual-success-border-default)",warning:"var(--message-contextual-warning-border-default)",neutral:"var(--colorsSemanticNeutral500)",ai:"var(--message-contextual-ai-border-default)"},o={error:"var(--message-contextual-error-bg-alt)",info:"var(--message-contextual-info-bg-alt)",success:"var(--message-contextual-success-bg-alt)",warning:"var(--message-contextual-warning-bg-alt)",ai:"var(--message-contextual-ai-bg-alt)",callout:"var(--message-contextual-callout-bg-alt)"},l={error:"var(--message-contextual-error-icon)",info:"var(--message-contextual-info-icon)",success:"var(--message-contextual-success-icon) ",warning:"var(--message-contextual-warning-icon)",ai:"var(--message-contextual-ai-icon)",callout:"var(--message-contextual-callout-icon)"},t={medium:{padding:"var(--global-space-comp-m) var(--global-space-comp-s) var(--global-space-comp-m) var(--global-space-comp-m)",subtleGap:"var(--global-space-comp-m)",contentGap:"var(--global-space-comp-2-xs)",closeButtonPadding:"var(--global-space-comp-s) var(--global-space-comp-s) 0 0",contentFont:"var(--global-font-static-comp-regular-m)",titleFont:"var(--global-font-static-comp-medium-m)"},large:{padding:"var(--global-space-comp-l) var(--global-space-comp-m) var(--global-space-comp-l) var(--global-space-comp-l)",subtleGap:"var(--global-space-comp-l)",contentGap:"var(--global-space-comp-xs)",closeButtonPadding:"var(--global-space-comp-m) var(--global-space-comp-m) 0 0",contentFont:"var(--global-font-static-comp-regular-l)",titleFont:"var(--global-font-static-comp-medium-l)"}};export{t as sizeMap,a as variantPrimaryColor,e as variantPrimaryColorBorder,o as variantSubtleColor,l as variantSubtleIconColor};
|
|
@@ -5,13 +5,23 @@ type MessageStyleProps = {
|
|
|
5
5
|
isSubtle?: boolean;
|
|
6
6
|
transparent?: boolean;
|
|
7
7
|
width?: string;
|
|
8
|
-
size?: "medium" | "large";
|
|
9
8
|
};
|
|
10
9
|
export declare const MessageStyle: import("styled-components").StyledComponent<"div", any, {
|
|
11
10
|
theme: object;
|
|
12
11
|
} & MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
|
|
13
12
|
export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
|
-
export declare const MessageContent: import("styled-components").StyledComponent<"div", any,
|
|
15
|
-
|
|
13
|
+
export declare const MessageContent: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
+
size: "medium" | "large";
|
|
15
|
+
isSubtle?: boolean;
|
|
16
|
+
}, never>;
|
|
17
|
+
export declare const MessageContentWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
+
size: "medium" | "large";
|
|
19
|
+
}, never>;
|
|
20
|
+
export declare const MessageTitle: import("styled-components").StyledComponent<"p", any, {
|
|
21
|
+
size: "medium" | "large";
|
|
22
|
+
}, never>;
|
|
23
|
+
export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
24
|
+
size: "medium" | "large";
|
|
25
|
+
}, never>;
|
|
16
26
|
export declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps, never>;
|
|
17
27
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as
|
|
1
|
+
import e,{css as s}from"styled-components";import{margin as t}from"styled-system";import a from"../../style/themes/apply-base-theme.js";import{variantPrimaryColorBorder as o,variantSubtleColor as n,sizeMap as i,variantPrimaryColor as r,variantSubtleIconColor as l}from"./message.config.js";const d=e.div.attrs(a).withConfig({displayName:"message.style__MessageStyle",componentId:"sc-a07fcfd3-0"})(["position:relative;display:flex;box-sizing:border-box;border-radius:var(--global-radius-container-m);overflow:hidden;border:var(--global-borderwidth-xs) solid ",";background-color:var(--message-contextual-bg);max-width:720px;:focus{outline:none;}"," "," "," ",""],(({variant:e})=>o[e]),(({isSubtle:e,variant:t})=>e&&s(["border:none;background-color:",";"],n[t])),(({transparent:e})=>e&&s(["border:none;background:transparent;"])),(({width:e})=>e&&`width: ${e};`),t),c=e.div.withConfig({displayName:"message.style__MessageWrapper",componentId:"sc-a07fcfd3-1"})(["display:flex;align-items:flex-start;flex:1 0 0;"]),p=e.div.withConfig({displayName:"message.style__MessageContent",componentId:"sc-a07fcfd3-2"})(["display:flex;flex:1 0 0;",""],(({size:e,isSubtle:t})=>s(["padding:",";",""],i[e].padding,t&&s(["gap:",";"],i[e].subtleGap)))),g=e.div.withConfig({displayName:"message.style__MessageContentWrapper",componentId:"sc-a07fcfd3-3"})(["display:flex;flex-direction:column;justify-content:center;color:var(--message-contextual-txt);",""],(({size:e})=>s(["gap:",";font:",";"],i[e].contentGap,i[e].contentFont))),f=e.p.withConfig({displayName:"message.style__MessageTitle",componentId:"sc-a07fcfd3-4"})(["",""],(({size:e})=>s(["margin:0;font:",";"],i[e].titleFont))),m=e.div.withConfig({displayName:"message.style__CloseButtonWrapper",componentId:"sc-a07fcfd3-5"})(["",""],(({size:e})=>s(["padding:",";"],i[e].closeButtonPadding))),y=e.div.withConfig({displayName:"message.style__TypeIconStyle",componentId:"sc-a07fcfd3-6"})(["",""],(({transparent:e,isSubtle:t,variant:a})=>s(["display:flex;span{width:var(--global-size-2-xs);height:var(--global-size-2-xs);}"," ",""],!t&&s(["background-color:",";justify-content:center;align-items:center;width:var(--global-size-s);span{&:before{color:var(--message-contextual-icon);}}"],r[a]),(t||e)&&s(["background-color:transparent;span{&:before{color:",";}}"],l[a]))));export{m as CloseButtonWrapper,p as MessageContent,g as MessageContentWrapper,d as MessageStyle,f as MessageTitle,c as MessageWrapper,y as TypeIconStyle};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var a=(a=!1)=>{let o="var(--focus-shadow-default)";return a&&(o="var(--focus-shadow-inset)"),`\n -webkit-box-shadow: ${o};\n box-shadow: ${o};\n\n outline: transparent 3px solid;\n `};export{a as default};
|
|
@@ -4,27 +4,38 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
|
4
4
|
export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "error-subtle" | "info-subtle" | "success-subtle" | "warning-subtle" | "ai-subtle" | "callout-subtle";
|
|
5
5
|
export type InternalMessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "callout";
|
|
6
6
|
export interface MessageProps extends MarginProps, TagProps {
|
|
7
|
-
/**
|
|
7
|
+
/** Content to be rendered within the Message. */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
|
-
/** Set custom aria-label for component's close button */
|
|
9
|
+
/** Set custom aria-label for component's close button. */
|
|
10
10
|
closeButtonAriaLabel?: string;
|
|
11
|
-
/** Set custom id to component root */
|
|
11
|
+
/** Set custom id to component root. */
|
|
12
12
|
id?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Callback triggered on dismiss, will render the close button.
|
|
15
|
+
*/
|
|
14
16
|
onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
|
-
/** Flag to determine if the message is rendered */
|
|
17
|
+
/** Flag to determine if the message is rendered. */
|
|
16
18
|
open?: boolean;
|
|
17
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Flag to determine if the close button is rendered.
|
|
21
|
+
* @deprecated Please use the `onDismiss` prop to determine whether the close button is rendered instead.
|
|
22
|
+
*/
|
|
18
23
|
showCloseIcon?: boolean;
|
|
19
|
-
/** Set message title */
|
|
24
|
+
/** Set message title. */
|
|
20
25
|
title?: React.ReactNode;
|
|
21
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* Set transparent styling.
|
|
28
|
+
* @deprecated The transparent prop is deprecated and will be removed in a future release, please use the subtle variants instead.
|
|
29
|
+
*/
|
|
22
30
|
transparent?: boolean;
|
|
23
|
-
/** Set the component's variant */
|
|
31
|
+
/** Set the component's variant. */
|
|
24
32
|
variant?: MessageVariant;
|
|
25
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* Set the component's width, accepts any valid css string.
|
|
35
|
+
* Please note the component has a max-width of 720px.
|
|
36
|
+
*/
|
|
26
37
|
width?: string;
|
|
27
|
-
/** Set the component's size */
|
|
38
|
+
/** Set the component's size. */
|
|
28
39
|
size?: "medium" | "large";
|
|
29
40
|
}
|
|
30
41
|
export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../typography/typography.component.js"),n=require("./message.style.js"),s=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../icon/icon.component.js"),o=require("../button/__next__/button.component.js"),a=require("../../__internal__/ai-icon/ai-icon.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js"),c=require("../../hooks/__internal__/useLocale/useLocale.js"),u=require("../../__internal__/utils/logger/index.js");function p(e){return e&&e.__esModule?e:{default:e}}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){d(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let y=!1,g=!1,j=!1;const h=p(t).default.forwardRef(((p,d)=>{var{open:h=!0,transparent:m=!1,title:O,variant:v="info",children:_,onDismiss:w,id:x,closeButtonAriaLabel:P,showCloseIcon:M=!0,width:q,size:S="medium"}=p,I=function(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r,n,s={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(s[r]=e[r]);return s}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}(p,["open","transparent","title","variant","children","onDismiss","id","closeButtonAriaLabel","showCloseIcon","width","size"]);m&&!y&&(u.default.deprecate("The 'transparent' prop in `Message` is deprecated and will soon be removed."),y=!0),"neutral"!==v||g||(u.default.deprecate("The 'neutral' variant in `Message` is deprecated and will soon be removed."),g=!0),!1!==M||j||(u.default.deprecate("The 'showCloseIcon' prop in `Message` is deprecated and will soon be removed. To prevent the close button from being rendered, don't pass the `onDismiss` prop."),j=!0);const T=t.useRef(null),z=d||T,C=c.default(),D=l.default(I),k={neutral:"info",success:"tick_circle",error:"error",warning:"warning",info:"info",callout:"tag"},A=v.endsWith("-subtle"),B=v.replace("-subtle",""),L=()=>{var t,s;return e.jsxs(e.Fragment,{children:[e.jsx(n.TypeIconStyle,{"aria-hidden":"true",variant:B,isSubtle:A,transparent:m,children:"ai"===v?e.jsx(a.AiIcon,{"data-role":"ai-icon"}):"ai-subtle"===v?e.jsx(a.AiIconInverse,{"data-role":"ai-icon-subtle"}):e.jsx(i.default,{type:k[B]})}),e.jsx(r.Typography,{screenReaderOnly:!0,children:null===(t=(s=C.message)[B])||void 0===t?void 0:t.call(s)})]})};return h?e.jsxs(n.MessageStyle,b(f(b(f({},s.default("Message",I)),{transparent:m,variant:B,isSubtle:A,id:x,width:q,ref:z}),D),{tabIndex:-1,children:[!A&&L(),e.jsxs(n.MessageWrapper,{children:[e.jsxs(n.MessageContent,{"data-role":"message-content",size:S,isSubtle:A,children:[A&&L(),e.jsxs(n.MessageContentWrapper,{size:S,children:[O?"string"==typeof O?e.jsx(n.MessageTitle,{size:S,children:O}):O:null,_]})]}),M&&w&&e.jsx(n.CloseButtonWrapper,{size:S,children:e.jsx(o.Button,{"data-role":"close","data-element":"close","aria-label":P||C.message.closeButtonAriaLabel(),variantType:"subtle",size:"small",onClick:e=>{w(e)},children:e.jsx(i.default,{type:"cross"})})})]})]})):null}));h.displayName="Message",exports.Message=h,exports.default=h;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Primary variant colours applied to icon background.
|
|
3
|
+
*/
|
|
4
|
+
export declare const variantPrimaryColor: {
|
|
5
|
+
error: string;
|
|
6
|
+
info: string;
|
|
7
|
+
success: string;
|
|
8
|
+
warning: string;
|
|
9
|
+
neutral: string;
|
|
10
|
+
ai: string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Primary variant colours applied to the border.
|
|
14
|
+
*/
|
|
15
|
+
export declare const variantPrimaryColorBorder: {
|
|
16
|
+
error: string;
|
|
17
|
+
info: string;
|
|
18
|
+
success: string;
|
|
19
|
+
warning: string;
|
|
20
|
+
neutral: string;
|
|
21
|
+
ai: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Subtle variant colours applied to background.
|
|
25
|
+
*/
|
|
26
|
+
export declare const variantSubtleColor: {
|
|
27
|
+
error: string;
|
|
28
|
+
info: string;
|
|
29
|
+
success: string;
|
|
30
|
+
warning: string;
|
|
31
|
+
ai: string;
|
|
32
|
+
callout: string;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Subtle variant colours applied to icon.
|
|
36
|
+
*/
|
|
37
|
+
export declare const variantSubtleIconColor: {
|
|
38
|
+
error: string;
|
|
39
|
+
info: string;
|
|
40
|
+
success: string;
|
|
41
|
+
warning: string;
|
|
42
|
+
ai: string;
|
|
43
|
+
callout: string;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Size map for medium and large sizes
|
|
47
|
+
*
|
|
48
|
+
* padding: Padding applied do MessageContent
|
|
49
|
+
* subtleGap: Gap applied to MessageContent when variant is subtle
|
|
50
|
+
* contentGap: Gap applied to MessageContentWrapper
|
|
51
|
+
* closeButtonPadding: Padding applied to CloseButtonWrapper
|
|
52
|
+
* contentFont: Font applied to the Message content
|
|
53
|
+
* titleFont: Font applied to the Message title
|
|
54
|
+
*/
|
|
55
|
+
export declare const sizeMap: {
|
|
56
|
+
medium: {
|
|
57
|
+
padding: string;
|
|
58
|
+
subtleGap: string;
|
|
59
|
+
contentGap: string;
|
|
60
|
+
closeButtonPadding: string;
|
|
61
|
+
contentFont: string;
|
|
62
|
+
titleFont: string;
|
|
63
|
+
};
|
|
64
|
+
large: {
|
|
65
|
+
padding: string;
|
|
66
|
+
subtleGap: string;
|
|
67
|
+
contentGap: string;
|
|
68
|
+
closeButtonPadding: string;
|
|
69
|
+
contentFont: string;
|
|
70
|
+
titleFont: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";exports.sizeMap={medium:{padding:"var(--global-space-comp-m) var(--global-space-comp-s) var(--global-space-comp-m) var(--global-space-comp-m)",subtleGap:"var(--global-space-comp-m)",contentGap:"var(--global-space-comp-2-xs)",closeButtonPadding:"var(--global-space-comp-s) var(--global-space-comp-s) 0 0",contentFont:"var(--global-font-static-comp-regular-m)",titleFont:"var(--global-font-static-comp-medium-m)"},large:{padding:"var(--global-space-comp-l) var(--global-space-comp-m) var(--global-space-comp-l) var(--global-space-comp-l)",subtleGap:"var(--global-space-comp-l)",contentGap:"var(--global-space-comp-xs)",closeButtonPadding:"var(--global-space-comp-m) var(--global-space-comp-m) 0 0",contentFont:"var(--global-font-static-comp-regular-l)",titleFont:"var(--global-font-static-comp-medium-l)"}},exports.variantPrimaryColor={error:"var(--message-contextual-error-bg-default)",info:"var(--message-contextual-info-bg-default)",success:"var(--message-contextual-success-bg-default)",warning:"var(--message-contextual-warning-bg-default)",neutral:"var(--colorsSemanticNeutral500)",ai:"var(--message-contextual-ai-bg-default)"},exports.variantPrimaryColorBorder={error:"var(--message-contextual-error-border-default)",info:"var(--message-contextual-info-border-default)",success:"var(--message-contextual-success-border-default)",warning:"var(--message-contextual-warning-border-default)",neutral:"var(--colorsSemanticNeutral500)",ai:"var(--message-contextual-ai-border-default)"},exports.variantSubtleColor={error:"var(--message-contextual-error-bg-alt)",info:"var(--message-contextual-info-bg-alt)",success:"var(--message-contextual-success-bg-alt)",warning:"var(--message-contextual-warning-bg-alt)",ai:"var(--message-contextual-ai-bg-alt)",callout:"var(--message-contextual-callout-bg-alt)"},exports.variantSubtleIconColor={error:"var(--message-contextual-error-icon)",info:"var(--message-contextual-info-icon)",success:"var(--message-contextual-success-icon) ",warning:"var(--message-contextual-warning-icon)",ai:"var(--message-contextual-ai-icon)",callout:"var(--message-contextual-callout-icon)"};
|
|
@@ -5,13 +5,23 @@ type MessageStyleProps = {
|
|
|
5
5
|
isSubtle?: boolean;
|
|
6
6
|
transparent?: boolean;
|
|
7
7
|
width?: string;
|
|
8
|
-
size?: "medium" | "large";
|
|
9
8
|
};
|
|
10
9
|
export declare const MessageStyle: import("styled-components").StyledComponent<"div", any, {
|
|
11
10
|
theme: object;
|
|
12
11
|
} & MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
|
|
13
12
|
export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
|
-
export declare const MessageContent: import("styled-components").StyledComponent<"div", any,
|
|
15
|
-
|
|
13
|
+
export declare const MessageContent: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
+
size: "medium" | "large";
|
|
15
|
+
isSubtle?: boolean;
|
|
16
|
+
}, never>;
|
|
17
|
+
export declare const MessageContentWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
+
size: "medium" | "large";
|
|
19
|
+
}, never>;
|
|
20
|
+
export declare const MessageTitle: import("styled-components").StyledComponent<"p", any, {
|
|
21
|
+
size: "medium" | "large";
|
|
22
|
+
}, never>;
|
|
23
|
+
export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
24
|
+
size: "medium" | "large";
|
|
25
|
+
}, never>;
|
|
16
26
|
export declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps, never>;
|
|
17
27
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),s=require("styled-system"),
|
|
1
|
+
"use strict";var e=require("styled-components"),s=require("styled-system"),a=require("../../style/themes/apply-base-theme.js"),t=require("./message.config.js");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(e);const r=n.default.div.attrs(a.default).withConfig({displayName:"message.style__MessageStyle",componentId:"sc-a07fcfd3-0"})(["position:relative;display:flex;box-sizing:border-box;border-radius:var(--global-radius-container-m);overflow:hidden;border:var(--global-borderwidth-xs) solid ",";background-color:var(--message-contextual-bg);max-width:720px;:focus{outline:none;}"," "," "," ",""],(({variant:e})=>t.variantPrimaryColorBorder[e]),(({isSubtle:s,variant:a})=>s&&e.css(["border:none;background-color:",";"],t.variantSubtleColor[a])),(({transparent:s})=>s&&e.css(["border:none;background:transparent;"])),(({width:e})=>e&&`width: ${e};`),s.margin),i=n.default.div.withConfig({displayName:"message.style__MessageWrapper",componentId:"sc-a07fcfd3-1"})(["display:flex;align-items:flex-start;flex:1 0 0;"]),l=n.default.div.withConfig({displayName:"message.style__MessageContent",componentId:"sc-a07fcfd3-2"})(["display:flex;flex:1 0 0;",""],(({size:s,isSubtle:a})=>e.css(["padding:",";",""],t.sizeMap[s].padding,a&&e.css(["gap:",";"],t.sizeMap[s].subtleGap)))),d=n.default.div.withConfig({displayName:"message.style__MessageContentWrapper",componentId:"sc-a07fcfd3-3"})(["display:flex;flex-direction:column;justify-content:center;color:var(--message-contextual-txt);",""],(({size:s})=>e.css(["gap:",";font:",";"],t.sizeMap[s].contentGap,t.sizeMap[s].contentFont))),c=n.default.p.withConfig({displayName:"message.style__MessageTitle",componentId:"sc-a07fcfd3-4"})(["",""],(({size:s})=>e.css(["margin:0;font:",";"],t.sizeMap[s].titleFont))),p=n.default.div.withConfig({displayName:"message.style__CloseButtonWrapper",componentId:"sc-a07fcfd3-5"})(["",""],(({size:s})=>e.css(["padding:",";"],t.sizeMap[s].closeButtonPadding))),g=n.default.div.withConfig({displayName:"message.style__TypeIconStyle",componentId:"sc-a07fcfd3-6"})(["",""],(({transparent:s,isSubtle:a,variant:o})=>e.css(["display:flex;span{width:var(--global-size-2-xs);height:var(--global-size-2-xs);}"," ",""],!a&&e.css(["background-color:",";justify-content:center;align-items:center;width:var(--global-size-s);span{&:before{color:var(--message-contextual-icon);}}"],t.variantPrimaryColor[o]),(a||s)&&e.css(["background-color:transparent;span{&:before{color:",";}}"],t.variantSubtleIconColor[o]))));exports.CloseButtonWrapper=p,exports.MessageContent=l,exports.MessageContentWrapper=d,exports.MessageStyle=r,exports.MessageTitle=c,exports.MessageWrapper=i,exports.TypeIconStyle=g;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=(e=!1)=>{let t="var(--focus-shadow-default)";return e&&(t="var(--focus-shadow-inset)"),`\n -webkit-box-shadow: ${t};\n box-shadow: ${t};\n\n outline: transparent 3px solid;\n `};
|