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',
|
'/planned_maintenance',
|
||||||
HomeController.externalPage('planned_maintenance', 'Planned Maintenance')
|
HomeController.externalPage('planned_maintenance', 'Planned Maintenance')
|
||||||
)
|
)
|
||||||
webRouter.get(
|
|
||||||
'/style',
|
|
||||||
HomeController.externalPage('style_guide', 'Style Guide')
|
|
||||||
)
|
|
||||||
|
|
||||||
webRouter.get(
|
webRouter.get(
|
||||||
'/track-changes-and-comments-in-latex',
|
'/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