@holper/react-native-holper-storybook 0.6.58 → 0.6.60

package/lib/components/Button/index.js

@@ -91,7 +91,6 @@ Button.propTypes = {
     'brightblue',
     'inverted',
     'error',
-    'highlight',
   ]),
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
   style: ViewPropTypes.style,

package/lib/components/Button/style.js

@@ -22,9 +22,9 @@ export default {
   },
   // Variants
   primary: {
-    borderColor: Colors.green,
-    backgroundColor: Colors.green,
-    shadowColor: Colors.green,
+    borderColor: Colors.darkgray,
+    backgroundColor: Colors.darkgray,
+    shadowColor: Colors.darkgray,
   },
   secondary: {
     borderColor: Colors.lightblue,
@@ -47,20 +47,15 @@ export default {
     shadowColor: Colors.brightblue,
   },
   inverted: {
-    borderColor: Colors.darkgray,
-    backgroundColor: Colors.darkgray,
-    shadowColor: Colors.darkgray,
+    borderColor: Colors.violet,
+    backgroundColor: Colors.violet,
+    shadowColor: Colors.violet,
   },
   error: {
     borderColor: Colors.red,
     backgroundColor: Colors.red,
     shadowColor: Colors.red,
   },
-  highlight: {
-    borderColor: Colors.violet,
-    backgroundColor: Colors.violet,
-    shadowColor: Colors.violet,
-  },
   // Bordered
   bordered: {
     shadowColor: Colors.transparent,

package/lib/components/ConfirmationModal/index.js

@@ -27,6 +27,7 @@ const ConfirmationModal = ({
   alertMode,
   infoMode,
   inverted,
+  isPrime,
   children,
 }) => (
   <Modal
@@ -83,7 +84,7 @@ const ConfirmationModal = ({
                     variant={inverted ? 'inverted' : 'primary'}
                     onPress={onConfirm}
                   >
-                    <Text size='large' color='white'>
+                    <Text size='large' color={isPrime ? 'gold' : 'white'}>
                       {confirmText}
                     </Text>
                   </Button>
@@ -93,7 +94,7 @@ const ConfirmationModal = ({
                       <Button
                         size='small'
                         bordered
-                        variant='inverted'
+                        variant={inverted ? 'inverted' : 'primary'}
                         onPress={onCancel}
                       >
                         <Text size='large'>{cancelText}</Text>
@@ -104,7 +105,7 @@ const ConfirmationModal = ({
                       size={onCancel ? 'small' : 'fit'}
                       onPress={onConfirm}
                     >
-                      <Text size='large' color='white'>
+                      <Text size='large' color={isPrime ? 'gold' : 'white'}>
                         {confirmText}
                       </Text>
                     </Button>
@@ -131,6 +132,7 @@ ConfirmationModal.defaultProps = {
   closeButton: false,
   infoMode: false,
   inverted: false,
+  isPrime: false,
   children: null,
 };
 
@@ -146,6 +148,7 @@ ConfirmationModal.propTypes = {
   closeButton: PropTypes.bool,
   infoMode: PropTypes.bool,
   inverted: PropTypes.bool,
+  isPrime: PropTypes.bool,
   children: PropTypes.node,
 };
 

package/lib/components/Footer/index.js

@@ -6,8 +6,8 @@ import { Colors } from '../../configs/constants';
 import Text from '../Text';
 import style from './style';
 
-const Footer = ({ inverted, tabs }) => {
-  const renderTab = () => (
+const Footer = ({ inverted, tabs, isPrime }) => {
+  const renderTab = () =>
     tabs.map((tab, index) => (
       <TouchableOpacity
         key={`tab-${index}`}
@@ -17,24 +17,25 @@ const Footer = ({ inverted, tabs }) => {
         <Ionicons
           name={tab.icon}
           size={20}
-          color={inverted ? Colors.white : Colors.darkblue}
+          color={isPrime ? Colors.gold : Colors.white}
         />
-        <Text color={inverted ? 'white' : 'dark'} size='small'>{tab.text}</Text>
-        {(tab.badge && tab.badge > 0) && (
+        <Text color={isPrime ? 'gold' : 'white'} size='small'>
+          {tab.text}
+        </Text>
+        {tab.badge && tab.badge > 0 && (
           <View style={style.badge}>
-            <Text color='white' size='tiny' weight='semiBold' align='center'>{tab.badge > 9 ? '+9' : tab.badge }</Text>
+            <Text color='white' size='tiny' weight='semiBold' align='center'>
+              {tab.badge > 9 ? '+9' : tab.badge}
+            </Text>
           </View>
         )}
       </TouchableOpacity>
-    ))
-  );
+    ));
 
   return (
     <View
-      style={[
-        style.footerContainer,
-        style[inverted ? 'inverted' : 'default']
-      ]}>
+      style={[style.footerContainer, style[inverted ? 'inverted' : 'default']]}
+    >
       {renderTab()}
     </View>
   );
@@ -42,17 +43,21 @@ const Footer = ({ inverted, tabs }) => {
 
 Footer.defaultProps = {
   inverted: false,
-  tabs: []
+  isPrime: false,
+  tabs: [],
 };
 
 Footer.propTypes = {
   inverted: PropTypes.bool,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    onPress: PropTypes.func,
-    text: PropTypes.string,
-    icon: PropTypes.string,
-    badge: PropTypes.number
-  }))
+  isPrime: PropTypes.bool,
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      onPress: PropTypes.func,
+      text: PropTypes.string,
+      icon: PropTypes.string,
+      badge: PropTypes.number,
+    })
+  ),
 };
 
-export default Footer;
+export default Footer;

package/lib/components/Footer/style.js

@@ -11,20 +11,20 @@ export default {
     paddingHorizontal: 15,
     flexDirection: 'row',
     justifyContent: 'space-around',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   default: {
-    backgroundColor: Colors.white,
-    borderTopColor: Colors.lightblue,
-    borderTopWidth: 1
+    backgroundColor: Colors.darkgray,
+    borderTopColor: Colors.darkblue,
+    borderTopWidth: 1,
   },
   inverted: {
-    backgroundColor: Colors.darkgray
+    backgroundColor: Colors.violet,
   },
   tab: {
     flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   badge: {
     position: 'absolute',
@@ -34,6 +34,6 @@ export default {
     height: 18,
     width: 18,
     borderRadius: 9,
-    justifyContent: 'center'
-  }
+    justifyContent: 'center',
+  },
 };

package/lib/components/Header/index.js

@@ -1,22 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, TouchableOpacity, Image } from 'react-native';
-import {ImagePropTypes} from 'deprecated-react-native-prop-types';
+import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { Colors } from '../../configs/constants';
 import style from './style';
 
-const Header = ({ inverted, logo, right, onMenuPress }) => (
+const Header = ({ inverted, logo, right, onMenuPress, isPrime }) => (
   <View
-    style={[
-      style.headerContainer,
-      style[inverted ? 'inverted' : 'default']
-    ]}>
+    style={[style.headerContainer, style[inverted ? 'inverted' : 'default']]}
+  >
     <TouchableOpacity onPress={onMenuPress}>
       <Ionicons
         name='menu-outline'
         size={30}
-        color={inverted ? Colors.white : Colors.darkblue}
+        color={isPrime ? Colors.gold : Colors.white}
       />
     </TouchableOpacity>
     <View style={style.imageContainer}>
@@ -33,16 +31,18 @@ const Header = ({ inverted, logo, right, onMenuPress }) => (
 
 Header.defaultProps = {
   inverted: false,
+  isPrime: false,
   logo: null,
   right: null,
-  onMenuPress: () => {}
+  onMenuPress: () => {},
 };
 
 Header.propTypes = {
   inverted: PropTypes.bool,
+  isPrime: PropTypes.bool,
   logo: ImagePropTypes.source.isRequired,
   right: PropTypes.node,
-  onMenuPress: PropTypes.func
+  onMenuPress: PropTypes.func,
 };
 
 export default Header;

package/lib/components/Header/style.js

@@ -11,23 +11,23 @@ export default {
     paddingHorizontal: 15,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   default: {
-    backgroundColor: Colors.white,
-    borderBottomColor: Colors.lightblue,
-    borderBottomWidth: 1
+    backgroundColor: Colors.darkgray,
+    borderBottomColor: Colors.darkblue,
+    borderBottomWidth: 1,
   },
   inverted: {
-    backgroundColor: Colors.darkgray
+    backgroundColor: Colors.violet,
   },
   imageContainer: {
     height: 40,
-    flex: 1
+    flex: 1,
   },
   imageResponsive: {
     height: undefined,
     width: undefined,
-    flex: 1
+    flex: 1,
   },
 };

package/lib/components/Text/index.js

@@ -42,15 +42,16 @@ Text.defaultProps = {
 
 Text.propTypes = {
   color: PropTypes.oneOf([
+    'brightblue',
     'dark',
+    'gold',
+    'green',
     'light',
     'lighter',
-    'white',
-    'green',
     'red',
-    'yellow',
     'violet',
-    'brightblue',
+    'white',
+    'yellow',
   ]),
   variant: PropTypes.oneOf(['default', 'lowercase', 'uppercase']),
   size: PropTypes.oneOf([

package/lib/components/Text/style.js

@@ -29,6 +29,9 @@ export default {
   brightblue: {
     color: Colors.brightblue,
   },
+  gold: {
+    color: Colors.gold,
+  },
   // variants
   lowercase: {
     textTransform: 'lowercase',

package/lib/configs/constants.js

@@ -23,6 +23,7 @@ export const Colors = {
   // Yellow
   lightyellow: '#F3F2D3',
   yellow: '#FDD100',
+  gold: '#D4AF37',
 };
 
 export const ConstantsWS = Object.freeze({

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.58",
+  "version": "0.6.60",
   "license": "MIT",
   "files": [
     "lib",