Web: components: Link: fixed style, Avatar: added container for Link component
This commit is contained in:
Daniil Senkiv
parent
f735231207
commit
3bd63336f6
@ -125,6 +125,16 @@ const getInitials = userName => {
|
||||
return initials;
|
||||
};
|
||||
|
||||
const EditLink = styled.div`
|
||||
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Avatar = React.memo(props => {
|
||||
//console.log("Avatar render");
|
||||
const { size, source, userName, role, editing, editLabel, editAction } = props;
|
||||
@ -140,17 +150,19 @@ const Avatar = React.memo(props => {
|
||||
</AvatarWrapper>
|
||||
{editing && (size === 'max') &&
|
||||
<EditContainer {...props}>
|
||||
<Link
|
||||
type='action'
|
||||
title={editLabel}
|
||||
isTextOverflow={true}
|
||||
fontSize={14}
|
||||
isHovered={true}
|
||||
color={whiteColor}
|
||||
onClick={editAction}
|
||||
>
|
||||
{editLabel}
|
||||
</Link>
|
||||
<EditLink>
|
||||
<Link
|
||||
type='action'
|
||||
title={editLabel}
|
||||
isTextOverflow={true}
|
||||
fontSize={14}
|
||||
isHovered={true}
|
||||
color={whiteColor}
|
||||
onClick={editAction}
|
||||
>
|
||||
{editLabel}
|
||||
</Link>
|
||||
</EditLink>
|
||||
</EditContainer>}
|
||||
<RoleWrapper {...props}>
|
||||
{role === 'guest' && <Icons.GuestIcon size='scale' />}
|
||||
|
||||
@ -23,8 +23,8 @@ const colorCss = css`
|
||||
|
||||
const hoveredCss = css`
|
||||
${colorCss};
|
||||
border-bottom: ${props => (props.type === "page" ? "1px solid" : "1px dashed")};
|
||||
text-decoration: none;
|
||||
border-bottom: ${props => (props.type === 'action' ? '1px dotted;' : 'none')};
|
||||
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'none')};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(SimpleLink)`
|
||||
@ -33,6 +33,7 @@ const StyledLink = styled(SimpleLink)`
|
||||
cursor: pointer;
|
||||
opacity: ${props => props.isSemitransparent && "0.5"};
|
||||
|
||||
line-height: calc(100% + 6px);
|
||||
${colorCss};
|
||||
|
||||
&:hover {
|
||||
@ -49,8 +50,6 @@ const Link = props => {
|
||||
title,
|
||||
fontSize,
|
||||
color,
|
||||
href,
|
||||
onClick,
|
||||
isTextOverflow
|
||||
} = props;
|
||||
|
||||
@ -85,7 +84,7 @@ Link.propTypes = {
|
||||
text: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
type: PropTypes.oneOf(["action", "page"]),
|
||||
tabindex: PropTypes.number,
|
||||
tabIndex: PropTypes.number,
|
||||
rel: PropTypes.string,
|
||||
};
|
||||
|
||||
@ -98,7 +97,7 @@ Link.defaultProps = {
|
||||
isSemitransparent: false,
|
||||
isTextOverflow: true,
|
||||
type: "page",
|
||||
tabindex: -1,
|
||||
tabIndex: -1,
|
||||
rel: "noopener noreferrer"
|
||||
};
|
||||
|
||||
|
||||
@ -28,66 +28,34 @@ storiesOf('Components|Link', module)
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="black" href="https://github.com" isBold={true}>Bold black page link</Link>
|
||||
<Link type="page" href="https://github.com" isBold={true}>Bold black page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="black" isBold={true}>Bold black action link</Link>
|
||||
<Link type="action" isBold={true}>Bold black action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="black" href="https://github.com">Black page link</Link>
|
||||
<Link type="page" href="https://github.com">Black page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="black">Black action link</Link>
|
||||
<Link type="action">Black action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="black" href="https://github.com" isHovered={true}>Black hovered page link</Link>
|
||||
<Link type="page" href="https://github.com" isHovered={true}>Black hovered page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="black" isHovered={true}>Black hovered action link</Link>
|
||||
<Link type="action" isHovered={true}>Black hovered action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="gray" href="https://github.com">Gray page link</Link>
|
||||
<Link type="page" href="https://github.com" isSemitransparent={true}>Semitransparent black page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="gray">Gray action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="gray" href="https://github.com" isHovered={true}>Gray hovered page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="gray" isHovered={true}>Gray hovered action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="blue" href="https://github.com">Blue page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="blue">Blue action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="blue" href="https://github.com" isHovered={true}>Blue hovered page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="blue" isHovered={true}>Blue hovered action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<Link type="page" color="black" href="https://github.com" isSemitransparent={true}>Semitransparent black page link</Link>
|
||||
</Col>
|
||||
<Col>
|
||||
<Link type="action" color="black" isSemitransparent={true}>Semitransparent black action link</Link>
|
||||
<Link type="action" isSemitransparent={true}>Semitransparent black action link</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
@ -23,13 +23,15 @@ It is a link with 2 types:
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
|
||||
| `type` | `oneOf` | - | action, page | `page` | Type of link |
|
||||
| `color` | `oneOf` | - | gray, black, blue| `black` | Color of link in all states - hover, active, visited |
|
||||
| `color` | `string` | - | -| `#333333` | Color of link |
|
||||
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
|
||||
| `href` | `string` | - | - | `undefined` | Hyperlink, usually used in *page* type |
|
||||
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
|
||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||
| `title` | `string` | - | - | - | Title of link |
|
||||
| `title` | `string` | - | - | - | Used as HTML `title` property |
|
||||
| `target` | `oneOf` | - | _blank, _self, _parent, _top | - | The *target* attribute specifies where the linked document will open when the link is clicked. | |
|
||||
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
|
||||
| `isHovered` | `bool` | - | - | `false` | Set hovered state and effects of link.
|
||||
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
|
||||
| `onClick` | `func` | - | - | - | What the link will trigger when clicked. Only for \'action\' type of link
|
||||
| `rel` | `string` | - | - | `noopener noreferrer` | Used as HTML `rel` property
|
||||
| `tabIndex` | `number` | - | - | `-1` | Used as HTML `tabindex` property
|
||||
|
||||
Loading…
Reference in New Issue
Block a user