IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/new-login-page

Browse Source
This commit is contained in:
Ilya Oleshko 2020-07-30 16:03:02 +03:00
commit d575bc610d
9 changed files with 138 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ASC.Web.Components/package.json
View File

@ -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",

1
web/ASC.Web.Components/src/components/button/README.md
View File

@ -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 |

2
web/ASC.Web.Components/src/components/button/button.stories.js
View File

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

9
web/ASC.Web.Components/src/components/button/button.test.js
View File

@ -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');
});
});

52
web/ASC.Web.Components/src/components/button/index.js
View File

@ -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 === 'medium' && '15px') ||
(props.size === 'base' && '16px')
(props.size === 'big' && '20px') ||
(props.size === 'medium' && '18px') ||
(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 ? '12px 20px 12px 20px' : '12px 20px 12px 20px')
? (props.label ? '11px 24px 13px 24px' : '11px 11px 13px 11px')
: (props.label ? '12px 28px 12px 28px' : '0px')
)
: (props.icon
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
: (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
? (props.label ? '11px 24px 13px 24px' : '11px 11px 13px 11px')
: (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 16px 8px 16px' : '8px 10px 9px 16px')
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
: (props.label ? '8px 26px 9px 25px' : '0px')
)
: (props.icon
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
: (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
: (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 ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
? (props.label ? '6px 24px 7px 24px' : '6px 10px 7px 10px')
: (props.label ? '7px 24px 7px 24px' : '0px')
)
: (props.icon
? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
: (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
? (props.label ? '6px 24px 7px 24px' : '6px 10px 7px 10px')
: (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 ? '4px 12px 5px 12px' : '4px 12px 5px 12px')
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
: (props.label ? '3px 24px 5px 24px' : '0px')
)
: (props.icon
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
: (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
: (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,

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

@ -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

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

@ -34,6 +34,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`
@ -317,6 +327,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 {
@ -343,7 +371,10 @@ class PasswordInput extends React.Component {
className,
tooltipOffsetLeft,
style,
simpleView
simpleView,
hideNewPasswordButton,
isDisableTooltip,
isTextTooltipVisible
} = this.props;
const {
type,
@ -361,7 +392,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
@ -399,7 +441,8 @@ class PasswordInput extends React.Component {
</StyledTooltipItem>
)}
</StyledTooltipContainer>
);
)
: null;
const inputGroup = (
<>
@ -453,7 +496,10 @@ class PasswordInput extends React.Component {
style={style}
>
{simpleView ? (
inputGroup
<>
{inputGroup}
{textTooltip}
</>
) : (
<>
<PasswordProgress
@ -465,14 +511,18 @@ class PasswordInput extends React.Component {
>
{inputGroup}
</PasswordProgress>
<NewPasswordButton>
<Icons.RefreshIcon
size="medium"
color={iconsColor}
isfill={true}
onClick={this.onGeneratePassword}
/>
</NewPasswordButton>
{!hideNewPasswordButton
? <NewPasswordButton>
<Icons.RefreshIcon
size="medium"
color={iconsColor}
isfill={true}
onClick={this.onGeneratePassword}
/>
</NewPasswordButton>
: null
}
{textTooltip}
<CopyLink>
<Link
type="action"
@ -513,6 +563,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,
@ -544,6 +598,10 @@ PasswordInput.defaultProps = {
size: "base",
scale: true,
hideNewPasswordButton: false,
isDisableTooltip: false,
isTextTooltipVisible: false,
clipEmailResource: "E-mail ",
clipPasswordResource: "Password ",
clipCopiedResource: "Copied",

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

@ -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'

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

@ -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);
});
});