v1.0.0 Release. Pulled demo-specific styling out of component scss an…

…d moved to demo.
RavenHursT · Aug 14, 2018 · 4fba4b7 · 4fba4b7
1 parent 42fbe60
commit 4fba4b7
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ A (semi)full-featured React rating component.
 - Allows for propagation of custom `className` property
 - Plays nice w/ [material-ui 1.4.x](https://material-ui.com/)
 
-Check out the demo here! https://23m6jr1v5y.codesandbox.io/
+Check out the demo here! https://ravenhurst.github.io/react-flex-rating/
 
 ## Installation
 
@@ -36,35 +36,21 @@ In your [sass-enabled React app](https://medium.com/front-end-hacking/how-to-add
 
 Add the component into your app somewhere:
 ```javascript
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
-import FontIcon from 'material-ui/FontIcon'
 import Rating from 'react-flex-rating'
 
 // Inside React component render():
-<MuiThemeProvider>
-  <Rating
-    {...{
-      className: `custom-class`,
-      value: rating,
-      allowHalfs,
-      maxValue,
-      disabled,
-      iconCount: starCount,
-      activeIcon: (
-        <FontIcon className="material-icons font-size-2-5">
-          star
-        </FontIcon>
-      ),
-      inactiveIcon: (
-        <FontIcon className="material-icons font-size-2-5">
-          star_border
-        </FontIcon>
-      ),
-      onSelect: rating => this.setState({ rating })
-    }} />
-</MuiThemeProvider>
+<Rating {...{
+  className: `html-entities-rating`,
+  value: rating,
+  allowHalfs,
+  maxValue,
+  disabled,
+  iconCount: starCount,
+  activeIcon: <span>&#9733;</span>, // https://www.toptal.com/designers/htmlarrows/symbols/black-star/
+  inactiveIcon: <span>&#9734;</span>, // https://www.toptal.com/designers/htmlarrows/symbols/white-star/
+  onSelect: rating => this.setState({ rating })
+}} />
 ```
-(Note: currently only built and tested w/ [material-ui 1.4.x](https://material-ui.com/) `FontIcon`. Not sure if it will work w/ other `ReactElement`s.)
 
 ## Component Properties:
 - `value` (Number): Current value of the component.  Used to drive the rendering of "active" icons. This is passed into the firrst argument of the `onSelect` callback method.

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -3,7 +3,6 @@ import { render } from 'react-dom'
 import Select from '@material-ui/core/Select'
 import MenuItem from '@material-ui/core/MenuItem'
 import Icon from '@material-ui/core/Icon'
-import Input from '@material-ui/core/Input'
 import InputLabel from '@material-ui/core/InputLabel'
 import FormControl from '@material-ui/core/FormControl'
 import Rating from '../../src/index'

diff --git a/demo/src/styles/index.scss b/demo/src/styles/index.scss
@@ -17,4 +17,36 @@
   .MuiFormControl-root-1 {
     min-width: 8em;
   }
+
+  .rating {
+    .rating-icon {
+      > span > span {
+        transition: color 150ms;
+      }
+
+      .display-icon {
+        transition: width 50ms;
+      }
+
+      .background-icon {
+        > span {
+          color: #494949;
+        }
+
+        &.highlight > span{
+          color: #ffd34c;
+        }
+      }
+
+      &.active, &.half {
+        .display-icon > span {
+          color: #db9f33;
+        }
+      }
+
+      &.highlight .display-icon > span {
+        color: #ffd34c;
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-flex-rating",
-  "version": "0.0.31",
-  "description": "react-flex-rating React component",
+  "version": "1.0.0",
+  "description": "react-flex-rating Flexable React Component for ratings",
   "main": "lib/index.js",
   "module": "es/index.js",
   "files": [
@@ -17,23 +17,23 @@
     "start": "nwb serve-react-demo",
     "test": "nwb test-react",
     "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server"
-  },
-  "dependencies": {
-    "material-ui": "0.20.0"
+    "test:watch": "nwb test-react --server",
+    "publish-demo": "nwb build-demo && gh-pages -d demo/dist"
   },
+  "dependencies": {},
   "peerDependencies": {
     "react": "16.x"
   },
   "devDependencies": {
     "@material-ui/core": "^1.5.0",
+    "gh-pages": "^1.2.0",
     "nwb": "0.21.x",
     "nwb-sass": "^0.8.4",
     "react": "^16.4.1",
     "react-dom": "^16.4.1"
   },
   "author": "RavenHursT",
-  "homepage": "https://23m6jr1v5y.codesandbox.io/",
+  "homepage": "https://ravenhurst.github.io/react-flex-rating/",
   "license": "MIT",
   "repository": "/~https://github.com/RavenHursT/react-flex-rating",
   "keywords": [

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -3,30 +3,6 @@
     cursor: pointer;
     position: relative;
     display: inline-block;
-
-    > span > span {
-      transition: color 0ms
-    }
-
-    .background-icon {
-      > span {
-        color: #494949 !important;
-      }
-
-      &.highlight > span{
-        color: #ffd34c !important;
-      }
-    }
-
-    &.active, &.half {
-      .display-icon > span {
-        color: #db9f33 !important;
-      }
-    }
-
-    &.highlight .display-icon > span {
-      color: #ffd34c !important;
-    }
   }
 
   &.disabled {