@hero-design/rn 8.22.0 → 8.24.0-alpha.0

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -74,7 +74,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="default"
+              themeState="default"
             />
             <View
               style={
@@ -107,6 +107,7 @@ Array [
                     undefined,
                   ]
                 }
+                themeVariant="text"
               >
                 <Text
                   allowFontScaling={false}
@@ -124,7 +125,7 @@ Array [
                           "alignContent": "center",
                           "alignItems": "center",
                           "color": "#001f23",
-                          "fontSize": 14,
+                          "fontSize": 16,
                           "marginTop": -2,
                           "textAlignVertical": "center",
                         },
@@ -136,8 +137,8 @@ Array [
                   themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
+                  themeState="default"
                   themeTypeface="neutral"
-                  themeVariant="default"
                 >
                   Choose collaborators
                 </Text>
@@ -161,8 +162,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -173,6 +177,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value=""
               />
             </View>
@@ -1469,7 +1474,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1516,8 +1521,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1555,8 +1560,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1567,6 +1575,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -1696,7 +1705,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1743,8 +1752,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1782,8 +1791,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1794,6 +1806,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -3270,7 +3283,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="readonly"
+              themeState="readonly"
             />
             <View
               pointerEvents="none"
@@ -3317,8 +3330,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="readonly"
                 themeTypeface="neutral"
-                themeVariant="readonly"
               >
                 Allow notifications
               </Text>
@@ -3356,8 +3369,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3368,6 +3384,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday, Tuesday"
               />
             </View>
@@ -3510,7 +3527,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -3557,8 +3574,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -3596,8 +3613,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3608,6 +3628,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="B1, B2"
               />
             </View>

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -74,7 +74,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="default"
+              themeState="default"
             />
             <View
               style={
@@ -107,6 +107,7 @@ Array [
                     undefined,
                   ]
                 }
+                themeVariant="text"
               >
                 <Text
                   allowFontScaling={false}
@@ -124,7 +125,7 @@ Array [
                           "alignContent": "center",
                           "alignItems": "center",
                           "color": "#001f23",
-                          "fontSize": 14,
+                          "fontSize": 16,
                           "marginTop": -2,
                           "textAlignVertical": "center",
                         },
@@ -136,8 +137,8 @@ Array [
                   themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
+                  themeState="default"
                   themeTypeface="neutral"
-                  themeVariant="default"
                 >
                   Choose collaborators
                 </Text>
@@ -161,8 +162,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -173,6 +177,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
               />
             </View>
             <HeroIcon
@@ -1391,7 +1396,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1438,8 +1443,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1477,8 +1482,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1489,6 +1497,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -1618,7 +1627,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1665,8 +1674,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1704,8 +1713,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1716,6 +1728,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -3061,7 +3074,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="readonly"
+              themeState="readonly"
             />
             <View
               pointerEvents="none"
@@ -3108,8 +3121,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="readonly"
                 themeTypeface="neutral"
-                themeVariant="readonly"
               >
                 Allow notifications
               </Text>
@@ -3147,8 +3160,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3159,6 +3175,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -3301,7 +3318,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -3348,8 +3365,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -3387,8 +3404,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3399,6 +3419,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="A1"
               />
             </View>

package/src/components/Success/StyledSuccess.tsx

@@ -0,0 +1,87 @@
+import styled from '@emotion/native';
+import { Modal, View } from 'react-native';
+import Image from '../Image';
+import Typography from '../Typography';
+import Button from '../Button';
+
+type SuccessVariant = 'full-screen' | 'in-page';
+
+const StyledSuccessContainer = styled(View)<{ themeVariant: SuccessVariant }>(
+  ({ theme, themeVariant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor:
+      themeVariant === 'in-page'
+        ? theme.__hd__.success.colors.inPageBackground
+        : theme.__hd__.success.colors.fullScreenBackground,
+  })
+);
+
+const StyledSuccessImage = styled(Image)(({ theme }) => ({
+  marginBottom: theme.__hd__.success.space.imageMarginBottom,
+  width: theme.__hd__.success.sizes.image,
+  height: theme.__hd__.success.sizes.image,
+  resizeMode: 'contain',
+}));
+
+const StyledSuccessContent = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.__hd__.success.space.wrapperPadding,
+}));
+
+const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.success.space.imageMarginBottom,
+  width: theme.__hd__.success.sizes.image,
+  height: theme.__hd__.success.sizes.image,
+}));
+
+const StyledSuccessTitle = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.success.fonts.title,
+  fontSize: theme.__hd__.success.fontSizes.title,
+  textAlign: 'center',
+  marginBottom: theme.__hd__.success.space.titleMarginBottom,
+  color: theme.__hd__.success.colors.title,
+}));
+
+const StyledSuccessDescription = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.success.fonts.description,
+  fontSize: theme.__hd__.success.fontSizes.description,
+  textAlign: 'center',
+  color: theme.__hd__.success.colors.description,
+}));
+
+const StyledSuccessButtonContainer = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingHorizontal: theme.__hd__.success.space.button.wrapperHorizontalPadding,
+  paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding,
+}));
+
+const StyledSuccessButtonPrimary = styled(Button)(({ theme }) => ({
+  padding: theme.__hd__.success.space.button.padding,
+}));
+
+const StyledSuccessModal = styled(Modal)({
+  height: '100%',
+  width: '100%',
+});
+
+export {
+  SuccessVariant,
+  StyledSuccessImage,
+  StyledSuccessContainer,
+  StyledSuccessContent,
+  StyledSuccessImageContainer,
+  StyledSuccessTitle,
+  StyledSuccessDescription,
+  StyledSuccessButtonContainer,
+  StyledSuccessButtonPrimary,
+  StyledSuccessModal,
+};