3.0.1 • Published 9 months ago

@axa-fr/react-toolkit-helpinfo v3.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

@axa-fr/react-toolkit-helpinfo

  1. Text Story
  2. Html Story

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