Skip to content

Commit 9ae9ceb

Browse files
committed
feat: update sample
1 parent b616c93 commit 9ae9ceb

File tree

15 files changed

+152
-90
lines changed

15 files changed

+152
-90
lines changed

examples/stories/index.story.tsx

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
1-
import React, { CSSProperties} from 'react'
1+
import { action } from '@storybook/addon-actions'
2+
import { withInfo } from '@storybook/addon-info'
23
import { storiesOf } from '@storybook/react'
3-
import { withInfo } from "@storybook/addon-info"
4-
// import { action } from '@storybook/addon-actions'
4+
import React from 'react'
55

6-
import Hello from '../../src'
6+
import Button from '../../src'
77

8-
storiesOf('Hello', module)
9-
.add('with text', () => (
10-
<Hello content="world" />
11-
))
12-
.add('docs', withInfo({ inline: true })(() => (
13-
<div style={styles.container}>
14-
<div style={styles.firstCellContainer}>
15-
<Hello content="world!" />
16-
</div>
17-
<div style={styles.cellContainer}>
18-
<Hello content="world" />
8+
import './styles.scss'
9+
10+
const handleClick = action('sample-click')
11+
storiesOf('or-sample', module).add(
12+
'sample',
13+
withInfo({ inline: true })(() => (
14+
<div>
15+
<h1>button type:</h1>
16+
<div>
17+
<Button type="primary" onClick={handleClick}>
18+
ADD TO CART
19+
</Button>
20+
<Button onClick={handleClick}>SIGN UP</Button>
21+
<Button type="warning" onClick={handleClick}>
22+
DELETE
23+
</Button>
24+
<Button onClick={handleClick}>TOO LOOOOOOOOOOOOOOOOOOG</Button>
1925
</div>
2026
</div>
21-
)))
22-
// .add('with some emoji', () => (
23-
// <button onClick={action('clicked')}>😀 😎 👍 💯</button>
24-
// ))
25-
26-
const styles: { [key: string]: CSSProperties } = {
27-
container: {
28-
display: "flex",
29-
},
30-
cellContainer: {
31-
width: 100,
32-
height: 100,
33-
backgroundColor: "rgb(72, 78, 104)",
34-
},
35-
};
36-
styles.firstCellContainer = { ...styles.cellContainer, marginRight: 20 };
27+
))
28+
)

examples/stories/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.or-btn {
2+
margin-left: 20px;
3+
margin-bottom: 20px;
4+
}

jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ module.exports = {
66
transform: {
77
'^.+\\.tsx?$': 'babel-jest',
88
},
9+
moduleNameMapper: {
10+
'\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/tests/__mocks__/fileMock.js',
11+
'\\.(css|scss)$': '<rootDir>/tests/__mocks__/styleMock.js'
12+
},
913
collectCoverage: true,
1014
collectCoverageFrom: [
1115
'src/**',

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"typescript": "^3.0.3"
6565
},
6666
"dependencies": {
67+
"classnames": "^2.2.6",
6768
"or-theme": "^1.2.0"
6869
},
6970
"peerDependencies": {

src/Hello.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

src/Sample.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import clx from 'classnames'
2+
import React, { MouseEvent, PureComponent } from 'react'
3+
4+
interface Props {
5+
/**
6+
* additional classname for btn
7+
*/
8+
classname?: string
9+
/**
10+
* type for button
11+
**/
12+
type?: 'primary' | 'warning'
13+
/**
14+
* callback triggered button click
15+
**/
16+
onClick?: () => void
17+
}
18+
19+
export class Sample extends PureComponent<Props, {}> {
20+
render() {
21+
const { classname, type, children } = this.props
22+
const btnClass = clx(
23+
{
24+
'or-btn': true,
25+
[`or-btn-${type}`]: type
26+
},
27+
classname
28+
)
29+
30+
return (
31+
<div className={btnClass} onClick={this.handleClick}>
32+
{children}
33+
</div>
34+
)
35+
}
36+
37+
handleClick = (e: MouseEvent<HTMLElement>) => {
38+
e.preventDefault()
39+
const { onClick } = this.props
40+
if (onClick) {
41+
onClick()
42+
}
43+
}
44+
}

src/a.ts

Lines changed: 0 additions & 12 deletions
This file was deleted.

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { Hello as default } from './Hello'
1+
export { Sample as default } from './Sample'
22
import './styles.scss'

src/styles.scss

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,45 @@
11
@import "~or-theme";
22

3-
.#{$prefix}-btn {
3+
.or-btn {
44
display: inline-block;
5-
padding: 0 40px;
6-
line-height: 38px;
7-
background-color: #333;
8-
color: #fff;
5+
min-width: 120px;
6+
padding: $btn-padding-y $btn-padding-x;
7+
background-color: $white;
8+
color: $gray8;
9+
border-width: 1px;
10+
border-color: $gray8;
11+
border-style: solid;
912
font-size: 14px;
1013
border-radius: 1px;
14+
text-align: center;
15+
box-sizing: border-box;
16+
font-family: $font-family;
17+
cursor: pointer;
18+
19+
&:hover {
20+
background-color: $gray8;
21+
color: $white;
22+
}
23+
}
24+
25+
.or-btn-primary {
26+
background-color: $primary-color;
27+
color: $white;
28+
border-color: $primary-color;
29+
30+
&:hover {
31+
background-color: $primary-color0;
32+
border-color: $primary-color0;
33+
}
34+
}
35+
36+
.or-btn-warning {
37+
background-color: $warning-color;
38+
color: $white;
39+
border-color: $warning-color;
40+
41+
&:hover {
42+
background-color: $warning-color0;
43+
border-color: $warning-color0;
44+
}
1145
}

tests/Hello.test.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)