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

Web: refactoring Link component and fixing storybook descriptions and demos

Browse Source
This commit is contained in:
DASenkiv 2019-06-25 17:14:55 +03:00
parent e67204a0a1
commit af1d18a9de
4 changed files with 67 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@ storiesOf('Components|Link', module)
<Col>
<Link type = "action" color = "black" isBold = {true}>Bold black action link</Link>
</Col>
<Col>Sorting:&nbsp;<Link type = "action" color = "black" isDotted = {true} isDropdown = {true} dropdownColor = 'sorting' isHoverDotted = {true}>Last name</Link></Col>
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted'>Simple dropdown</Link></Col>
</Row>
<Row style={rowStyle}>
<Col>
@ -42,7 +42,7 @@ storiesOf('Components|Link', module)
<Col>
<Link type = "action" color = "black">Black action link</Link>
</Col>
<Col> <Link type = "action" color = "profile" isDropdown = {true} dropdownColor = 'profile'>My profile color(deprecated)</Link></Col>
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover'>Gray dropdown and dotted appear after hover</Link></Col>
</Row>
<Row style={rowStyle}>
<Col>
@ -51,7 +51,7 @@ storiesOf('Components|Link', module)
<Col>
<Link type = "action" color = "black" isHovered = {true}>Black hovered action link</Link>
</Col>
<Col> Show on page:&nbsp;<Link type = "action" color = "black" isDotted = {true} isDropdown = {true} dropdownColor = 'number' isHoverDotted = {true}>25</Link></Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
@ -60,7 +60,7 @@ storiesOf('Components|Link', module)
<Col>
<Link type = "action" color = "gray">Gray action link</Link>
</Col>
<Col><Link type = "action" color = "black" isDropdown = {true} dropdownColor = 'email' displayDropdownAfterHover = {true} isHoverDotted = {true}>Dropdown appear after hover</Link></Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
@ -69,7 +69,7 @@ storiesOf('Components|Link', module)
<Col>
<Link type = "action" color = "gray" isHovered = {true}>Gray hovered action link</Link>
</Col>
<Col><Link type = "action" color = "filter" isDropdown = {true} dropdownColor = 'filter' isDropdown = {true} isDotted = {true} isHoverDotted = {true}>Some group filter color(deprecated)</Link></Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
@ -88,50 +88,7 @@ storiesOf('Components|Link', module)
<Link type = "action" color = "blue" isHovered = {true}>Blue hovered action link</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "black" isDotted = {true}>Black dotted action link</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "black" isHoverDotted = {true}>Black action link, dotted after hover</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "gray" isDotted = {true}>Gray dotted action link</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "gray" isHoverDotted = {true}>Gray action link, dotted after hover</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "blue" isDotted = {true}>Blue dotted action link</Link>
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col></Col>
<Col>
<Link type = "action" color = "blue" isHoverDotted = {true}>Blue action link, dotted after hover</Link>
</Col>
<Col></Col>
</Row>
</Row>
</Container>
</>
));

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

@ -10,7 +10,7 @@ import { Link } from 'asc-web-components';
It is a link with 2 types:
1) page - simple link which refer to other pages and parts of current page;
2) action - link, which usually hasn`t hyperlink and do anything on click - open dropdown, filter data. etc
2) action - link, which usually hasn`t hyperlink and do anything on click - open dropdown, filter data, etc
#### Usage
@ -23,25 +23,20 @@ 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, filter, profile| `black` | Color of link in all states - hover, active, visited |
| `fontSize` | `string` | - | - | `12px` | Font size of link |
| `href` | `string` | - | - | `javascript:void(0)` | Hyperlink, usually used in *page* type |
| `color` | `oneOf` | - | gray, black, blue| `black` | Color of link in all states - hover, active, visited |
| `fontSize` | `number` | - | - | `12` | Font size of link (in px) |
| `href` | `string` | - | - | `undefined` | Hyperlink, usually used in *page* type |
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `title` | `string` | - | - | - | Title of link |
| `target` | `oneOf` | - | _blank, _self, _parent, _top | - | The *target* attribute specifies where the linked document will open when the link is clicked. |
| `rel` | `string` | - | - | 'noopener noreferrer' if target === '_blank' | The *rel* attribute specifies the relationship between the current document and the linked document. Only used if the href attribute is present. |
| `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` | Show hovered state of link. Only for demo |
| `onClick` | `func` | - | - | - | What the link will trigger when clicked. Usually use in *action* type |
|
#### Properties (only for \'action\' type of link)
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
| `isDotted` | `bool` | - | - | - | Add dots decoration under link in usual and visited state |
| `isHoverDotted` | `bool` | - | - | - | Add dots decoration under link in hovered state |
| `isDropdown` | `bool` | - | - | - | Add dropdown |
| `dropdownType` | `oneOf` | - | filter, menu, none | `none` | Type of dropdown |
| `dropdownColor` | `oneOf` | - | filter, profile, sorting,number,email, group| `filter` | Color of dropdown |
| `dropdownRightIndent` | `string` | - | - | `-10px` | The right property affects the horizontal position of a dropdown |
| `displayDropdownAfterHover` | `bool` | - | - | `false` | Set appearance dropdown icon when hover |
| `dropdownType` | `oneOf` | - | alwaysDotted, appearDottedAfterHover, none | `none` | Type of dropdown: *none* is neither, *alwaysDotted* is always show dotted style and icon of dropdown, *appearDottedAfterHover* is show dotted style and icon of dropdown only after hover |
| `onClick` | `func` | - | - | - | What the link will trigger when clicked - open/close dropdown, filter, popup, etc

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

