@holper/react-native-holper-storybook 0.6.57 → 0.6.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/components/Button/index.js +0 -1
  2. package/lib/components/Button/style.js +6 -11
  3. package/lib/components/Footer/index.js +25 -20
  4. package/lib/components/Footer/style.js +8 -8
  5. package/lib/components/Header/index.js +9 -9
  6. package/lib/components/Header/style.js +7 -7
  7. package/lib/components/Text/index.js +5 -4
  8. package/lib/components/Text/style.js +3 -0
  9. package/lib/configs/constants.js +3 -0
  10. package/package.json +1 -1
package/lib/components/Button/index.js CHANGED
@@ -91,7 +91,6 @@ Button.propTypes = {
91
91
  'brightblue',
92
92
  'inverted',
93
93
  'error',
94
- 'highlight',
95
94
  ]),
96
95
  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
97
96
  style: ViewPropTypes.style,
package/lib/components/Button/style.js CHANGED
@@ -22,9 +22,9 @@ export default {
22
22
  },
23
23
  // Variants
24
24
  primary: {
25
- borderColor: Colors.green,
26
- backgroundColor: Colors.green,
27
- shadowColor: Colors.green,
25
+ borderColor: Colors.darkgray,
26
+ backgroundColor: Colors.darkgray,
27
+ shadowColor: Colors.darkgray,
28
28
  },
