123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- import * as React from 'react';
- import {css} from '@emotion/react';
- import styled from '@emotion/styled';
- import {IconClose} from 'app/icons/iconClose';
- import {t} from 'app/locale';
- import space from 'app/styles/space';
- type Props = {
- title?: string;
- subtitle?: string;
- isDismissable?: boolean;
- onCloseClick?: () => void;
- className?: string;
- } & BannerWrapperProps;
- class Banner extends React.Component<Props> {
- static defaultProps: Partial<Props> = {
- isDismissable: true,
- };
- render() {
- const {
- title,
- subtitle,
- isDismissable,
- onCloseClick,
- children,
- backgroundImg,
- backgroundComponent,
- className,
- } = this.props;
- return (
- <BannerWrapper
- backgroundComponent={backgroundComponent}
- backgroundImg={backgroundImg}
- className={className}
- >
- {backgroundComponent}
- {isDismissable ? (
- <StyledIconClose aria-label={t('Close')} onClick={onCloseClick} />
- ) : null}
- <BannerContent>
- <BannerTitle>{title}</BannerTitle>
- <BannerSubtitle>{subtitle}</BannerSubtitle>
- <BannerActions>{children}</BannerActions>
- </BannerContent>
- </BannerWrapper>
- );
- }
- }
- type BannerWrapperProps = {
- backgroundImg?: string;
- backgroundComponent?: React.ReactNode;
- };
- const BannerWrapper = styled('div')<BannerWrapperProps>`
- ${p =>
- p.backgroundImg
- ? css`
- background: url(${p.backgroundImg});
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
- `
- : css`
- background: ${p.theme.gray500};
- `}
- ${p =>
- p.backgroundComponent &&
- css`
- display: flex;
- flex-direction: column;
- overflow: hidden;
- `}
- position: relative;
- margin-bottom: ${space(3)};
- box-shadow: ${p => p.theme.dropShadowLight};
- border-radius: ${p => p.theme.borderRadius};
- color: ${p => p.theme.white};
- `;
- const BannerContent = styled('div')`
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: ${space(4)};
- @media (max-width: ${p => p.theme.breakpoints[0]}) {
- padding: ${space(0)};
- }
- `;
- const BannerTitle = styled('h1')`
- margin-bottom: ${space(0.25)};
- @media (max-width: ${p => p.theme.breakpoints[0]}) {
- font-size: 24px;
- }
- @media (min-width: ${p => p.theme.breakpoints[1]}) {
- margin-top: ${space(2)};
- margin-bottom: ${space(0.5)};
- font-size: 42px;
- }
- `;
- const BannerSubtitle = styled('div')`
- font-size: ${p => p.theme.fontSizeMedium};
- @media (max-width: ${p => p.theme.breakpoints[0]}) {
- font-size: ${p => p.theme.fontSizeSmall};
- }
- @media (min-width: ${p => p.theme.breakpoints[1]}) {
- font-size: ${p => p.theme.fontSizeExtraLarge};
- margin-bottom: ${space(1)};
- flex-direction: row;
- min-width: 650px;
- }
- `;
- const BannerActions = styled('div')`
- display: flex;
- justify-content: center;
- width: 100%;
- @media (min-width: ${p => p.theme.breakpoints[1]}) {
- width: auto;
- }
- `;
- const StyledIconClose = styled(IconClose)`
- position: absolute;
- display: block;
- top: ${space(2)};
- right: ${space(2)};
- color: ${p => p.theme.white};
- cursor: pointer;
- z-index: 1;
- `;
- export default Banner;
|