Merge pull request #819 from gympass/EXUX-888-feature

feat: [EXUX-888] Include new Badge component
gympass · May 23, 2024 · 20e314f · 20e314f
2 parents 0a44444 + d88b945
commit 20e314f
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 70 deletions.
diff --git a/packages/icons/src/svg/icon_wellhub.svg b/packages/icons/src/svg/icon_wellhub.svg
diff --git a/packages/icons/src/ui.ts b/packages/icons/src/ui.ts
@@ -186,6 +186,7 @@ import Visibility from './svg/visibility.svg';
 import Wallet from './svg/wallet.svg';
 import Whatsapp from './svg/whatsapp.svg';
 import WheelchairFriendlyDoors from './svg/wheelchair_friendly_doors.svg';
+import WellhubIcon from './svg/icon_wellhub.svg';
 import WiFi from './svg/wi-fi.svg';
 import YogaMat from './svg/yoga-mat.svg';
 import Youtube from './svg/youtube.svg';
@@ -380,6 +381,7 @@ export {
   Wallet,
   Whatsapp,
   WheelchairFriendlyDoors,
+  WellhubIcon,
   WiFi,
   YogaMat,
   Youtube,

diff --git a/packages/yoga/src/Result/index.native.js b/packages/yoga/src/Result/index.native.js
@@ -2,9 +2,11 @@ import Result from './native';
 import ResultDetails from './native/Details';
 import ResultButton from './native/ResultButton';
 import ResultTags from './native/Tags';
+import Badge from './native/Badge';
 
 Result.Details = ResultDetails;
 Result.Button = ResultButton;
 Result.Tags = ResultTags;
+Result.Badge = Badge;
 
 export default Result;
diff --git a/packages/yoga/src/Result/native/Badge.jsx b/packages/yoga/src/Result/native/Badge.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { string, node } from 'prop-types';
+
+import Box from '../../Box';
+import Icon from '../../Icon';
+
+const BADGE_SIZE = 10.67;
+
+const Badge = ({ icon, fill, ...props }) => (
+  <Box
+    justifyContent="center"
+    alignItems="center"
+    borderRadius="circle"
+    w="small"
+    h="small"
+    {...props}
+  >
+    <Icon as={icon} size={BADGE_SIZE} fill={fill} />
+  </Box>
+);
+
+Badge.propTypes = {
+  icon: node.isRequired,
+  fill: string.isRequired,
+};
+
+export default Badge;
diff --git a/...native/__snapshots__/Result.test.jsx.snap → .../Result/__snapshots__/index.test.jsx.snap b/...native/__snapshots__/Result.test.jsx.snap → .../Result/__snapshots__/index.test.jsx.snap
@@ -532,23 +532,34 @@ exports[`<Result /> should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <Text
-      bold={true}
-      numberOfLines={1}
+    <View
       style={
         [
           {
-            "color": "#231B22",
-            "fontFamily": "Rubik",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "lineHeight": 24,
+            "alignItems": "center",
+            "flexDirection": "row",
           },
         ]
       }
     >
-      Jane Doe
-    </Text>
+      <Text
+        bold={true}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#231B22",
+              "fontFamily": "Rubik",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "lineHeight": 24,
+            },
+          ]
+        }
+      >
+        Jane Doe
+      </Text>
+    </View>
     <Text
       color="deep"
       numberOfLines={1}
@@ -1168,23 +1179,34 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
       ]
     }
   >
-    <Text
-      bold={true}
-      numberOfLines={1}
+    <View
       style={
         [
           {
-            "color": "#231B22",
-            "fontFamily": "Rubik",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "lineHeight": 24,
+            "alignItems": "center",
+            "flexDirection": "row",
           },
         ]
       }
     >
-      Gym
-    </Text>
+      <Text
+        bold={true}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#231B22",
+              "fontFamily": "Rubik",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "lineHeight": 24,
+            },
+          ]
+        }
+      >
+        Gym
+      </Text>
+    </View>
     <View
       alignItems="center"
       flexDirection="row"
@@ -2051,23 +2073,34 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
         </Text>
       </View>
     </View>
-    <Text
-      bold={true}
-      numberOfLines={1}
+    <View
       style={
         [
           {
-            "color": "#231B22",
-            "fontFamily": "Rubik",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "lineHeight": 24,
+            "alignItems": "center",
+            "flexDirection": "row",
           },
         ]
       }
     >
-      John Doe
-    </Text>
+      <Text
+        bold={true}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#231B22",
+              "fontFamily": "Rubik",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "lineHeight": 24,
+            },
+          ]
+        }
+      >
+        John Doe
+      </Text>
+    </View>
     <Text
       color="deep"
       numberOfLines={1}

diff --git a/packages/yoga/src/Result/native/Result.jsx → ...s/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result.jsx → ...s/yoga/src/Result/native/Result/index.jsx
@@ -1,40 +1,12 @@
 import React, { isValidElement } from 'react';
-import styled from 'styled-components';
-import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
-import Text from '../../Text';
-import Attendances from './Attendances';
-import Box from '../../Box';
+import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
-const StyledBox = styled(Box)`
-  width: 100%;
-  border-bottom-width: ${({ divided }) => (divided ? 1 : 0)}px;
-  border-bottom-color: ${({
-    theme: {
-      yoga: {
-        colors: {
-          elements: { lineAndBorders },
-        },
-      },
-    },
-  }) => lineAndBorders};
-`;
+import Text from '../../../Text';
+import Attendances from '../Attendances';
+import Badge from '../Badge';
 
-const Content = styled.View`
-  flex: 1;
-  ${({
-    theme: {
-      yoga: {
-        spacing: { small, large },
-      },
-    },
-  }) => {
-    return `
-      margin-left: ${small}px;
-      margin-bottom: ${large}px;
-    `;
-  }}
-`;
+import { Content, StyledBox, TitleAndBadgeContainer } from './styles';
 
 /**
  * The Result component is used when you have a list to show. It is applied to
@@ -49,6 +21,7 @@ const Result = ({
   divided,
   children,
   attendancesColor,
+  badgeIcon,
 }) => (
   <StyledBox divided={divided} display="flex" flexDirection="row">
     {Avatar && <>{isValidElement(Avatar) ? Avatar : <Avatar />}</>}
@@ -60,9 +33,24 @@ const Result = ({
           color={attendancesColor}
         />
       )}
-      <Text.Body1 numberOfLines={1} bold>
-        {title}
-      </Text.Body1>
+      <TitleAndBadgeContainer>
+        <Text.Body1 numberOfLines={1} bold>
+          {title}
+        </Text.Body1>
+        {badgeIcon && (
+          <Badge
+            icon={badgeIcon}
+            fill="text.primary"
+            ml="xxxsmall"
+            bg="neon"
+            justifyContent="center"
+            alignItems="center"
+            borderRadius="circle"
+            w="small"
+            h="small"
+          />
+        )}
+      </TitleAndBadgeContainer>
       {subTitle && subTitle !== '' && (
         <Text.Body2 numberOfLines={1} color="deep">
           {subTitle}
@@ -95,6 +83,8 @@ Result.propTypes = {
   children: node,
   /** The color of attendences icon and description */
   attendancesColor: string,
+  /** The property that defines a whether a badge should be shown and which icon should be rendered */
+  badgeIcon: node,
 };
 
 Result.defaultProps = {
@@ -104,6 +94,7 @@ Result.defaultProps = {
   children: undefined,
   attendances: undefined,
   attendancesColor: undefined,
+  badgeIcon: undefined,
 };
 
 export default Result;
diff --git a/...es/yoga/src/Result/native/Result.test.jsx → ...a/src/Result/native/Result/index.test.jsx b/...es/yoga/src/Result/native/Result.test.jsx → ...a/src/Result/native/Result/index.test.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { render } from '@testing-library/react-native';
 import { BuildingFilled } from '@gympass/yoga-icons';
 
-import { ThemeProvider } from '../..';
-import Result from './Result';
-import Avatar from '../../Avatar';
-import Text from '../../Text';
+import { ThemeProvider } from '../../..';
+import Result from '.';
+import Avatar from '../../../Avatar';
+import Text from '../../../Text';
 
 const attendanceList = [
   {

diff --git a/packages/yoga/src/Result/native/Result/styles.jsx b/packages/yoga/src/Result/native/Result/styles.jsx
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+import Box from '../../../Box';
+
+export const StyledBox = styled(Box)`
+  width: 100%;
+  border-bottom-width: ${({ divided }) => (divided ? 1 : 0)}px;
+  border-bottom-color: ${({
+    theme: {
+      yoga: {
+        colors: {
+          elements: { lineAndBorders },
+        },
+      },
+    },
+  }) => lineAndBorders};
+`;
+
+export const Content = styled.View`
+  flex: 1;
+  ${({
+    theme: {
+      yoga: {
+        spacing: { small, large },
+      },
+    },
+  }) => {
+    return `
+      margin-left: ${small}px;
+      margin-bottom: ${large}px;
+    `;
+  }}
+`;
+
+export const TitleAndBadgeContainer = styled(Box)`
+  flex-direction: row;
+  align-items: center;
+`;