@atlaskit/inline-message
Version:
An inline message lets users know when important information is available or when an action is required.
65 lines (63 loc) • 1.73 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
import { typesMapping } from '../../constants';
const iconColor = appearance => {
switch (appearance) {
case 'connectivity':
return `var(--ds-icon-brand, ${B400})`;
case 'confirmation':
return `var(--ds-icon-success, ${G300})`;
case 'info':
return `var(--ds-icon-discovery, ${P300})`;
case 'warning':
return `var(--ds-icon-warning, ${Y300})`;
case 'error':
return `var(--ds-icon-danger, ${R400})`;
}
};
const iconWrapperStyles = css({
display: 'flex',
alignItems: 'center',
flex: '0 0 auto',
color: 'var(--icon-color)'
});
const iconColorStyles = css({
color: 'var(--icon-accent-color)'
});
/**
* __Selected icon__
*
* The selected icon is used as the primary interactive element for the dialog.
* Can be used with or without supporting text.
*/
const SelectedIcon = ({
appearance,
isOpen,
label
}) => {
const {
[appearance]: {
icon: Icon,
defaultLabel
}
} = typesMapping;
return jsx("span", {
"data-ds--inline-message--icon": true
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
,
style: {
'--icon-color': iconColor(appearance)
},
css: [iconWrapperStyles, isOpen && iconColorStyles]
}, jsx(Icon, {
testId: "inline-message-icon",
label: label || defaultLabel,
size: "medium"
}));
};
export default SelectedIcon;