@navinc/base-react-components
Version:
Nav's Pattern Library
102 lines (99 loc) • 5.72 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { forwardRef } from 'react';
import { ButtonInheritColor } from '../button/button.js';
import { FlexRow100, flexRowCssMap } from '../flex/flex-row.js';
import { FlexColumn0, flexColumnCssMap } from '../flex/flex-column.js';
import { Icon } from '../icon/icon.js';
import { IconButton } from '../icon-button/icon-button.js';
import { addClassNameTo } from '../../add-classname-to.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const colors = {
info: {
background: 'surfaceDim',
color: 'onSurface',
iconColor: 'onSurfaceVariant',
},
important: {
background: 'inverseSurface',
color: 'inverseOnSurface',
iconColor: 'onSurfaceDim',
},
recommendation: {
background: 'infoContainer',
color: 'onInfoContainer',
iconColor: 'infoBright',
},
error: {
background: 'errorContainer',
color: 'onErrorContainer',
iconColor: 'errorBright',
},
};
const ButtonContainer = styled.div.withConfig({ displayName: "brc-sc-ButtonContainer", componentId: "brc-sc-72zkwb" }) `
/* hack to avoid extra space below icon */
display: flex;
`;
export const BannerButton = styled(ButtonInheritColor).attrs((props) => (Object.assign({ variant: 'plain', density: 'tight' }, props))).withConfig({ displayName: "brc-sc-BannerButton", componentId: "brc-sc-7u7fau" }) `
white-space: nowrap;
`;
export const BannerIcon = styled(Icon).attrs((props) => (Object.assign({ size: 'medium' }, props))).withConfig({ displayName: "brc-sc-BannerIcon", componentId: "brc-sc-1ygx9xd" }) ``;
export const BannerHeader = addClassNameTo('h3', 'headline');
export const BannerBody = styledBackwardsCompatibility('div');
const InlineSizeContainer = styled.div.withConfig({ displayName: "brc-sc-InlineSizeContainer", componentId: "brc-sc-jym0mz" }) `
container-type: inline-size;
`;
const Container = styled(addClassNameTo('div', 'body2')).withConfig({ displayName: "brc-sc-Container", componentId: "brc-sc-17ubwju" }) `
display: flex;
flex-direction: row;
align-items: flex-start;
gap: ${({ theme }) => theme.spacing.space100};
padding: ${({ $slim, theme }) => ($slim ? theme.spacing.space100 : theme.spacing.space150)};
border-radius: ${({ $inCard }) => ($inCard ? '4px' : '8px')};
background-color: ${({ theme, emphasis }) => theme[emphasis && emphasis in colors ? colors[emphasis].background : colors.info.background]};
color: ${({ theme, emphasis }) => theme[emphasis && emphasis in colors ? colors[emphasis].color : colors.info.color]};
${BannerIcon} {
color: ${({ theme, emphasis }) => theme[emphasis && emphasis in colors ? colors[emphasis].iconColor : colors.info.iconColor]};
}
${({ theme }) => theme.mediaQuery.largerThanPhone} {
${ButtonContainer} ${BannerButton} {
padding: ${({ theme }) => theme.spacing.space25};
}
}
`;
const ColumnOnSmallScreen = styled.div.withConfig({ displayName: "brc-sc-ColumnOnSmallScreen", componentId: "brc-sc-1fh149j" }) `
${flexColumnCssMap.space100}
/* stylelint-disable-next-line plugin/no-unsupported-browser-features -- not supported by Safari on iOS 15.6-15.8, fallback is acceptable */
@container (min-width: 386px) {
${flexRowCssMap.space100}
flex-grow: 1;
justify-content: space-between;
align-items: flex-start;
}
`;
const FlexRow100Grow = styled(FlexRow100).withConfig({ displayName: "brc-sc-FlexRow100Grow", componentId: "brc-sc-1hzu2gv" }) `
flex-grow: 1;
`;
export const BannerBase = styledBackwardsCompatibility(forwardRef((_a, ref) => {
var { icon, header, body, button, inCard, open = true, onOpenChange } = _a, props = __rest(_a, ["icon", "header", "body", "button", "inCard", "open", "onOpenChange"]);
if (!open) {
return null;
}
return (_jsx(InlineSizeContainer, { children: _jsxs(Container, Object.assign({ ref: ref, "$slim": !header, "$inCard": inCard }, props, { children: [icon && _jsx("div", { className: "flex", children: icon }), onOpenChange ? (_jsxs(FlexRow100Grow, { children: [_jsx("div", { className: "flex grow flex-1 text-left", children: _jsxs(FlexColumn0, { style: { gap: 8 }, children: [header, body, button && _jsx(ButtonContainer, { children: button })] }) }), _jsx(IconButton, { className: "shrink-0", name: "actions/close", isFilled: true, onClick: () => onOpenChange(false) })] })) : (_jsxs(ColumnOnSmallScreen, { children: [_jsxs("div", { className: "flex-1 text-left", children: [header, body] }), button && _jsx(ButtonContainer, { children: button })] }))] })) }));
}));
export const Banner = styledBackwardsCompatibility(forwardRef((_a, ref) => {
var { iconName, headerText, bodyText, iconClassName } = _a, props = __rest(_a, ["iconName", "headerText", "bodyText", "iconClassName"]);
return (_jsx(BannerBase, Object.assign({ ref: ref, icon: iconName && _jsx(BannerIcon, { name: iconName, className: iconClassName }), header: headerText && _jsx(BannerHeader, { children: headerText }), body: bodyText && _jsx(BannerBody, { children: bodyText }) }, props)));
}));
//# sourceMappingURL=banner.js.map