web: Added Badge component

web/ASC.Web.Components/example/stories/badge/README.md

@@ -0,0 +1,24 @@
+# Badge
+
+## Usage
+
+```js
+import { Badge } from 'asc-web-components';
+
+<Badge />;
+```
+
+#### Description
+
+Item notify badge.
+
+#### Properties
+
+| Props             | Type     | Required | Values | Default   | Description           |
+| ----------------- | -------- | :------: | ------ | --------- | --------------------- |
+| `number`          | `number` |          |        | 0         | Number value          |
+| `backgroundColor` | `string` |          |        | '#ED7309' | HTML background color |
+| `color`           | `string` |          |        | '#FFFFFF' | HTML font color       |
+| `fontSize`        | `string` |          |        | '11px'    | HTML font size        |
+| `fontWeight`      | `number` |          |        | '800'     | HTML font weight      |
+| `onClick`         | `func`   |          |        |           | onClick event         |

web/ASC.Web.Components/example/stories/badge/index.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import withReadme from 'storybook-readme/with-readme';
+import { withKnobs, number, color, text } from '@storybook/addon-knobs/react';
+import Readme from './README.md';
+import Section from '../../.storybook/decorators/section';
+import {Badge} from 'asc-web-components';
+
+storiesOf('Components|Badge', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(Readme))
+  .add('badge', () => (
+    <Section>
+      <Badge
+        number={number('number', 10)}
+        backgroundColor={color('backgroundColor', '#ED7309')}
+        color={color('color', '#FFFFFF')}
+        fontSize={text('fontSize', '11px')}
+        fontWeight={number('fontWeight', 800)}
+        onClick={(e)=>{
+          action('onClick')(e);
+        }}
+      />
+    </Section>
+  ));

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components';
+
+const StyledBadge = styled.div`
+  background-color: ${props => props.backgroundColor};
+  color: ${props => props.color};
+  font-size: ${props => props.fontSize};
+  font-weight: ${props => props.fontWeight};
+  border-radius: ${props => props.fontSize};
+  padding: 0 ${props => Math.floor(parseInt(props.fontSize)/2)}px;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  max-width: 50px;
+  text-overflow: ellipsis;
+  display: inline-block;
+`;
+
+const Badge = props => {
+  return (
+    props.number > 0
+      ? <StyledBadge {...props}>{props.number}</StyledBadge>
+      : ""
+  );
+};
+
+Badge.propTypes = {
+  number: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  color: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.number,
+  onClick: PropTypes.func
+};
+
+Badge.defaultProps = {
+  number: 0,
+  backgroundColor: '#ED7309',
+  color: '#FFFFFF',
+  fontSize: '11px',
+  fontWeight: 800
+}
+
+export default Badge;

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

@@ -21,4 +21,5 @@ export { default as Checkbox } from './components/checkbox'
 export { Text } from './components/text'
 export { default as ModalDialog } from './components/modal-dialog'
 export { default as Layout } from './components/layout'
-export { default as ContentRow } from './components/content-row'
+export { default as ContentRow } from './components/content-row'
+export { default as Badge } from './components/badge'