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

Web: components: Link: fix Warning: Received false for a non-boolean attribute rel.

Browse Source
This commit is contained in:
DASenkiv 2019-06-28 11:37:13 +03:00
parent 161069645f
commit 5cdb0685d1
4 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/ASC.Web.Components/example/stories/link/all/all.link.stories.js
View File

@ -28,64 +28,64 @@ 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" color = "black" href="https://github.com" isBold = {true} text = 'Bold black page link' />
</Col>
<Col>
<Link type = "action" color = "black" isBold = {true}>Bold black action link</Link>
<Link type = "action" color = "black" isBold = {true} text = 'Bold black action link' />
</Col>
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted'>Simple dropdown</Link></Col>
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted' text = 'Simple dropdown' /></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "black" href="https://github.com">Black page link</Link>
<Link type = "page" color = "black" href="https://github.com" text = 'Black page link' />
</Col>
<Col>
<Link type = "action" color = "black">Black action link</Link>
<Link type = "action" color = "black" text = 'Black action link' />
</Col>
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover'>Gray dropdown and dotted appear after hover</Link></Col>
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover' text = 'Gray dropdown and dotted appear after hover' /></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" color = "black" href="https://github.com" isHovered = {true} text = 'Black hovered page link' />
</Col>
<Col>
<Link type = "action" color = "black" isHovered = {true}>Black hovered action link</Link>
<Link type = "action" color = "black" isHovered = {true} text = 'Black hovered action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "gray" href="https://github.com">Gray page link</Link>
<Link type = "page" color = "gray" href="https://github.com" text = 'Gray page link' />
</Col>
<Col>
<Link type = "action" color = "gray">Gray action link</Link>
<Link type = "action" color = "gray" text = 'Gray action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true}>Gray hovered page link</Link>
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true} text = 'Gray hovered page link' />
</Col>
<Col>
<Link type = "action" color = "gray" isHovered = {true}>Gray hovered action link</Link>
<Link type = "action" color = "gray" isHovered = {true} text = 'Gray hovered action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "blue" href="https://github.com">Blue page link</Link>
<Link type = "page" color = "blue" href="https://github.com" text = 'Blue page link' />
</Col>
<Col>
<Link type = "action" color = "blue">Blue action link</Link>
<Link type = "action" color = "blue" text = 'Blue action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true}>Blue hovered page link</Link>
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true} text = 'Blue hovered page link' />
</Col>
<Col>
<Link type = "action" color = "blue" isHovered = {true}>Blue hovered action link</Link>
<Link type = "action" color = "blue" isHovered = {true} text = 'Blue hovered action link' />
</Col>
<Col></Col>
</Row>

2
web/ASC.Web.Components/example/stories/link/base/README.md
View File

@ -32,6 +32,8 @@ It is a link with 2 types:
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
| `isHovered` | `bool` | - | - | `false` | Show hovered state of link. Only for demo |
|
| `text` | `string` | - | - | - | Text of link |
|
#### Properties (only for \'action\' type of link)

3
web/ASC.Web.Components/example/stories/link/base/base.link.stories.js
View File

@ -37,8 +37,9 @@ return (
target={select('target', target, '_top')}
isTextOverflow={boolean('isTextOverflow', false)}
isHovered={boolean('isHovered', false)}
text={text('text', 'Simple link')}
{...userProps}
>Simple link</Link>
/>
</Section>
);
});

5
web/ASC.Web.Components/src/components/link/index.js
View File

@ -2,6 +2,8 @@ import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
const SimpleLink = ({ rel, isBold, fontSize, isTextOverflow, isHovered, type, color, text, target, dropdownType, ...props }) => <a {...props}>{text}</a>;
const arrowDropdown = css`
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@ -43,7 +45,7 @@ const dottedCss = css`
border-bottom: 1px dotted;
`;
const StyledLink = styled.a.attrs((props) => ({
const StyledLink = styled(SimpleLink).attrs((props) => ({
href: props.href,
target: props.target,
rel: props.target === '_blank' && 'noopener noreferrer',
@ -125,6 +127,7 @@ Link.propTypes = {
isTextOverflow: PropTypes.bool,
onClick: PropTypes.func,
target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
text: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(['action', 'page'])
};