-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Allow icon to be customised and support hover over custom dom nodes
- Loading branch information
Showing
14 changed files
with
523 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import '@storybook/addon-options/register' | ||
| import '@storybook/addon-storysource/register' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,17 @@ | ||
| import { configure } from '@storybook/react'; | ||
| import {configure} from '@storybook/react' | ||
| import {setOptions} from '@storybook/addon-options' | ||
|
|
||
| setOptions({ | ||
| name: 'React ToggleTip', | ||
| url: 'https://github.com/rcdexta/react-toggletip' | ||
| }) | ||
|
|
||
|
|
||
| // automatically import all files ending in *.stories.js | ||
| const req = require.context('../stories', true, /.stories.js$/); | ||
| const req = require.context('../stories', true, /.stories.js$/) | ||
| function loadStories() { | ||
| req.keys().forEach(filename => req(filename)); | ||
| req.keys().forEach(filename => req(filename)) | ||
| } | ||
|
|
||
| configure(loadStories, module); | ||
|
|
||
| configure(loadStories, module) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import {storiesOf} from '@storybook/react' | ||
| import React from 'react' | ||
| import ToggleTip from '../components/ToggleTip' | ||
|
|
||
| storiesOf('ToggleTip', module).add('Basic', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn two"> | ||
| <span>Net Price</span> | ||
| <ToggleTip content="Price of item before tax" /> | ||
| </div> | ||
| <div className="btn two"> | ||
| <span>Gross Price</span> | ||
| <ToggleTip content="Price of item including tax and service charges" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {storiesOf} from '@storybook/react' | ||
| import React from 'react' | ||
| import ToggleTip from '../components/ToggleTip' | ||
| import QuestionIcon from 'react-icons/lib/fa/question-circle' | ||
|
|
||
| storiesOf('ToggleTip', module).add('Custom Icon', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn two"> | ||
| <span>Unit Economics</span> | ||
| <ToggleTip | ||
| content="Unit economics are the direct revenues and costs associated with a particular business model expressed on a per unit basis." | ||
| icon={<QuestionIcon />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) | ||
|
|
||
|
|
||
| storiesOf('ToggleTip', module).add('Multiline', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn two"> | ||
| <span>Taxable Income: $850</span> | ||
| <ToggleTip | ||
| content={['Federal Tax: $550', 'Social Security: $300']} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import * as polished from 'polished' | ||
|
|
||
| import { LiveProvider, LiveEditor} from 'react-live' | ||
|
|
||
| const StyledProvider = styled(LiveProvider)` | ||
| border-radius: ${polished.rem(3)}; | ||
| box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27); | ||
| overflow: hidden; | ||
| ` | ||
|
|
||
| const StyledEditor = styled(LiveEditor)` | ||
| font-size: 0.8rem; | ||
| cursor: text; | ||
| font-family: 'Source Code Pro', Monaco, Monospace,serif; | ||
| ` | ||
|
|
||
| const LiveEdit = ({ noInline, code, scope }) => ( | ||
| <StyledProvider code={code} scope={scope}> | ||
| <StyledEditor /> | ||
| </StyledProvider> | ||
| ) | ||
|
|
||
| export default LiveEdit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,11 @@ | ||
| import React from 'react' | ||
|
|
||
| import {storiesOf, addDecorator} from '@storybook/react' | ||
| import {linkTo} from '@storybook/addon-links' | ||
| import {Welcome} from '@storybook/react/demo' | ||
| import ToggleTip from '../components/ToggleTip' | ||
| import {addDecorator} from '@storybook/react' | ||
|
|
||
| addDecorator(story => <div style={{margin: 30}}>{story()}</div>) | ||
|
|
||
| storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />) | ||
| import './basic.stories' | ||
| import './placement.stories' | ||
| import './custom.stories' | ||
| import './tooltip.stories' | ||
|
|
||
| storiesOf('ToggleTip', module).add('Basic', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn two"> | ||
| <span>Net Price</span> | ||
| <ToggleTip content="Price of item before tax" /> | ||
| </div> | ||
| <div className="btn two"> | ||
| <span>Gross Price</span> | ||
| <ToggleTip content="Price of item including tax and service charges" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) | ||
|
|
||
| storiesOf('ToggleTip', module).add('Placement', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn"> | ||
| <ToggleTip content="Show tooltip to Left" placement="left" /> | ||
| <span>Left</span> | ||
| </div> | ||
| <div className="btn two"> | ||
| <span>Top</span> | ||
| <ToggleTip content="Show tooltip to top" placement="top" /> | ||
| </div> | ||
| <div className="btn three"> | ||
| <span>Bottom</span> | ||
| <ToggleTip content="Show tooltip to bottom" placement="bottom" /> | ||
| </div> | ||
| <div className="btn four"> | ||
| <span>Right</span> | ||
| <ToggleTip content="Show tooltip to right" placement="right" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {storiesOf} from '@storybook/react' | ||
| import React from 'react' | ||
| import ToggleTip from '../components/ToggleTip' | ||
|
|
||
| storiesOf('ToggleTip', module).add('Placement', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn"> | ||
| <ToggleTip content="Show tooltip to Left" placement="left" /> | ||
| <span>Left</span> | ||
| </div> | ||
| <div className="btn two"> | ||
| <span>Top</span> | ||
| <ToggleTip content="Show tooltip to top" placement="top" /> | ||
| </div> | ||
| <div className="btn three"> | ||
| <span>Bottom</span> | ||
| <ToggleTip content="Show tooltip to bottom" placement="bottom" /> | ||
| </div> | ||
| <div className="btn four"> | ||
| <span>Right</span> | ||
| <ToggleTip content="Show tooltip to right" placement="right" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import {storiesOf} from '@storybook/react' | ||
| import React from 'react' | ||
| import ToggleTip from '../components/ToggleTip' | ||
|
|
||
| storiesOf('ToggleTip', module).add('Tooltip', () => { | ||
| return ( | ||
| <div className="elements"> | ||
| <div className="btn-group"> | ||
| <div className="btn two"> | ||
| <ToggleTip content="This action will submit the page for real!" >SUBMIT</ToggleTip> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) |
Oops, something went wrong.