29
29
  secondary: {
30
30
  borderColor: Colors.lightblue,
@@ -47,20 +47,15 @@ export default {
47
47
  shadowColor: Colors.brightblue,
48
48
  },
49
49
  inverted: {
50
- borderColor: Colors.darkgray,
51
- backgroundColor: Colors.darkgray,
52
- shadowColor: Colors.darkgray,
50
+ borderColor: Colors.violet,
51
+ backgroundColor: Colors.violet,
52
+ shadowColor: Colors.violet,
53
53
  },
54
54
  error: {
55
55
  borderColor: Colors.red,
56
56
  backgroundColor: Colors.red,
57
57
  shadowColor: Colors.red,
58
58
  },
59
- highlight: {
60
- borderColor: Colors.violet,
61
- backgroundColor: Colors.violet,
62
- shadowColor: Colors.violet,
63
- },
64
59
  // Bordered
65
60
  bordered: {
66
61
  shadowColor: Colors.transparent,
package/lib/components/Footer/index.js CHANGED
@@ -6,8 +6,8 @@ import { Colors } from '../../configs/constants';
6
6
  import Text from '../Text';
7
7
  import style from './style';
8
8
 
9
- const Footer = ({ inverted, tabs }) => {
10
- const renderTab = () => (
9
+ const Footer = ({ inverted, tabs, isPrime }) => {
10
+ const renderTab = () =>
11
11
  tabs.map((tab, index) => (
12
12
  <TouchableOpacity
13
13
  key={`tab-${index}`}
@@ -17,24 +17,25 @@ const Footer = ({ inverted, tabs }) => {
17
17
  <Ionicons
18
18
  name={tab.icon}
19
19
  size={20}
20
- color={inverted ? Colors.white : Colors.darkblue}
20
+ color={isPrime ? Colors.gold : Colors.white}
21
21
  />
22
- <Text color={inverted ? 'white' : 'dark'} size='small'>{tab.text}</Text>
23
- {(tab.badge && tab.badge > 0) && (
22
+ <Text color={isPrime ? 'gold' : 'white'} size='small'>
23
+ {tab.text}
24
+ </Text>
25
+ {tab.badge && tab.badge > 0 && (
24
26
  <View style={style.badge}>
25
- <Text color='white' size='tiny' weight='semiBold' align='center'>{tab.badge > 9 ? '+9' : tab.badge }</Text>
27
+ <Text color='white' size='tiny' weight='semiBold' align='center'>
28
+ {tab.badge > 9 ? '+9' : tab.badge}
29
+ </Text>
26
30
  </View>
27
31
  )}
28
32
  </TouchableOpacity>
29
- ))
30
- );
33
+ ));
31
34
 
32
35
  return (
33
36
  <View
34
- style={[
35
- style.footerContainer,
36
- style[inverted ? 'inverted' : 'default']
37
- ]}>
37
+ style={[style.footerContainer, style[inverted ? 'inverted' : 'default']]}
38
+ >
38
39
  {renderTab()}
39
40
  </View>
40
41
  );
@@ -42,17 +43,21 @@ const Footer = ({ inverted, tabs }) => {
42
43
 
43
44
  Footer.defaultProps = {
44
45
  inverted: false,
45
- tabs: []
46
+ isPrime: false,
47
+ tabs: [],
46
48
  };
47
49
 
48
50
  Footer.propTypes = {
49
51
  inverted: PropTypes.bool,
50
- tabs: PropTypes.arrayOf(PropTypes.shape({
51
- onPress: PropTypes.func,
52
- text: PropTypes.string,
53
- icon: PropTypes.string,
54
- badge: PropTypes.number
55
- }))
52
+ isPrime: PropTypes.bool,
53
+ tabs: PropTypes.arrayOf(
54
+ PropTypes.shape({
55
+ onPress: PropTypes.func,
56
+ text: PropTypes.string,
57
+ icon: PropTypes.string,
58
+ badge: PropTypes.number,
59
+ })
60
+ ),
56
61
  };
57
62
 
58
- export default Footer;
63
+ export default Footer;
package/lib/components/Footer/style.js CHANGED
@@ -11,20 +11,20 @@ export default {
11
11
  paddingHorizontal: 15,
12
12
  flexDirection: 'row',
13
13
  justifyContent: 'space-around',
14
- alignItems: 'center'
14
+ alignItems: 'center',
15
15
  },
16
16
  default: {
17
- backgroundColor: Colors.white,
18
- borderTopColor: Colors.lightblue,
19
- borderTopWidth: 1
17
+ backgroundColor: Colors.darkgray,
18
+ borderTopColor: Colors.darkblue,
19
+ borderTopWidth: 1,
20
20
  },
21
21
  inverted: {
22
- backgroundColor: Colors.darkgray
22
+ backgroundColor: Colors.violet,
23
23
  },
24
24
  tab: {
25
25
  flexDirection: 'column',
26
26
  justifyContent: 'center',
27
- alignItems: 'center'
27
+ alignItems: 'center',
28
28
  },
29
29
  badge: {
30
30
  position: 'absolute',
@@ -34,6 +34,6 @@ export default {
34
34
  height: 18,
35
35
  width: 18,
36
36
  borderRadius: 9,
37
- justifyContent: 'center'
38
- }
37
+ justifyContent: 'center',
38
+ },
39
39
  };
package/lib/components/Header/index.js CHANGED
@@ -1,22 +1,20 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { View, TouchableOpacity, Image } from 'react-native';
4
- import {ImagePropTypes} from 'deprecated-react-native-prop-types';
4
+ import { ImagePropTypes } from 'deprecated-react-native-prop-types';
5
5
  import Ionicons from 'react-native-vector-icons/Ionicons';
6
6
  import { Colors } from '../../configs/constants';
7
7
  import style from './style';
8
8
 
9
- const Header = ({ inverted, logo, right, onMenuPress }) => (
9
+ const Header = ({ inverted, logo, right, onMenuPress, isPrime }) => (
10
10
  <View
11
- style={[
12
- style.headerContainer,
13
- style[inverted ? 'inverted' : 'default']
14
- ]}>
11
+ style={[style.headerContainer, style[inverted ? 'inverted' : 'default']]}
12
+ >
15
13
  <TouchableOpacity onPress={onMenuPress}>
16
14
  <Ionicons
17
15
  name='menu-outline'
18
16
  size={30}
19
- color={inverted ? Colors.white : Colors.darkblue}
17
+ color={isPrime ? Colors.gold : Colors.white}
20
18
  />
21
19
  </TouchableOpacity>
22
20
  <View style={style.imageContainer}>
@@ -33,16 +31,18 @@ const Header = ({ inverted, logo, right, onMenuPress }) => (
33
31
 
34
32
  Header.defaultProps = {
35
33
  inverted: false,
34
+ isPrime: false,
36
35
  logo: null,
37
36
  right: null,
38
- onMenuPress: () => {}
37
+ onMenuPress: () => {},
39
38
  };
40
39
 
41
40
  Header.propTypes = {
42
41
  inverted: PropTypes.bool,
42
+ isPrime: PropTypes.bool,
43
43
  logo: ImagePropTypes.source.isRequired,
44
44
  right: PropTypes.node,
45
- onMenuPress: PropTypes.func
45
+ onMenuPress: PropTypes.func,
46
46
  };
47
47
 
48
48
  export default Header;
package/lib/components/Header/style.js CHANGED
@@ -11,23 +11,23 @@ export default {
11
11
  paddingHorizontal: 15,
12
12
  flexDirection: 'row',
13
13
  justifyContent: 'space-between',
14
- alignItems: 'center'
14
+ alignItems: 'center',
15
15
  },
16
16
  default: {
17
- backgroundColor: Colors.white,
18
- borderBottomColor: Colors.lightblue,
19
- borderBottomWidth: 1
17
+ backgroundColor: Colors.darkgray,
18
+ borderBottomColor: Colors.darkblue,
19
+ borderBottomWidth: 1,
20
20
  },
21
21
  inverted: {
22
- backgroundColor: Colors.darkgray
22
+ backgroundColor: Colors.violet,
23
23
  },
24
24
  imageContainer: {
25
25
  height: 40,
26
- flex: 1
26
+ flex: 1,
27
27
  },
28
28
  imageResponsive: {
29
29
  height: undefined,
30
30
  width: undefined,
31
- flex: 1
31
+ flex: 1,
32
32
  },
33
33
  };
package/lib/components/Text/index.js CHANGED
@@ -42,15 +42,16 @@ Text.defaultProps = {
42
42
 
43
43
  Text.propTypes = {
44
44
  color: PropTypes.oneOf([
45
+ 'brightblue',
45
46
  'dark',
47
+ 'gold',
48
+ 'green',
46
49
  'light',
47
50
  'lighter',
48
- 'white',
49
- 'green',
50
51
  'red',
51
- 'yellow',
52
52
  'violet',
53
- 'brightblue',
53
+ 'white',
54
+ 'yellow',
54
55
  ]),
55
56
  variant: PropTypes.oneOf(['default', 'lowercase', 'uppercase']),
56
57
  size: PropTypes.oneOf([
package/lib/components/Text/style.js CHANGED
@@ -29,6 +29,9 @@ export default {
29
29
  brightblue: {
30
30
  color: Colors.brightblue,
31
31
  },
32
+ gold: {
33
+ color: Colors.gold,
34
+ },
32
35
  // variants
33
36
  lowercase: {
34
37
  textTransform: 'lowercase',
package/lib/configs/constants.js CHANGED
@@ -13,6 +13,8 @@ export const Colors = {
13
13
  midblue: '#727C8E',
14
14
  darkblue: '#515C6F',
15
15
  brightblue: '#00D8FF',
16
+ mediumblue: '#F2F7FE',
17
+ blue: '#2A539C',
16
18
  // Violet
17
19
  violet: '#9980FA',
18
20
  // Reds
@@ -21,6 +23,7 @@ export const Colors = {
21
23
  // Yellow
22
24
  lightyellow: '#F3F2D3',
23
25
  yellow: '#FDD100',
26
+ gold: '#D4AF37',
24
27
  };
25
28
 
26
29
  export const ConstantsWS = Object.freeze({
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "main": "lib/index.js",
3
3
  "name": "@holper/react-native-holper-storybook",
4
4
  "description": "A component library for Holper projects",
5
- "version": "0.6.57",
5
+ "version": "0.6.59",
6
6
  "license": "MIT",
7
7
  "files": [
8
8
  "lib",