Web: Components: fixed IconButton README.md, added new tooltip README.md, added new tooltip examples, fixed tooltip styles
This commit is contained in:
parent
9098db077e
commit
457f6f074e
@ -3,7 +3,7 @@
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { IconButton } from 'asc-web-components';
|
||||
import { IconButton } from "asc-web-components";
|
||||
```
|
||||
|
||||
#### Description
|
||||
@ -13,18 +13,24 @@ IconButton is used for a action on a page.
|
||||
#### Usage
|
||||
|
||||
```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
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | ----------------------| :------: | --------------------------- | --------------- |----------------------------------------------------------------------------------------------------- |
|
||||
| ------------- | ------------------------ | :------: | ------ | --------------- | ----------------------------------------------------- |
|
||||
| `color` | `string` | - | - | `#d0d5da` | Icon color |
|
||||
| `size` | `` number` or `string `` | - | - | `25` | Button height and width value |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
||||
| `iconName` | `string` | ✅ | - | `AZSortingIcon` | Icon name |
|
||||
| `isFill` | `bool` | - | - | `true` | Determines if icon fill is needed |
|
||||
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
|
||||
|
||||
|
||||
| `isClickable` | `bool` | - | - | `false` | Set cursor value |
|
||||
|
||||
@ -4,37 +4,78 @@
|
||||
|
||||
Custom tooltip
|
||||
|
||||
#### Usage
|
||||
#### Usage with IconButton
|
||||
|
||||
```js
|
||||
import { Tooltip } from "asc-web-components";
|
||||
|
||||
<a data-for="tooltipContent" data-tip="Tooltip content" data-event="click focus">
|
||||
(❂‿❂) You component
|
||||
</a>
|
||||
import { Tooltip, IconButton, Text } from "asc-web-components";
|
||||
|
||||
<div
|
||||
style={BodyStyle}
|
||||
data-for="tooltipContent"
|
||||
data-tip="You tooltip content"
|
||||
data-event="click focus"
|
||||
>
|
||||
<IconButton isClickable={true} size={20} iconName="QuestionIcon" />
|
||||
</div>
|
||||
<Tooltip
|
||||
id="tooltipContent"
|
||||
getContent={dataTip => <Text.Body fontSize={13}>{dataTip}</Text.Body>}
|
||||
type="light"
|
||||
effect="float"
|
||||
place="top"
|
||||
/>;
|
||||
effect={select("effect", arrayEffects, "float")}
|
||||
place={select("place", arrayPlaces, "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
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | ------ | ------- | --------------------------------- |
|
||||
| `data-tip` | `string` | ✅ | - | - | Required if you need to component |
|
||||
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
|
||||
| `data-tip` | `string` | - | - | - | Required if you need to component |
|
||||
| `data-event` | `string` | - | - | - | Custom event to trigger tooltip |
|
||||
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
|
||||
|
||||
#### ReactTooltip Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | -------------------------------------- | ------- | ------------------------------------ |
|
||||
| `id` | `string` | ✅ | - | - | Used as HTML id property |
|
||||
| `getContent` | `func` | - | | | Generate the tip content dynamically |
|
||||
| `type` | `string` | - | `success, warning, error, info, light` | `light` | Tooltip theme |
|
||||
| `getContent` | `func` | - | | - | Generate the tip content dynamically |
|
||||
| `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 |
|
||||
|
||||
@ -1,38 +1,140 @@
|
||||
import React from "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 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)
|
||||
// To set a default viewport for all the stories for this component
|
||||
.addParameters({ viewport: { defaultViewport: "responsive" } })
|
||||
.addParameters({ options: { showAddonPanel: false } })
|
||||
.add("all", () => (
|
||||
<Container style={{ margin: 50 }}>
|
||||
<Row style={BodyStyle}>
|
||||
<Col>
|
||||
<a
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("all", () => {
|
||||
return (
|
||||
<Section>
|
||||
<div
|
||||
style={BodyStyle}
|
||||
data-for="tooltipContent"
|
||||
data-tip={"Hello_1"}
|
||||
data-tip="You tooltip content"
|
||||
data-event="click focus"
|
||||
>
|
||||
(❂‿❂) Click on me
|
||||
</a>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={BodyStyle}>
|
||||
<Col>
|
||||
<a
|
||||
data-for="tooltipContent"
|
||||
data-tip={"Hello_2"}
|
||||
//data-event="click focus"
|
||||
>
|
||||
(❂‿❂) Hover on me
|
||||
</a>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tooltip tooltipContent={"light"} effect={"float"} place={"top"} />
|
||||
</Container>
|
||||
));
|
||||
<h5 style={{ marginLeft: -30 }}>Click on me</h5>
|
||||
<IconButton isClickable={true} size={20} iconName="QuestionIcon" />
|
||||
</div>
|
||||
<Tooltip
|
||||
id="tooltipContent"
|
||||
effect={select("effect", arrayEffects, "float")}
|
||||
place={select("place", arrayPlaces, "top")}
|
||||
maxWidth={number("maxWidth", 320)}
|
||||
/>
|
||||
|
||||
<div style={BodyStyle_2}>
|
||||
<h5 style={{ marginLeft: -5 }}>Hover on me</h5>
|
||||
<Link data-for="link" data-tip="Bob Johnston">
|
||||
Bob Johnston
|
||||
</Link>
|
||||
</div>
|
||||
<Tooltip
|
||||
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>
|
||||
);
|
||||
});
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import ReactTooltip from "react-tooltip";
|
||||
import { Text } from "../text";
|
||||
|
||||
const TooltipStyle = styled.div`
|
||||
.__react_component_tooltip {
|
||||
@ -12,8 +11,10 @@ const TooltipStyle = styled.div`
|
||||
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);
|
||||
opacity: 1;
|
||||
padding: 16px;
|
||||
|
||||
max-width: 340px;
|
||||
max-width: ${props => (props.maxWidth ? props.maxWidth + "px" : `340px`)};
|
||||
|
||||
&:before {
|
||||
border: none;
|
||||
@ -32,18 +33,19 @@ class Tooltip extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, effect, place } = this.props;
|
||||
const { effect, place, maxWidth, id, getContent, offset } = this.props;
|
||||
|
||||
return (
|
||||
<TooltipStyle>
|
||||
<TooltipStyle maxWidth={maxWidth}>
|
||||
<ReactTooltip
|
||||
id="tooltipContent"
|
||||
getContent={dataTip => <Text.Body fontSize={13}>{dataTip}</Text.Body>}
|
||||
type={type}
|
||||
border={true}
|
||||
id={id}
|
||||
getContent={getContent}
|
||||
type="light"
|
||||
effect={effect}
|
||||
place={place}
|
||||
globalEventOff="click"
|
||||
offset={offset}
|
||||
wrapper="span"
|
||||
/>
|
||||
</TooltipStyle>
|
||||
);
|
||||
@ -51,17 +53,18 @@ class Tooltip extends Component {
|
||||
}
|
||||
|
||||
Tooltip.propTypes = {
|
||||
tooltipContent: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
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 = {
|
||||
type: "light",
|
||||
effect: "solid",
|
||||
effect: "float",
|
||||
place: "top",
|
||||
border: true
|
||||
offset: { right: 70 }
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user