From 46c00c13ba15616745b64019cd62d00825c42b94 Mon Sep 17 00:00:00 2001
From: Shane Kilkelly <shane@kilkelly.me>
Date: Thu, 24 Jun 2021 09:28:14 +0100
Subject: [PATCH] Merge pull request #4241 from overleaf/ae-style-guide

Move the style guide into Storybook

GitOrigin-RevId: 34de190e7b16213344e64e4e8b066b976d81e4f4
---
 .../Features/StaticPages/StaticPagesRouter.js |   4 -
 .../frontend/stories/style-guide.stories.js   | 828 ++++++++++++++++++
 2 files changed, 828 insertions(+), 4 deletions(-)
 create mode 100644 services/web/frontend/stories/style-guide.stories.js

diff --git a/services/web/app/src/Features/StaticPages/StaticPagesRouter.js b/services/web/app/src/Features/StaticPages/StaticPagesRouter.js
index db3d63ac6b..72f8fe61f3 100644
--- a/services/web/app/src/Features/StaticPages/StaticPagesRouter.js
+++ b/services/web/app/src/Features/StaticPages/StaticPagesRouter.js
@@ -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',
diff --git a/services/web/frontend/stories/style-guide.stories.js b/services/web/frontend/stories/style-guide.stories.js
new file mode 100644
index 0000000000..9422c6e323
--- /dev/null
+++ b/services/web/frontend/stories/style-guide.stories.js
@@ -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',
+}