Merge pull request #703 from gympass/feat/add-border-avatar

feat: add border in avatar 🚀
gympass · Oct 24, 2023 · e1d26df · e1d26df
2 parents 9f7adde + e2f58eb
commit e1d26df
Show file tree

Hide file tree

Showing 3 changed files with 776 additions and 573 deletions.
diff --git a/packages/yoga/src/Avatar/native/Avatar.jsx b/packages/yoga/src/Avatar/native/Avatar.jsx
@@ -2,11 +2,24 @@ import React, { forwardRef } from 'react';
 import { BuildingFilled } from '@gympass/yoga-icons';
 import { string, func } from 'prop-types';
 import { ImagePropTypes } from 'deprecated-react-native-prop-types';
-import { Image } from 'react-native';
+import { Image, StyleSheet } from 'react-native';
 
+import styled from 'styled-components';
+import { hexToRgb } from '@gympass/yoga-common';
 import Box from '../../Box';
 import Icon from '../../Icon';
 
+const BORDER_WIDTH = StyleSheet.hairlineWidth;
+const BORDER_OPACITY = 0.25;
+
+const Contain = styled(Box).attrs(({ theme: { yoga } }) => {
+  return {
+    bgColor: hexToRgb(yoga.colors.secondary, BORDER_OPACITY),
+  };
+})`
+  padding: ${BORDER_WIDTH}px;
+`;
+
 const Content = ({ icon, src, fill, content, stroke }) => {
   if (src) {
     return <Box as={Image} width="100%" height="100%" source={src} />;
@@ -26,29 +39,51 @@ const Content = ({ icon, src, fill, content, stroke }) => {
  * It has two shapes: default and circle
  */
 const Avatar = forwardRef(
-  ({ icon = BuildingFilled, src, children, fill, stroke, ...props }, ref) => {
+  (
+    {
+      icon = BuildingFilled,
+      src,
+      children,
+      fill,
+      stroke,
+      borderRadius = 'small',
+      width = 48,
+      height = 48,
+      ...props
+    },
+    ref,
+  ) => {
     return (
-      <Box
-        ref={ref}
-        bgColor="elements.selectionAndIcons"
+      <Contain
+        width={width}
+        height={height}
+        borderRadius={borderRadius}
         display="flex"
         alignItems="center"
         justifyContent="center"
-        width={48}
-        height={48}
-        borderRadius="small"
-        elevation="small"
         overflow="hidden"
-        {...props}
       >
-        <Content
-          icon={icon}
-          src={src}
-          fill={fill}
-          stroke={stroke}
-          content={children}
-        />
-      </Box>
+        <Box
+          ref={ref}
+          bgColor="elements.selectionAndIcons"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+          height="100%"
+          overflow="hidden"
+          borderRadius={borderRadius}
+          {...props}
+        >
+          <Content
+            icon={icon}
+            src={src}
+            fill={fill}
+            stroke={stroke}
+            content={children}
+          />
+        </Box>
+      </Contain>
     );
   },
 );