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

Web: Components: fixed IconButton README.md, added new tooltip README.md, added new tooltip examples, fixed tooltip styles

Browse Source
This commit is contained in:
Nikita Gopienko 2019-10-08 11:42:12 +03:00
parent 9098db077e
commit 457f6f074e
5 changed files with 224 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/ASC.Web.Components/src/components/icon-button/README.md
View File

@ -3,7 +3,7 @@
## Usage ## Usage
```js ```js
import { IconButton } from 'asc-web-components'; import { IconButton } from "asc-web-components";
``` ```
#### Description #### Description
@ -13,18 +13,24 @@ IconButton is used for a action on a page.
#### Usage #### Usage
```js ```js
<IconButton size='25' isDisabled={false} onClick={() => alert('Clicked')} iconName={"SearchIcon"} isFill={true} /> <IconButton
size="25"
isDisabled={false}
onClick={() => alert("Clicked")}
iconName={"SearchIcon"}
isFill={true}
isClickable={false}
/>
``` ```
#### Properties #### Properties
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ------------------ | ----------------------| :------: | --------------------------- | --------------- |----------------------------------------------------------------------------------------------------- | | ------------- | ------------------------ | :------: | ------ | --------------- | ----------------------------------------------------- |
| `color` | `string` | - | - | `#d0d5da` | Icon color | | `color` | `string` | - | - | `#d0d5da` | Icon color |
| `size` | ``number` or `string``| - | - | `25` | Button height and width value | | `size` | `` number` or `string `` | - | - | `25` | Button height and width value |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state | | `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `iconName` | `string` | ✅ | - | `AZSortingIcon` | Icon name | | `iconName` | `string` | ✅ | - | `AZSortingIcon` | Icon name |
| `isFill` | `bool` | - | - | `true` | Determines if icon fill is needed | | `isFill` | `bool` | - | - | `true` | Determines if icon fill is needed |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked | | `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `isClickable` | `bool` | - | - | `false` | Set cursor value |

69
web/ASC.Web.Components/src/components/tooltip/README.md
View File

