IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/components-custom-styling

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-04 09:24:17 +03:00
commit 0a47dcef88
30 changed files with 566 additions and 648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
products/ASC.People/Client/yarn.lock
View File

@ -1792,13 +1792,13 @@ asap@~2.0.6:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-common@file:../../../packages/asc-web-common":
version "1.0.1"
version "1.0.5"
dependencies:
axios "^0.19.0"
history "4.9.0"
"asc-web-components@file:../../../packages/asc-web-components":
version "1.0.197"
version "1.0.203"
dependencies:
email-addresses "^3.0.3"
html-to-react "^1.4.2"
@ -1815,7 +1815,6 @@ asap@~2.0.6:
react-tooltip "^3.11.1"
react-virtualized-auto-sizer "^1.0.2"
react-window "^1.8.5"
reactstrap "^8.0.1"
asn1.js@^4.0.0:
version "4.10.1"
@ -9070,7 +9069,7 @@ react@^16.9.0:
object-assign "^4.1.1"
prop-types "^15.6.2"
reactstrap@8.0.1, reactstrap@^8.0.1:
reactstrap@8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.0.1.tgz#0b663c8195f540bc1d6d5dbcbcf73cab56fe7c79"
integrity sha512-GvUWEL+a2+3npK1OxTXcNBMHXX4x6uc1KQRzK7yAOl+8sAHTRWqjunvMUfny3oDh8yKVzgqpqQlWWvs1B2HR9A==

3
web/ASC.Web.Client/src/components/pages/Home/index.js
View File

@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withRouter } from "react-router";
import { ModuleTile, Loader, PageLayout, toastr, Text } from 'asc-web-components';
import { Loader, PageLayout, toastr, Text } from 'asc-web-components';
import { ModuleTile } from "asc-web-common";
import { useTranslation } from 'react-i18next';
import i18n from './i18n';
import styled from "styled-components";

4
web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Body/index.js
View File

@ -14,10 +14,8 @@ import { getKeyByLink, settingsTree, getSelectedLinkByKey, selectKeyOfTreeElemen
const StyledTreeMenu = styled(TreeMenu)`
.inherit-title-link {
& > span {
font-size: inherit;
font-weight: inherit;
}
}
`;
@ -176,4 +174,4 @@ function mapStateToProps(state) {
};
}
export default connect(mapStateToProps)(withRouter(withTranslation()(ArticleBodyContent)));
export default connect(mapStateToProps)(withRouter(withTranslation()(ArticleBodyContent)));

7
web/ASC.Web.Client/yarn.lock
View File

@ -1792,13 +1792,13 @@ asap@~2.0.6:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-common@file:../../packages/asc-web-common":
version "1.0.1"
version "1.0.5"
dependencies:
axios "^0.19.0"
history "4.9.0"
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.197"
version "1.0.203"
dependencies:
email-addresses "^3.0.3"
html-to-react "^1.4.2"
@ -1815,7 +1815,6 @@ asap@~2.0.6:
react-tooltip "^3.11.1"
react-virtualized-auto-sizer "^1.0.2"
react-window "^1.8.5"
reactstrap "^8.0.1"
asn1.js@^4.0.0:
version "4.10.1"
@ -9058,7 +9057,7 @@ react@^16.9.0:
object-assign "^4.1.1"
prop-types "^15.6.2"
reactstrap@8.0.1, reactstrap@^8.0.1:
reactstrap@8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.0.1.tgz#0b663c8195f540bc1d6d5dbcbcf73cab56fe7c79"
integrity sha512-GvUWEL+a2+3npK1OxTXcNBMHXX4x6uc1KQRzK7yAOl+8sAHTRWqjunvMUfny3oDh8yKVzgqpqQlWWvs1B2HR9A==

5
web/ASC.Web.Common/.storybook/webpack.config.js
View File

