updates for v1.0.0

Author: gitbrent

CHANGELOG.md

@@ -4,9 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0-beta.11] - 2019-04-01
+## [1.0.0] - 2019-04-03
 ### Added
-- New test folder with demo page and height-test
+- New demo/api page (test folder) and a new height-test page
 ### Changed
 - Fixed issue with component height not matching bootstrap components
 - Added "keywords" and "bugs" to `package.json`

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bootstrap-switch-button-react",
- "version": "1.0.0-beta.11",
+ "version": "1.0.0",
  "license": "MIT",
  "repository": {
  "type": "git",

test/index.html

@@ -14,8 +14,8 @@
 background-size: 256px 256px;
 }
 
-footer {
-text-align: center;
+#demos .row .switch.btn {
+margin-right: 1rem!important; /* mr-3 */
 }
 </style>
 </head>
@@ -34,18 +34,13 @@
 <li class="nav-item">
 <a class="nav-link" href="#installation">Installation</a>
 </li>
+<li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#usage">Usage</a></li>
 <li class="nav-item">
 <a class="nav-link" href="#demos">Demos</a>
 </li>
-<li class="nav-item">
-<a class="nav-link d-none d-sm-none d-md-block" href="#usage">Usage</a>
-</li>
 <li class="nav-item">
 <a class="nav-link d-none d-sm-none d-md-block" href="#api">API</a>
 </li>
-<li class="nav-item">
-<a class="nav-link d-none d-sm-none d-md-block" href="#events">Events</a>
-</li>
 <li class="nav-item">
 <a class="nav-link" href="https://github.com/gitbrent/bootstrap-switch-button-react/">GitHub</a>
 </li>
@@ -56,43 +51,50 @@
 </div>
 </nav>
 <div class="mast-head">
-<div class="container">
-<h1>Bootstrap Switch Button for React</h1>
-<p>
-<strong>Bootstrap Switch Button</strong> is a component to use instead of plain checkboxes for responsive switch buttons. </p>
+<div class="container my-3">
+<div class="row align-items-center">
+<div class="col-auto">
+<i class="fab fa-react" style="font-size:5rem"></i>
+</div>
+<div class="col">
+<h1>Bootstrap Switch Button for React</h1>
+<p class="mb-0">
+<strong>Bootstrap Switch Button</strong> is a component to use instead of plain checkboxes for responsive switch buttons.
+</p>
+</div>
+</div>
 </div>
 </div>
 </header>
 <main>
-<section id="updated" class="container my-5">
-<div class="alert alert-success" role="alert">
-<h3 class="alert-heading">Made for Bootstrap 4!</h3>
-<h6 class="font-weight-light"> This page and all of the switch buttons shown are running on Bootstrap 4.3.x </h6>
+<section id="features" class="container my-5">
+<div class="alert alert-secondary" role="alert">
+<h3 class="alert-heading text-dark">Made for Bootstrap 4!</h3>
 <hr />
 <div class="row">
 <div class="col-12 col-md-4 mb-1 mb-md-0">
 <div class="row align-items-center">
 <div class="col-2 p-0 p-md-2 text-right">
-<i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i>
-<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
+<i class="fas fa-check-circle text-info d-none d-sm-none d-md-none d-lg-block" style="font-size:36px"></i>
+<i class="fas fa-check-circle text-info d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
 </div>
-<div class="col-10">Supports touch events</div>
+<div class="col-10">Easy webpack integration</div>
 </div>
 </div>
 <div class="col-12 col-md-4 mb-1 mb-md-0">
 <div class="row align-items-center">
 <div class="col-2 p-0 p-md-2 text-right">
-<i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i>
-<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
+<i class="fas fa-check-circle text-info d-none d-sm-none d-md-none d-lg-block" style="font-size:36px"></i>
+<i class="fas fa-check-circle text-info d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
 </div>
-<div class="col-10">Supports outline colors</div>
+<div class="col-10">Supports touch events</div>
 </div>
 </div>
 <div class="col-12 col-md-4 mb-1 mb-md-0">
 <div class="row align-items-center">
 <div class="col-2 p-0 p-md-2 text-right">
-<i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i>
-<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
+<i class="fas fa-check-circle text-info d-none d-sm-none d-md-none d-lg-block" style="font-size:36px"></i>
+<i class="fas fa-check-circle text-info d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
 </div>
 <div class="col-10">Includes a mini (-xs) size</div>
 </div>
