5c7d07f5be
The CSS in the project is relatively difficult to change. While it is very DRY, it relies heavily on inheritance. It's difficult to make changes in the markup modal without it also affecting styles elsewhere. [styled-components](https://www.styled-components.com/) is one of the leading CSS-in-JS libraries. By reducing dependency on global state and CSS inheritance, styles become explicit and are easier to inspect and change. It's also convenient that styles can be embedded with the components they modify. At runtime, the library creates CSS classes, so it's pretty efficient. We were using a little bit of [styled-jsx](https://github.com/zeit/styled-jsx) before, which ships with Next.js, though styled-components is more widely used and I've had good experiences with it all around. In a few cases I've duplicated styles where it feels more natural to do that: for example, `text-align: center` is duplicated in `Main` and `MarkupModal`. Much of this is a refactor, though there are a few visual changes, particularly in the markup modal and the style examples.
66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { staticBadgeUrl } from '../lib/badge-url'
|
|
import { InlineInput } from './common'
|
|
|
|
export default class StaticBadgeMaker extends React.Component {
|
|
static propTypes = {
|
|
baseUrl: PropTypes.string,
|
|
}
|
|
|
|
state = {
|
|
subject: '',
|
|
status: '',
|
|
color: '',
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
|
|
const { baseUrl } = this.props
|
|
const { subject, status, color } = this.state
|
|
const badgeUrl = staticBadgeUrl(
|
|
baseUrl || window.location.href,
|
|
subject,
|
|
status,
|
|
color
|
|
)
|
|
|
|
document.location = badgeUrl
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<form onSubmit={e => this.handleSubmit(e)}>
|
|
<InlineInput
|
|
value={this.state.subject}
|
|
onChange={event => this.setState({ subject: event.target.value })}
|
|
placeholder="subject"
|
|
/>
|
|
<InlineInput
|
|
value={this.state.status}
|
|
onChange={event => this.setState({ status: event.target.value })}
|
|
placeholder="status"
|
|
/>
|
|
<InlineInput
|
|
value={this.state.color}
|
|
onChange={event => this.setState({ color: event.target.value })}
|
|
list="default-colors"
|
|
placeholder="color"
|
|
/>
|
|
<datalist id="default-colors">
|
|
<option value="brightgreen" />
|
|
<option value="green" />
|
|
<option value="yellowgreen" />
|
|
<option value="yellow" />
|
|
<option value="orange" />
|
|
<option value="red" />
|
|
<option value="lightgrey" />
|
|
<option value="blue" />
|
|
</datalist>
|
|
<button>Make Badge</button>
|
|
</form>
|
|
)
|
|
}
|
|
}
|