@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
48 lines • 2.42 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, mergeStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../../acs-ui-common/src";
// eslint-disable-next-line no-restricted-imports
import { Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
import React from 'react';
/**
* A component to show a banner in the UI.
*
* @private
*/
export const Banner = (props) => {
var _a, _b;
const strings = props.strings;
const theme = useTheme();
return React.createElement(Stack, { horizontalAlign: "center" },
React.createElement(Stack, { "data-ui-id": "banner", className: containerStyles(theme) },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(Stack, { horizontal: true },
((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && React.createElement(Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps)),
React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
props.primaryButton ? React.createElement(PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }) : React.createElement(DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))));
};
const titleTextClassName = mergeStyles({
fontWeight: 400,
fontSize: _pxToRem(14),
lineHeight: _pxToRem(16),
alignSelf: 'center'
});
const containerStyles = (theme) => mergeStyles({
boxShadow: theme.effects.elevation8,
width: '20rem',
padding: '0.75rem',
borderRadius: '0.25rem',
position: 'relative',
backgroundColor: theme.palette.white
});
const bannerIconClassName = mergeStyles({
fontSize: '1.25rem',
alignSelf: 'center',
marginRight: '0.5rem',
svg: {
width: '1.25rem',
height: '1.25rem'
}
});
//# sourceMappingURL=Banner.js.map