Merge branch 'master' into feature/Wizard

web/ASC.Web.Components/package.json

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

web/ASC.Web.Components/src/components/button/README.md

@@ -35,3 +35,4 @@ import { Button } from "asc-web-components";
 | `size`       |    `oneOf`     |    -     | `base`, `middle`, `big`, `large` | `base`  | Size of button                                        |
 | `style`      | `obj`, `array` |    -     |            -            |    -    | Accepts css style                                     |
 | `tabIndex`   |    `number`    |    -     |            -            |  `-1`   | Button tab index                                      |
+| `minWidth`   |    `string`    |    -     |            -            |  `null` | Sets the min width of the button                  |

web/ASC.Web.Components/src/components/button/button.stories.js

@@ -32,6 +32,8 @@ storiesOf('Components|Buttons', module)
           isClicked={boolean('isClicked', false)}
           isDisabled={boolean('isDisabled', false)}
 
+          minWidth={text('minWidth', '')}
+
           onClick={action('clicked')}
 
           icon={hintIcon}

web/ASC.Web.Components/src/components/button/button.test.js

@@ -147,4 +147,13 @@ describe('<Button />', () => {
     expect(wrapper.prop('size')).toEqual('large');
     expect(wrapper.prop('primary')).toEqual(true);
   });
+
+  it('accepts minWidth', () => {
+    const wrapper = mount(
+      <Button {...baseProps}/>
+    );
+
+    wrapper.setProps({minWidth: '40px'});
+    expect(wrapper.prop('minWidth')).toEqual('40px');
+  });
 });

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

@@ -53,10 +53,6 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
   disabled: props.isDisabled || props.isLoading ? 'disabled' : '',
   tabIndex: props.tabIndex
 }))`
-  min-width: ${props => 
-    props.size === 'base' ? '60px' : '100px' 
-  };
-
   height: ${props =>
     (props.size === 'large' && '44px') ||
     (props.size === 'big' && '36px') ||
@@ -66,9 +62,9 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
 
   line-height: ${props =>
     (props.size === 'large' && '20px') ||
-    (props.size === 'big' && '18px') ||
+    (props.size === 'big' && '20px') ||
-    (props.size === 'medium' && '15px') ||
+    (props.size === 'medium' && '18px') ||
-    (props.size === 'base' && '16px')
+    (props.size === 'base' && '15px')
   };
 
   font-size: ${props =>
@@ -91,46 +87,51 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
   padding: ${props =>
     (props.size === 'large' && (props.primary 
       ? (props.icon 
-          ? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
+          ? (props.label ? '11px 24px 13px 24px' : '11px 11px 13px 11px')
-          : (props.label ? '12px 20px 12px 20px' : '12px 20px 12px 20px')
+          : (props.label ? '12px 28px 12px 28px' : '0px')
         ) 
       : (props.icon 
-          ? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
+          ? (props.label ? '11px 24px 13px 24px' : '11px 11px 13px 11px')
-          : (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
+          : (props.label ? '11px 28px 13px 28px' : '0px')
         ))
     ) ||
     (props.size === 'big' && (props.primary 
       ? (props.icon 
-          ? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
+          ? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
-          : (props.label ? '8px 16px 8px 16px' : '8px 10px 9px 16px')
+          : (props.label ? '8px 26px 9px 25px' : '0px')
         ) 
       : (props.icon 
-          ? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
+          ? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
-          : (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
+          : (props.label ? '8px 26px 9px 25px' : '0px')
         ))
     ) ||
     (props.size === 'medium' && (props.primary 
       ? (props.icon 
-          ? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
+          ? (props.label ? '6px 24px 7px 24px' : '6px 10px 7px 10px')
-          : (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
+          : (props.label ? '7px 24px 7px 24px' : '0px')
         ) 
       : (props.icon 
-          ? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
+          ? (props.label ? '6px 24px 7px 24px' : '6px 10px 7px 10px')
-          : (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
+          : (props.label ? '7px 24px 7px 24px' : '0px')
         ))
     ) ||
     (props.size === 'base' && (props.primary 
       ? (props.icon 
-          ? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px') 
+          ? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px') 
-          : (props.label ? '4px 12px 5px 12px' : '4px 12px 5px 12px')
+          : (props.label ? '3px 24px 5px 24px' : '0px')
         )
       : (props.icon 
-          ? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px') 
+          ? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px') 
-          : (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
+          : (props.label ? '3px 24px 5px 24px' : '0px')
         ))
     )
   };
 
+  ${ props => props.minWidth 
+    ? `min-width: ${props.minWidth};`
+    : null
+  }
+  
   cursor: ${props => props.isDisabled || props.isLoading ? 'default !important' : 'pointer'};
 
   font-family: 'Open Sans', normal;
@@ -195,7 +196,6 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
         ? 'text-bottom'
         : 'text-top'};
   }
-}
 
   ${props => props.label && css`
     .btnIcon,