@ -2,41 +2,38 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import { Link, DropDown } from 'asc-web-components';
import Readme from './README.md';
import {text, boolean, withKnobs, select } from '@storybook/addon-knobs/react';
import {text, boolean, withKnobs, select, number } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Section from '../../../.storybook/decorators/section';
const type = ['action', 'page'];
const colors = ['black', 'gray', 'blue', 'filter', 'profile'];
const colors = ['black', 'gray', 'blue'];
const target = ['_blank', '_self', '_parent', '_top'];
const dropdownType = ['filter', 'menu', 'none'];
const dropdownColor = ['filter', 'profile', 'sorting','number','email', 'group'];
const dropdownType = ['alwaysDotted', 'appearDottedAfterHover', 'none'];
storiesOf('Components|Link', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Section>
<Link
type={select('type', type, 'page')}
color={select('color', colors, 'black')}
fontSize={text('fontSize', '12px')}
href={text('href', 'https://github.com')}
isBold={boolean('isBold', false)}
title={text('title', '')}
target={select('target', target, '_top')}
rel={text('rel', '')}
isTextOverflow={boolean('isTextOverflow', false)}
isHovered={boolean('isHovered', false)}
isDotted={boolean('isDotted', false)}
isHoverDotted={boolean('isHoverDotted', false)}
isDropdown={boolean('isDropdown', false)}
dropdownType={select('dropdownType', dropdownType, 'none')}
dropdownColor={select('dropdownColor', dropdownColor, 'filter')}
dropdownRightIndent={text('dropdownRightIndent', '-10px')}
displayDropdownAfterHover={boolean('displayDropdownAfterHover', false)}
>
Simple link
</Link>
</Section>
));
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => {
let linkType=`${select('type', type, 'page')}`;
const userProps = linkType === "action" ? {
dropdownType: `${select('dropdownType', dropdownType, 'none')}`,
} : {};
return (
<Section>
<Link
type={linkType}
color={select('color', colors, 'black')}
fontSize={number('fontSize', 12)}
href={text('href', 'https://github.com')}
isBold={boolean('isBold', false)}
title={text('title', '')}
target={select('target', target, '_top')}
isTextOverflow={boolean('isTextOverflow', false)}
isHovered={boolean('isHovered', false)}
{...userProps}
>Simple link</Link>
</Section>
);
});

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

