Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import LinkText from '../LinkText/LinkText';
import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import commonStyle from '../EmptyStates.module.css';
import style from './UnauthorizedLogin.module.css';
export default class UnauthorizedLogin extends React.Component {
constructor(props) {
super(props);
this.responsiveFunc = this.responsiveFunc.bind(this);
}
responsiveFunc({ mediaQueryOR }) {
return {
tablet: mediaQueryOR([{ minWidth: 481, maxWidth: 768 }]),
uptoMobile: mediaQueryOR([{ maxWidth: 480 }])
};
}
render() {
let { title, subtitle, description, urlText, url, onClick, dataId, customClass } = this.props;
return (
<ResponsiveReceiver query={this.responsiveFunc}>
{({ tablet, uptoMobile }) => (
<Container
className={`${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`}
dataId={dataId}
scroll='vertical'
>
<Box className={commonStyle.top}>
{title ? (
<div
className={
uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
}
>
{title}
</div>
) : null}
{subtitle ? (
<div
className={
uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
}
>
{subtitle}
</div>
) : null}
</Box>
<Box
className={`${style.imageContainer} ${
uptoMobile ? commonStyle.mobileImageContainer : commonStyle.tabletImageContainer
}`}
>
<UnauthorizedLoginSVG isFluid dataId={`${dataId}_svg`} />
</Box>
<Box className={`${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`}>
<div className={uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText}>
{description}
</div>
<LinkText
text={urlText}
href={url}
onClick={onClick}
dataId={`${dataId}_link`}
customClass={uptoMobile || tablet ? commonStyle.tabletBtmText : ''}
/>
</Box>
</Container>
)}
</ResponsiveReceiver>
);
}
}
UnauthorizedLogin.propTypes = propTypes;
UnauthorizedLogin.defaultProps = defaultProps;
// if (__DOCS__) {
// UnauthorizedLogin.docs = {
// componentGroup: 'errorStates'
// };
// }
|