web: Added new component ModuleTile

web/ASC.Web.Components/dist/asc-web-components.cjs.js

@@ -543,8 +543,190 @@ NavMenu.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
+var _jsxFileName$5 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\module-tile\\index.js";
+function _templateObject6$1() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n\n    &:hover {\n        .selectable {\n            text-decoration: underline;\n            cursor: pointer;\n        }\n    }\n"]);
+  _templateObject6$1 = function _templateObject6() {
+    return data;
+  };
+  return data;
+}
+function _templateObject5$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 13px; \n    color: black;\n"]);
+  _templateObject5$1 = function _templateObject5() {
+    return data;
+  };
+  return data;
+}
+function _templateObject4$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 36px; \n    color: black;\n"]);
+  _templateObject4$1 = function _templateObject4() {
+    return data;
+  };
+  return data;
+}
+function _templateObject3$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 18px; \n    color: black;\n    text-decoration: none;\n    clear: both;\n"]);
+  _templateObject3$1 = function _templateObject3() {
+    return data;
+  };
+  return data;
+}
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n    height: 100px;\n    width: 100px;\n"]);
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+  return data;
+}
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n    height: 241px;\n    width: 240px;\n"]);
+  _templateObject$5 = function _templateObject() {
+    return data;
+  };
+  return data;
+}
+var PrimaryImage = styled__default(reactstrap.CardImg)(_templateObject$5());
+var NotPrimaryImage = styled__default(reactstrap.CardImg)(_templateObject2$1());
+var DescriptionText = styled__default(reactstrap.CardTitle)(_templateObject3$1());
+var PrimaryTitle = styled__default(reactstrap.CardTitle)(_templateObject4$1());
+var NotPrimaryTitle = styled__default(reactstrap.CardTitle)(_templateObject5$1());
+var TileCard = styled__default(reactstrap.Card)(_templateObject6$1());
+var ModuleTile = function ModuleTile(props) {
+  var title = props.title,
+      imageUrl = props.imageUrl,
+      link = props.link,
+      description = props.description,
+      isPrimary = props.isPrimary,
+      _onClick = props.onClick;
+  return core.jsx(TileCard, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 50
+    },
+    __self: this
+  }, isPrimary ? core.jsx(reactstrap.Row, {
+    className: "justify-content-md-center",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 52
+    },
+    __self: this
+  }, core.jsx(reactstrap.Col, {
+    md: "auto",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 53
+    },
+    __self: this
+  }, core.jsx(PrimaryImage, {
+    className: "selectable",
+    src: imageUrl,
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 54
+    },
+    __self: this
+  })), core.jsx(reactstrap.Col, {
+    md: "6",
+    className: "align-middle",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 56
+    },
+    __self: this
+  }, core.jsx(reactstrap.CardBody, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 57
+    },
+    __self: this
+  }, core.jsx(PrimaryTitle, {
+    className: "selectable",
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 58
+    },
+    __self: this
+  }, title), core.jsx(DescriptionText, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 59
+    },
+    __self: this
+  }, description)))) : core.jsx(reactstrap.CardBody, {
+    className: "text-center selectable",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 64
+    },
+    __self: this
+  }, core.jsx(reactstrap.Row, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 65
+    },
+    __self: this
+  }, core.jsx(reactstrap.Col, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 66
+    },
+    __self: this
+  }, core.jsx(NotPrimaryImage, {
+    src: imageUrl,
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 67
+    },
+    __self: this
+  }))), core.jsx(reactstrap.Row, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 70
+    },
+    __self: this
+  }, core.jsx(reactstrap.Col, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 71
+    },
+    __self: this
+  }, core.jsx(NotPrimaryTitle, {
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 72
+    },
+    __self: this
+  }, title)))));
+};
+ModuleTile.propTypes = {
+  title: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  isPrimary: PropTypes.bool
+};
+ModuleTile.defaultProps = {
+  isPrimary: false,
+  description: ''
+};
+
 exports.Button = Button;
 exports.LoginForm = LoginForm;
+exports.ModuleTile = ModuleTile;
 exports.NavLogo = NavLogo;
 exports.NavMenu = NavMenu;
 exports.TextInput = TextInput;

web/ASC.Web.Components/dist/asc-web-components.esm.js

