feat(native): working button component

p3ol · Jul 23, 2020 · 95e974d · 95e974d
1 parent 4b1b16a
commit 95e974d
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 87 deletions.
diff --git a/packages/junipero-native/lib/Button/index.js b/packages/junipero-native/lib/Button/index.js
@@ -8,8 +8,13 @@ import { TouchableWithoutFeedback, Text, View } from 'react-native';
 
 import styles, {
   primary,
+  secondary,
+  warning,
+  danger,
+  success,
+  basic,
 } from './index.styles';
-import { applyStyles, getIcon } from '../theme';
+import { applyStyles } from '../theme';
 
 const Button = forwardRef(({
   children,
@@ -51,39 +56,20 @@ const Button = forwardRef(({
     setActive(false);
   };
 
-  // const getColor = () => {
-  //   switch (theme) {
-  //     case 'basic':
-  //       setColor(disabled ? colors.alabaster : colors.white);
-  //       break;
-  //     case 'primary':
-  //       setColor(disabled ? colors.powderBlue : colors.easternBlue);
-  //       break;
-  //     case 'secondary':
-  //       setColor(disabled ? colors.powderBlue : colors.persianGreen);
-  //       break;
-  //     case 'warning':
-  //       setColor(disabled ? colors.disabledButtercup : colors.buttercup);
-  //       break;
-  //     case 'danger':
-  //       setColor(disabled ? colors.disabledMonza : colors.monza);
-  //       break;
-  //     case 'success':
-  //       setColor(disabled ? colors.disabledJava : colors.java);
-  //       break;
-  //     default:
-  //       setColor(customStyle?.button?.backgroundColor ||
-  //         disabled ? colors.powderBlue : colors.easternBlue);
-  //       break;
-  //   }
-  // };
-
   const getStyles = () => {
     switch (theme) {
       case 'primary':
         return primary;
+      case 'secondary':
+        return secondary;
+      case 'warning':
+        return warning;
+      case 'danger':
+        return danger;
+      case 'success':
+        return success;
       default:
-        return primary;
+        return basic;
     }
   };
 
@@ -98,6 +84,7 @@ const Button = forwardRef(({
     >
       <View
         { ...rest }
+        testID={theme}
         style={[
           styles.button,
           themeStyles.button,
@@ -127,9 +114,6 @@ const Button = forwardRef(({
         { typeof children === 'string' ? (
           <Text
             style={[
-              styles.title,
-              themeStyles.title,
-              customStyle.title,
               applyStyles(size === 'small', [
                 styles.title__small,
                 customStyle.title__small,
@@ -138,27 +122,16 @@ const Button = forwardRef(({
                 styles.title__big,
                 customStyle.title__big,
               ]),
+              styles.title,
+              themeStyles.title,
+              customStyle.title,
               applyStyles(outline, [
                 themeStyles.title__outline,
                 customStyle.title__outline,
               ]),
             ]}
           >
             { children }
-            {/* {
-              React.Children.map(children, child => {
-                if (child?.props?.icon) {
-                  const icon = getIcon(child?.props?.icon);
-                  return React.cloneElement(
-                    child,
-                    { style: styles.icon, ...child.props.style },
-                    icon,
-                  );
-                } else {
-                  return child;
-                }
-              })
-            } */}
           </Text>
         ) : children }
       </View>

diff --git a/packages/junipero-native/lib/Button/index.stories.js b/packages/junipero-native/lib/Button/index.stories.js
@@ -13,7 +13,7 @@ export const basic = () => (
     <p><Button outline theme='basic'>Outline</Button></p>
     <p>
       <Button theme='basic'>
-        <Text style={fontStyles}>{'\u{e900}'}</Text>
+        <Text style={fontStyles}>check</Text>
         <Text>With icon</Text>
       </Button>
     </p>
@@ -43,7 +43,12 @@ export const secondary = () => (
     <p><Button theme='secondary'>Default</Button></p>
     <p><Button disabled theme='secondary'>Disabled</Button></p>
     <p><Button outline theme='secondary'>Outline</Button></p>
-    <p><Button theme='secondary'><Text icon='visibility'/>With icon</Button></p>
+    <p>
+      <Button theme='secondary'>
+        <Text style={fontStyles}>check</Text>
+        <Text>With icon</Text>
+      </Button>
+    </p>
     <p><Button size='big' theme='secondary'>Big</Button></p>
     <p><Button size='small' theme='secondary'>Small</Button></p>
   </React.Fragment>
@@ -54,7 +59,12 @@ export const warning = () => (
     <p><Button theme='warning'>Default</Button></p>
     <p><Button disabled theme='warning'>Disabled</Button></p>
     <p><Button outline theme='warning'>Outline</Button></p>
-    <p><Button theme='warning'><Text icon='visibility'/>With icon</Button></p>
+    <p>
+      <Button theme='warning'>
+        <Text style={fontStyles}>check</Text>
+        <Text>With icon</Text>
+      </Button>
+    </p>
     <p><Button size='big' theme='warning'>Big</Button></p>
     <p><Button size='small' theme='warning'>Small</Button></p>
   </React.Fragment>
@@ -65,7 +75,12 @@ export const danger = () => (
     <p><Button theme='danger'>Dafault</Button></p>
     <p><Button disabled theme='danger'>Disabled</Button></p>
     <p><Button outline theme='danger'>Outline</Button></p>
-    <p><Button theme='danger'><Text icon='visibility'/>With icon</Button></p>
+    <p>
+      <Button theme='danger'>
+        <Text style={fontStyles}>check</Text>
+        <Text>With icon</Text>
+      </Button>
+    </p>
     <p><Button size='big' theme='danger'>Big</Button></p>
     <p><Button size='small' theme='danger'>Small</Button></p>
   </React.Fragment>
@@ -76,35 +91,13 @@ export const success = () => (
     <p><Button theme='success'>Default</Button></p>
     <p><Button disabled theme='success'>Disabled</Button></p>
     <p><Button outline theme='success'>Outline</Button></p>
-    <p><Button theme='success'><Text icon='visibility'/>With icon</Button></p>
+    <p>
+      <Button theme='success'>
+        <Text style={fontStyles}>check</Text>
+        <Text>With icon</Text>
+      </Button>
+    </p>
     <p><Button size='big' theme='success'>Big</Button></p>
     <p><Button size='small' theme='success'>Small</Button></p>
   </React.Fragment>
 );
-
-export const custom = () => (
-  <React.Fragment>
-    <p><Button customStyle={customStyles}>
-      Default
-    </Button></p>
-    <p><Button disabled customStyle={customStyles}>
-      Disabled
-    </Button></p>
-    <p><Button outline customStyle={customStyles}>
-      Outline
-    </Button></p>
-    <p><Button customStyle={customStyles}>
-      With icon
-    </Button></p>
-    <p><Button size='big' customStyle={customStyles}>
-      Big
-    </Button></p>
-    <p><Button size='small' customStyle={customStyles}>
-      Small
-    </Button></p>
-  </React.Fragment>
-);
-
-const customStyles = {
-  button: { backgroundColor: 'purple' },
-};
diff --git a/packages/junipero-native/lib/Button/index.styles.js b/packages/junipero-native/lib/Button/index.styles.js
@@ -29,20 +29,17 @@ export default StyleSheet.create({
   },
   title: {
     ...commons.defaultFont,
-    color: '#fff',
     fontSize: 16,
     fontWeight: 'bold',
 
   },
   title__big: {
     ...commons.defaultFont,
-    color: '#fff',
     fontSize: 20,
     fontWeight: 'bold',
   },
   title__small: {
     ...commons.defaultFont,
-    color: '#fff',
     fontSize: 14,
     fontWeight: 'bold',
   },
@@ -74,3 +71,118 @@ export const primary = {
     color: colors.easternBlue,
   },
 };
+
+export const secondary = {
+  button: {
+    backgroundColor: colors.persianGreen,
+  },
+  button__active: {
+    backgroundColor: '#0e6176',
+  },
+  button__disabled: {
+    backgroundColor: colors.powderBlue,
+  },
+  button__outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.persianGreen,
+    borderWidth: 1,
+  },
+  title: {
+    color: colors.white,
+  },
+  title__outline: {
+    color: colors.persianGreen,
+  },
+};
+
+export const warning = {
+  button: {
+    backgroundColor: colors.buttercup,
+  },
+  button__active: {
+    backgroundColor: '#dc8d0a',
+  },
+  button__disabled: {
+    backgroundColor: colors.disabledButtercup,
+  },
+  button__outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.buttercup,
+    borderWidth: 1,
+  },
+  title: {
+    color: colors.white,
+  },
+  title__outline: {
+    color: colors.buttercup,
+  },
+};
+
+export const danger = {
+  button: {
+    backgroundColor: colors.monza,
+  },
+  button__active: {
+    backgroundColor: '#b70002',
+  },
+  button__disabled: {
+    backgroundColor: colors.disabledMonza,
+  },
+  button__outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.monza,
+    borderWidth: 1,
+  },
+  title: {
+    color: colors.white,
+  },
+  title__outline: {
+    color: colors.monza,
+  },
+};
+
+export const success = {
+  button: {
+    backgroundColor: colors.java,
+  },
+  button__active: {
+    backgroundColor: '#08b790',
+  },
+  button__disabled: {
+    backgroundColor: colors.disabledJava,
+  },
+  button__outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.java,
+    borderWidth: 1,
+  },
+  title: {
+    color: colors.white,
+  },
+  title__outline: {
+    color: colors.java,
+  },
+};
+
+export const basic = {
+  button: {
+    backgroundColor: colors.white,
+  },
+  button__active: {
+    backgroundColor: colors.alabaster,
+  },
+  button__disabled: {
+    backgroundColor: colors.alabaster,
+  },
+  button__outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.alabaster,
+    borderWidth: 1,
+  },
+  title: {
+    color: colors.midnight,
+  },
+  title__outline: {
+    color: colors.midnight,
+  },
+};
diff --git a/packages/junipero-native/lib/Button/index.test.js b/packages/junipero-native/lib/Button/index.test.js
@@ -7,12 +7,32 @@ import Button from './';
 
 describe('<Button />', () => {
 
-  it('should render', async () => {
-    const { getByTestId } = render(<Button>Click</Button>);
-    await wait(() => getByTestId('Button'));
-    expect(getByTestId('Button')).toBeDefined();
-    fireEvent.press(getByTestId('Button'));
-
+  it('should render all different themes', async () => {
+    const { getByTestId } = render(
+      <React.Fragment>
+        <Button testID="press" theme="basic">Click</Button>
+        <Button theme="primary">Click</Button>
+        <Button theme="secondary">Click</Button>
+        <Button theme="warning">Click</Button>
+        <Button theme="danger">Click</Button>
+        <Button theme="success">Click</Button>
+      </React.Fragment>
+    );
+    await wait(() => {
+      getByTestId('basic');
+      getByTestId('primary');
+      getByTestId('secondary');
+      getByTestId('warning');
+      getByTestId('danger');
+      getByTestId('success');
+    });
+    expect(getByTestId('basic')).toBeDefined();
+    expect(getByTestId('primary')).toBeDefined();
+    expect(getByTestId('secondary')).toBeDefined();
+    expect(getByTestId('warning')).toBeDefined();
+    expect(getByTestId('danger')).toBeDefined();
+    expect(getByTestId('success')).toBeDefined();
+    fireEvent.press(getByTestId('press'));
   });
 
   it('should fire onPress event by clicking the button', async () => {