@@ -108,15 +110,136 @@ <h3 class="text-secondary mt-4">NPM</h3>
 <h3 class="text-secondary mt-4">Yarn</h3>
 <pre><code class="language-bash">yarn install bootstrap-switch-button-react</code></pre>
 </section>
+
+<section id="usage" class="container my-5 d-none d-sm-none d-md-block">
+<h2>Usage</h2>
+<hr>
+<p>Keep <code>state</code> in sync using the <code>onChange</code> funcion property</p>
+<pre><code class="language-ts">
+import BootstrapSwitchButton from 'bootstrap-switch-button-react'
+
+&lt;BootstrapSwitchButton
+ checked={false}
+ onlabel='Admin User'
+ offlabel='Regular User'
+ onChange={(checked: boolean) => {
+ this.setState({ isUserAdmin: checked })
+ }}
+/&gt;
+</code></pre>
+</setion>
+
+<!-- React injection -->
 <div id="root"></div>
+<!-- ^^^ -->
+
 <section id="api" class="container my-5 d-none d-sm-none d-md-block">
 <h2>API</h2>
 <hr />
+
+<h3 class="text-secondary mt-4">Component Props</h3>
+<div class="table-responsive">
+<table class="table table-striped table-condensed">
+<thead>
+<tr>
+<th>Name</th>
+<th>Type</th>
+<th>Default</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>onlabel</code></td>
+<td class="text-nowrap">string | html</td>
+<td><code>"On"</code></td>
+<td>Text of the <em>on</em> switch button label.</td>
+</tr>
+<tr>
+<td><code>offlabel</code></td>
+<td>string | html</td>
+<td><code>"Off"</code></td>
+<td>Text of the <em>off</em> switch button label.</td>
+</tr>
+<tr>
+<td><code class="text-nowrap">onstyle</code></td>
+<td>string</td>
+<td><code class="text-nowrap">"primary"</code></td>
+<td>
+Style of the <em>on</em> switch button.<br>Possible values are:
+<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br>
+</td>
+</tr>
+<tr>
+<td><code class="text-nowrap">offstyle</code></td>
+<td>string</td>
+<td><code class="text-nowrap">"light"</code></td>
+<td>
+Style of the <em>off</em> switch button.<br>Possible values are:
+<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br>
+</td>
+</tr>
+<tr>
+<td><code>checked<code></td>
+<td>boolean</td>
+<td><em>false</em></td>
+<td>
+Whether the switch button is "checked" (On)
+</td>
+</tr>
+<tr>
+<td><code>disabled<code></td>
+<td>boolean</td>
+<td><em>false</em></td>
+<td>
+Whether the switch button is disabled
+</td>
+</tr>
+<tr>
+<td><code>size<code></td>
+<td>string</td>
+<td><em>null</em></td>
+<td>
+Size of the switch button. If set to <em>null</em>, button is default/normal size.<br>
+Possible values are:
+<code>lg</code>, <code>sm</code>, <code>xs</code><br>
+</td>
+</tr>
+<tr>
+<td><code>style</code></td>
+<td>string</td>
+<td><em>null</em></td>
+<td>
+Appends the provided value to the switch button's class attribute.
+Use this to apply custom styles to the switch button.
+</td>
+</tr>
+<tr>
+<td><code>width</code></td>
+<td>integer</td>
+<td><em>null</em></td>
+<td>
+Sets the width of the switch button.<br>
+If set to <em>null</em>, width will be calculated.
+</td>
+</tr>
+<tr>
+<td><code>height</code></td>
+<td>integer</td>
+<td><em>null</em></td>
+<td>
+Sets the height of the switch button.<br>
+If set to <em>null</em>, height will be calculated.
+</td>
+</tr>
+</tbody>
+</table>
+</div>
 </section>
 </main>
 <footer class="bg-light border-top p-4">
-<div class="container">
-<h4 class="font-weight-light"> Created by <a href="https://github.com/gitbrent" target="_blank">Brent Ely</a> | Available on <a href="https://github.com/gitbrent/bootstrap-switch-button-react" target_"blank">GitHub</a> | Licensed <a href="https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/LICENSE" target_"blank">MIT</a>
+<div class="container text-center">
+<h4 class="font-weight-light"> Author <a href="https://github.com/gitbrent" target="_blank">Brent Ely</a> | Available on <a href="https://github.com/gitbrent/bootstrap-switch-button-react" target_"blank">GitHub</a> | Licensed <a href="https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/LICENSE" target_"blank">MIT</a>
 </h4>
 <p class="mt-4 mb-0">
 <iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap-switch-button-react&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>