Skip to content
This repository has been archived by the owner on May 7, 2019. It is now read-only.

Makes the tooltips accessible #212

Merged
merged 12 commits into from
Jan 24, 2019
65 changes: 64 additions & 1 deletion src/Label/label.stories.js
Original file line number Diff line number Diff line change
@@ -2,4 +2,67 @@ import React from "react";
import { storiesOf } from "@storybook/react";
import Label from "./index";

storiesOf("Label", module).add("with content", () => <Label label="Test" />);
storiesOf("Label", module).add("simple label", () =>
<Label label="Test" />
);

storiesOf("Label", module).add("with short tooltip", () =>
<div style={{paddingTop:100,paddingLeft:100}}>
<Label
label="Some field label:"
tooltipMessage="This is a required field"
tooltipPlace="top"
/>
</div>
);

storiesOf("Label", module).add("with short tooltip on right", () =>
<div style={{paddingTop:100,paddingLeft:100}}>
<Label
label="Some field label:"
labelType="inline"
tooltipMessage="This is a required field"
tooltipPlace="top"
tooltipStyle={{float:"right"}}
/>
</div>
);

storiesOf("Label", module).add("Reproduces issue", () =>
<div style={{paddingTop:100,paddingLeft:100}}>
<p>This case reproduces the issue identified in <br />
<a href="https://github.com/dnnsoftware/Dnn.AdminExperience/pull/320">https://github.com/dnnsoftware/Dnn.AdminExperience/pull/320</a><br /> and <br />
<a href="https://github.com/romainberger/react-portal-tooltip/issues/84">https://github.com/romainberger/react-portal-tooltip/issues/84</a>
</p>
<Label
label="Some field label:"
labelType="inline"
tooltipMessage={["This is a required field", "it should show as a list", "and be on the bottom right"]}
tooltipPlace="top"
/>
</div>
);





// ---------------- Label available props -------------------
//
// Label.propTypes = {
// label: PropTypes.string,
// className: PropTypes.string,
// labelFor: PropTypes.string,
// tooltipMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
// tooltipPlace: PropTypes.string,
// tooltipStyle: PropTypes.object,
// tooltipColor: PropTypes.string,
// labelType: PropTypes.oneOf(["inline", "block"]),
// style: PropTypes.object,
// extra: PropTypes.node,
// onClick: PropTypes.func
// };
// Label.defaultProps = {
// labelType: "block",
// className: ""
// };
117 changes: 95 additions & 22 deletions src/Tooltip/tooltip.stories.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,103 @@
import React from "react";
import React, { Component } from "react";
import { storiesOf } from "@storybook/react";
import Tooltip from "./index";

storiesOf("Tooltip", module).add("with error", () => (
<Tooltip
type="error"
messages={["Tooltip message"]}
rendered={true}
tooltipPlace="bottom"
/>
storiesOf("Tooltip", module).add("error with only required props", () => (
<div style={{marginTop:100, marginLeft:100}}>
<Tooltip
type="error"
messages={["Tooltip message"]}
tooltipPlace="top"
/>
</div>
));

storiesOf("Tooltip", module).add("with warning", () => (
<Tooltip
type="warning"
messages={["Tooltip message"]}
rendered={true}
tooltipPlace="bottom"
/>
storiesOf("Tooltip", module).add("warning list on bottom", () => (
<div style={{marginTop:100, marginLeft:100}}>
<Tooltip
type="warning"
messages={["This tooltip message is longer", "and is an array", "with 3 strings","it shows as a list of items"]}
tooltipPlace="bottom"
/>
</div>
));

storiesOf("Tooltip", module).add("with info", () => (
<Tooltip
type="info"
messages={["Tooltip message"]}
rendered={true}
tooltipPlace="bottom"
/>
storiesOf("Tooltip", module).add("info with long message and maxWidth on bottom", () => (
<div style={{marginTop:100, marginLeft:100}}>
<Tooltip
type="info"
messages={["This is a longer message but it should be limited to 50px wide"]}
rendered={true}
tooltipPlace="bottom"
maxWidth={50}
/>
</div>
));

storiesOf("Tooltip", module).add("global setting and delayhide", () => (
<div style={{marginTop:100, marginLeft:100}}>
<Tooltip
type="global"
messages={["This tooltip should hide just after 3 seconds of leaving it"]}
rendered={true}
tooltipPlace="top"
delayHide={3000}
/>
</div>
));

storiesOf("Tooltip", module).add("not rendered", () => (
<DynamicRenderedTooltip />
));

class DynamicRenderedTooltip extends Component {
constructor(){
super();
this.state = {rendered: false};
}

handleToggleRender(){
this.setState({rendered: !this.state.rendered});
}

render(){
return(
<div style={{marginTop:100, marginLeft:100}}>
<p>This tooltip should not be rendered until you click the button</p>
<button onClick={this.handleToggleRender.bind(this)}>Toggle render of the tootip</button>
<Tooltip
type="global"
messages={["This tooltip renders dynamically"]}
rendered={this.state.rendered}
tooltipPlace="top"
/>
</div>
);
}
}


// ---------- TOOLTIP AVAILABLE PROPS ---------------
//
// Tooltip.propTypes = {
// messages: PropTypes.array.isRequired,
// type: PropTypes.oneOf(["error", "warning", "info", "global"]).isRequired,
// rendered: PropTypes.bool,
// tooltipPlace: PropTypes.oneOf(["top", "bottom"]).isRequired,
// style: PropTypes.object,
// tooltipStyle: PropTypes.object,
// tooltipColor: PropTypes.string,
// className: PropTypes.string,
// delayHide: PropTypes.number,
// customIcon: PropTypes.node,
// tooltipClass: PropTypes.string,
// onClick: PropTypes.func,
// maxWidth: PropTypes.number
// };

// Tooltip.defaultProps = {
// tooltipPlace: "top",
// type: "info",
// delayHide: 100,
// maxWidth: 400
// };