3.0.1 • Published 9 months ago
@axa-fr/react-toolkit-helpinfo v3.0.1
@axa-fr/react-toolkit-helpinfo
Text Story
Installation
npm i @axa-fr/react-toolkit-helpinfo
npm i @axa-fr/react-toolkit-popover
Import
import HelpInfo from '@axa-fr/react-toolkit-helpinfo';
import { PopoverPlacements, PopoverModes } from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
import '@axa-fr/react-toolkit-popover/dist/af-help-info.css';
Use
const TextStory = () => (
<form className="af-form" name="myform">
<HelpInfo
mode={PopoverModes.click}
placement={PopoverPlacements.right}
content="Lorem ipsum dolor sit amet">
My content
</HelpInfo>
</form>
);
export default TextStory;
Html Story
Installation
npm i @axa-fr/react-toolkit-helpinfo
npm i @axa-fr/react-toolkit-popover
Import
import HelpInfo from '@axa-fr/react-toolkit-help-info';
import { PopoverPlacements, PopoverModes } from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
import '@axa-fr/react-toolkit-popover/dist/af-help-info.css';
Use
const overContent = <div className="af-help-demo__container">
<h3 className="af-help-demo__title">Profile</h3>
<div className="af-help-demo__infos">
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Tweets</span>
<span className="af-help-demo__info-number">1,337</span>
</p>
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Following</span>
<span className="af-help-demo__info-number">561</span>
</p>
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Followers</span>
<span className="af-help-demo__info-number">718</span>
</p>
</div>
</div>;
const HtmlStory = () => (
<HelpInfo
classModifier="custom"
mode={PopoverModes.over}
placement={PopoverPlacements.right} content={overContent}>
<h1>My HTML Content</p>
</HelpInfo>
);
export default HtmlStory;
3.0.1
9 months ago
3.0.0
9 months ago
3.0.0-alpha.1
10 months ago
3.0.0-alpha.2
10 months ago
3.0.0-alpha.0
11 months ago
2.3.1
1 year ago
2.3.1-alpha.0
1 year ago
2.3.0
1 year ago
2.3.0-alpha.2
1 year ago
2.3.0-alpha.0
1 year ago
2.2.0
2 years ago
2.2.0-alpha.0
2 years ago
2.2.0-alpha.1
2 years ago
2.1.1
2 years ago
2.1.1-alpha.0
2 years ago
2.1.0
2 years ago
2.1.0-alpha.6
2 years ago
2.1.0-alpha.5
2 years ago
2.1.0-alpha.4
2 years ago
2.1.0-alpha.3
2 years ago
2.1.0-alpha.2
2 years ago
2.1.0-alpha.1
2 years ago
2.0.1-alpha.1
2 years ago