web: components: new IconButton component

web/ASC.Web.Components/src/components/icon-button/index.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+import { Icons } from '../icons';
+
+const StyledOuter = styled.div`
+    width: ${props => props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
+    cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
+`;
+
+const IconButton = (props) =>  {
+    const { color, isFill, iconName, size, isDisabled } = props;
+    return (
+        <StyledOuter size={size} isDisabled={isDisabled} onClick={!props.isDisabled ? props.onClick : undefined}>
+            {React.createElement(Icons[iconName], {size: "scale", color: color, isfill: isFill})}
+        </StyledOuter>
+    );
+};
+
+IconButton.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    isFill: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    iconName: PropTypes.string.isRequired,
+    onClick:PropTypes.func
+};
+
+IconButton.defaultProps = {
+    color: "#d0d5da",
+    size: 25,
+    isFill: true,
+    iconName: "AZSortingIcon",
+    isDisabled: false
+};
+
+export default IconButton;

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

@@ -24,4 +24,5 @@ export { default as Layout } from './components/layout'
 export { default as ContentRow } from './components/content-row'
 export { default as Badge } from './components/badge'
 export { default as ErrorContainer } from './components/error-container'
-export { default as InputBlock } from './components/input-block'
+export { default as InputBlock } from './components/input-block'
+export { default as IconButton } from './components/icon-button'

web/ASC.Web.Storybook/stories/buttons/icon-button/README.md

@@ -0,0 +1,30 @@
+# Buttons: IconButton
+
+## Usage
+
+```js
+import { IconButton } from 'asc-web-components';
+```
+
+#### Description
+
+IconButton is used for a action on a page.
+
+#### Usage
+
+```js
+<IconButton size='25' isDisabled={false} onClick={() => alert('Clicked')} iconName={"SearchIcon"} isFill={true} />
+```
+
+#### Properties
+
+| Props              | Type                  | Required | Values                         | Default         | Description                                                                                          |
+| ------------------ | ----------------------| :------: | ---------------------------    | --------------- |----------------------------------------------------------------------------------------------------- |
+| `color`            | `string`              |    -     | -                              | `#d0d5da`       | Icon color                                                                                           |
+| `size`             | ``number` or `string``|    -     | -                              |   `25`          | Button height and width value                                                                        |
+| `isDisabled`       | `bool`                |    -     | -                              |  `false`        | Tells when the button should present a disabled state                                                |
+| `iconName`         | `string`              |    ✅    | -                              | `AZSortingIcon` | Icon name                                                                                            |
+| `isFill`           | `bool`                |    -     | -                              | `true`          | Determines if icon fill is needed                                                                    |
+| `onClick`          | `func`                |    -     | -                              | -               | What the button will trigger when clicked                                                            |
+
+

web/ASC.Web.Storybook/stories/buttons/icon-button/icon.button.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, color, number} from '@storybook/addon-knobs/react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import { Icons, IconButton } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+
+storiesOf('Components|Buttons', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(Readme))
+  .add('icon button', () => {
+      
+    const iconNames = Object.keys(Icons);
+
+    return (
+      <Section>
+        <IconButton
+            color={color('color', '#d0d5da')} 
+            size={number('size', 25)}
+            iconName={select('iconName', iconNames, 'SearchIcon')}
+            isFill={boolean('isFill', false)}
+            isDisabled={boolean('isDisabled', false)}
+            onClick={action('clicked')}
+        />
+      </Section>
+    )
+  });