@@ -265,6 +265,8 @@ Button.propTypes = {
   isDisabled: PropTypes.bool,
   isLoading: PropTypes.bool,
 
+  minWidth: PropTypes.string,
+
   onClick: PropTypes.func
 };
 
@@ -276,6 +278,8 @@ Button.defaultProps = {
   icon: null,
 
   tabIndex: -1,
+  
+  minWidth: null,
 
   isHovered: false,
   isClicked: false,

web/ASC.Web.Components/src/components/password-input/README.md

@@ -94,6 +94,9 @@ If emailInputName parameter value is empty, copy action will be disabled.
 | `tooltipPasswordLength`  | `string`       |    -     |         -          |        -        | Password text translation is long tooltip                             |
 | `tooltipPasswordSpecial` | `string`       |    -     |         -          |        -        | Special text translation tooltip                                      |
 | `tooltipPasswordTitle`   | `string`       |    -     |         -          |        -        | Text translation tooltip                                              |
+| `hideNewPasswordButton`  | `bool`         |    -     |         -          |     `false`     | Allows to hide NewPasswordButton                                      |
+| `isDisableTooltip`       | `bool`         |    -     |         -          |     `false`     | Allows to hide Tooltip                                                |
+| `isTextTooltipVisible`   | `bool`         |    -     |         -          |     `false`     | Allows to show text Tooltip                                           |
 
 #### passwordSettings properties
 

web/ASC.Web.Components/src/components/password-input/index.js

@@ -33,6 +33,16 @@ const StyledInput = styled(SimpleInput)`
   .append {
     padding-right: 8px;
   }
+
+  .break {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .text-tooltip {
+    line-height: 14px;
+    margin-top: -2px;
+  }
 `;
 
 const PasswordProgress = styled.div`
@@ -310,6 +320,24 @@ class PasswordInput extends React.Component {
     return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
   }
 
+  renderTextTooltip = (
+    settings,
+    length,
+    digits,
+    capital,
+    special
+  ) => {
+    return (
+      <>
+      <div className="break"></div>
+      <Text className="text-tooltip" fontSize="10px" color="#A3A9AE" as="span">
+        {settings.minLength ? length : null} {settings.digits ? `, ${digits}` : null } {settings.upperCase ? `, ${capital}` : null} {settings.specSymbols ? `, ${special}` : null}
+      </Text>
+      <div className="break"></div>
+      </>
+    );
+  }
+
   render() {
     //console.log('PasswordInput render()');
     const {
@@ -336,7 +364,10 @@ class PasswordInput extends React.Component {
       className,
       tooltipOffsetLeft,
       style,
-      simpleView
+      simpleView,
+      hideNewPasswordButton,
+      isDisableTooltip,
+      isTextTooltipVisible
     } = this.props;
     const {
       type,
@@ -354,7 +385,18 @@ class PasswordInput extends React.Component {
     const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
     const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
 
-    const tooltipContent = (
+    const textTooltip = isTextTooltipVisible 
+      ? this.renderTextTooltip(
+        passwordSettings,
+        tooltipPasswordLength,
+        tooltipPasswordDigits,
+        tooltipPasswordCapital,
+        tooltipPasswordSpecial
+      ) 
+      : null;
+
+    const tooltipContent = !isDisableTooltip 
+      ? (
       <StyledTooltipContainer forwardedAs="div" title={tooltipPasswordTitle}>
         {tooltipPasswordTitle}
         <StyledTooltipItem
@@ -392,7 +434,8 @@ class PasswordInput extends React.Component {
           </StyledTooltipItem>
         )}
       </StyledTooltipContainer>
-    );
+    )
+    : null;
 
     const inputGroup = (
       <>
@@ -446,7 +489,10 @@ class PasswordInput extends React.Component {
         style={style}
       >
         {simpleView ? (
-          inputGroup
+          <>
+            {inputGroup}
+            {textTooltip}
+          </>
         ) : (
           <>
             <PasswordProgress
@@ -458,14 +504,18 @@ class PasswordInput extends React.Component {
             >
               {inputGroup}
             </PasswordProgress>
-            <NewPasswordButton>
+            {!hideNewPasswordButton 
-              <Icons.RefreshIcon
+              ? <NewPasswordButton>
-                size="medium"
+                  <Icons.RefreshIcon
-                color={iconsColor}
+                    size="medium"
-                isfill={true}
+                    color={iconsColor}
-                onClick={this.onGeneratePassword}
+                    isfill={true}
-              />
+                    onClick={this.onGeneratePassword}
-            </NewPasswordButton>
+                  />
+                </NewPasswordButton>
+              : null
+            }
+            {textTooltip}
             <CopyLink>
               <Link
                 type="action"
@@ -506,6 +556,10 @@ PasswordInput.propTypes = {
   size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
   scale: PropTypes.bool,
 
+  hideNewPasswordButton: PropTypes.bool,
+  isDisableTooltip: PropTypes.bool,
+  isTextTooltipVisible: PropTypes.bool,
+
   clipActionResource: PropTypes.string,
   clipEmailResource: PropTypes.string,
   clipPasswordResource: PropTypes.string,
@@ -538,6 +592,10 @@ PasswordInput.defaultProps = {
   size: "base",
   scale: true,
 
+  hideNewPasswordButton: false,
+  isDisableTooltip: false,
+  isTextTooltipVisible: false,
+
   clipEmailResource: "E-mail ",
   clipPasswordResource: "Password ",
   clipCopiedResource: "Copied",

web/ASC.Web.Components/src/components/password-input/password-input.stories.js

@@ -17,6 +17,9 @@ storiesOf('Components|Input', module)
     const settingsDigits = boolean('settingsDigits', false);
     const settingsSpecSymbols = boolean('settingsSpecSymbols', false);
     const simpleView = boolean('simpleView', false);
+    const hideNewPasswordButton = boolean('hideNewPasswordButton', false);
+    const isDisableTooltip = boolean('isDisableTooltip', false)
+    const isTextTooltipVisible = boolean('isTextTooltipVisible', false);
 
     const fakeSettings = {
       minLength: 6,
@@ -53,6 +56,9 @@ storiesOf('Components|Input', module)
               clipEmailResource='E-mail: '
               clipPasswordResource='Password: '
               clipCopiedResource='Copied'
+              hideNewPasswordButton={hideNewPasswordButton}
+              isDisableTooltip={isDisableTooltip}
+              isTextTooltipVisible={isTextTooltipVisible}
               tooltipPasswordTitle='Password must contain:'
               tooltipPasswordLength={tooltipPasswordLength}
               tooltipPasswordDigits='digits'

web/ASC.Web.Components/src/components/password-input/password-input.test.js

@@ -220,4 +220,22 @@ describe('<PasswordInput />', () => {
 
     expect(wrapper.prop('className')).toEqual('test');
   });
+
+  it('NewPasswordButton hidden when hideNewPasswordButton is true', () => {
+    const wrapper = mount(<PasswordInput {...baseProps} hideNewPasswordButton={true} />);
+
+    expect(wrapper.prop('hideNewPasswordButton')).toEqual(true);
+  });
+
+  it('Tooltip disabled when isDisableTooltip is true', () => {
+    const wrapper = mount(<PasswordInput {...baseProps} isDisableTooltip={true} />);
+
+    expect(wrapper.prop('isDisableTooltip')).toEqual(true);
+  });
+
+  it('TextTooltip shown when isTextTooltipVisible is true', () => {
+    const wrapper = mount(<PasswordInput {...baseProps} isTextTooltipVisible={true} />);
+
+    expect(wrapper.prop('isTextTooltipVisible')).toEqual(true);
+  });
 });