rename social button, add social demo

src/__tests__/component.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import '../helpers/tests';
-import AwesomeButton from '../component';
+import { AwesomeButton, AwesomeButtonProgress } from '../index';
 
 test('Should render a simple primary button', () => {
   const component = renderer.create(<AwesomeButton>Button</AwesomeButton>);
@@ -41,12 +41,13 @@ test('Button changes on mouse down -> up -> leave', () => {
 
 test('Should render a button with a progress bar', () => {
   const component = renderer.create(
-    <AwesomeButton
-      progress
+    <AwesomeButtonProgress
       action={(element, next) => {
         next();
       }}
-    >Button</AwesomeButton>);
+    >
+      Button
+    </AwesomeButtonProgress>);
   let tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 

src/components/AwesomeButtonShare/index.js → src/components/AwesomeButtonSocial/index.js

@@ -7,7 +7,7 @@ import getIcon from './icons';
 const ICON_HEIGHT = 23;
 const ICON_WIDTH = 30;
 
-export default class AwesomeButtonShare extends React.Component {
+export default class AwesomeButtonSocial extends React.Component {
   static propTypes = {
     bubbles: PropTypes.bool,
     children: PropTypes.node,

src/demo/data.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   AwesomeButton,
-  AwesomeButtonShare,
+  AwesomeButtonSocial,
   AwesomeButtonProgress,
 } from '../index';
 import AwsBtnStyles from '../styles/themes/theme-blue/styles.scss';
@@ -44,6 +44,39 @@ const examples = [
         <AwesomeButton bubbles size="large" cssModule={AwsBtnStyles} type="secondary">Secondary</AwesomeButton>
       </div>),
   },
+  {
+    title: 'Share Buttons',
+    description: `The AwesomeButtonSocial compent comes bundled with share methods and icons
+    for the most popular social platforms.`,
+    jsx: `
+<AwesomeButtonSocial type="facebook">Share</AwesomeButtonSocial>
+<AwesomeButtonSocial type="twitter">Share</AwesomeButtonSocial>
+<AwesomeButtonSocial
+  href="https://instagram.com/rcaferati"
+  type="instagram"
+>
+  Instagram
+</AwesomeButtonSocial>
+<AwesomeButtonSocial
+  user="caferati.me"
+  type="messenger"
+>
+  Message Us
+</AwesomeButtonSocial>`,
+    button: (
+      <div>
+        <AwesomeButtonSocial url="https://caferati.me" type="facebook" cssModule={AwsBtnStyles}>Share</AwesomeButtonSocial>
+        <AwesomeButtonSocial url="https://caferati.me" type="twitter" cssModule={AwsBtnStyles}>Share</AwesomeButtonSocial>
+        <AwesomeButtonSocial
+          user="caferati.me"
+          type="messenger"
+          cssModule={AwsBtnStyles}
+        >
+          Message Us
+        </AwesomeButtonSocial>
+      </div>
+    ),
+  },
   {
     title: 'Using children elements',
     description: `This example use font-awesome to render the icons but you can
@@ -193,9 +226,20 @@ $button-hover-pressure: 2;
   },
   {
     title: 'Extended Types',
-    description: 'Extending a button type is easy. Just add the new type to the $Button-Something .scss list.',
+    description: 'For extending a button type just append the new type to the button-colors .scss list.',
     scss: `
-    $new-button-color: ();
+/**
+  button-color:
+    color-name, (required)
+    background, (required)
+    bottom-darker-background, (required)
+    font-color, (required)
+    border, (optional)
+    bubble-color, (optional)
+    hover-background, (optional)
+*/
+    $new-button-color: ("link", #FFFFFF, #BBBBBB, #666666);
+
     append($button-colors, $button-link);
     `,
     jsx: `
@@ -216,7 +260,7 @@ export default {
   name: 'AwesomeButton',
   title: 'React Components are awesome',
   description: 'The AwesomeButton is a performant, extendable, highly customisable, production ready react component that renders an animated basic set of UI buttons.',
-  size: '~5KB compressed',
+  size: '~6KB compressed',
   repository: 'https://github.com/rcaferati/react-awesome-button',
   article: '//caferati.me/labs/awesome-button',
   features,

src/index.js

@@ -1,3 +1,3 @@
 export { default as AwesomeButton } from './components/AwesomeButton';
-export { default as AwesomeButtonShare } from './components/AwesomeButtonShare';
+export { default as AwesomeButtonSocial } from './components/AwesomeButtonSocial';
 export { default as AwesomeButtonProgress } from './components/AwesomeButtonProgress';

src/styles/themes/theme-rickiest/config/lists.scss

@@ -23,7 +23,7 @@ $button-colors:
     $button-color-secondary,
     darken($button-color-secondary-border, 20%),
     darken($button-color-secondary-border, 40%),
-    1px solid $button-color-secondary-border,
+    2px solid $button-color-secondary-border,
     lighten($button-color-secondary-border, 1%),
     darken($button-color-secondary, 4%),
   ),
@@ -32,7 +32,7 @@ $button-colors:
     $button-color-disabled,
     darken($button-color-disabled-border, 2%),
     darken($button-color-disabled-border, 5%),
-    1px solid $button-color-disabled-border,
+    2px solid $button-color-disabled-border,
     transparent,
     transparent,
   ),
@@ -41,7 +41,7 @@ $button-colors:
     $button-color-placeholder,
     darken($button-color-placeholder-border, 5%),
     lighten($button-color-placeholder-border, 5%),
-    1px solid $button-color-placeholder-border,
+    2px solid $button-color-placeholder-border,
     transparent,
     transparent,
   );