-
Notifications
You must be signed in to change notification settings - Fork 109
feat(demo): add styleguidist demo #13
Changes from 16 commits
4e908c2
2900be0
5c4be1d
0ba8226
28bbec8
2e1a057
d322ccd
c0e011b
a9a5664
300a2d7
acb35fc
8db857f
9c2af7e
90f5baf
f16f05a
f6cf7c3
ca3a2d4
e5642e6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import * as React from 'react'; | ||
|
||
export default () => ( | ||
<a href='https://github.com/alfa-laboratory/arui-feather' title='Fork me on GitHub'> | ||
<img alt={ true } src='https://rawgit.com/alfa-laboratory/arui-feather/master/logo.svg' /> | ||
</a> | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
.preview-with-theme-switcher { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. На каждый наш файлик нужно навешивать лицензию. Можно посмотреть на лицензии в файлах ./src/ |
||
&__layout { | ||
margin-top: 20px; | ||
margin-bottom: -5px; | ||
border-radius: 5px; | ||
|
||
&_theme_alfa-on-white { | ||
color: #000; | ||
border: solid 1px #eee; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Я думаю раз это дублируется можно просто вынести из модификатора. |
||
} | ||
|
||
&_theme_alfa-on-color { | ||
color: #fff; | ||
background: #4d545b; | ||
background: linear-gradient(to bottom, #4d545b 0%, #4d545b 50%, #282c36 100%); | ||
border: solid 1px #eee; | ||
} | ||
} | ||
|
||
&__wrapper { | ||
margin: 15px; | ||
} | ||
|
||
&__button-group { | ||
position: absolute; | ||
top: 5px; | ||
left: 8px; | ||
} | ||
|
||
&__button { | ||
color: #1978c8; | ||
background: white; | ||
border: none; | ||
font-size: 14px; | ||
|
||
&:hover { | ||
color: #f28a25; | ||
cursor: pointer; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React from 'react'; | ||
import Type from 'prop-types'; | ||
import { autobind } from 'core-decorators'; | ||
import ThemeProvider from '../../../src/theme-provider/theme-provider'; | ||
import cn from '../../../src/cn'; | ||
import './index.css'; | ||
|
||
const lightTheme = 'alfa-on-white'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. КОНСТАНТЫ_ВОТ_ТАК There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. КОНСТАНТЫ_ВОТ_ТАК - рудимент из времен, когда не было ключевого слова const. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Это подсказка в месте чтения, что исползуется именно константа. |
||
const darkTheme = 'alfa-on-color'; | ||
|
||
@cn('preview-with-theme-switcher') | ||
class PreviewWithThemeSwitcher extends React.Component { | ||
static propTypes = { | ||
children: Type.oneOfType([Type.arrayOf(Type.node), Type.node]) | ||
}; | ||
state = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Стоит добавить отступы между блоками. Это облегчает чтение. |
||
theme: lightTheme | ||
} | ||
render(cn) { | ||
const themes = [lightTheme, darkTheme]; | ||
return ( | ||
<div> | ||
<div className={ cn('button-group') } > | ||
{themes.map(theme => ( | ||
<button | ||
key={ theme } | ||
className={ cn('button') } | ||
onClick={ () => this.handleOnChange(theme) } | ||
> | ||
{ this.renderThemeText(theme) } | ||
</button> | ||
))} | ||
</div> | ||
<div className={ cn('layout', { theme: this.state.theme }) } > | ||
<ThemeProvider theme={ this.state.theme } > | ||
<div className={ cn('wrapper') }> | ||
{this.props.children} | ||
</div> | ||
</ThemeProvider> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
renderThemeText(theme) { | ||
return theme === lightTheme ? 'светлая' : 'темная'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Мне, кажется, здесь есть небольшая проблема. Когда человек в первый раз открывает сраницу и видит "светлая" / "темная" он не понимает контекст, что это тема. Стоит либо добавить тайтл "Тема" или просто перефразировать "На светлом" / "На темном". |
||
} | ||
|
||
@autobind | ||
handleOnChange(theme) { | ||
this.setState({ theme }); | ||
} | ||
} | ||
export default PreviewWithThemeSwitcher; |
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!doctype html> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. DOCTYPE case sensitive http://stackoverflow.com/questions/7020961/uppercase-or-lowercase-doctype There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Генерится стайлгайдистом |
||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>ARUI FEATHER</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maximum-scale? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Генерится стайлгайдистом |
||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="text/javascript" src="build/bundle.1b34f3d5.js"></script></body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
``` | ||
const AMOUNT = { | ||
value: 123535, | ||
currency: { | ||
code: 'RUR', | ||
minority: 100 | ||
} | ||
}; | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div key={ size }> | ||
<Amount | ||
size={ size } | ||
amount={ AMOUNT } | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
|
||
``` | ||
|
||
Использовать компонент Heading для вывода числа | ||
``` | ||
const AMOUNT = { | ||
value: 123343, | ||
currency: { | ||
code: 'RUR', | ||
minority: 10 | ||
} | ||
}; | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div key={ size }> | ||
<Amount | ||
size={ size } | ||
amount={ AMOUNT } | ||
isHeading={ true } | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
|
||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
``` | ||
<div> | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div className='layout' key={ size }> | ||
<Attach | ||
size={size} | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div className='layout' key={ size }> | ||
<Attach | ||
size={size} | ||
disabled={ true } | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
``` | ||
``` | ||
<div> | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div className='layout' key={ size }> | ||
<Attach | ||
size={size} | ||
buttonContent='Please, choose a file' | ||
noFileText='file in pdf format' | ||
buttonProps={ { | ||
pseudo: true, | ||
icon: <Icon size={size} icon='search' /> | ||
} } | ||
/> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
``` | ||
|
||
|
||
``` | ||
|
||
function handleChange(value) { | ||
setState({value}); | ||
} | ||
|
||
<div> | ||
<div className='layout'> | ||
<Attach | ||
size='s' | ||
buttonContent={ state.value ? 'Choose another file' : 'Choose a file' } | ||
onChange={ handleChange } | ||
value={ state.value } | ||
/> | ||
</div> | ||
</div> | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
``` | ||
<div> | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div key={ size }> | ||
<Button size={ size }>{`Button ${size}`}</Button> | ||
</div> | ||
))} | ||
</div> | ||
<div> | ||
{['s', 'm', 'l', 'xl'].map(size => ( | ||
<div key={ size }> | ||
<Button size={ size } disabled={ true }>{`disabled Button ${size}`}</Button> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
А зачем такой сложный import?