Skip to content

Commit

Permalink
feat: add Icon component
Browse files Browse the repository at this point in the history
  • Loading branch information
wewoor committed Nov 26, 2020
1 parent c9e41ce commit d342606
Showing 1 changed file with 98 additions and 0 deletions.
98 changes: 98 additions & 0 deletions stories/components/13-Icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { propsTable } from '../common/propsTable';

import { Icon } from 'mo/components/icon';
import { Button } from 'mo/components/button';

const stories = storiesOf('Icon', module);
stories.addDecorator(withKnobs);

const propDefinitions = [
{
property: 'render',
propType: '() => React.ReactNode',
required: false,
description: 'Default render content',
defaultValue: null,
},
];

stories.add(
'Basic Usage',
() => {
return (
<div>
<h2>简述</h2>
<p>
This `Icon` Component based on{' '}
<a href="https://microsoft.github.io/vscode-codicons/dist/codicon.html">
vscode codicons
</a>
, so you just can using icons from this library.
</p>
<div>
<h3>使用示例 - Basic</h3>
<div style={{ display: 'flex' }}>
<Button>
<Icon type="edit" />
edit
</Button>
<Button>
<Icon type="check" />
check
</Button>
</div>
</div>
</div>
);
},
{
info: {
inline: true,
TableComponent: () => propsTable({ propDefinitions }),
// propTablesExclude: [],
text: `
代码示例:
~~~js
import { useContextView } from 'mo/components/contextview';
const contextView = useContextView();
const mouseMove = (event: React.MouseEvent): void => {
contextView.show({
x: event.clientX,
y: event.clientY,
}, () => {
return (
<h1>Hello World</h1>
);
});
};
return (
<div>
<div id="topLeft"
onMouseMove={mouseMove}
style={
{
position: 'absolute',
width: 200,
height: 200,
top: 0,
left: 0,
right: 0,
bottom: 0,
background: '#dddddd',
}
}>
Hover me!
</div>
</div>
);
~~
`,
},
}
);

0 comments on commit d342606

Please sign in to comment.