etendo-ui-library 1.0.82 → 1.0.84

package/.ondevice/main.js

@@ -5,5 +5,6 @@ module.exports = {
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-backgrounds',
     '@storybook/addon-ondevice-actions',
+    '@storybook/addon-react-native-web',
   ],
 };

package/.ondevice/storybook.requires.js

@@ -29,18 +29,21 @@ try {
   argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
 } catch {}
 
+// TODO: add the status component in the return section.
 const getStories = () => {
   return [
+    require('../components/button/ButtonDefault.stories.tsx'),
     require('../components/button/Button.stories.tsx'),
     require('../components/cards/cardDropdown/CardDropdown.stories.tsx'),
     require('../components/docs/Docs.stories.tsx'),
     require('../components/input/Input.stories.tsx'),
     require('../components/navbar/Navbar.stories.tsx'),
     require('../components/pagination/Pagination.stories.tsx'),
-    require('../components/states/States.stories.tsx'),
     require('../components/statusbar/StatusBar.stories.tsx'),
-    require('../components/tab/Tabs.stories.tsx'),
+    require('../components/tab/Tab.stories.tsx'),
     require('../components/table/Table.stories.tsx'),
+    require('../components/typography/Typography.stories.tsx'),
+    require('../components/typography/TypographyVariant.stories.tsx'),
   ];
 };
 

package/.storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
     '@storybook/addon-actions',
   ],
   framework: '@storybook/react',
+  staticDirs: ['../assets'],
   webpackFinal: async (config, {configType}) => {
     // Exclude react-native-linear-gradient from being bundled in Storybook
     config.resolve.alias = {

package/.storybook/preview-head.html

@@ -0,0 +1,30 @@
+<style type="text/css">
+    @font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter-Regular.ttf');
+    font-weight: 400;
+    font-style: normal;
+    }
+
+    @font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter-Medium.ttf');
+    font-weight: 500;
+    font-style: normal;
+    }
+
+    @font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter-SemiBold.ttf');
+    font-weight: 600;
+    font-style: normal;
+    }
+
+    @font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter-Bold.ttf');
+    font-weight: 700;
+    font-style: normal;
+    }
+
+</style>

package/.storybook/preview.js