@@ -2,7 +2,7 @@ import { jsx } from '@emotion/core';
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
-import { Row, Container, Col, Collapse, NavbarBrand, Navbar } from 'reactstrap';
+import { Row, Container, Col, Collapse, NavbarBrand, Navbar, CardImg, CardTitle, Card, CardBody } from 'reactstrap';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -535,4 +535,185 @@ NavMenu.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
-export { Button, LoginForm, NavLogo, NavMenu, TextInput };
+var _jsxFileName$5 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\module-tile\\index.js";
+function _templateObject6$1() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n\n    &:hover {\n        .selectable {\n            text-decoration: underline;\n            cursor: pointer;\n        }\n    }\n"]);
+  _templateObject6$1 = function _templateObject6() {
+    return data;
+  };
+  return data;
+}
+function _templateObject5$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 13px; \n    color: black;\n"]);
+  _templateObject5$1 = function _templateObject5() {
+    return data;
+  };
+  return data;
+}
+function _templateObject4$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 36px; \n    color: black;\n"]);
+  _templateObject4$1 = function _templateObject4() {
+    return data;
+  };
+  return data;
+}
+function _templateObject3$1() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 18px; \n    color: black;\n    text-decoration: none;\n    clear: both;\n"]);
+  _templateObject3$1 = function _templateObject3() {
+    return data;
+  };
+  return data;
+}
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n    height: 100px;\n    width: 100px;\n"]);
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+  return data;
+}
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n    border: none;\n    height: 241px;\n    width: 240px;\n"]);
+  _templateObject$5 = function _templateObject() {
+    return data;
+  };
+  return data;
+}
+var PrimaryImage = styled(CardImg)(_templateObject$5());
+var NotPrimaryImage = styled(CardImg)(_templateObject2$1());
+var DescriptionText = styled(CardTitle)(_templateObject3$1());
+var PrimaryTitle = styled(CardTitle)(_templateObject4$1());
+var NotPrimaryTitle = styled(CardTitle)(_templateObject5$1());
+var TileCard = styled(Card)(_templateObject6$1());
+var ModuleTile = function ModuleTile(props) {
+  var title = props.title,
+      imageUrl = props.imageUrl,
+      link = props.link,
+      description = props.description,
+      isPrimary = props.isPrimary,
+      _onClick = props.onClick;
+  return jsx(TileCard, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 50
+    },
+    __self: this
+  }, isPrimary ? jsx(Row, {
+    className: "justify-content-md-center",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 52
+    },
+    __self: this
+  }, jsx(Col, {
+    md: "auto",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 53
+    },
+    __self: this
+  }, jsx(PrimaryImage, {
+    className: "selectable",
+    src: imageUrl,
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 54
+    },
+    __self: this
+  })), jsx(Col, {
+    md: "6",
+    className: "align-middle",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 56
+    },
+    __self: this
+  }, jsx(CardBody, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 57
+    },
+    __self: this
+  }, jsx(PrimaryTitle, {
+    className: "selectable",
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 58
+    },
+    __self: this
+  }, title), jsx(DescriptionText, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 59
+    },
+    __self: this
+  }, description)))) : jsx(CardBody, {
+    className: "text-center selectable",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 64
+    },
+    __self: this
+  }, jsx(Row, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 65
+    },
+    __self: this
+  }, jsx(Col, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 66
+    },
+    __self: this
+  }, jsx(NotPrimaryImage, {
+    src: imageUrl,
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 67
+    },
+    __self: this
+  }))), jsx(Row, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 70
+    },
+    __self: this
+  }, jsx(Col, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 71
+    },
+    __self: this
+  }, jsx(NotPrimaryTitle, {
+    onClick: function onClick(event) {
+      return _onClick(event, link);
+    },
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 72
+    },
+    __self: this
+  }, title)))));
+};
+ModuleTile.propTypes = {
+  title: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  isPrimary: PropTypes.bool
+};
+ModuleTile.defaultProps = {
+  isPrimary: false,
+  description: ''
+};
+
+export { Button, LoginForm, ModuleTile, NavLogo, NavMenu, TextInput };

