Web: Added Text component

web/ASC.Web.Components/example/stories/text/base/index.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean, withKnobs, select, number } from '@storybook/addon-knobs/react';
+import { Text } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+//import withReadme from 'storybook-readme/with-readme';
+//import Readme from './README.md';
+
+const elementType = ['h1','h2','h3','p'];
+const styleType = ['default','grayBackground','metaInfo','disabled'];
+
+
+storiesOf('Components|Text', module)
+  .addDecorator(withKnobs)
+  .add('Text', () => {
+
+    return (
+    <Section>
+      <Text
+       elementType={select('elementType', elementType, 'p')}
+       styleType={select('styleType', styleType, 'default')}
+       title={text('title', '')}
+       truncate={boolean('truncate', false)}
+       text={text('text', 'Example')}
+        >
+          
+      </Text>
+    </Section>
+  )});

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+
+const fontSize = css`
+    ${props =>
+        (props.elementType === 'h1' && 23) ||
+        (props.elementType === 'h2' && 19) ||
+        (props.elementType === 'h3' && 15) ||
+        (props.elementType === 'p'  && 13)
+    }
+`;
+
+const fontWeight = css`
+    ${props =>
+        (props.elementType === 'h1' && 600) ||
+        (props.elementType === 'h2' && 600) ||
+        (props.elementType === 'h3' && 600) ||
+        (props.elementType === 'p'  && 500)
+    }
+`;
+
+const fontColor = css`
+    ${props =>
+        (props.styleType === 'default' && '#333333') ||
+        (props.styleType === 'grayBackground' && '#657077') ||
+        (props.styleType === 'metaInfo' && '#A3A9AE') ||
+        (props.styleType === 'disabled'  && '#ECEEF1')
+    }
+`;
+
+const StyledText = styled.p`
+    font-family: 'Open Sans',sans-serif,Arial;
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    color: ${fontColor};
+    background-color:  ${props => (props.styleType === 'grayBackground' && '#F8F9F9')};
+    text-align: left;
+    max-width: 1000px;
+    ${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
+`;
+
+const Text = props => <StyledText {...props} title={props.title}>
+    {props.text}
+</StyledText>;
+
+Text.propTypes = {
+    fontSize: PropTypes.number,
+    elementType: PropTypes.string,
+    styleType: PropTypes.string,
+    title: PropTypes.string,
+    truncate: PropTypes.bool,
+    text: PropTypes.string
+};
+
+Text.defaultProps = {
+    elementType: 'p',
+    styleType: 'default',
+    title: '',
+    truncate: false,
+    text: ''
+};
+
+export default Text;

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

@@ -17,4 +17,5 @@ export { default as RequestLoader } from './components/request-loader'
 export { default as MainButton } from './components/main-button'
 export { default as ContextMenuButton } from './components/context-menu-button'
 export { default as Link } from './components/link'
-export { default as Checkbox } from './components/checkbox'
+export { default as Checkbox } from './components/checkbox'
+export { default as Text } from './components/text'