etendo-ui-library 1.0.80 → 1.0.82

package/components/button/Button.stories.tsx

@@ -6,7 +6,7 @@ import {View} from 'react-native';
 import {styles} from './Button.styles';
 import addMarginContainer from '../../helpers/addMargin';
 import {CheckIcon} from '../../assets/images/icons/CheckIcon';
-import {WHITE} from '../../styles/colors';
+import { NEUTRALS_0 } from '../../styles/colors';
 
 const meta: Meta = {
   title: 'Etendo/Button',
@@ -29,7 +29,7 @@ const Template1: Story<ButtonProps> = args => (
         onPress={() => {}}
         image={
           <CheckIcon
-            fill={WHITE}
+            fill={NEUTRALS_0}
             style={{
               marginRight: 10,
               width: 12,

package/components/button/Button.styles.tsx

@@ -1,19 +1,11 @@
 import {StyleSheet} from 'react-native';
-import {
-  BLUE,
-  GREY_BLUE_50,
-  PURPLE_10,
-  PURPLE_50,
-  WHITE,
-  YELLOW,
-  YELLOW_30,
-} from '../../styles/colors';
+import { NEUTRALS_0, PRIMARY_100, QUATERNARY_10, QUATERNARY_50, SECONDARY_100, SECONDARY_30, TERTIARY_50 } from '../../styles/colors';
 import {buttonStyleVariant} from './Button.types';
 
 export const ButtonStyleVariant: buttonStyleVariant = {
   primary: {
     container: {
-      backgroundColor: BLUE,
+      backgroundColor: PRIMARY_100,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
@@ -22,25 +14,25 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: WHITE,
+      color: NEUTRALS_0,
       fontWeight: '600',
     },
     containerDisabled: {
-      backgroundColor: GREY_BLUE_50,
+      backgroundColor: QUATERNARY_50,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
     },
     textDisabled: {
-      color: WHITE,
+      color: NEUTRALS_0,
       fontWeight: 'bold',
     },
-    imageColor: WHITE,
+    imageColor: NEUTRALS_0,
   },
   secondary: {
     container: {
-      backgroundColor: YELLOW,
+      backgroundColor: SECONDARY_100,
       borderRadius: 5,
       flexDirection: 'row',
       alignItems: 'center',
@@ -48,25 +40,25 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: BLUE,
+      color: PRIMARY_100,
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: YELLOW_30,
+      backgroundColor: SECONDARY_30,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
     },
     textDisabled: {
-      color: GREY_BLUE_50,
+      color: QUATERNARY_50,
       fontWeight: 'bold',
     },
-    imageColor: BLUE,
+    imageColor: PRIMARY_100,
   },
   terciary: {
     container: {
-      backgroundColor: PURPLE_50,
+      backgroundColor: QUATERNARY_50,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
@@ -74,55 +66,55 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: BLUE,
+      color: PRIMARY_100,
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: PURPLE_10,
+      backgroundColor: QUATERNARY_10,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
     },
     textDisabled: {
-      color: GREY_BLUE_50,
+      color: TERTIARY_50,
       fontWeight: 'bold',
     },
-    imageColor: BLUE,
+    imageColor: PRIMARY_100,
   },
   whiteBorder: {
     container: {
-      backgroundColor: WHITE,
+      backgroundColor: NEUTRALS_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
-      borderColor: BLUE,
+      borderColor: PRIMARY_100,
       justifyContent: 'center',
       alignItems: 'center',
       padding: 24,
     },
     text: {
-      color: BLUE,
+      color: PRIMARY_100,
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: WHITE,
+      backgroundColor: NEUTRALS_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
-      borderColor: GREY_BLUE_50,
+      borderColor: TERTIARY_50,
       justifyContent: 'center',
       alignItems: 'center',
     },
     textDisabled: {
-      color: GREY_BLUE_50,
+      color: TERTIARY_50,
       fontWeight: 'bold',
     },
-    imageColor: BLUE,
+    imageColor: PRIMARY_100,
   },
   white: {
     container: {
-      backgroundColor: WHITE,
+      backgroundColor: NEUTRALS_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
@@ -130,21 +122,21 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: BLUE,
+      color: PRIMARY_100,
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: WHITE,
+      backgroundColor: NEUTRALS_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
     },
     textDisabled: {
-      color: GREY_BLUE_50,
+      color: TERTIARY_50,
       fontWeight: 'bold',
     },
-    imageColor: BLUE,
+    imageColor: PRIMARY_100,
   },
 };
 

package/components/button/Button.tsx

@@ -1,13 +1,6 @@
 import React, {useState} from 'react';
 import {Pressable, Text, View} from 'react-native';
-import {
-  BLUE,
-  BLUE_80,
-  LIGHT_PURPLE_60,
-  PURPLE,
-  WHITE,
-  YELLOW_50,
-} from '../../styles/colors';
+import { NEUTRALS_100, PRIMARY_100, PRIMARY_80, QUATERNARY_100, QUATERNARY_50, SECONDARY_50 } from '../../styles/colors';
 import {ButtonStyleVariant} from './Button.styles';
 import {ButtonProps, ButtonStyleType} from './Button.types';
 
@@ -25,25 +18,25 @@ const Button = ({
   const getHoveredBackgroundColor = (backgroundColor: ButtonStyleType) => {
     switch (backgroundColor) {
       case 'primary':
-        return BLUE_80;
+        return PRIMARY_80;
       case 'secondary':
-        return YELLOW_50;
+        return SECONDARY_50;
       case 'terciary':
-        return LIGHT_PURPLE_60;
+        return QUATERNARY_50;
       case 'whiteBorder':
-        return BLUE;
+        return PRIMARY_100;
     }
   };
   const getHoveredTextColorAndViewColor = (typeStyle: ButtonStyleType) => {
     switch (typeStyle) {
       case 'white':
-        return PURPLE;
+        return QUATERNARY_100;
       case 'whiteBorder':
-        return WHITE;
+        return NEUTRALS_100;
       case 'primary':
-        return WHITE;
+        return NEUTRALS_100;
       default:
-        return BLUE;
+        return PRIMARY_100;
     }
   };
 

package/components/button/__snapshots__/Button.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Running Test for Input Check Button disabled 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#D3D6E1",
+        "backgroundColor": "#DDDFF6",
         "borderRadius": 5,
         "flexDirection": "row",
         "justifyContent": "center",

package/components/cards/cardDropdown/CardDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/react';
-import {View,ScrollView} from 'react-native';
+import {View,ScrollView, Text} from 'react-native';
 import addMarginContainer from '../../../helpers/addMargin';
 import CardDropdown from './CardDropdown';
 import {DeliveryBox} from '../../../assets/images/icons/DeliveryBox';
@@ -8,9 +8,8 @@ import {UsersIcon} from '../../../assets/images/icons/UsersIcon';
 import {Binoculars} from '../../../assets/images/icons/Binoculars';
 import {DocumentIcon} from '../../../assets/images/icons/DocumentIcon';
 import {CardDrpopdownProps} from './CardDropdown.types';
-import CardDropdownSkeleton from './component/CardDropdownSkeleton';
-import CardSkeleton from './component/CardSkeleton';
 import {styles} from './CardDropdown.styles';
+import {styles as stylesTitle} from '../../docs/screens/changelog/ChangeLogScreen.style';
 import { cardDataDropdown } from './CardDropdown.data';
 
 const meta: Meta = {
@@ -26,7 +25,9 @@ const TemplateDefault: Story<CardDrpopdownProps> = args => (
 );
 
 const TemplateVariants: Story<CardDrpopdownProps> = args => (
-  <ScrollView style={[addMarginContainer()]}>
+  <ScrollView  horizontal={true}  style={[addMarginContainer()]}>
+    <ScrollView>
+    <Text style={stylesTitle.title}>Dropdown</Text>
     <View style={styles.cardDropdownStoriesRow}>
       <View style={styles.cardDropdownStoriesContainer}>
         <CardDropdown
@@ -77,12 +78,9 @@ const TemplateVariants: Story<CardDrpopdownProps> = args => (
         />
       </View>
     </View>
+    <Text style={stylesTitle.title}>Card</Text>
     <View
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-      }}
+      style={styles.cardDropdownStoriesRow}
     >
       <View style={styles.cardDropdownStoriesContainer}>
         <CardDropdown
@@ -133,29 +131,57 @@ const TemplateVariants: Story<CardDrpopdownProps> = args => (
         />
       </View>
     </View>
-  </ScrollView>
-);
-const TemplatePlaceholder: Story<CardDrpopdownProps> = args => (
-  <ScrollView style={[styles.cardDropdownStoriesRow,addMarginContainer()]}> 
-    <View style={styles.cardDropdownStoriesSkeletonContainer}>
-      <CardSkeleton styleType={'primary'} />
-    </View>
-    <View style={styles.cardDropdownStoriesSkeletonOptionContainer}>
-      <CardDropdownSkeleton onClose={() => {}} styleType={'primary'} />
-    </View>
-    <View style={styles.cardDropdownStoriesSkeletonContainerBlue}>
-      <CardSkeleton styleType={'secondary'} />
-    </View>
-    <View style={styles.cardDropdownStoriesSkeletonOptionContainerBlue}>
-      <CardDropdownSkeleton onClose={() => {}} styleType={'secondary'} />
+    <Text style={stylesTitle.title}>Placeholder</Text>
+    <View
+      style={styles.cardDropdownStoriesRow}
+    >
+      <View style={styles.cardDropdownStoriesContainer}>
+        <CardDropdown
+          title={'Physical inventory'}
+          image={<DeliveryBox />}
+          route="/home"
+          onPress={route => {}}
+          styleType={'primary'}
+          disabled={false}
+          isDropdown={true}
+        />
+      </View>
+      <View style={styles.cardDropdownStoriesContainer}>
+        <CardDropdown
+          title={'Physical inventory'}
+          image={<DeliveryBox />}
+          route="/home"
+          onPress={route => {}}
+          styleType={'secondary'}
+          disabled={false}
+          isDropdown={true}
+        />
+      </View>
+      <View style={styles.cardDropdownStoriesContainer}>
+        <CardDropdown
+          route="/home"
+          onPress={route => {}}
+          styleType={'primary'}
+          isDropdown={false}
+        />
+      </View>
+      <View style={styles.cardDropdownStoriesContainer}>
+        <CardDropdown
+          route="/home"
+          onPress={route => {}}
+          dataOptions={cardDataDropdown}
+          styleType={'secondary'}
+          isDropdown={false}
+        />
+      </View>
     </View>
+    </ScrollView>
   </ScrollView>
 );
 
 export default meta;
 export const CardDropdownDefault = TemplateDefault.bind({});
 export const CardDropdownVariants = TemplateVariants.bind({});
-export const CardDropdownPlaceholder = TemplatePlaceholder.bind({});
 
 CardDropdownDefault.args = {
   title: 'Physical inventory',

package/components/cards/cardDropdown/CardDropdown.styles.ts

@@ -1,21 +1,20 @@
 import {StyleSheet} from 'react-native';
 import {
-  BLACK,
-  BLACK_TRANSPARENT,
-  BLUE,
-  BLUE_30,
-  BLUE_40,
-  BLUE_50,
-  BLUE_80,
-  GREY_10,
-  GREY_40,
-  GREY_5,
-  GREY_BLUE,
-  GREY_BLUE_30,
-  GREY_BLUE_50,
-  PURPLE_50,
-  WHITE,
-  YELLOW,
+  NEUTRALS_0,
+  NEUTRALS_10,
+  NEUTRALS_100,
+  NEUTRALS_40,
+  NEUTRALS_5,
+  PRIMARY_100,
+  PRIMARY_30,
+  PRIMARY_40,
+  PRIMARY_50,
+  PRIMARY_80,
+  QUATERNARY_50,
+  SECONDARY_100,
+  TERTIARY_100,
+  TERTIARY_30,
+  TERTIARY_50,
 } from '../../../styles/colors';
 import {CardStyleVariant} from './CardDropdown.types';
 
@@ -222,7 +221,7 @@ export const styles = StyleSheet.create({
     borderRadius: 16,
     height: 168,
     overflow: 'hidden',
-    backgroundColor: BLUE,
+    backgroundColor: PRIMARY_100,
   },
   cardDropdownStoriesSkeletonOptionContainer: {
     marginRight: 20,
@@ -237,52 +236,58 @@ export const styles = StyleSheet.create({
     width: 276,
     borderRadius: 16,
     overflow: 'hidden',
-    backgroundColor: BLUE,
+    backgroundColor: PRIMARY_100,
   },
   cardDropdownStoriesContainer: {marginBottom: 20, marginRight: 20},
 });
 
 export const CardVariant: CardStyleVariant = {
   primary: {
-    colorCardContainer: {backgroundColor: WHITE},
-    colorCardImageContainer: {backgroundColor: PURPLE_50},
-    colorCardTitle: {color: BLUE},
-    colorCardOptionContainer: {backgroundColor: WHITE},
-    colorCardOptionHeader: {backgroundColor: BLUE, borderBottomColor: WHITE},
-    colorCardOptionHeaderTitle: {color: WHITE},
-    colorCardItemContainer: {borderBottomColor: GREY_10},
-    colorCardItemTitle: {color: BLUE},
-    colorCardItemDescription: {color: GREY_BLUE},
-    colorCardOptionSkeletonContainer: {borderBottomColor: GREY_10},
-    colorCardItemImageContainer: {backgroundColor: PURPLE_50},
-    colorCardOptionSkeletonItem: GREY_BLUE_30,
-    colorCardOptionSkeletonHeaderItem: BLUE_80,
-    colorCardArrowImageFill: BLUE,
-    colorCardImageFill: BLUE,
-    colorCardImageOptionFill: BLUE,
+    colorCardContainer: {backgroundColor: NEUTRALS_0},
+    colorCardImageContainer: {backgroundColor: QUATERNARY_50},
+    colorCardTitle: {color: PRIMARY_100},
+    colorCardOptionContainer: {backgroundColor: NEUTRALS_0},
+    colorCardOptionHeader: {
+      backgroundColor: PRIMARY_100,
+      borderBottomColor: NEUTRALS_0,
+    },
+    colorCardOptionHeaderTitle: {color: NEUTRALS_0},
+    colorCardItemContainer: {borderBottomColor: NEUTRALS_10},
+    colorCardItemTitle: {color: PRIMARY_100},
+    colorCardItemDescription: {color: TERTIARY_100},
+    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRALS_10},
+    colorCardItemImageContainer: {backgroundColor: QUATERNARY_50},
+    colorCardOptionSkeletonItem: TERTIARY_30,
+    colorCardOptionSkeletonHeaderItem: PRIMARY_80,
+    colorCardArrowImageFill: PRIMARY_100,
+    colorCardImageFill: PRIMARY_100,
+    colorCardImageOptionFill: PRIMARY_100,
   },
   secondary: {
-    colorCardContainer: {backgroundColor: BLUE},
-    colorCardImageContainer: {backgroundColor: BLUE_80},
-    colorCardTitle: {color: WHITE},
-    colorCardOptionContainer: {backgroundColor: BLUE},
-    colorCardOptionHeader: {backgroundColor: BLUE, borderBottomColor: BLACK},
-    colorCardOptionHeaderTitle: {color: WHITE},
-    colorCardItemContainer: {borderBottomColor: BLACK},
-    colorCardItemTitle: {color: WHITE},
-    colorCardItemDescription: {color: GREY_BLUE_50},
-    colorCardOptionSkeletonContainer: {borderBottomColor: BLACK},
-    colorCardItemImageContainer: {backgroundColor: BLUE_80},
-    colorCardOptionSkeletonItem: BLUE_80,
-    colorCardOptionSkeletonHeaderItem: BLUE_80,
-    colorCardArrowImageFill: WHITE,
-    colorCardImageFill: YELLOW,
-    colorCardImageOptionFill: WHITE,
+    colorCardContainer: {backgroundColor: PRIMARY_100},
+    colorCardImageContainer: {backgroundColor: PRIMARY_80},
+    colorCardTitle: {color: NEUTRALS_0},
+    colorCardOptionContainer: {backgroundColor: PRIMARY_100},
+    colorCardOptionHeader: {
+      backgroundColor: PRIMARY_100,
+      borderBottomColor: NEUTRALS_100,
+    },
+    colorCardOptionHeaderTitle: {color: NEUTRALS_0},
+    colorCardItemContainer: {borderBottomColor: NEUTRALS_100},
+    colorCardItemTitle: {color: NEUTRALS_0},
+    colorCardItemDescription: {color: TERTIARY_50},
+    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRALS_0},
+    colorCardItemImageContainer: {backgroundColor: PRIMARY_80},
+    colorCardOptionSkeletonItem: PRIMARY_80,
+    colorCardOptionSkeletonHeaderItem: PRIMARY_80,
+    colorCardArrowImageFill: NEUTRALS_0,
+    colorCardImageFill: SECONDARY_100,
+    colorCardImageOptionFill: NEUTRALS_0,
   },
   disabledPrimary: {
-    colorCardContainer: {backgroundColor: GREY_5},
-    colorCardImageContainer: {backgroundColor: GREY_10},
-    colorCardTitle: {color: GREY_40},
+    colorCardContainer: {backgroundColor: NEUTRALS_5},
+    colorCardImageContainer: {backgroundColor: NEUTRALS_10},
+    colorCardTitle: {color: NEUTRALS_40},
     colorCardOptionContainer: {},
     colorCardOptionHeader: {},
     colorCardOptionHeaderTitle: {},
@@ -293,14 +298,14 @@ export const CardVariant: CardStyleVariant = {
     colorCardItemImageContainer: {},
     colorCardOptionSkeletonItem: '',
     colorCardOptionSkeletonHeaderItem: '',
-    colorCardArrowImageFill: GREY_40,
-    colorCardImageFill: GREY_40,
+    colorCardArrowImageFill: NEUTRALS_40,
+    colorCardImageFill: NEUTRALS_40,
     colorCardImageOptionFill: '',
   },
   disabledSecondary: {
-    colorCardContainer: {backgroundColor: BLUE_40},
-    colorCardImageContainer: {backgroundColor: BLUE_50},
-    colorCardTitle: {color: BLUE_30},
+    colorCardContainer: {backgroundColor: PRIMARY_40},
+    colorCardImageContainer: {backgroundColor: PRIMARY_50},
+    colorCardTitle: {color: PRIMARY_30},
     colorCardOptionContainer: {},
     colorCardOptionHeader: {},
     colorCardOptionHeaderTitle: {},
@@ -311,8 +316,8 @@ export const CardVariant: CardStyleVariant = {
     colorCardItemImageContainer: {},
     colorCardOptionSkeletonItem: '',
     colorCardOptionSkeletonHeaderItem: '',
-    colorCardArrowImageFill: BLUE_30,
-    colorCardImageFill: BLUE_30,
+    colorCardArrowImageFill: PRIMARY_30,
+    colorCardImageFill: PRIMARY_30,
     colorCardImageOptionFill: '',
   },
 };

package/components/cards/cardDropdown/component/CardDropdownOptions.tsx

@@ -9,12 +9,12 @@ import {
 import React, {useState} from 'react';
 import {CardVariant, styles} from '../CardDropdown.styles';
 import CardDropdownSkeleton from './CardDropdownSkeleton';
-import {PURPLE_10, WHITE, YELLOW, BLUE_60} from '../../../../styles/colors';
 import {ArrowDown} from '../../../../assets/images/icons/ArrowDown';
 import {
   CardDropdownData,
   CardDropdownOptionsProps,
 } from '../CardDropdown.types';
+import { NEUTRALS_0, PRIMARY_60, QUATERNARY_10, SECONDARY_100 } from '../../../../styles/colors';
 
 const CardDropdownOptions = ({
   data,
@@ -30,7 +30,7 @@ const CardDropdownOptions = ({
   const [indexHover, setIndexHover] = useState<number>(-1);
   const newImage = image ? (
     React.cloneElement(image, {
-      fill: YELLOW,
+      fill: SECONDARY_100,
       style: styles.cardOptionHeaderImagenSize,
     })
   ) : (
@@ -48,10 +48,10 @@ const CardDropdownOptions = ({
     }
     if (indexCurrent === indexHover) {
       if (styleType === 'primary') {
-        styleFinal.push({backgroundColor: PURPLE_10});
+        styleFinal.push({backgroundColor: QUATERNARY_10});
       }
       if (styleType === 'secondary') {
-        styleFinal.push({backgroundColor: BLUE_60});
+        styleFinal.push({backgroundColor: PRIMARY_60});
       }
     }
     styleFinal.push([CardVariant[styleType].colorCardItemContainer]);
@@ -99,7 +99,7 @@ const CardDropdownOptions = ({
                   {title}
                 </Text>
                 <View style={styles.cardOptionArrowContainer}>
-                  <ArrowDown style={styles.cardOptionArrowImage} fill={WHITE} />
+                  <ArrowDown style={styles.cardOptionArrowImage} fill={NEUTRALS_0} />
                 </View>
               </View>
             </TouchableOpacity>

package/components/docs/screens/changelog/ChangeLogScreen.style.ts

@@ -1,26 +1,26 @@
 import {StyleSheet} from 'react-native';
-import {GREY_10, LIGHT_BLACK} from '../../../../styles/colors';
+import {NEUTRALS_10, NEUTRALS_100} from '../../../../styles/colors';
 
 export const styles = StyleSheet.create({
   title: {
     fontSize: 30,
     fontWeight: '600',
     marginBottom: 20,
-    color: LIGHT_BLACK,
+    color: NEUTRALS_100,
   },
   version: {
     fontSize: 30,
     fontWeight: '600',
     marginBottom: 10,
-    color: LIGHT_BLACK,
+    color: NEUTRALS_100,
     borderBottomWidth: 1,
-    borderColor: GREY_10,
+    borderColor: NEUTRALS_10,
   },
   feature: {
     fontSize: 18,
     fontWeight: '600',
-    color: LIGHT_BLACK,
+    color: NEUTRALS_100,
     marginBottom: 10,
   },
-  items: {color: LIGHT_BLACK, fontSize: 15, marginLeft: 20, marginBottom: 10},
+  items: {color: NEUTRALS_100, fontSize: 15, marginLeft: 20, marginBottom: 10},
 });