@ -5,49 +5,33 @@ import PropTypes from 'prop-types';
const arrowDropdown = css`
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: ${props =>
((props.dropdownColor === 'filter' || props.dropdownColor === 'sorting') && '4px solid #888') ||
(props.dropdownColor === 'profile' && '4px solid #cbcbcc') ||
(props.dropdownColor === 'number' && '4px solid #212121') ||
((props.dropdownColor === 'email' || props.dropdownColor === 'group') && '4px solid #666')
border-top: ${props =>
(props.color === 'black' && '4px solid #333333') ||
(props.color === 'gray' && '4px solid #A3A9AE') ||
(props.color === 'blue' && '4px solid #316DAA')
};
content: "";
height: 0;
position: absolute;
right: ${props =>
(props.dropdownRightIndent)
};
right: -15px;
top: 1px;
bottom: 0px;
top: 50%;
width: 0;
margin-top: -2px;
`;
const textOverflowCss = css`
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
`;
const boldCss = css`
font-weight: bold;
`;
const colorCss = css`
color: ${props =>
(props.color === 'black' && '#333333') ||
(props.color === 'gray' && '#A3A9AE') ||
(props.color === 'blue' && '#316DAA') ||
(props.color === 'filter' && '#1a6db3') ||
(props.color === 'profile' && '#C5C5C5')
(props.color === 'blue' && '#316DAA')
};
`;
const hoveredCss = css`
${colorCss};
border-bottom: ${props => (props.isHoverDotted && props.type === 'action' ? '1px dotted;' : 'none')};
border-bottom: ${props => (props.type === 'action' ? '1px dotted;' : 'none')};
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'none')};
`;
@ -55,11 +39,6 @@ const visitedCss = css`
${colorCss};
`;
const fontSizeCss = css`
font-size: ${props => props.fontSize};
`;
const dottedCss = css`
border-bottom: 1px dotted;
`;
@ -67,15 +46,15 @@ const dottedCss = css`
const StyledLink = styled.a.attrs((props) => ({
href: props.href,
target: props.target,
rel: props.target === '_blank' ? 'noopener noreferrer' : props.rel ? props.rel : undefined,
rel: props.target === '_blank' && 'noopener noreferrer',
title: props.title
}))`
${colorCss};
${fontSizeCss};
font-size: ${props => props.fontSize}px;
cursor: pointer;
position: relative;
text-decoration: none;
font-weight: ${props => (props.isBold && css `${boldCss}`)};
font-weight: ${props => (props.isBold && 'bold')};
&:hover {
${hoveredCss};
@ -100,13 +79,13 @@ ${props => (props.isHovered &&
`)
}
${props => (props.type === 'action' && props.isDotted && (!props.isHovered || props.isHoverDotted) &&
${props => (props.type === 'action' && (props.isHovered || props.dropdownType === 'alwaysDotted') &&
css`
${dottedCss}
`)
}
${props => (props.type === 'action' && props.isDropdown && !props.displayDropdownAfterHover &&
${props => (props.type === 'action' && props.dropdownType === 'alwaysDotted' &&
css`
&:after {
${arrowDropdown}
@ -115,17 +94,15 @@ ${props => (props.type === 'action' && props.isDropdown && !props.displayDropdow
${props => (props.isTextOverflow &&
css`
${textOverflowCss}
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
overflow: hidden;
`)
}
${props => (props.isBold &&
css`
${boldCss}
`)
}
${props => (props.type === 'action' && props.isDropdown && props.displayDropdownAfterHover &&
${props => (props.type === 'action' && props.dropdownType === 'appearDottedAfterHover' &&
css`
&:hover {
:after {
@ -139,21 +116,14 @@ ${props => (props.type === 'action' && props.isDropdown && props.displayDropdown
const Link = props => <StyledLink {...props} />;
Link.propTypes = {
color: PropTypes.oneOf(['gray', 'black', 'blue', 'filter', 'profile']),
displayDropdownAfterHover: PropTypes.bool,
dropdownColor: PropTypes.oneOf(['filter', 'profile', 'sorting','number','email', 'group']),
dropdownRightIndent: PropTypes.string,
dropdownType: PropTypes.oneOf(['filter', 'menu', 'none']),
fontSize: PropTypes.string,
color: PropTypes.oneOf(['gray', 'black', 'blue']),
dropdownType: PropTypes.oneOf(['alwaysDotted', 'appearDottedAfterHover', 'none']),
fontSize: PropTypes.number,
href: PropTypes.string,
isBold: PropTypes.bool,
isDropdown: PropTypes.bool,
isDotted: PropTypes.bool,
isHoverDotted: PropTypes.bool,
isHovered: PropTypes.bool,
isTextOverflow: PropTypes.bool,
onClick: PropTypes.func,
rel: PropTypes.string,
target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
title: PropTypes.string,
type: PropTypes.oneOf(['action', 'page'])
@ -161,8 +131,7 @@ Link.propTypes = {
Link.defaultProps = {
color: 'black',
dropdownRightIndent: '-10px',
fontSize: '12px',
fontSize: 12,
href: undefined,
isBold: false,
isHovered: false,