web/ASC.Web.Components/example/stories/module-tile/all/all.tiles.stories.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Container, Row, Col } from 'reactstrap';
+import { ModuleTile } from 'asc-web-components';
+
+const rowStyle = { marginTop: 8 };
+
+storiesOf('Components|ModuleTile', module)
+    // To set a default viewport for all the stories for this component
+    .addParameters({ viewport: { defaultViewport: 'responsive' } })
+    .add('all', () => (
+        <Container>
+            <Row style={rowStyle}>
+                <Col>
+                    <ModuleTile
+                        title="Documents"
+                        imageUrl="./modules/documents240.png"
+                        link="/products/files/"
+                        description="Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed."
+                        isPrimary={true}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+            </Row>
+            <Row style={rowStyle}>
+                <Col>
+                    <ModuleTile
+                        title="Projects"
+                        imageUrl="./modules/projects_logolarge.png"
+                        link="products/projects/"
+                        isPrimary={false}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+                <Col>
+                    <ModuleTile
+                        title="Crm"
+                        imageUrl="./modules/crm_logolarge.png"
+                        link="/products/crm/"
+                        isPrimary={false}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+                <Col>
+                    <ModuleTile
+                        title="Mail"
+                        imageUrl="./modules/mail_logolarge.png"
+                        link="/products/mail/"
+                        isPrimary={false}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+                <Col>
+                    <ModuleTile
+                        title="People"
+                        imageUrl="./modules/people_logolarge.png"
+                        link="/products/people/"
+                        isPrimary={false}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+                <Col>
+                    <ModuleTile
+                        title="Community"
+                        imageUrl="./modules/community_logolarge.png"
+                        link="products/community/"
+                        isPrimary={false}
+                        onClick={action("onClick")}
+                    />
+                </Col>
+            </Row>
+        </Container>
+    ));

web/ASC.Web.Components/src/components/module-tile/index.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, Row, Col, CardBody, CardImg, CardTitle } from 'reactstrap';
+import styled from 'styled-components';
+
+const PrimaryImage = styled(CardImg)`
+    border: none;
+    height: 241px;
+    width: 240px;
+`;
+
+const NotPrimaryImage = styled(CardImg)`
+    border: none;
+    height: 100px;
+    width: 100px;
+`;
+
+const DescriptionText = styled(CardTitle)`
+    font-size: 18px; 
+    color: black;
+    text-decoration: none;
+    clear: both;
+`;
+
+const PrimaryTitle = styled(CardTitle)`
+    font-size: 36px; 
+    color: black;
+`;
+
+const NotPrimaryTitle = styled(CardTitle)`
+    font-size: 13px; 
+    color: black;
+`;
+
+const TileCard = styled(Card)`
+    border: none;
+
+    &:hover {
+        .selectable {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
+`;
+
+const ModuleTile = (props) => {
+    const { title, imageUrl, link, description, isPrimary, onClick } = props;
+
+    return (
+        <TileCard>
+            {isPrimary ? (
+                <Row className="justify-content-md-center">
+                    <Col md="auto">
+                        <PrimaryImage className="selectable" src={imageUrl} onClick={event => onClick(event, link) } />
+                    </Col>
+                    <Col md="6" className="align-middle">
+                        <CardBody>
+                            <PrimaryTitle className="selectable" onClick={event => onClick(event, link) }>{title}</PrimaryTitle>
+                            <DescriptionText>{description}</DescriptionText>
+                        </CardBody>
+                    </Col>
+                </Row>
+            ) : (
+                    <CardBody className="text-center selectable">
+                        <Row>
+                            <Col>
+                                <NotPrimaryImage src={imageUrl} onClick={event => onClick(event, link) } />
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <NotPrimaryTitle onClick={event => onClick(event, link) }>{title}</NotPrimaryTitle>
+                            </Col>
+                        </Row>
+                    </CardBody>
+                )}
+        </TileCard>
+    );
+};
+
+ModuleTile.propTypes = {
+    title: PropTypes.string.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    isPrimary: PropTypes.bool
+}
+
+ModuleTile.defaultProps = {
+    isPrimary: false,
+    description: ''
+}
+
+export default ModuleTile;

web/ASC.Web.Components/src/index.js

@@ -3,3 +3,4 @@ export { default as TextInput } from './components/text-input'
 export { default as LoginForm } from './components/forms/login'
 export { default as NavLogo } from './components/nav-logo'
 export { default as NavMenu } from './components/nav-menu'
+export { default as ModuleTile } from './components/module-tile'