Merge pull request #23 from rcaferati/issue-based-review

Issue based review

README.md

@@ -1,83 +1,206 @@
-# <AwesomeButton />
+# React <AwesomeButton /> UI Component
 
 [![Travis](https://img.shields.io/travis/rcaferati/react-awesome-button/master.svg)](https://travis-ci.org/rcaferati/react-awesome-button) ![NPM](https://img.shields.io/npm/v/react-awesome-button.svg)
 
-`react-awesome-button` is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons.
+`react-awesome-button` is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons. Bundled together with a _social share_ and _progress enabled_ components.
 
 [<img width="400" alt="react-awesome-button demo" src="https://github.com/rcaferati/react-awesome-button/blob/master/demo/public/images/theme-set.gif?raw=true">](https://caferati.me/demo/react-awesome-button)
 
+## Key Features
+
+- 60fps 3D animated button
+- Animated **progress** button
+- **Social icons** and network specific **share methods**
+- OnPress ripple effect
+- Look and feel customisable and extendable in two ways: via **CSS custom properties** or **SASS** variables and lists ([scss config file](https://github.com/rcaferati/react-awesome-button/blob/master/src/styles/default.scss)).
+- Use it with **CSSModules** or **Plain CSS
+
 ## Live demo
 
-Checkout the `CSS customizer` at <a title="React Awesome Button - CSS Customizer" href="https://caferati.me/demo/react-awesome-button" target="_blank">my portfolio</a>
+Checkout the live demo with the `CSS customizer` at my <a title="React Awesome Button - CSS Customizer" href="https://caferati.me/demo/react-awesome-button" target="_blank">web portfolio</a> page.
 
 [<img src="https://github.com/rcaferati/react-awesome-button/blob/master/demo/public/images/react-awesome-button-customizer.png?raw=true" width="800" />](https://caferati.me/demo/react-awesome-button)
 
 ## Storybook
 
-Checkout the `Storybook` at <a title="React Awesome Button - CSS Customizer" href="https://caferati.me/demo/react-awesome-button/storybook" target="_blank">my portfolio</a>
+Checkout the `Storybook` at my <a title="React Awesome Button - CSS Customizer" href="https://caferati.me/demo/react-awesome-button/storybook" target="_blank">web portfolio</a> page.
 
 [<img src="https://github.com/rcaferati/react-awesome-button/blob/master/demo/public/images/react-awesome-button-storybook.png?raw=true" width="800" />](https://caferati.me/demo/react-awesome-button/storybook)
 
-## Examples
+## Installation
+
+```
+npm install --save react-awesome-button
+```
+
+## Styling with plain CSS and CSS Modules
+
+### Plain CSS
+
+```jsx
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/styles.css";
+
+function Button() {
+  return <AwesomeButton type="primary">Button</AwesomeButton>;
+}
+```
+
+### CSS Modules
 
-### With react-awesome-button and plain CSS
 ```jsx
-  import { AwesomeButton } from 'react-awesome-button';
-  import 'react-awesome-button/dist/styles.css';
+import { AwesomeButton } from "react-awesome-button";
+import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";
+
+function Button() {
+  return (
+    <AwesomeButton cssModule={AwesomeButtonStyles} type="primary">
+      Button
+    </AwesomeButton>
+  );
+}
+```
+
+### `AwesomeButton` rendered with a button tag
+
+Renders the component with a `Button` tag and an onPress prop called on animation release.
+Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Primary).
+```jsx
+import { AwesomeButton } from "react-awesome-button";
+import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";
+
+function Button() {
+  return (
+    <AwesomeButton
+      cssModule={AwesomeButtonStyles}
+      type="primary"
+      ripple
+      onPress={() => {
+        // do something
+      }}
+    >
+      Button
+    </AwesomeButton>
+  );
+}
+```
+
+### `AwesomeButton` rendered with an anchor tag
+
+Render the component with an `anchor` tag setting the href and target attributes.
+
+Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Link).
+
+```jsx
+import { AwesomeButton } from "react-awesome-button";
+import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";
+
+function Button() {
+  return (
+    <AwesomeButton
+      cssModule={AwesomeButtonStyles}
+      type="primary"
+      href="https://google.com"
+      target="_blank"
+    >
+      Button
+    </AwesomeButton>
+  );
+}
+```
+
+### `AwesomeButton` props
+
+| Attribute |    Type    |  Default  | Description                                                                                              |
+| :-------- | :--------: | :-------: | :------------------------------------------------------------------------------------------------------- |
+| type      |  `string`  | `primary` | Render a specific button type, styled by the .scss type list                                             |
+| size      |  `string`  |  `auto`   | Render a specific button size, styled by the .scss size list                                             |
+| element   |   `node`   |  `null`   | Overwrites the default container element renderer, useful for using it with react-router Link component. |
+| disabled  |   `bool`   |  `false`  | Should render a disabled button                                                                          |
+| visible   |   `bool`   |  `true`   | Should the button be visible                                                                             |
+| ripple    |   `bool`   |  `false`  | Should render the animated ripple effect                                                                 |
+| onPress   | `function` |  `null`   | Default click/press function                                                                             |
+| href      |  `string`  |  `null`   | Forces the button to be rendered on an `anchor` container and sets the href to the specified value       |
+| target    |  `string`  |  `null`   | When used together with `href` renders an anchor with a specific target attribute                        |
+
+### `AwesomeButtonProgress` basic example
+
+Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonProgress&selectedStory=Success).
+
+```jsx
+  import { AwesomeButtonProgress } from 'react-awesome-button';
+  import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'
 
   function Button() {
     return (
-      <AwesomeButton type="facebook">Button</AwesomeButton>
+      <AwesomeButtonProgress
+        cssModule={AwesomeButtonStyles}
+        type="primary"
+        onPress={next => {
+          // do a sync/async task then call `next()`
+        }}
+      >
+        Button
+      </AwesomeButton>
     );
   }
 ```
 
-### With react-awesome-button CSS Modules
+### `AwesomeButtonProgress` specific props
+
+Being a wrapper on the **`AwesomeButton`** component, it accepts its props plus the following ones.
+
+| Attribute    |   Type    |  Default  | Description                                                 |
+| :----------- | :-------: | :-------: | :---------------------------------------------------------- |
+| loadingLabel | `string`  | `Wait ..` | Progress button loading label text                          |
+| resultLabel  | `string`  | `Success` | Progress button success label text                          |
+| releaseDelay | `number`  |    500    | Delay for releasing the button after the progress animation |
+| fakePress    | `boolean` |  `false`  | When set to `true` triggers a fake button press             |
+
+### `AwesomeButtonSocial` basic example
+
+Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonSocial&selectedStory=Facebook).
+
 ```jsx
-  import { AwesomeButton } from 'react-awesome-button';
+  import { AwesomeButtonSocial } from 'react-awesome-button';
   import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'
 
   function Button() {
     return (
-      <AwesomeButton
+      <AwesomeButtonSocial
         cssModule={AwesomeButtonStyles}
-        type="twitter"
+        type="facebook"
+        url="https://caferati.me"
       >
-        Share
+        Button
       </AwesomeButton>
     );
   }
 ```
 
-## Key Features
+### `AwesomeButtonSocial` specific props
+
+Being a wrapper on the **`AwesomeButton`** component, it accepts its props plus the following ones.
 
-+ Look and feel customisable and extendable via SASS variables and lists ([scss config file](https://github.com/rcaferati/react-awesome-button/blob/master/src/styles/default.scss))
-+ Use it with CSSModules or Plain CSS (NO inline-styles)
-+ Render any tag as the component\'s child (text, icon, img, svg)
-+ Animated progress button
-+ OnClick bubble animation
-
-| Attributes            | Type          | Default     | Description |
-| :---------            | :--:          | :-----:     | :----------- |
-| action                | `function`    | `null`      | Default click function |
-| bubbles               | `bool`        | `false`     | Should render the bubbles onClick animation |
-| disabled              | `bool`        | `false`     | Should render a disabled button |
-| type                  | `string`      | `primary` | Render a specific button type, styled by the .scss type list |
-| size                  | `string`      | `auto`    | Render a specific button size, styled by the .scss size list |
-| element               | `node`        | `null`      | Overwrites the default container element renderer, useful for using it with react-router Link container. |
-| href                  | `string`      | `null`      | Forces the button to be rendered on an `anchor` container and sets the href to the specified value |
-| target                | `string`      | `null`      | Render an anchor with a specific target attribute |
-| progress              | `bool`        | `false`     | Should render a progress button |
-| loadingLabel          | `string`      | `Wait ..` | Progress button loading label text |
-| errorLabel            | `string`      | `Error`   | Progress button error label text |
-| successLabel          | `string`      | `Success` | Progress button success label text |
-| visible               | `bool`        | `true`      | Should the button be visible |
+| Attribute    |   Type    |  Default  | Description                                                 |
+| :----------- | :-------: | :-------: | :---------------------------------------------------------- |
+| type         | `string`  | `primary` | Render a specific button type. Bundled with Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp and Google Plus (RIP) types and share methods |
+| icon         | `bool`    | `false`   | Should render the social icon relative to the button type |
+| iconHeight   | `number`  | `23`      | Rendered icon height |
+| icon         | `number`  | `30`      | Rendered icon width |
+| url          | `string`  | `null`    | Url string to be used on the sharer |
+| image        | `string`  | `null`    | Image url to be rendered on the sharer |
+| message      | `string`  | `null`    | Message string to be rendered on the share post |
+| phone        | `string`  | `null`    | Phone number to be used when using the Whatsapp sharer |
+| user         | `string`  | `null`    | Username to be redirected to when using the Messenger sharer |
 
 ## Author
+
 #### Rafael Caferati
-+ Checkout my <a href="https://caferati.me" title="Full-Stack Web Developer, UI/UX Javascript Specialist" target="_blank">Full-Stack Web Developer Website</a>
-+ Other open source projects @ <a title="Web Software Developer Code Laboratory" target="_blank" href="https://caferati.me/labs">Code Laboratory</a>
-+ A scope of my work @ <a title="Web Software Developer Portfolio" target="_blank" href="https://caferati.me/portfolio">Web Portfolio</a>
+
+- Checkout my <a href="https://caferati.me" title="Full-Stack Web Developer, UI/UX Javascript Specialist" target="_blank">Full-Stack Web Developer Website</a>
+- Other open source projects @ <a title="Web Software Developer Code Laboratory" target="_blank" href="https://caferati.me/labs">Code Laboratory</a>
+- A scope of my work @ <a title="Web Software Developer Portfolio" target="_blank" href="https://caferati.me/portfolio">Web Portfolio</a>
 
 ## License
 

demo/components/customiser/customiser.js

@@ -244,7 +244,7 @@ class Customiser extends React.Component {
       <section className={Styles.container}>
         <header>
           <h2>Custom Properties</h2>
-          <p>Basic customization through CSS custom-properties.</p>
+          <p>Button customization through CSS custom-properties.</p>
           <div
             ref={(control) => { this.control = control; }}
             className={Styles.control}

demo/components/footer/footer.js

@@ -8,11 +8,12 @@ const Footer = ({ repository, article }) => (
       <img className="support" src="/images/support.svg" alt="Modern Web Browsers" title="Modern Web Browsers" />
     </div>
     <small>
-      Promote and support this project on <a rel="noopener noreferrer" target="_blank" href={repository}>github</a>.
+      Promote and support this project on <a href={repository}>github</a>.
     </small>
     <small>
-      Read more and discuss at the <a rel="noopener noreferrer" target="_blank" href={article}>article page</a>.
+      Read more and discuss at the <a href={article}>article page</a>.
     </small>
+    <small>Built by <a href="https://caferati.me"><b>@rcaferati</b></a></small>
   </footer>
 );
 

demo/components/header/header.js

@@ -16,13 +16,12 @@ const Header = ({
   <header className={Styles.container}>
     <div className={Styles.wrapper}>
       <h1>
-        <span>{framework}</span>
-        <span>{title}</span>
+        <span>{framework}</span>{' '}<span>{title}</span>{' '}<span>Component</span>
       </h1>
-      <h2>
+      <h4>
         <strong>&lt;{name}/&gt;</strong>
         <span>{size}</span>
-      </h2>
+      </h4>
       <p>{description}</p>
       <Navigation
         domain={domain}

demo/components/header/header.scss

@@ -24,26 +24,43 @@
       display: inline-block;
     }
     span:first-child {
-      margin-right: 10px;
       color: #61dafb;
     }
-    @media all and (max-width: 1125px) {
+    @media all and (max-width: 2000px) {
+      font-size: 36px;
+    }
+    @media all and (max-width: 1550px) {
+      font-size: 32px;
+    }
+    @media all and (max-width: 1350px) {
+      font-size: 28px;
+    }
+    @media all and (max-width: 1270px) {
       font-size: 30px;
+      span:nth-child(3) {
+        display: none;
+      }
     }
     @media all and (max-width: 1024px) {
-      font-size: 28px;
+      font-size: 26px;
+      span:nth-child(3) {
+        display: none;
+      }
     }
     @media all and (max-width: 535px) {
-      font-size: 26px;
+      font-size: 24px;
+      span:nth-child(3) {
+        display: none;
+      }
     }
     @media all and (max-width: 460px) {
       font-size: 46px;
-      span:nth-child(2) {
+      span:nth-child(3), span:nth-child(2) {
         display: none;
       }
     }
   }
-  h2 {
+  h4 {
     @extend %h2;
     margin-bottom: $unit;
     strong {
@@ -56,6 +73,9 @@
       font-size: $double * 2;
       font-weight: 500;
     }
+    @media all and (max-width: 535px) {
+      font-size: 20px;
+    }
   }
   p {
     @extend %text;

demo/data.json

@@ -2,12 +2,12 @@
   "name": "AwesomeButton",
   "framework": "React",
   "title": "Awesome Button",
-  "description": "React AwesomeButton is a performant, extendable, highly customisable, production ready javascript react component that renders an animated basic set of UI buttons.",
+  "description": "React button component rendering 3D, progress, social and share enabled buttons. React Awesome Button is a 60fps, light weight, performant, production ready set of react UI button components.",
   "icon": "react-js",
   "size": "~6KB compressed",
   "repository": "https://github.com/rcaferati/react-awesome-button",
   "article": "//caferati.me/labs/awesome-button",
-  "domain": "",
+  "domain": "/demo/react-awesome-button",
   "themes": [
     {
       "name": "Blue",
@@ -26,4 +26,4 @@
       "slug": "morty-theme"
     }
   ]
-}
+}

demo/demo.js

@@ -10,7 +10,7 @@ import { Header, Customiser, Body, Composer, Page, PageRibbon } from './componen
 import Data from './data.json';
 import data from './examples';
 
-const DEFAULT_THEME = 'blue-theme';
+const DEFAULT_THEME = 'morty-theme';
 
 const DemoComponent = ({
   match,
@@ -87,6 +87,7 @@ class Demo extends React.Component {
     server: false,
     location: '',
   };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -150,5 +151,4 @@ class Demo extends React.Component {
   }
 }
 
-
 export default Demo;