@ -19,6 +19,11 @@ module.exports = ({ config }) => {
config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
}
config.resolve.alias = {
...config.resolve.alias,
"styled-components": path.resolve('./node_modules/styled-components'),
};
config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
config.module.rules = [
// Disable require.ensure as it's not a standard language feature.

2
web/ASC.Web.Common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-common",
"version": "1.0.4",
"version": "1.0.5",
"description": "Ascensio System SIA common components and solutions library",
"license": "AGPL-3.0",
"files": [

3
web/ASC.Web.Common/src/components/index.js
View File

@ -1,4 +1,5 @@
export { default as PrivateRoute } from "./routing/privateRoute";
export { default as PublicRoute } from "./routing/publicRoute";
export { default as Login } from "./login";
export { default as StudioLayout } from "./layout";
export { default as StudioLayout } from "./layout";
export { default as ModuleTile } from "./module-tile";

2
web/ASC.Web.Components/src/components/module-tile/README.md → web/ASC.Web.Common/src/components/module-tile/README.md
View File

@ -5,7 +5,7 @@ Module tile is used for navigation to module page
### Usage
```js
import { ModuleTile } from "asc-web-components";
import { ModuleTile } from "asc-web-common";
```
```jsx

149
web/ASC.Web.Common/src/components/module-tile/index.js Normal file
View File

@ -0,0 +1,149 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Text } from "asc-web-components";
const TitleContainer = styled.div`
width: auto;
&:hover {
.selectable {
text-decoration: underline;
}
}
.title-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
.title-image-wrapper {
padding: 0 16px;
position: relative;
@media (min-width: 768px) {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.title-image {
border: none;
height: 241px;
width: 240px;
cursor: pointer;
}
}
.title-text-wrapper {
padding: 0 16px;
position: relative;
width: 100%;
@media (min-width: 768px) {
flex: 0 0 auto;
width: auto;
max-width: 50%;
}
}
.title-text {
flex: 1 1 auto;
padding: 1.25rem;
.title-text-header {
margin: 46px 0 11px 0;
cursor: pointer;
}
.title-text-description {
line-height: 20px;
}
}
}
.sub-title-content {
text-align: center;
flex: 1 1 auto;
padding: 1.25rem;
cursor: pointer;
.sub-title-image {
border: none;
height: 100px;
width: 100px;
}
.sub-title-text {
margin: 16px 0 16px 0;
text-align: center;
}
}
`;
const ModuleTile = props => {
//console.log("ModuleTile render");
const { title, imageUrl, link, description, isPrimary, onClick } = props;
const handleClick = (e, link) => onClick && onClick(e, link);
return (
<TitleContainer>
{isPrimary ? (
<div className="title-content">
<div className="title-image-wrapper">
<img
className="title-image selectable"
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</div>
<div className="title-text-wrapper">
<div onClick={handleClick.bind(link)} className="title-text">
<Text.Body fontSize={36} className="title-text-header selectable">
{title}
</Text.Body>
<Text.Body fontSize={12} className="title-text-description">
{description}
</Text.Body>
</div>
</div>
</div>
) : (
<div className="sub-title-content selectable">
<div>
<img
className="sub-title-image"
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</div>
<div>
<div>
<Text.Body
fontSize={18}
className="sub-title-text"
onClick={handleClick.bind(link)}
>
{title}
</Text.Body>
</div>
</div>
</div>
)}
</TitleContainer>
);
};
ModuleTile.propTypes = {
title: PropTypes.string.isRequired,
imageUrl: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
description: PropTypes.string,
isPrimary: PropTypes.bool,
onClick: PropTypes.func.isRequired
};
ModuleTile.defaultProps = {
isPrimary: false,
description: ""
};
export default ModuleTile;

24
web/ASC.Web.Common/src/components/module-tile/tile.stories.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Section from '../../../.storybook/decorators/section';
import ModuleTile from '../module-tile';
import withReadme from 'storybook-readme/with-readme';
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
import Readme from './README.md';
storiesOf('Components|ModuleTile', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Section>
<ModuleTile
title={text("title", "Documents")}
imageUrl="./modules/documents240.png"
link="/products/files/"
description={text("description", "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.")}
isPrimary={boolean("isPrimary", true)}
onClick={action("onClick")}
/>
</Section>
));

0
web/ASC.Web.Components/src/components/module-tile/tile.test.js → web/ASC.Web.Common/src/components/module-tile/tile.test.js
View File

15
web/ASC.Web.Common/yarn.lock
View File

@ -2631,7 +2631,7 @@ asap@~2.0.3:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.197"
version "1.0.203"
dependencies:
email-addresses "^3.0.3"
html-to-react "^1.4.2"
@ -2648,7 +2648,6 @@ asap@~2.0.3:
react-tooltip "^3.11.1"
react-virtualized-auto-sizer "^1.0.2"
react-window "^1.8.5"
reactstrap "^8.0.1"
asn1.js@^4.0.0:
version "4.10.1"
@ -10156,18 +10155,6 @@ reactstrap@8.0.1:
react-popper "^1.3.3"
react-transition-group "^2.3.1"
reactstrap@^8.0.1:
version "8.1.1"
resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.1.1.tgz#3d911aaf773bfa66ac36355cb521f7560599f9de"
integrity sha512-m4IIdTHBT5wtcPts4w4rYngKuqIUC1BpncVxCTeIj4BQDxwjdab0gGyKJKfgXgArn6iI6syiDyez/h2tLWFjsw==
dependencies:
"@babel/runtime" "^7.2.0"
classnames "^2.2.3"
prop-types "^15.5.8"
react-lifecycles-compat "^3.0.4"
react-popper "^1.3.3"
react-transition-group "^2.3.1"
read-pkg-up@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.201",
"version": "1.0.204",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

142
web/ASC.Web.Components/src/components/drop-down/drop-down.stories.js
View File

@ -1,76 +1,70 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import withReadme from 'storybook-readme/with-readme'
import Readme from './README.md'
import { Container, Row, Col } from 'reactstrap';
import DropDown from '.';
import DropDownItem from '../drop-down-item';
import GroupButton from '../group-button';
import React from "react";
import { storiesOf } from "@storybook/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import DropDown from ".";
import DropDownItem from "../drop-down-item";
import GroupButton from "../group-button";
const rowStyle = { marginTop: 8 };
storiesOf('Components| DropDown', module)
storiesOf("Components| DropDown", module)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Container>
<Row style={rowStyle}>
<Col xs="4">Only dropdown</Col>
<Col xs="2" />
<Col>With Button</Col>
</Row>
<Row style={rowStyle}>
<Col xs="4">
Without active button
<DropDown opened={true}>
<DropDownItem
isHeader
label='Category 1'
/>
<DropDownItem
label='Button 1'
onClick={() => console.log('Button 1 clicked')}
/>
<DropDownItem
label='Button 2'
onClick={() => console.log('Button 2 clicked')}
/>
<DropDownItem
label='Button 3'
onClick={() => console.log('Button 3 clicked')}
/>
<DropDownItem
label='Button 4'
onClick={() => console.log('Button 4 clicked')}
disabled={true}
/>
<DropDownItem isSeparator />
<DropDownItem
label='Button 5'
onClick={() => console.log('Button 5 clicked')}
/>
<DropDownItem
label='Button 6'
onClick={() => console.log('Button 6 clicked')}
/>
</DropDown>
</Col>
<Col xs="2" />
<Col>
<GroupButton label='Dropdown demo' isDropdown={true}>
<DropDownItem
label='Button 1'
onClick={() => console.log('Button 1 clicked')}
/>
<DropDownItem
label='Button 2'
onClick={() => console.log('Button 2 clicked')}
/>
<DropDownItem
label='Button 3'
onClick={() => console.log('Button 3 clicked')}
/>
</GroupButton>
</Col>
</Row>
</Container>
));
.add("base", () => (
<div
style={{
padding: "8px 0 0 60px",
display: "grid",
gridTemplateColumns: "1fr 1fr"
}}
>
<div style={{ position: "relative" }}>
<div>Only dropdown</div>
<div style={{ marginTop: 8 }}>Without active button</div>
<DropDown opened={true}>
<DropDownItem isHeader label="Category 1" />
<DropDownItem
label="Button 1"
onClick={() => console.log("Button 1 clicked")}
/>
<DropDownItem
label="Button 2"
onClick={() => console.log("Button 2 clicked")}
/>
<DropDownItem
label="Button 3"
onClick={() => console.log("Button 3 clicked")}
/>
<DropDownItem
label="Button 4"
onClick={() => console.log("Button 4 clicked")}
disabled={true}
/>
<DropDownItem isSeparator />
<DropDownItem
label="Button 5"
onClick={() => console.log("Button 5 clicked")}
/>
<DropDownItem
label="Button 6"
onClick={() => console.log("Button 6 clicked")}
/>
</DropDown>
</div>
<div style={{ position: "relative" }}>
<div style={{ marginLeft: 16 }}>With Button</div>
<GroupButton label="Dropdown demo" isDropdown={true}>
<DropDownItem
label="Button 1"
onClick={() => console.log("Button 1 clicked")}
/>
<DropDownItem
label="Button 2"
onClick={() => console.log("Button 2 clicked")}
/>
<DropDownItem
label="Button 3"
onClick={() => console.log("Button 3 clicked")}
/>
</GroupButton>
</div>
</div>
));

99
web/ASC.Web.Components/src/components/examples/login.stories.js
View File

@ -1,99 +0,0 @@
import React, { useState, useCallback } from 'react';
import { Collapse, Container, Row, Col } from 'reactstrap';
import { storiesOf } from '@storybook/react';
import TextInput from '../text-input';
import Button from '../button';
const LoginForm = props => {
// eslint-disable-next-line react/prop-types
const { loginPlaceholder, passwordPlaceholder, buttonText, onSubmit, errorText } = props;
const [login, setLogin] = useState('');
const [loginValid, setLoginValid] = useState(true);
const [password, setPassword] = useState('');
const [passwordValid, setPasswordValid] = useState(true);
const validateAndSubmit = useCallback((event) => {
if (!login.trim())
setLoginValid(false);
if (!password.trim())
setPasswordValid(false);
if (loginValid && passwordValid)
return onSubmit(event, { login, password });
return false;
}, [login, password]);
const onLoginChange = useCallback(event => {
setLogin(event.target.value);
setLoginValid(true);
}, [login])
const onPasswordChange = useCallback(event => {
setPassword(event.target.value);
setPasswordValid(true);
}, [password]);
return (
<Container>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="login"
name="login"
hasError={!loginValid}
value={login}
placeholder={loginPlaceholder}
size='huge'
scale={true}
isAutoFocussed={true}
tabIndex={1}
onChange={onLoginChange} />
</Col>
</Row>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="password"
name="password"
type="password"
hasError={!passwordValid}
value={password}
placeholder={passwordPlaceholder}
size='huge'
scale={true}
tabIndex={2}
onChange={onPasswordChange}
/>
</Col>
</Row>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<Button primary size='big' tabIndex={3} onClick={validateAndSubmit} label={buttonText} />
</Col>
</Row>
<Collapse isOpen={errorText}>
<Row>
<Col>
<span>{errorText}</span>
</Col>
</Row>
</Collapse>
</Container>
);
};
storiesOf('EXAMPLES|Forms', module)
.add('login', () => {
const onSubmit = (e, credentials) => {
console.log("onSubmit", e, credentials);
};
return (
<LoginForm
loginPlaceholder='You registration email'
passwordPlaceholder='Password'
buttonText='Sign In'
onSubmit={onSubmit} />
)
});

98
web/ASC.Web.Components/src/components/group-button/all.group-buttons.stories.js
View File

@ -1,35 +1,69 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import withReadme from 'storybook-readme/with-readme'
import Readme from './README.md'
import { Container, Row, Col } from 'reactstrap';
import GroupButton from '.';
import DropDownItem from '../drop-down-item';
import React from "react";
import { storiesOf } from "@storybook/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import GroupButton from ".";
import DropDownItem from "../drop-down-item";
const rowStyle = { marginTop: 8 };
const headerStyle = { marginLeft: 16 };
storiesOf('Components|GroupButton', module)
.addDecorator(withReadme(Readme))
.addParameters({ options: { showAddonPanel: false }})
.add('all', () => (
<Container>
<Row style={rowStyle}>
<Col>Active</Col>
<Col>Hover</Col>
<Col>Click*(Press)</Col>
<Col>Disable</Col>
</Row>
<Row style={rowStyle}>
<Col><GroupButton /></Col>
<Col><GroupButton hovered /></Col>
<Col><GroupButton activated/></Col>
<Col><GroupButton disabled /></Col>
</Row>
<Row style={rowStyle}>
<Col><GroupButton isDropdown ><DropDownItem label="Action 1" /></GroupButton></Col>
<Col><GroupButton isDropdown hovered ><DropDownItem label="Action 2" /></GroupButton></Col>
<Col><GroupButton isDropdown activated ><DropDownItem label="Action 3" /></GroupButton></Col>
<Col><GroupButton isDropdown disabled ><DropDownItem label="Action 4" /></GroupButton></Col>
</Row>
</Container>
));
storiesOf("Components|GroupButton", module)
.addDecorator(withReadme(Readme))
.addParameters({ options: { showAddonPanel: false } })
.add("all", () => (
<>
<div
style={{
padding: "8px 0 0 40px",
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr 1fr"
}}
>
<div style={rowStyle}>
<div style={headerStyle}>Active</div>
<div>
<GroupButton />
</div>
<div>
<GroupButton isDropdown>
<DropDownItem label="Action 1" />
</GroupButton>
</div>
</div>
<div style={rowStyle}>
<div style={headerStyle}>Hover</div>
<div>
<GroupButton hovered />
</div>
<div>
<GroupButton isDropdown hovered>
<DropDownItem label="Action 2" />
</GroupButton>
</div>
</div>
<div style={rowStyle}>
<div style={headerStyle}>Click*(Press)</div>
<div>
<GroupButton activated />
</div>
<div>
<GroupButton isDropdown activated>
<DropDownItem label="Action 3" />
</GroupButton>
</div>
</div>
<div style={rowStyle}>
<div style={headerStyle}>Disable</div>
<div>
<GroupButton disabled />
</div>
<div>
<GroupButton isDropdown disabled>
<DropDownItem label="Action 4" />
</GroupButton>
</div>
</div>
</div>
</>
));

29
web/ASC.Web.Components/src/components/input-block/index.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { InputGroup, InputGroupAddon } from 'reactstrap';
import TextInput from '../text-input';
import { Icons } from '../icons';
import IconButton from '../icon-button';
@ -29,16 +28,22 @@ const StyledChildrenBlock = styled.div`
`;
const CustomInputGroup = ({ isIconFill, hasError, hasWarning, isDisabled, scale, ...props }) => (
<InputGroup {...props}></InputGroup>
<div {...props}></div>
);
const StyledInputGroup = styled(CustomInputGroup)`
${commonInputStyle}
:focus-within{
border-color: #2DA7DB;
display: flex;
.prepend {
display: flex;
align-items: center;
}
.input-group-prepend,
.input-group-append{
margin: 0;
.append {
align-items: center;
margin: 0;
}
${commonInputStyle} :focus-within {
border-color: #2da7db;
}
`;
class InputBlock extends React.Component {
@ -120,11 +125,11 @@ class InputBlock extends React.Component {
className={className}
style={style}
>
<InputGroupAddon addonType="prepend">
<div className="prepend">
<StyledChildrenBlock>
{children}
</StyledChildrenBlock>
</InputGroupAddon>
</div>
<TextInput
id={id}
name={name}
@ -163,8 +168,8 @@ class InputBlock extends React.Component {
isClickable={typeof onIconClick === 'function'}
/>
</StyledIconBlock>
</InputGroupAddon>
}
</div>
)}
</StyledInputGroup>
);
}

143
web/ASC.Web.Components/src/components/link-with-dropdown/all.link-with-dropdown.stories.js
View File

@ -1,66 +1,103 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import LinkWithDropdown from '.';
import { Container, Row, Col } from 'reactstrap';
import React from "react";
import { storiesOf } from "@storybook/react";
import LinkWithDropdown from ".";
const headerStyle = {
paddingLeft: 20,
fontSize: 16
};
const rowStyle = {
marginTop: 8,
paddingLeft: 20,
paddingLeft: 28,
fontSize: 12
};
const headerStyle = {
marginTop: 8,
paddingLeft: 20,
fontSize: 16,
};
const data = [
{ key: 'key1', label: 'Base button1', onClick: () => console.log('Base button1 clicked') },
{ key: 'key2', label: 'Base button2', onClick: () => console.log('Base button2 clicked') },
{ key: 'key3', isSeparator: true },
{ key: 'key4', label: 'Base button3', onClick: () => console.log('Base button3 clicked') }
{
key: "key1",
label: "Base button1",
onClick: () => console.log("Base button1 clicked")
},
{
key: "key2",
label: "Base button2",
onClick: () => console.log("Base button2 clicked")
},
{ key: "key3", isSeparator: true },
{
key: "key4",
label: "Base button3",
onClick: () => console.log("Base button3 clicked")
}
];
const dropdownType = ['alwaysDashed', 'appearDashedAfterHover'];
storiesOf('Components|LinkWithDropdown', module)
storiesOf("Components|LinkWithDropdown", module)
.addParameters({ options: { showAddonPanel: false } })
.add('all', () => (
.add("all", () => (
<>
<Container fluid>
<Row style={headerStyle}>
{dropdownType.map(linkType =>
<Col key={linkType}>type - {linkType}:</Col>
)}
</Row>
<Row style={rowStyle}>
{dropdownType.map(linkType =>
<Col key={linkType}>
<LinkWithDropdown isBold={true} dropdownType={linkType} data={data}>Bold {linkType}</LinkWithDropdown>
</Col>
)}
</Row>
<Row style={rowStyle}>
{dropdownType.map(linkType =>
<Col key={linkType}>
<LinkWithDropdown dropdownType={linkType} data={data}> {linkType}</LinkWithDropdown>
</Col>
)}
</Row>
<Row style={rowStyle}>
{dropdownType.map(linkType =>
<Col key={linkType}>
<LinkWithDropdown isSemitransparent={true} dropdownType={linkType} data={data}>Semitransparent {linkType}</LinkWithDropdown>
</Col>
)}
</Row>
</Container>
<div
style={{
padding: "8px 0 0 20px",
display: "grid",
gridTemplateColumns: "1fr 1fr"
}}
>
<div>
<label style={headerStyle}>Type - alwaysDashed:</label>
<div style={rowStyle}>
<LinkWithDropdown
isBold={true}
dropdownType="alwaysDashed"
data={data}
>
Bold alwaysDashed
</LinkWithDropdown>
</div>
<div style={rowStyle}>
<LinkWithDropdown dropdownType={"alwaysDashed"} data={data}>
{"alwaysDashed"}
</LinkWithDropdown>
</div>
<div style={rowStyle}>
<LinkWithDropdown
isSemitransparent={true}
dropdownType="alwaysDashed"
data={data}
>
Semitransparent alwaysDashed
</LinkWithDropdown>
</div>
</div>
<div>
<label style={headerStyle}>Type - appearDashedAfterHover:</label>
<div style={rowStyle}>
<LinkWithDropdown
isBold={true}
dropdownType="appearDashedAfterHover"
data={data}
>
Bold appearDashedAfterHover
</LinkWithDropdown>
</div>
<div style={rowStyle}>
<LinkWithDropdown
dropdownType={"appearDashedAfterHover"}
data={data}
>
appearDashedAfterHover
</LinkWithDropdown>
</div>
<div style={rowStyle}>
<LinkWithDropdown
isSemitransparent={true}
dropdownType="appearDashedAfterHover"
data={data}
>
Semitransparent appearDashedAfterHover
</LinkWithDropdown>
</div>
</div>
</div>
</>
));

5
web/ASC.Web.Components/src/components/link-with-dropdown/link-with-dropdown.stories.js
View File

@ -5,7 +5,6 @@ import Readme from './README.md';
import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Section from '../../../.storybook/decorators/section';
import { Col } from 'reactstrap';
const dropdownType = ["alwaysDashed", "appearDashedAfterHover"];
@ -36,7 +35,7 @@ storiesOf('Components|LinkWithDropdown', module)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Section>
<Col>
<div>
<LinkWithDropdown
dropdownType={select('dropdownType', dropdownType, 'alwaysDashed')}
color={color('color', '#333333')}
@ -49,7 +48,7 @@ storiesOf('Components|LinkWithDropdown', module)
>
{text('text', 'Simple link with dropdown')}
</LinkWithDropdown>
</Col>
</div>
</Section>
)
);

115
web/ASC.Web.Components/src/components/link/all.link.stories.js
View File

@ -1,62 +1,67 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import Link from '.';
import { Container, Row, Col } from 'reactstrap';
import React from "react";
import { storiesOf } from "@storybook/react";
import Link from ".";
const rowStyle = {
marginTop: 8,
paddingLeft: 20,
fontSize: 12
};
const rowStyle = { marginTop: 8, fontSize: 12 };
const headerStyle = {
marginTop: 8,
paddingLeft: 20,
fontSize: 16,
padding: "8px 0 0 40px",
fontSize: 16
};
storiesOf('Components|Link', module)
storiesOf("Components|Link", module)
.addParameters({ options: { showAddonPanel: false } })
.add('all', () => (
<>
<Container fluid>
<Row style={headerStyle}>
<Col>Page links:</Col>
<Col>Action links:</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isBold={true}>Bold black page link</Link>
</Col>
<Col>
<Link type="action" isBold={true}>Bold black action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com">Black page link</Link>
</Col>
<Col>
<Link type="action">Black action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isHovered={true}>Black hovered page link</Link>
</Col>
<Col>
<Link type="action" isHovered={true}>Black hovered action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isSemitransparent={true}>Semitransparent black page link</Link>
</Col>
<Col>
<Link type="action" isSemitransparent={true}>Semitransparent black action link</Link>
</Col>
</Row>
</Container>
</>
.add("all", () => (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
<div style={headerStyle}>
<div>Page links:</div>
<div>
<div style={rowStyle}>
<Link type="page" href="https://github.com" isBold={true}>
Bold black page link
</Link>
</div>
<div style={rowStyle}>
<Link type="page" href="https://github.com">
Black page link
</Link>
</div>
<div style={rowStyle}>
<Link type="page" href="https://github.com" isHovered={true}>
Black hovered page link
</Link>
</div>
<div style={rowStyle}>
<Link
type="page"
href="https://github.com"
isSemitransparent={true}
>
Semitransparent black page link
</Link>
</div>
</div>
</div>
<div style={headerStyle}>
<div>Action links:</div>
<div style={rowStyle}>
<Link type="action" isBold={true}>
Bold black action link
</Link>
</div>
<div style={rowStyle}>
<Link type="action">Black action link</Link>
</div>
<div style={rowStyle}>
<Link type="action" isHovered={true}>
Black hovered action link
</Link>
</div>
<div style={rowStyle}>
<Link type="action" isSemitransparent={true}>
Semitransparent black action link
</Link>
</div>
</div>
</div>
));

73
web/ASC.Web.Components/src/components/module-tile/all.tiles.stories.js
View File

@ -1,73 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Container, Row, Col } from 'reactstrap';
import ModuleTile from '../module-tile';
const rowStyle = { marginTop: 8 };
storiesOf('Components|ModuleTile', module)
.addParameters({ options: { showAddonPanel: false }})
.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>
));

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

@ -1,123 +0,0 @@
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;
cursor: pointer;
`;
const NotPrimaryImage = styled(CardImg)`
border: none;
height: 100px;
width: 100px;
cursor: pointer;
`;
const DescriptionText = styled(CardTitle)`
font-size: 12px;
text-decoration: none;
line-height: 20px;
clear: both;
`;
const PrimaryTitle = styled(CardTitle)`
font-size: 36px;
margin: 46px 0 11px 0;
cursor: pointer;
`;
const NotPrimaryTitle = styled(CardTitle)`
font-size: 18px;
cursor: pointer;
margin: 14px 0 14px 0;
`;
const TileCard = styled(Card)`
font-family: "Open Sans", sans-serif;
color: #333;
border: none;
&:hover {
.selectable {
text-decoration: underline;
}
}
`;
const ModuleTile = props => {
//console.log("ModuleTile render");
const { title, imageUrl, link, description, isPrimary, onClick, className, id, style } = props;
const handleClick = (e, link) => onClick && onClick(e, link);
return (
<TileCard className={className} id={id} style={style}>
{isPrimary ? (
<Row className="justify-content-md-center">
<Col md="auto">
<PrimaryImage
className="selectable"
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</Col>
<Col md="6" className="align-middle">
<CardBody>
<PrimaryTitle
className="selectable"
onClick={handleClick.bind(link)}
>
{title}
</PrimaryTitle>
<DescriptionText className="description">
{description}
</DescriptionText>
</CardBody>
</Col>
</Row>
) : (
<CardBody className="text-center selectable">
<Row>
<Col>
<NotPrimaryImage
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</Col>
</Row>
<Row>
<Col>
<NotPrimaryTitle onClick={handleClick.bind(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,
onClick: PropTypes.func,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
ModuleTile.defaultProps = {
isPrimary: false,
description: ""
};
export default ModuleTile;

30
web/ASC.Web.Components/src/components/module-tile/tile.stories.js
View File

@ -1,30 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Container, Row, Col } from 'reactstrap';
import ModuleTile from '../module-tile';
import withReadme from 'storybook-readme/with-readme';
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
import Readme from './README.md';
const rowStyle = { marginTop: 8 };
storiesOf('Components|ModuleTile', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Container>
<Row style={rowStyle}>
<Col>
<ModuleTile
title={text("title", "Documents")}
imageUrl="./modules/documents240.png"
link="/products/files/"
description={text("description", "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.")}
isPrimary={boolean("isPrimary", true)}
onClick={action("onClick")}
/>
</Col>
</Row>
</Container>
));

46
web/ASC.Web.Components/src/components/text/sub-text/create-styled-header.js
View File

@ -1,46 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
export default function createStyledHeader(headlineType) {
const fontSize = css`
${
(headlineType === 'MenuHeader' && 27) ||
(headlineType === 'ContentHeader' && 21)
}
`;
const StyledHeadline = styled.h1`
font-family: 'Open Sans',sans-serif,Arial;
margin: 0;
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
color: ${props => props.color};
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
${props => props.isInline == true && 'display: inline-block;'}
`
const Text = props => {
//console.log("Text.Header render");
return (<StyledHeadline {...props} title={props.title}></StyledHeadline>);
};
Text.propTypes = {
color: PropTypes.string,
title: PropTypes.string,
truncate: PropTypes.bool,
isInline: PropTypes.bool
};
Text.defaultProps = {
color: '#333333',
title: '',
truncate: false,
isInline: false
};
return Text;
}

12
web/ASC.Web.Components/src/components/text/sub-text/index.js
View File

@ -1,7 +1,7 @@
import createStyledHeadline from './create-styled-headline';
import createStyledHeader from './create-styled-header';
import React from "react";
import { default as Header } from './text-header';
export const Headline = createStyledHeadline();
export { default as Body } from "./create-styled-body-text";
export const MenuHeader = createStyledHeader('MenuHeader');
export const ContentHeader = createStyledHeader('ContentHeader');
export { default as Headline } from "./text-headline";
export { default as Body } from "./text-body";
export const MenuHeader = (props) => <Header headlineType='MenuHeader' {...props} />;
export const ContentHeader = (props) => <Header headlineType='ContentHeader' {...props} />;

0
web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js → web/ASC.Web.Components/src/components/text/sub-text/text-body.js
View File

54
web/ASC.Web.Components/src/components/text/sub-text/text-header.js Normal file
View File

@ -0,0 +1,54 @@
import React from "react";
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
const fontSize = css`
${props =>
(props.headlineType === 'MenuHeader' && 27) ||
(props.headlineType === 'ContentHeader' && 21)
}
`;
const styles = css`
font-family: 'Open Sans',sans-serif,Arial;
margin: 0;
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
color: ${props => props.color};
text-align: left;
${props => (props.truncate && css`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`)}
${props => props.isInline && css`display: inline-block;`}
`;
const StyledHeadline = styled.h1`
${styles};
`;
const Text = ({ title, tag, as, children, ...rest }) => {
//console.log("Text.Header render");
return (
<StyledHeadline as={!as && tag ? tag : as} title={title} {...rest}>{children}</StyledHeadline>
);
};
Text.propTypes = {
as: PropTypes.string,
tag: PropTypes.string,
children: PropTypes.string,
color: PropTypes.string,
title: PropTypes.string,
truncate: PropTypes.bool,
isInline: PropTypes.bool,
headlineType: PropTypes.oneOf(['MenuHeader', 'ContentHeader']),
};
Text.defaultProps = {
color: '#333333',
title: '',
truncate: false,
isInline: false
};
export default Text;

18
web/ASC.Web.Components/src/components/text/sub-text/create-styled-headline.js → web/ASC.Web.Components/src/components/text/sub-text/text-headline.js
View File

@ -1,10 +1,7 @@
import React from 'react';
import React from "react";
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
export default function createStyledHeadline() {
const fontSize = css`
${props =>
(props.size === 'big' && 23) ||
@ -19,21 +16,23 @@ export default function createStyledHeadline() {
font-weight: 600;
color: ${props => props.color};
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;')}
${props => props.isInline == true && 'display: inline-block;'}
${props => (props.truncate && css`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`)}
${props => props.isInline && css`display: inline-block;`}
`
const StyledHeadline = styled.h1`
${styles}
`;
const Text = props => {
const Text = ({ title, tag, as, ...rest }) => {
return (
<StyledHeadline {...props} title={props.title}></StyledHeadline>
<StyledHeadline as={!as && tag ? tag : as} title={title} {...rest}></StyledHeadline>
);
};
Text.propTypes = {
as: PropTypes.string,
tag: PropTypes.string,
color: PropTypes.string,
title: PropTypes.string,
truncate: PropTypes.bool,
@ -49,5 +48,4 @@ export default function createStyledHeadline() {
size: 'big'
};
return Text;
}
export default Text;

3
web/ASC.Web.Components/src/components/textarea/index.js
View File

@ -52,7 +52,8 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
class Textarea extends React.PureComponent {
render() {
//console.log('Textarea render');
// console.log('Textarea render');
console.warn('Textarea render');
return (
<StyledScrollbar
className={this.props.className}

1
web/ASC.Web.Components/src/index.js
View File

@ -1,6 +1,5 @@
export { default as Button } from './components/button'
export { default as TextInput } from './components/text-input'
export { default as ModuleTile } from './components/module-tile'
export { default as Loader } from './components/loader'
export { Icons } from './components/icons'
export { default as GroupButton } from './components/group-button'