@hero-design/rn 7.16.2 → 7.17.1

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`rendering renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -43,8 +43,8 @@ exports[`rendering renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#292a2b",
-              "borderColor": "#292a2b",
+              "backgroundColor": "#001f23",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -72,7 +72,7 @@ exports[`rendering renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -89,8 +89,8 @@ exports[`rendering renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#292a2b",
-              "borderColor": "#292a2b",
+              "backgroundColor": "#001f23",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -118,7 +118,7 @@ exports[`rendering renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -135,7 +135,7 @@ exports[`rendering renders correctly 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#292a2b",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -163,7 +163,7 @@ exports[`rendering renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -180,7 +180,7 @@ exports[`rendering renders correctly 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#292a2b",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -476,7 +476,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -493,7 +493,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 28,
             },
@@ -520,7 +520,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -537,7 +537,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 28,
             },
@@ -564,7 +564,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -581,7 +581,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 28,
             },
@@ -608,7 +608,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -625,7 +625,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "borderColor": "#292a2b",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -653,7 +653,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -670,7 +670,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "borderColor": "#292a2b",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -698,7 +698,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#292a2b",
+            "borderColor": "#001f23",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -715,7 +715,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         style={
           Array [
             Object {
-              "borderColor": "#292a2b",
+              "borderColor": "#001f23",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,

package/src/components/Progress/ProgressCircle.tsx

@@ -9,11 +9,12 @@ import {
   ViewStyle,
 } from 'react-native';
 import {
-  DonutCircle,
-  HalfCircleInnerFG,
-  HalfCircleInnerBG,
-  HalfCircleWrapper,
-  StrokeEnd,
+  StyledContainer,
+  StyledDonutCircle,
+  StyledHalfCircleInnerFG,
+  StyledHalfCircleInnerBG,
+  StyledHalfCircleWrapper,
+  StyledStrokeEnd,
 } from './StyledProgressCircle';
 import { ThemeIntent } from './types';
 import Typography from '../Typography';
@@ -44,13 +45,13 @@ const HalfCircle = ({
   type: 'background' | 'foreground';
   themeIntent?: ThemeIntent;
 }) => (
-  <HalfCircleWrapper>
+  <StyledHalfCircleWrapper>
     {type === 'background' ? (
-      <HalfCircleInnerBG />
+      <StyledHalfCircleInnerBG />
     ) : (
-      <HalfCircleInnerFG themeIntent={themeIntent} />
+      <StyledHalfCircleInnerFG themeIntent={themeIntent} />
     )}
-  </HalfCircleWrapper>
+  </StyledHalfCircleWrapper>
 );
 
 const ProgressCircle = ({
@@ -61,7 +62,7 @@ const ProgressCircle = ({
   ...nativeProps
 }: ProgressCircleProps): JSX.Element => {
   const theme = useTheme();
-  const { radius } = theme.__hd__.progress.sizes;
+  const radius = theme.__hd__.progress.sizes.circleWidth / 2;
   const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -108,11 +109,7 @@ const ProgressCircle = ({
 
   return (
     <View {...nativeProps} testID={testID} style={style}>
-      <View
-        style={{
-          flexDirection: 'row',
-        }}
-      >
+      <StyledContainer>
         <View>
           <HalfCircle type="foreground" themeIntent={intent} />
           <Animated.View
@@ -128,7 +125,13 @@ const ProgressCircle = ({
             <HalfCircle type="background" />
           </Animated.View>
         </View>
-        <View style={{ transform: [{ rotate: '180deg' }], zIndex: 1 }}>
+        <View
+          style={{
+            transform: [{ rotate: '180deg' }],
+            zIndex: 1,
+            marginLeft: -0.1,
+          }}
+        >
           <HalfCircle type="foreground" themeIntent={intent} />
           <Animated.View
             style={{
@@ -144,7 +147,7 @@ const ProgressCircle = ({
             <HalfCircle type="background" />
           </Animated.View>
         </View>
-        <StrokeEnd themeIntent={intent} />
+        <StyledStrokeEnd themeIntent={intent} />
         <Animated.View
           style={{
             ...StyleSheet.absoluteFillObject,
@@ -152,12 +155,12 @@ const ProgressCircle = ({
             transform: [{ rotate: interpolateDotRotate }],
           }}
         >
-          <StrokeEnd themeIntent={intent} />
+          <StyledStrokeEnd themeIntent={intent} />
         </Animated.View>
-        <DonutCircle>
-          <Typography.Text fontSize="xlarge">{`${value}%`}</Typography.Text>
-        </DonutCircle>
-      </View>
+        <StyledDonutCircle>
+          <Typography.Text fontSize="large">{`${value}%`}</Typography.Text>
+        </StyledDonutCircle>
+      </StyledContainer>
     </View>
   );
 };

package/src/components/Progress/StyledProgressCircle.tsx

@@ -3,38 +3,42 @@ import styled from '@emotion/native';
 
 import { ThemeIntent } from './types';
 
-const HalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.progress.sizes.radius,
-  height: theme.__hd__.progress.sizes.radius * 2,
+const INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
+const STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design
+
+const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
+  flexDirection: 'row',
+  borderRadius: theme.__hd__.progress.radii.default,
+}));
+
+const StyledHalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.progress.sizes.circleWidth / 2,
+  height: theme.__hd__.progress.sizes.circleWidth,
   overflow: 'hidden',
 }));
 
-const HalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
+const StyledHalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.radius * 2,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    width: theme.__hd__.progress.sizes.circleWidth,
+    height: theme.__hd__.progress.sizes.circleWidth,
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     borderRadius: theme.__hd__.progress.radii.default,
   })
 );
 
-const HalfCircleInnerBG = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.progress.sizes.radius * 2,
-  height: theme.__hd__.progress.sizes.radius * 2,
+const StyledHalfCircleInnerBG = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.progress.sizes.circleWidth,
+  height: theme.__hd__.progress.sizes.circleWidth,
   backgroundColor: theme.__hd__.progress.colors.background,
   borderRadius: theme.__hd__.progress.radii.default,
 }));
 
-const DonutCircle = styled(View)<ViewProps>(({ theme }) => ({
+const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
-  top: theme.__hd__.progress.sizes.strokeWidth,
-  left: theme.__hd__.progress.sizes.strokeWidth,
-  width:
-    theme.__hd__.progress.sizes.radius * 2 -
-    theme.__hd__.progress.sizes.strokeWidth * 2,
-  height:
-    theme.__hd__.progress.sizes.radius * 2 -
-    theme.__hd__.progress.sizes.strokeWidth * 2,
+  top: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+  left: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+  width: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
+  height: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
   zIndex: 3,
   backgroundColor: theme.__hd__.progress.colors.innerBackground,
   borderRadius: theme.__hd__.progress.radii.default,
@@ -42,15 +46,15 @@ const DonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   justifyContent: 'center',
 }));
 
-const StrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
+const StyledStrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
     position: 'absolute',
     top: 0,
     left:
-      theme.__hd__.progress.sizes.radius -
-      theme.__hd__.progress.sizes.strokeWidth / 2,
-    width: theme.__hd__.progress.sizes.strokeWidth,
-    height: theme.__hd__.progress.sizes.strokeWidth,
+      theme.__hd__.progress.sizes.circleWidth / 2 -
+      (theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE) / 2,
+    width: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    height: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
     borderRadius: theme.__hd__.progress.radii.default,
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     zIndex: 2,
@@ -58,9 +62,10 @@ const StrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
 );
 
 export {
-  DonutCircle,
-  HalfCircleWrapper,
-  HalfCircleInnerFG,
-  HalfCircleInnerBG,
-  StrokeEnd,
+  StyledContainer,
+  StyledDonutCircle,
+  StyledHalfCircleWrapper,
+  StyledHalfCircleInnerFG,
+  StyledHalfCircleInnerBG,
+  StyledStrokeEnd,
 };