Merge branch 'feature/social-button'
This commit is contained in:
Ivan Habarov
commit
2e1e8fa0b0
@ -61,8 +61,6 @@ import OrigCopyIcon from './copy.react.svg';
|
||||
import OrigShareEmailIcon from './share.e-mail.react.svg';
|
||||
import OrigShareGooglePlusIcon from './share.google.plus.react.svg';
|
||||
import OrigSendClockIcon from './send.clock.react.svg';
|
||||
import OrigShareFacebookIcon from './share.facebook.react.svg';
|
||||
import OrigShareTwitterIcon from './share.twitter.react.svg';
|
||||
import OrigAccessNoneIcon from './access.none.react.svg';
|
||||
import OrigTimeTrackingNotBilledIcon from './time.tracking.not.billed.react.svg';
|
||||
import OrigAccessFormIcon from './access.form.react.svg';
|
||||
@ -141,6 +139,10 @@ import OrigToggleButtonIcon from './toggle.button.react.svg';
|
||||
|
||||
import OrigQuestionIcon from './question.react.svg';
|
||||
|
||||
import OrigShareGoogleIcon from './share.google.react.svg';
|
||||
import OrigShareFacebookIcon from './share.facebook.react.svg';
|
||||
import OrigShareTwitterIcon from './share.twitter.react.svg';
|
||||
import OrigShareLinkedInIcon from './share.linkedin.react.svg';
|
||||
|
||||
export const AZSortingIcon = createStyledIcon(
|
||||
OrigAZSortingIcon,
|
||||
@ -619,18 +621,10 @@ export const ShareEmailIcon = createStyledIcon(
|
||||
OrigShareEmailIcon,
|
||||
'ShareEmailIcon'
|
||||
);
|
||||
export const ShareFacebookIcon = createStyledIcon(
|
||||
OrigShareFacebookIcon,
|
||||
'ShareFacebookIcon'
|
||||
);
|
||||
export const ShareGooglePlusIcon = createStyledIcon(
|
||||
OrigShareGooglePlusIcon,
|
||||
'ShareGooglePlusIcon'
|
||||
);
|
||||
export const ShareTwitterIcon = createStyledIcon(
|
||||
OrigShareTwitterIcon,
|
||||
'ShareTwitterIcon'
|
||||
);
|
||||
export const SkypeIcon = createStyledIcon(
|
||||
OrigSkypeIcon,
|
||||
'SkypeIcon'
|
||||
@ -692,4 +686,23 @@ export const QuestionIcon = createStyledIcon(
|
||||
OrigQuestionIcon,
|
||||
'ToggleButtonIcon',
|
||||
"rect"
|
||||
);
|
||||
|
||||
export const ShareGoogleIcon = createStyledIcon(
|
||||
OrigShareGoogleIcon,
|
||||
'ShareGoogleIcon'
|
||||
);
|
||||
|
||||
export const ShareFacebookIcon = createStyledIcon(
|
||||
OrigShareFacebookIcon,
|
||||
'ShareFacebookIcon'
|
||||
);
|
||||
export const ShareTwitterIcon = createStyledIcon(
|
||||
OrigShareTwitterIcon,
|
||||
'ShareTwitterIcon'
|
||||
);
|
||||
|
||||
export const ShareLinkedInIcon = createStyledIcon(
|
||||
OrigShareLinkedInIcon,
|
||||
'ShareLinkedInIcon'
|
||||
);
|
||||
@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0H2C0.897 0 0 0.897 0 2V14C0 15.103 0.897 16 2 16H8V10.1848H5.81641V8H8V5.90666C8 4.24966 9.343 2.90666 11 2.90666H13.0877V5.09417H11.912C11.36 5.09417 10.912 5.26478 10.912 5.81678V8H13.5L12.5 10.1848H10.912V16H14C15.103 16 16 15.103 16 14V2C16 0.897 15.103 0 14 0Z" fill="#A3A9AE"/>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 0H2.25C1.00912 0 0 1.00912 0 2.25V15.75C0 16.9909 1.00912 18 2.25 18H9V11.4579H6.54346V9H9V6.64499C9 4.78087 10.5109 3.26999 12.375 3.26999H14.7237V5.73094H13.401C12.78 5.73094 12.276 5.92288 12.276 6.54388V9H15.1875L14.0625 11.4579H12.276V18H15.75C16.9909 18 18 16.9909 18 15.75V2.25C18 1.00912 16.9909 0 15.75 0Z" fill="#4469B0"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 441 B After Width: | Height: | Size: 494 B |
@ -0,0 +1,6 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.64 9.20419C17.64 8.56601 17.5827 7.95237 17.4764 7.36328H9V10.8446H13.8436C13.635 11.9696 13.0009 12.9228 12.0477 13.561V15.8192H14.9564C16.6582 14.2524 17.64 11.9451 17.64 9.20419Z" fill="#4285F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18C11.43 18 13.4673 17.1941 14.9564 15.8195L12.0477 13.5613C11.2418 14.1013 10.2109 14.4204 9 14.4204C6.65591 14.4204 4.67182 12.8372 3.96409 10.71H0.957275V13.0418C2.43818 15.9831 5.48182 18 9 18Z" fill="#34A853"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96409 10.7098C3.78409 10.1698 3.68182 9.59301 3.68182 8.99983C3.68182 8.40664 3.78409 7.82983 3.96409 7.28983V4.95801H0.957273C0.347727 6.17301 0 7.54755 0 8.99983C0 10.4521 0.347727 11.8266 0.957273 13.0416L3.96409 10.7098Z" fill="#FBBC05"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.57955C10.3214 3.57955 11.5077 4.03364 12.4405 4.92545L15.0218 2.34409C13.4632 0.891818 11.4259 0 9 0C5.48182 0 2.43818 2.01682 0.957275 4.95818L3.96409 7.29C4.67182 5.16273 6.65591 3.57955 9 3.57955Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.75036 8.05344C9.74586 8.06301 9.73967 8.07201 9.73292 8.08044H9.75036V8.05344Z" fill="#1276B3"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 0C1.00736 0 0 1.00736 0 2.25V15.75C0 16.9926 1.00736 18 2.25 18H15.75C16.9926 18 18 16.9926 18 15.75V2.25C18 1.00736 16.9926 0 15.75 0H2.25ZM2.89855 6.91044H5.5828V14.9846H2.89855V6.91044ZM4.25755 3.01794C5.17611 3.01794 5.74142 3.62094 5.7583 4.41407C5.7583 5.18751 5.17611 5.80851 4.24011 5.80851H4.22267C3.32211 5.80851 2.73992 5.18751 2.73992 4.41407C2.73992 3.62094 3.34011 3.01794 4.25755 3.01794ZM12.1697 6.72144C13.9354 6.72144 15.26 7.87513 15.26 10.3546L15.2595 14.9846H12.5758V10.6646C12.5758 9.57782 12.1882 8.83869 11.2157 8.83869C10.4754 8.83869 10.0333 9.34044 9.83867 9.82082C9.7678 9.99463 9.75036 10.2314 9.75036 10.4756V14.9846H7.06723C7.06723 14.9846 7.10155 7.66757 7.06723 6.91044H9.75036V8.05344C10.1087 7.50388 10.746 6.72144 12.1697 6.72144Z" fill="#1276B3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 0H1.6C0.72 0 0 0.72 0 1.6V14.4C0 15.28 0.72 16 1.6 16H14.4C15.28 16 16 15.28 16 14.4V1.6C16 0.72 15.28 0 14.4 0ZM12.56 5.84C12.48 9.52 10.16 12.08 6.64 12.24C5.2 12.32 4.16 11.84 3.2 11.28C4.24 11.44 5.6 11.04 6.32 10.4C5.28 10.32 4.64 9.76 4.32 8.88C4.64 8.96 4.96 8.88 5.2 8.88C4.24 8.56 3.6 8 3.52 6.72C3.76 6.88 4.08 6.96 4.4 6.96C3.68 6.56 3.2 5.04 3.76 4.08C4.8 5.2 6.08 6.16 8.16 6.32C7.6 4.08 10.64 2.88 11.84 4.4C12.4 4.32 12.8 4.08 13.2 3.92C13.04 4.48 12.72 4.8 12.32 5.12C12.72 5.04 13.12 4.96 13.44 4.8C13.36 5.2 12.96 5.52 12.56 5.84Z" fill="#A3A9AE"/>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM14.13 6.57002C14.04 10.71 11.43 13.59 7.47 13.77C5.85 13.86 4.68 13.32 3.6 12.69C4.77 12.8701 6.3 12.4201 7.11 11.7C5.94 11.61 5.22 10.98 4.86 9.99002C5.22 10.08 5.58 9.99002 5.85 9.99002C4.77 9.63002 4.05 9.00002 3.96 7.56002C4.23 7.74002 4.59 7.83002 4.95 7.83002C4.14 7.38002 3.6 5.67002 4.23 4.59002C5.4 5.85002 6.84 6.93002 9.18 7.11002C8.55 4.59002 11.97 3.24002 13.32 4.95002C13.95 4.86002 14.4 4.59002 14.85 4.41002C14.67 5.04002 14.31 5.40002 13.86 5.76002C14.31 5.67002 14.76 5.58002 15.12 5.40002C15.03 5.85002 14.58 6.21002 14.13 6.57002Z" fill="#2AA3EF"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 842 B |
@ -0,0 +1,27 @@
|
||||
# Buttons: SocialButton
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { SocialButton } from 'asc-web-components';
|
||||
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
Button is used for sign up with help social networks.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<SocialButton icon={icon} label={label}/>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `label` | `string` | - | - | - | Button text |
|
||||
| `iconName` | `string` | - | - | SocialButtonGoogleIcon | Icon of button |
|
||||
|
||||
|
||||
121
web/ASC.Web.Components/src/components/social-button/index.js
Normal file
121
web/ASC.Web.Components/src/components/social-button/index.js
Normal file
@ -0,0 +1,121 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Text } from '../text';
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { Icons } from "../icons";
|
||||
|
||||
const StyledSocialButton = styled.div`
|
||||
position: absolute;
|
||||
margin: 20px 0 0 20px;
|
||||
border-radius: 2px;
|
||||
width: 201px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
${props =>
|
||||
!props.isDisabled &&
|
||||
css`
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24), 0px 0px 1px rgba(0, 0, 0, 0.12);
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
:hover, :active {
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:hover {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
:active {
|
||||
background: #EEEEEE;
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
};
|
||||
|
||||
${props =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
svg path {
|
||||
fill: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
`}
|
||||
|
||||
.text-on-button {
|
||||
position: absolute;
|
||||
width: 142px;
|
||||
height: 16px;
|
||||
left: 50px;
|
||||
right: 9px;
|
||||
top: 12px;
|
||||
font-family: Roboto, 'Open Sans', sans-serif, Arial;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.21875px;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picture-of-button svg {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 11px;
|
||||
margin-left: 11px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SocialButtonIcon = ({ iconName }) => {
|
||||
return <div className="picture-of-button">{React.createElement(Icons[iconName], {})}</div>;
|
||||
};
|
||||
|
||||
class SocialButton extends React.Component {
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !isEqual(this.props, nextProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {label, iconName} = this.props;
|
||||
return (
|
||||
<StyledSocialButton {...this.props}>
|
||||
<SocialButtonIcon iconName={iconName}/>
|
||||
|
||||
{label && (
|
||||
<Text.Body as="span" className="text-on-button">{label}</Text.Body>
|
||||
)}
|
||||
</StyledSocialButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SocialButton.propTypes = {
|
||||
label: PropTypes.string,
|
||||
iconName: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
isDisabled: PropTypes.bool
|
||||
};
|
||||
|
||||
SocialButton.defaultProps = {
|
||||
label: '',
|
||||
iconName: 'SocialButtonGoogleIcon',
|
||||
tabIndex: -1,
|
||||
isDisabled: false
|
||||
};
|
||||
|
||||
export default SocialButton;
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import SocialButton from '.';
|
||||
|
||||
storiesOf('Components|Buttons|SocialButtons', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('social button', () => {
|
||||
const socialNetworks = ['ShareGoogleIcon',
|
||||
'ShareFacebookIcon',
|
||||
'ShareTwitterIcon',
|
||||
'ShareLinkedInIcon'];
|
||||
const iconName = select("iconName", ['', ...socialNetworks], 'ShareGoogleIcon');
|
||||
|
||||
return (
|
||||
<SocialButton
|
||||
label={text('label', 'Base SocialButton')}
|
||||
iconName={iconName}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
onClick={action('clicked')}
|
||||
/>
|
||||
)
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import SocialButton from '.';
|
||||
|
||||
describe('<SocialButton />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<SocialButton iconName={'ShareGoogleIcon'} label={"Test Caption"}/>
|
||||
);
|
||||
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it('not re-render test', () => {
|
||||
// const onClick= () => alert('SocialButton clicked');
|
||||
|
||||
const wrapper = shallow(<SocialButton iconName={'ShareGoogleIcon'} label={"Test Caption"}/>).instance();
|
||||
|
||||
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
|
||||
|
||||
expect(shouldUpdate).toBe(false);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user