Web: Added MainButton component

web/ASC.Web.Components/example/stories/main-button/index.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean, withKnobs, select } from '@storybook/addon-knobs/react';
+import { MainButton, GroupButton, Button } from 'asc-web-components';
+import Section from '../../.storybook/decorators/section';
+
+const moduleNames = ['documents', 'people', 'mail', ''];
+
+storiesOf('Components|MainButton', module)
+  .addDecorator(withKnobs)
+  .add('Main button', () => (
+    <Section>
+      <MainButton
+        isDisable={boolean('isDisable', false)}
+        isDropdown={boolean('isDropdown', false)}
+        text={text('text', 'Actions')}
+        moduleName={select('moduleName', moduleNames, 'people')}
+      >
+        <GroupButton 
+          text='Group button' 
+        />
+        <Button 
+            label='Base button' 
+            size='base' 
+        />
+      </MainButton>
+    </Section>
+  ));

web/ASC.Web.Components/src/components/icons/svg/index.js

@@ -3,6 +3,8 @@ import OrigPeopleIcon from './people.react.svg';
 import OrigCalendarIcon from './calendar.react.svg';
 import OrigExpanderDownIcon from './expander-down.react.svg';
 import OrigExpanderRightIcon from './expander-right.react.svg';
+import OrigRotateIcon from './rotate.react.svg';
+import OrigUploadIcon from './upload.react.svg';
 
 import OrigGuestIcon from './guest.react.svg';
 import OrigAdministratorIcon from './administrator.react.svg';
@@ -25,6 +27,14 @@ export const ExpanderRightIcon = createStyledIcon(
   OrigExpanderRightIcon,
   'ExpanderRight'
 );
+export const RotateIcon = createStyledIcon(
+  OrigRotateIcon,
+  'RotateIcon'
+);
+export const UploadIcon = createStyledIcon(
+  OrigUploadIcon,
+  'UploadIcon'
+);
 
 export const GuestIcon = createStyledIcon(
   OrigGuestIcon,

web/ASC.Web.Components/src/components/icons/svg/rotate.react.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15C5.14648 15 2.69177 13.2926 1.60175 10.8437L3.42981 10.0312C4.20844 11.7804 5.96179 13 8 13C9.39691 13 10.66 12.4271 11.5673 11.5035L9.5 10L15 8V14L13.1974 12.6891C11.9164 14.1081 10.0623 15 8 15Z" fill="black"/>
+<path d="M14.3983 5.15632C13.3082 2.70741 10.8535 1 8 1C5.93768 1 4.08362 1.89186 2.80255 3.31094L1 2V8L6.5 6L4.43274 4.49652C5.33997 3.57288 6.60309 3 8 3C10.0382 3 11.7916 4.21958 12.5702 5.9688L14.3983 5.15632Z" fill="black"/>
+</svg>

web/ASC.Web.Components/src/components/icons/svg/upload.react.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="12" width="12" height="2" fill="black"/>
+<path d="M6 6V11H10V6H14L8 0L2 6H6Z" fill="black"/>
+</svg>

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

@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import DropDown from '../drop-down';
+import { Icons } from '../icons'
+
+
+const backgroundColor = '#ED7309',
+    disableBackgroundColor = '#FFCCA6',
+    hoverBackgroundColor = '#FF8932',
+    clickBackgroundColor = '#C96C27';
+
+const hoveredCss = css`
+    background-color: ${hoverBackgroundColor};
+    cursor: pointer;
+`;
+
+const clickCss = css`
+    background-color: ${clickBackgroundColor};
+    cursor: pointer;
+`;
+
+const arrowDropdown = css`
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid white;
+    content: "";
+    height: 0;
+    margin-top: -1px;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    width: 0;
+`;
+
+const notDisableStyles = css`
+    &:hover {
+        ${hoveredCss}
+    };
+
+    &:active {
+        ${clickCss}
+    };
+`;
+
+const notDropdown = css`
+    &:after {
+        display:none;
+    }
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius:0;
+    
+`;
+
+const GroupMainButton = styled.div`
+    position: relative;
+    display: grid;
+    Grid-template-columns: ${props => (props.isDropdown ? "1fr" : "1fr 32px")};
+    ${props => (!props.isDropdown && "grid-column-gap: 1px")}
+`;
+
+const StyledMainButton = styled.div`
+    position: relative;
+    display: block;
+    vertical-align: middle;
+    box-sizing: border-box;
+    background-color: ${props => props.isDisable ? disableBackgroundColor : backgroundColor};
+    padding: 5px 11px;
+    color: #ffffff;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+
+    &:after {
+        ${arrowDropdown}
+    }
+
+    ${props => (!props.isDisable && notDisableStyles)}
+    ${props => (!props.isDropdown && notDropdown)}
+
+    & > svg {
+        display: block;
+        margin: auto;
+        height: 100%;
+    } 
+`;
+
+const StyledSecondaryButton = styled(StyledMainButton)`
+    display: inline-block;
+    height: 32px;
+    padding:0;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius:0;
+`;
+
+
+const MainButton = (props) => {
+    const { text, isDropdown, opened, clickActionSecondary, clickAction } = props;
+    const [isOpen, toggle] = useState(opened);
+    const dropMenu = <DropDown isOpen={isOpen} {...props}/>;
+
+    const SecondaryButtonIcon = moduleName => {
+        
+        switch (moduleName) {
+          case "people":
+            return <Icons.PeopleIcon size="medium" color='#ffffff' />;
+          case "mail":
+            return <Icons.RotateIcon size="medium" color='#ffffff' />;
+          case "documents":
+            return <Icons.UploadIcon size="medium" color='#ffffff' />;
+          default:
+            return (
+                <div></div>
+            );
+        }
+      };
+
+    return(
+        <GroupMainButton {...props}>
+            <StyledMainButton {...props} onClick={() => { !props.isDropdown ? clickActionSecondary : toggle(!isOpen) }}>
+                {text}
+            </StyledMainButton>
+            {isDropdown 
+                ?   { ...dropMenu } 
+                
+                :   <StyledSecondaryButton {...props} onClick={clickActionSecondary}> 
+                        {SecondaryButtonIcon(props.moduleName)}
+                    </StyledSecondaryButton>}
+        </GroupMainButton>
+    )
+}
+
+MainButton.propTypes = {
+    text: PropTypes.string,
+    id: PropTypes.number,
+    isDisable: PropTypes.bool,
+    isDropdown: PropTypes.bool,
+    clickAction: PropTypes.func,
+    clickActionSecondary: PropTypes.func,
+    moduleName: PropTypes.string,
+};
+
+MainButton.defaultProps = {
+    text: "Main button",
+    isDisable: false,
+    isDropdown: true,
+    moduleName: "",
+    clickAction: (e) => console.log('Button "' + e.target.innerText + '" clicked!'),
+    clickActionSecondary: (e) => console.log('Button "' + e.target.innerText + '" clicked!'),
+}
+
+export default MainButton;

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

@@ -12,4 +12,5 @@ export { default as GroupButtonsMenu } from './components/group-buttons-menu'
 export { default as TreeMenu } from './components/tree-menu'
 export { default as TreeNode } from './components/tree-menu-node'
 export { default as Avatar } from './components/avatar'
-export { default as RequestLoader } from './components/request-loader'
+export { default as RequestLoader } from './components/request-loader'
+export { default as MainButton } from './components/main-button'