@ -4,37 +4,78 @@
Custom tooltip Custom tooltip
#### Usage #### Usage with IconButton
```js ```js
import { Tooltip } from "asc-web-components"; import { Tooltip, IconButton, Text } from "asc-web-components";
<a data-for="tooltipContent" data-tip="Tooltip content" data-event="click focus">
(❂‿❂) You component
</a>
<div
style={BodyStyle}
data-for="tooltipContent"
data-tip="You tooltip content"
data-event="click focus"
>
<IconButton isClickable={true} size={20} iconName="QuestionIcon" />
</div>
<Tooltip <Tooltip
id="tooltipContent" id="tooltipContent"
getContent={dataTip => <Text.Body fontSize={13}>{dataTip}</Text.Body>} getContent={dataTip => <Text.Body fontSize={13}>{dataTip}</Text.Body>}
type="light" effect={select("effect", arrayEffects, "float")}
effect="float" place={select("place", arrayPlaces, "top")}
place="top" maxWidth={number("maxWidth", 320)}
/>; />
```
#### Usage with array
```js
import { Tooltip, Link, Text } from "asc-web-components";
const arrayUsers = [
{ key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" },
{ key: "user_2", name: "John", email: "John@gmail.com", position: "developer" },
{ key: "user_3", name: "Kevin", email: "Kevin@gmail.com", position: "developer" },
{ key: "user_4", name: "Alex", email: "Alex@gmail.com", position: "developer" },
{ key: "user_5", name: "Tomas", email: "Tomas@gmail.com", position: "developer" }
];
<h5 style={{ marginLeft: -5 }}>Hover group</h5>
<Link data-for="group" data-tip={0}>Bob</Link><br />
<Link data-for="group" data-tip={1}>John</Link><br />
<Link data-for="group" data-tip={2}>Kevin</Link><br />
<Link data-for="group" data-tip={3}>Alex</Link><br />
<Link data-for="group" data-tip={4}>Tomas</Link>
<Tooltip
id="group"
offset={{ right: 90 }}
getContent={dataTip =>
dataTip ? (
<div>
<Text.Body isBold={true} fontSize={16}>{arrayUsers[dataTip].name}</Text.Body>
<Text.Body color="#A3A9AE" fontSize={13}>{arrayUsers[dataTip].email}</Text.Body>
<Text.Body fontSize={13}>{arrayUsers[dataTip].position}</Text.Body>
</div>
) : null
}
``` ```
#### YouComponent Properties #### YouComponent Properties
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ------------ | -------- | :------: | ------ | ------- | --------------------------------- | | ------------ | -------- | :------: | ------ | ------- | --------------------------------- |
| `data-tip` | `string` | ✅ | - | - | Required if you need to component | | `data-tip` | `string` | - | - | - | Required if you need to component |
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
| `data-event` | `string` | - | - | - | Custom event to trigger tooltip | | `data-event` | `string` | - | - | - | Custom event to trigger tooltip |
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
#### ReactTooltip Properties #### ReactTooltip Properties
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ------------ | -------- | :------: | -------------------------------------- | ------- | ------------------------------------ | | ------------ | -------- | :------: | -------------------------------------- | ------- | ------------------------------------ |
| `id` | `string` | ✅ | - | - | Used as HTML id property | | `id` | `string` | ✅ | - | - | Used as HTML id property |
| `getContent` | `func` | - | | | Generate the tip content dynamically | | `getContent` | `func` | - | | - | Generate the tip content dynamically |
| `type` | `string` | - | `success, warning, error, info, light` | `light` | Tooltip theme |
| `effect` | `string` | - | `float, solid` | `float` | Behaviour of tooltip | | `effect` | `string` | - | `float, solid` | `float` | Behaviour of tooltip |
| `offset` | `object` | - | `top, left, right, bottom` | - | Offset of tooltip |
| `maxWidth` | `number` | - | - | `340` | Set max width of tooltip |

166
web/ASC.Web.Components/src/components/tooltip/all.stories.js
View File

@ -1,38 +1,140 @@
import React from "react"; import React from "react";
import { storiesOf } from "@storybook/react"; import { storiesOf } from "@storybook/react";
import { Container, Row, Col } from "reactstrap"; import { withKnobs, select, number } from "@storybook/addon-knobs/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import Tooltip from "./"; import Tooltip from "./";
import IconButton from "../icon-button";
import Section from "../../../.storybook/decorators/section";
import Link from "../link";
import { Text } from "../text";
const BodyStyle = { margin: 25 }; const BodyStyle = { marginTop: 70, marginLeft: 50, position: "absolute" };
const BodyStyle_2 = { marginTop: 70, marginLeft: 200, position: "absolute" };
const BodyStyle_3 = { marginTop: 70, marginLeft: 400 };
const arrayEffects = ["float", "solid"];
const arrayPlaces = ["top", "right", "bottom", "left"];
const arrayUsers = [
{
key: "user_1",
name: "Bob",
email: "Bob@gmail.com",
position: "developer"
},
{
key: "user_2",
name: "John",
email: "John@gmail.com",
position: "developer"
},
{
key: "user_3",
name: "Kevin",
email: "Kevin@gmail.com",
position: "developer"
},
{
key: "user_4",
name: "Alex",
email: "Alex@gmail.com",
position: "developer"
},
{
key: "user_5",
name: "Tomas",
email: "Tomas@gmail.com",
position: "developer"
}
];
storiesOf("Components|Tooltip", module) storiesOf("Components|Tooltip", module)
// To set a default viewport for all the stories for this component .addDecorator(withKnobs)
.addParameters({ viewport: { defaultViewport: "responsive" } }) .addDecorator(withReadme(Readme))
.addParameters({ options: { showAddonPanel: false } }) .add("all", () => {
.add("all", () => ( return (
<Container style={{ margin: 50 }}> <Section>
<Row style={BodyStyle}> <div
<Col> style={BodyStyle}
<a data-for="tooltipContent"
data-for="tooltipContent" data-tip="You tooltip content"
data-tip={"Hello_1"} data-event="click focus"
data-event="click focus" >
> <h5 style={{ marginLeft: -30 }}>Click on me</h5>
(❂‿❂) Click on me <IconButton isClickable={true} size={20} iconName="QuestionIcon" />
</a> </div>
</Col> <Tooltip
</Row> id="tooltipContent"
<Row style={BodyStyle}> effect={select("effect", arrayEffects, "float")}
<Col> place={select("place", arrayPlaces, "top")}
<a maxWidth={number("maxWidth", 320)}
data-for="tooltipContent" />
data-tip={"Hello_2"}
//data-event="click focus" <div style={BodyStyle_2}>
> <h5 style={{ marginLeft: -5 }}>Hover on me</h5>
(❂‿❂) Hover on me <Link data-for="link" data-tip="Bob Johnston">
</a> Bob Johnston
</Col> </Link>
</Row> </div>
<Tooltip tooltipContent={"light"} effect={"float"} place={"top"} /> <Tooltip
</Container> id="link"
)); offset={{ right: 90 }}
getContent={dataTip => (
<div>
<Text.Body isBold={true} fontSize={16}>
{dataTip}
</Text.Body>
<Text.Body color="#A3A9AE" fontSize={13}>
BobJohnston@gmail.com
</Text.Body>
<Text.Body fontSize={13}>Developer</Text.Body>
</div>
)}
/>
<div style={BodyStyle_3}>
<h5 style={{ marginLeft: -5 }}>Hover group</h5>
<Link data-for="group" data-tip={0}>
Bob
</Link>
<br />
<Link data-for="group" data-tip={1}>
John
</Link>
<br />
<Link data-for="group" data-tip={2}>
Kevin
</Link>
<br />
<Link data-for="group" data-tip={3}>
Alex
</Link>
<br />
<Link data-for="group" data-tip={4}>
Tomas
</Link>
</div>
<Tooltip
id="group"
offset={{ right: 90 }}
getContent={dataTip =>
dataTip ? (
<div>
<Text.Body isBold={true} fontSize={16}>
{arrayUsers[dataTip].name}
</Text.Body>
<Text.Body color="#A3A9AE" fontSize={13}>
{arrayUsers[dataTip].email}
</Text.Body>
<Text.Body fontSize={13}>
{arrayUsers[dataTip].position}
</Text.Body>
</div>
) : null
}
/>
</Section>
);
});

31
web/ASC.Web.Components/src/components/tooltip/index.js
View File

@ -2,7 +2,6 @@ import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled from "styled-components"; import styled from "styled-components";
import ReactTooltip from "react-tooltip"; import ReactTooltip from "react-tooltip";
import { Text } from "../text";
const TooltipStyle = styled.div` const TooltipStyle = styled.div`
.__react_component_tooltip { .__react_component_tooltip {
@ -12,8 +11,10 @@ const TooltipStyle = styled.div`
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13); box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13); -moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13); -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
opacity: 1;
padding: 16px;
max-width: 340px; max-width: ${props => (props.maxWidth ? props.maxWidth + "px" : `340px`)};
&:before { &:before {
border: none; border: none;
@ -32,18 +33,19 @@ class Tooltip extends Component {
} }
render() { render() {
const { type, effect, place } = this.props; const { effect, place, maxWidth, id, getContent, offset } = this.props;
return ( return (
<TooltipStyle> <TooltipStyle maxWidth={maxWidth}>
<ReactTooltip <ReactTooltip
id="tooltipContent" id={id}
getContent={dataTip => <Text.Body fontSize={13}>{dataTip}</Text.Body>} getContent={getContent}
type={type} type="light"
border={true}
effect={effect} effect={effect}
place={place} place={place}
globalEventOff="click" globalEventOff="click"
offset={offset}
wrapper="span"
/> />
</TooltipStyle> </TooltipStyle>
); );
@ -51,17 +53,18 @@ class Tooltip extends Component {
} }
Tooltip.propTypes = { Tooltip.propTypes = {
tooltipContent: PropTypes.string, id: PropTypes.string,
effect: PropTypes.oneOf(["float", "solid"]), effect: PropTypes.oneOf(["float", "solid"]),
type: PropTypes.oneOf(["success", "warning", "error", "info", "light"]), place: PropTypes.oneOf(["top", "right", "bottom", "left"]),
place: PropTypes.oneOf(["top", "right", "bottom", "left"]) maxWidth: PropTypes.number,
offset: PropTypes.object,
getContent: PropTypes.func
}; };
Tooltip.defaultProps = { Tooltip.defaultProps = {
type: "light", effect: "float",
effect: "solid",
place: "top", place: "top",
border: true offset: { right: 70 }
}; };
export default Tooltip; export default Tooltip;

37
web/ASC.Web.Components/src/components/tooltip/tooltip.stories.js
View File

@ -1,37 +0,0 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, select } from "@storybook/addon-knobs/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import Tooltip from "./";
import Section from "../../../.storybook/decorators/section";
const BodyStyle = { marginTop: 100, marginLeft: 150 };
const arrayTypes = ["success", "warning", "error", "info", "light"];
const arrayEffects = ["float", "solid"];
const arrayPlaces = ["top", "right", "bottom", "left"];
const tooltipContent = "tooltipContent tooltipContent tooltipContent";
storiesOf("Components|Tooltip", module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add("base", () => {
return (
<Section>
<div style={BodyStyle}>
<a
data-for="tooltipContent"
data-tip={tooltipContent}
>
(❂‿❂)
</a>
</div>
<Tooltip
tooltipContent={tooltipContent}
type={select("type", arrayTypes, "light")}
effect={select("effect", arrayEffects, "float")}
place={select("place", arrayPlaces, "top")}
/>
</Section>
);
});