Merge branch 'master' into feature/Wizard
This commit is contained in:
commit
a1d2c2c4f0
@ -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",
|
||||
|
@ -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 |
|
||||
|
@ -32,6 +32,8 @@ storiesOf('Components|Buttons', module)
|
||||
isClicked={boolean('isClicked', false)}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
|
||||
minWidth={text('minWidth', '')}
|
||||
|
||||
onClick={action('clicked')}
|
||||
|
||||
icon={hintIcon}
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
||||
|
@ -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>
|
||||
<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"
|
||||
@ -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",
|
||||
|
@ -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'
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user