mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #4241 from overleaf/ae-style-guide
Move the style guide into Storybook GitOrigin-RevId: 34de190e7b16213344e64e4e8b066b976d81e4f4
This commit is contained in:
Shane Kilkelly
Copybot
parent
7b80d3ba46
commit
46c00c13ba
2 changed files with 828 additions and 4 deletions
|
|
@ -20,10 +20,6 @@ module.exports = {
|
|||
'/planned_maintenance',
|
||||
HomeController.externalPage('planned_maintenance', 'Planned Maintenance')
|
||||
)
|
||||
webRouter.get(
|
||||
'/style',
|
||||
HomeController.externalPage('style_guide', 'Style Guide')
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/track-changes-and-comments-in-latex',
|
||||
|
|
|
|||
828
services/web/frontend/stories/style-guide.stories.js
Normal file
828
services/web/frontend/stories/style-guide.stories.js
Normal file
|
|
@ -0,0 +1,828 @@
|
|||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
|
||||
import { Grid, Row, Col, Button, Alert, ProgressBar } from 'react-bootstrap'
|
||||
|
||||
export const Colors = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<h2>Colours</h2>
|
||||
<div className="color-row">
|
||||
<div className="color-box ol-blue-gray-1">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue-gray-2">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue-gray-3">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue-gray-4">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue-gray-5">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue-gray-6">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-row">
|
||||
<div className="color-box ol-green">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-dark-green">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-blue">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-dark-blue">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-red">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="color-box ol-dark-red">
|
||||
<div className="color-swatch" />
|
||||
<div className="color-label">
|
||||
<pre className="color-less-var" />
|
||||
<pre className="color-hex-val" />
|
||||
<pre className="color-rgb-val" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Headings = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<h2>Headings</h2>
|
||||
<p>Here are our heading styles:</p>
|
||||
<h1>Heading level 1</h1>
|
||||
<p>
|
||||
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
|
||||
ipsum
|
||||
</p>
|
||||
<h2>Heading level 2</h2>
|
||||
<p>
|
||||
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
|
||||
ipsum lorem ipsum
|
||||
</p>
|
||||
<h3>Heading level 3</h3>
|
||||
<p>
|
||||
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
|
||||
ipsum lorem ipsum
|
||||
</p>
|
||||
<h4>Heading level 4</h4>
|
||||
<p>
|
||||
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
|
||||
ipsum lorem ipsum
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Buttons = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<h2>Buttons</h2>
|
||||
<p>Our primary button is red:</p>
|
||||
<p>
|
||||
<Button bsStyle="primary">Primary Button</Button>
|
||||
</p>
|
||||
<p>Our secondary button is blue:</p>
|
||||
<p>
|
||||
<Button bsStyle="info">Secondary Button</Button>
|
||||
</p>
|
||||
<p>All button styles</p>
|
||||
<p />
|
||||
<div className="btn-toolbar">
|
||||
<Button bsStyle="primary">Primary</Button>
|
||||
<Button bsStyle="info">Info (secondary)</Button>
|
||||
<Button bsStyle="default">Default</Button>
|
||||
<Button bsStyle="success">Success</Button>
|
||||
<Button bsStyle="warning">Warning</Button>
|
||||
<Button bsStyle="danger">Danger</Button>
|
||||
</div>
|
||||
<p />
|
||||
<h2>Hyperlinks</h2>
|
||||
<p>
|
||||
Hyperlinks are highlighted <a href="#">as shown</a>.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Alerts = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<h2>Alerts</h2>
|
||||
|
||||
<Alert bsStyle="danger">
|
||||
An <code>.alert-danger</code> alert
|
||||
</Alert>
|
||||
<Alert bsStyle="success">
|
||||
An <code>.alert-success</code> alert
|
||||
</Alert>
|
||||
<Alert bsStyle="info">
|
||||
An <code>.alert-info</code> alert
|
||||
</Alert>
|
||||
<Alert bsStyle="warning">
|
||||
An <code>.alert-warning</code> alert
|
||||
</Alert>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const ProgressBars = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
{' '}
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<h2>Progress bars</h2>
|
||||
<ProgressBar bsStyle="danger" now={20} />
|
||||
<ProgressBar bsStyle="success" now={40} />
|
||||
<ProgressBar bsStyle="info" now={60} />
|
||||
<ProgressBar bsStyle="warning" now={80} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Cards = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<p>
|
||||
Cards look best on a <code>.content.content-alt</code>{' '}
|
||||
background
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Forms = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
<Grid>
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Form elements—basic example</h2>
|
||||
<form className="ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputEmail1">Email address</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputEmail1"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputPassword1">Password</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputPassword1"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputFile">File input</label>
|
||||
<input id="exampleInputFile" type="file" />
|
||||
<p className="help-block">
|
||||
Example block-level help text here.
|
||||
</p>
|
||||
</div>
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" /> Check me out
|
||||
</label>
|
||||
<button className="btn btn-default" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Inline form</h2>
|
||||
<form className="form-inline ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputName2">Name</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputName2"
|
||||
type="text"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputEmail2">Email</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputEmail2"
|
||||
type="email"
|
||||
placeholder="jane.doe@example.com"
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-default" type="submit">
|
||||
Send invitation
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="form-inline ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label className="sr-only" htmlFor="exampleInputEmail3">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputEmail3"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="sr-only" htmlFor="exampleInputPassword3">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputPassword3"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" /> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button className="btn btn-default" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="form-inline ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label className="sr-only" htmlFor="exampleInputAmount">
|
||||
Amount (in dollars)
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<div className="input-group-addon">$</div>
|
||||
<input
|
||||
className="form-control"
|
||||
id="exampleInputAmount"
|
||||
type="text"
|
||||
placeholder="Amount"
|
||||
/>
|
||||
<div className="input-group-addon">.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit">
|
||||
Transfer cash
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Horizontal form</h2>
|
||||
<form className="form-horizontal ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label
|
||||
className="col-sm-2 control-label"
|
||||
htmlFor="inputEmail3"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputEmail3"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label
|
||||
className="col-sm-2 control-label"
|
||||
htmlFor="inputPassword3"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputPassword3"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="col-sm-offset-2 col-sm-10">
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" /> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="col-sm-offset-2 col-sm-10">
|
||||
<button className="btn btn-default" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Supported controls</h2>
|
||||
<form className="ng-pristine ng-valid">
|
||||
<input
|
||||
className="form-control"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows="3"
|
||||
placeholder="Textarea"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" />
|
||||
Option one is this and that—be sure to include why it's
|
||||
great
|
||||
</label>
|
||||
</div>
|
||||
<div className="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled="" />
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<div className="radio">
|
||||
<label>
|
||||
<input
|
||||
id="optionsRadios1"
|
||||
type="radio"
|
||||
name="optionsRadios"
|
||||
value="option1"
|
||||
checked
|
||||
/>
|
||||
Option one is this and that—be sure to include why it's
|
||||
great
|
||||
</label>
|
||||
</div>
|
||||
<div className="radio">
|
||||
<label>
|
||||
<input
|
||||
id="optionsRadios2"
|
||||
type="radio"
|
||||
name="optionsRadios"
|
||||
value="option2"
|
||||
/>
|
||||
Option two can be something else and selecting it will
|
||||
deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div className="radio disabled">
|
||||
<label>
|
||||
<input
|
||||
id="optionsRadios3"
|
||||
type="radio"
|
||||
name="optionsRadios"
|
||||
value="option3"
|
||||
disabled=""
|
||||
/>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<label className="checkbox-inline">
|
||||
<input id="inlineCheckbox1" type="checkbox" value="option1" />
|
||||
1
|
||||
</label>
|
||||
<label className="checkbox-inline">
|
||||
<input id="inlineCheckbox2" type="checkbox" value="option2" />
|
||||
2
|
||||
</label>
|
||||
<label className="checkbox-inline">
|
||||
<input id="inlineCheckbox3" type="checkbox" value="option3" />
|
||||
3
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<label className="radio-inline">
|
||||
<input
|
||||
id="inlineRadio1"
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
value="option1"
|
||||
/>
|
||||
1
|
||||
</label>
|
||||
<label className="radio-inline">
|
||||
<input
|
||||
id="inlineRadio2"
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
value="option2"
|
||||
/>
|
||||
2
|
||||
</label>
|
||||
<label className="radio-inline">
|
||||
<input
|
||||
id="inlineRadio3"
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
value="option3"
|
||||
/>
|
||||
3
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<select className="form-control">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<select className="form-control" multiple="">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Form states</h2>
|
||||
<form className="form-inline ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
{/* eslint-disable-next-line */}
|
||||
<label className="sr-only">Emails</label>
|
||||
<p className="form-control-static">email@example.com</p>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="sr-only" htmlFor="inputPassword2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputPassword2"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-default" type="submit">
|
||||
Confirm identity
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<input
|
||||
className="form-control"
|
||||
id="focusedInput"
|
||||
type="text"
|
||||
value="Demonstrative focus state"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<input
|
||||
className="form-control"
|
||||
id="disabledInput"
|
||||
type="text"
|
||||
placeholder="Disabled input here…"
|
||||
disabled=""
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<input
|
||||
className="form-control"
|
||||
type="text"
|
||||
placeholder="Readonly input here…"
|
||||
readOnly=""
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<form className="ng-pristine ng-valid">
|
||||
<div className="form-group">
|
||||
<label htmlFor="inputHelpBlock">Input with help text</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputHelpBlock"
|
||||
type="text"
|
||||
aria-describedby="helpBlock"
|
||||
/>
|
||||
</div>
|
||||
<span className="help-block" id="helpBlock">
|
||||
A block of help text that breaks onto a new line and may
|
||||
extend beyond one line.
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="row-spaced">
|
||||
<Col md={8} mdOffset={2}>
|
||||
<div className="card">
|
||||
<h2>Validation states</h2>
|
||||
<form className="ng-pristine ng-valid">
|
||||
<div className="form-group has-success">
|
||||
<label className="control-label" htmlFor="inputSuccess1">
|
||||
Input with success
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputSuccess1"
|
||||
type="text"
|
||||
aria-describedby="helpBlock2"
|
||||
/>
|
||||
<span className="help-block" id="helpBlock2">
|
||||
A block of help text that breaks onto a new line and may
|
||||
extend beyond one line.
|
||||
</span>
|
||||
</div>
|
||||
<div className="form-group has-warning">
|
||||
<label className="control-label" htmlFor="inputWarning1">
|
||||
Input with warning
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputWarning1"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group has-error">
|
||||
<label className="control-label" htmlFor="inputError1">
|
||||
Input with error
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="inputError1"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="has-success">
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input
|
||||
id="checkboxSuccess"
|
||||
type="checkbox"
|
||||
value="option1"
|
||||
/>
|
||||
Checkbox with success
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="has-warning">
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input
|
||||
id="checkboxWarning"
|
||||
type="checkbox"
|
||||
value="option1"
|
||||
/>
|
||||
Checkbox with warning
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="has-error">
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input
|
||||
id="checkboxError"
|
||||
type="checkbox"
|
||||
value="option1"
|
||||
/>
|
||||
Checkbox with error
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'Style Guide',
|
||||
}
|
||||
Loading…
Reference in a new issue