@@ -1,3 +1,5 @@
+import '../helpers/globals.css';
+
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {

package/.storybook/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = async ({config}) => {
+  config.module.rules.push({
+    test: /\.(sass|scss|css)$/,
+    use: ['resolve-url-loader'],
+    include: path.resolve(__dirname, '../'),
+  });
+  config.module.rules.push({
+    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+    use: [
+      {
+        loader: 'file-loader',
+        query: {
+          name: '[name].[ext]',
+        },
+      },
+    ],
+    include: path.resolve(__dirname, '../'),
+  });
+  return config;
+};

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 { NEUTRALS_0 } from '../../styles/colors';
+import {NEUTRAL_0} from '../../styles/colors';
 
 const meta: Meta = {
   title: 'Etendo/Button',
@@ -16,12 +16,6 @@ const meta: Meta = {
 
 export default meta;
 
-const Template0: Story<ButtonProps> = args => (
-  <View style={[styles.storiesContainer, addMarginContainer()]}>
-    <Button {...args} />
-  </View>
-);
-
 const Template1: Story<ButtonProps> = args => (
   <View style={[styles.storiesContainer, addMarginContainer()]}>
     <View style={styles.storiesButtonContainer}>
@@ -29,7 +23,7 @@ const Template1: Story<ButtonProps> = args => (
         onPress={() => {}}
         image={
           <CheckIcon
-            fill={NEUTRALS_0}
+            fill={NEUTRAL_0}
             style={{
               marginRight: 10,
               width: 12,
@@ -39,7 +33,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Primary'}
         typeStyle={'primary'}
-        width={'full'}
+        width={200}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -56,7 +50,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Secondary'}
         typeStyle={'secondary'}
-        width={'full'}
+        width={200}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -73,7 +67,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Terciary'}
         typeStyle={'terciary'}
-        width={'full'}
+        width={200}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -90,7 +84,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'White'}
         typeStyle={'white'}
-        width={'full'}
+        width={200}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -107,19 +101,10 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'WhiteBorder'}
         typeStyle={'whiteBorder'}
-        width={'full'}
+        width={200}
       />
     </View>
   </View>
 );
 
-export const ButtonDefault = Template0.bind({});
 export const ButtonVariants = Template1.bind({});
-
-ButtonDefault.args = {
-  text: 'Button',
-  typeStyle: 'primary',
-  disabled: false,
-  width: 150,
-  height: 50,
-};

package/components/button/Button.styles.tsx

@@ -1,5 +1,13 @@
 import {StyleSheet} from 'react-native';
-import { NEUTRALS_0, PRIMARY_100, QUATERNARY_10, QUATERNARY_50, SECONDARY_100, SECONDARY_30, TERTIARY_50 } from '../../styles/colors';
+import {
+  NEUTRAL_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 = {
@@ -14,7 +22,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: NEUTRALS_0,
+      color: NEUTRAL_0,
       fontWeight: '600',
     },
     containerDisabled: {
@@ -23,12 +31,14 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      height: '100%',
+      padding: 24,
     },
     textDisabled: {
-      color: NEUTRALS_0,
+      color: NEUTRAL_0,
       fontWeight: 'bold',
     },
-    imageColor: NEUTRALS_0,
+    imageColor: NEUTRAL_0,
   },
   secondary: {
     container: {
@@ -49,6 +59,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     textDisabled: {
       color: QUATERNARY_50,
@@ -75,6 +86,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     textDisabled: {
       color: TERTIARY_50,
@@ -84,7 +96,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
   },
   whiteBorder: {
     container: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
@@ -98,13 +110,14 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
       borderColor: TERTIARY_50,
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     textDisabled: {
       color: TERTIARY_50,
@@ -114,7 +127,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
   },
   white: {
     container: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
@@ -126,11 +139,12 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     textDisabled: {
       color: TERTIARY_50,
@@ -146,12 +160,12 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-start',
     flex: 1,
-    width: '100%',
+    width: 100,
 
     justifyContent: 'space-between',
   },
   storiesButtonContainer: {
     height: 100,
-    width: '30%',
+    width: 150,
   },
 });

package/components/button/Button.tsx

@@ -1,8 +1,18 @@
 import React, {useState} from 'react';
-import {Pressable, Text, View} from 'react-native';
-import { NEUTRALS_100, PRIMARY_100, PRIMARY_80, QUATERNARY_100, QUATERNARY_50, SECONDARY_50 } from '../../styles/colors';
+import {Pressable, TouchableOpacity, View} from 'react-native';
+import {
+  NEUTRAL_0,
+  NEUTRAL_100,
+  PRIMARY_100,
+  PRIMARY_80,
+  QUATERNARY_10,
+  QUATERNARY_100,
+  QUATERNARY_50,
+  SECONDARY_50,
+} from '../../styles/colors';
 import {ButtonStyleVariant} from './Button.styles';
 import {ButtonProps, ButtonStyleType} from './Button.types';
+import {Typography} from '../typography/Typography';
 
 const Button = ({
   text,
@@ -22,7 +32,7 @@ const Button = ({
       case 'secondary':
         return SECONDARY_50;
       case 'terciary':
-        return QUATERNARY_50;
+        return QUATERNARY_10;
       case 'whiteBorder':
         return PRIMARY_100;
     }
@@ -32,24 +42,32 @@ const Button = ({
       case 'white':
         return QUATERNARY_100;
       case 'whiteBorder':
-        return NEUTRALS_100;
+        return NEUTRAL_0;
       case 'primary':
-        return NEUTRALS_100;
+        return NEUTRAL_0;
       default:
         return PRIMARY_100;
     }
   };
 
-  const stateStyleContainer = () => {
+  const stateStyleContainer = (pressed: boolean) => {
     if (disabled) {
       return ButtonStyleVariant[typeStyle].containerDisabled;
     }
+    if (pressed) {
+      return {
+        ...ButtonStyleVariant[typeStyle].container,
+
+        opacity: 0.7,
+        width: width === '100%' ? '100%' : width,
+      };
+    }
     if (isHovered) {
       const hoveredBackgroundColor = getHoveredBackgroundColor(typeStyle);
       return {
         ...ButtonStyleVariant[typeStyle].container,
         backgroundColor: hoveredBackgroundColor,
-        width: width === 'full' ? '100%' : width,
+        width: width === '100%' ? '100%' : width,
       };
     }
     return ButtonStyleVariant[typeStyle].container;
@@ -78,24 +96,30 @@ const Button = ({
     return ButtonStyleVariant[typeStyle].text;
   };
 
-  const newImage =
-    image &&
-    React.cloneElement(image, {
-      fill: isHovered
-        ? getHoveredTextColorAndViewColor(typeStyle)
-        : ButtonStyleVariant[typeStyle].imageColor,
-    });
-
   return (
-    <Pressable
-      onHoverIn={handleHoverIn}
-      onHoverOut={handleHoverOut}
-      style={[stateStyleContainer(), {height: height, width: width}]}
-      onPress={onPress}
-    >
-      <View>{image && newImage}</View>
-      <Text style={[stateStyleText()]}>{text}</Text>
-    </Pressable>
+    <TouchableOpacity>
+      <Pressable
+        onHoverIn={handleHoverIn}
+        onHoverOut={handleHoverOut}
+        style={({pressed}) => [
+          stateStyleContainer(pressed),
+          {height: height, width: width},
+        ]}
+        onPress={onPress}
+      >
+        <View>
+          {image &&
+            React.cloneElement(image, {
+              fill: isHovered
+                ? getHoveredTextColorAndViewColor(typeStyle)
+                : ButtonStyleVariant[typeStyle].imageColor,
+            })}
+        </View>
+        <Typography variant="p_m" style={[stateStyleText()]}>
+          {text}
+        </Typography>
+      </Pressable>
+    </TouchableOpacity>
   );
 };
 

package/components/button/Button.types.tsx

@@ -22,8 +22,8 @@ export interface ButtonProps {
   onPress: () => void;
   text: string;
   typeStyle: ButtonStyleType;
-  image?: React.ReactNode;
+  image?: React.ReactElement;
   disabled?: boolean;
-  width?: number | string | 'full';
+  width?: number | string;
   height?: number | string;
 }

package/components/button/ButtonDefault.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Button from '../button/Button';
+import {Story, Meta} from '@storybook/react';
+import {ButtonProps} from './Button.types';
+import {View} from 'react-native';
+import {styles} from './Button.styles';
+import addMarginContainer from '../../helpers/addMargin';
+import {CheckIcon} from '../../assets/images/icons/CheckIcon';
+
+const meta: Meta = {
+  title: 'Etendo/Button',
+  component: Button,
+  argTypes: {},
+};
+export default meta;
+
+const Template0: Story<ButtonProps> = args => (
+  <View style={[styles.storiesContainer, addMarginContainer()]}>
+    <Button {...args} />
+  </View>
+);
+
+export const ButtonDefault = Template0.bind({});
+
+ButtonDefault.args = {
+  text: 'Button',
+  typeStyle: 'secondary',
+  disabled: false,
+  width: 150,
+};

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

@@ -4,10 +4,8 @@ exports[`Running Test for Input Check Button disabled 1`] = `
 <View
   accessible={true}
   collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
+  focusable={false}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -15,90 +13,121 @@ exports[`Running Test for Input Check Button disabled 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#DDDFF6",
-        "borderRadius": 5,
-        "flexDirection": "row",
-        "justifyContent": "center",
-      },
-      Object {
-        "height": undefined,
-        "width": "auto",
-      },
-    ]
+    Object {
+      "opacity": 1,
+    }
   }
 >
-  <View>
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="10"
-      bbWidth="12"
-      fill="none"
-      focusable={false}
-      height={10}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          Object {
-            "height": 10,
-            "marginRight": 10,
-            "width": 12,
-          },
-          Object {
-            "flex": 0,
-            "height": 10,
-            "width": 12,
-          },
-        ]
-      }
-      vbHeight={32}
-      vbWidth={43}
-      width={12}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#DDDFF6",
+          "borderRadius": 5,
+          "flexDirection": "row",
+          "height": "100%",
+          "justifyContent": "center",
+          "padding": 24,
+        },
+        Object {
+          "height": undefined,
+          "width": "auto",
+        },
+      ]
+    }
+  >
+    <View>
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="10"
+        bbWidth="12"
+        fill="none"
+        focusable={false}
+        height={10}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
           Array [
-            "fill",
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "height": 10,
+              "marginRight": 10,
+              "width": 12,
+            },
+            Object {
+              "flex": 0,
+              "height": 10,
+              "width": 12,
+            },
           ]
         }
+        vbHeight={32}
+        vbWidth={43}
+        width={12}
       >
-        <RNSVGPath
-          d="M41.0309 1.12469C39.3624 -0.37562 36.6578 -0.374175 34.9899 1.12469L15.4917 21.2185L6.88504 12.2221C5.21785 10.4783 2.51325 10.4783 0.92578 12.2224C-0.277994 13.9669 -0.277994 16.7949 0.92578 18.5386L12.4693 30.6925C14.1382 32.4358 16.8428 32.4358 18.5114 30.6925L41.0309 7.15158C42.6985 5.40676 42.6985 2.57913 41.0309 1.12469Z"
-          fill={
-            Object {
-              "payload": 4294967295,
-              "type": 0,
-            }
-          }
+        <RNSVGGroup
+          fill={null}
           propList={
             Array [
               "fill",
             ]
           }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
+        >
+          <RNSVGPath
+            d="M41.0309 1.12469C39.3624 -0.37562 36.6578 -0.374175 34.9899 1.12469L15.4917 21.2185L6.88504 12.2221C5.21785 10.4783 2.51325 10.4783 0.92578 12.2224C-0.277994 13.9669 -0.277994 16.7949 0.92578 18.5386L12.4693 30.6925C14.1382 32.4358 16.8428 32.4358 18.5114 30.6925L41.0309 7.15158C42.6985 5.40676 42.6985 2.57913 41.0309 1.12469Z"
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": -1,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#FFFFFF",
+              "fontWeight": "bold",
+            },
+          ],
+        ]
+      }
+    >
+      Button CTA
+    </Text>
   </View>
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "#FFFFFF",
-          "fontWeight": "bold",
-        },
-      ]
-    }
-  >
-    Button CTA
-  </Text>
 </View>
 `;