[add] Button component

README.md

@@ -53,6 +53,7 @@ Exported modules:
 
 * Components
   * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
+  * [`Button`](docs/components/Button.md)
   * [`Image`](docs/components/Image.md)
   * [`ListView`](docs/components/ListView.md)
   * [`ProgressBar`](docs/components/ProgressBar.md)

docs/components/Button.md

@@ -0,0 +1,39 @@
+# Button
+
+A basic button component. Supports a minimal level of customization. You can
+build your own custom button using `TouchableOpacity` or
+`TouchableNativeFeedback`.
+
+## Props
+
+**accessibilityLabel**: string
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+**color**: string
+
+Background color of the button.
+
+**disabled**: bool = false
+
+If true, disable all interactions for this component
+
+**onPress**: function
+
+This function is called on press.
+
+**title**: string
+
+Text to display inside the button.
+
+## Examples
+
+```js
+<Button
+  accessibilityLabel="Learn more about this purple button"
+  color="#841584"
+  onPress={onPressLearnMore}
+  title="Learn More"
+/>
+```

examples/components/Button/ButtonExample.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { action, storiesOf } from '@kadira/storybook';
+import { Button, StyleSheet, View } from 'react-native';
+
+const onButtonPress = action('Button has been pressed!');
+
+const examples = [
+  {
+    title: 'Simple Button',
+    description: 'The title and onPress handler are required. It is ' +
+      'recommended to set accessibilityLabel to help make your app usable by ' +
+      'everyone.',
+    render: function() {
+      return (
+        <Button
+          onPress={onButtonPress}
+          title="Press Me"
+          accessibilityLabel="See an informative alert"
+        />
+      );
+    },
+  },
+  {
+    title: 'Adjusted color',
+    description: 'Adjusts the color in a way that looks standard on each ' +
+      'platform. On iOS, the color prop controls the color of the text. On ' +
+      'Android, the color adjusts the background color of the button.',
+    render: function() {
+      return (
+        <Button
+          onPress={onButtonPress}
+          title="Press Purple"
+          color="#841584"
+          accessibilityLabel="Learn more about purple"
+        />
+      );
+    },
+  },
+  {
+    title: 'Fit to text layout',
+    description: 'This layout strategy lets the title define the width of ' +
+      'the button',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Button
+            onPress={onButtonPress}
+            title="This looks great!"
+            accessibilityLabel="This sounds great!"
+          />
+          <Button
+            onPress={onButtonPress}
+            title="Ok!"
+            color="#841584"
+            accessibilityLabel="Ok, Great!"
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Disabled Button',
+    description: 'All interactions for the component are disabled.',
+    render: function() {
+      return (
+        <Button
+          disabled
+          onPress={onButtonPress}
+          title="I Am Disabled"
+          accessibilityLabel="See an informative alert"
+        />
+      );
+    },
+  },
+];
+
+examples.forEach((example) => {
+  storiesOf('component: Button', module)
+    .add(example.title, () => example.render());
+});

src/components/Button/__tests__/index-test.js

@@ -0,0 +1,5 @@
+/* eslint-env jasmine, jest */
+
+describe('components/Button', () => {
+  test.skip('NO TEST COVERAGE', () => {});
+});

src/components/Button/index.js

@@ -0,0 +1,66 @@
+import ColorPropType from '../../propTypes/ColorPropType';
+import React, { Component, PropTypes } from 'react';
+import StyleSheet from '../../apis/StyleSheet';
+import TouchableOpacity from '../Touchable/TouchableOpacity';
+import Text from '../Text';
+
+class Button extends Component {
+  static propTypes = {
+    accessibilityLabel: PropTypes.string,
+    color: ColorPropType,
+    disabled: PropTypes.bool,
+    onPress: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired
+  };
+
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      disabled,
+      onPress,
+      title
+    } = this.props;
+
+    return (
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole={'button'}
+        disabled={disabled}
+        onPress={onPress}
+        style={[
+          styles.button,
+          color && { backgroundColor: color },
+          disabled && styles.buttonDisabled
+        ]}>
+        <Text style={[
+          styles.text,
+          disabled && styles.textDisabled
+        ]}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#2196F3',
+    borderRadius: 2
+  },
+  text: {
+    textAlign: 'center',
+    color: '#fff',
+    padding: 8,
+    fontWeight: '500'
+  },
+  buttonDisabled: {
+    backgroundColor: '#dfdfdf'
+  },
+  textDisabled: {
+    color: '#a1a1a1'
+  }
+});
+
+module.exports = Button;

src/index.js

@@ -24,6 +24,7 @@ import Vibration from './apis/Vibration';
 
 // components
 import ActivityIndicator from './components/ActivityIndicator';
+import Button from './components/Button';
 import Image from './components/Image';
 import ListView from './components/ListView';
 import ProgressBar from './components/ProgressBar';
@@ -72,6 +73,7 @@ const ReactNative = {
 
   // components
   ActivityIndicator,
+  Button,
   Image,
   ListView,
   ProgressBar,