@hero-design/rn 7.17.0 → 7.17.1

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent archived 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#ccced1",
+        "backgroundColor": "#bfc1c5",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -22,7 +22,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent danger 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#e3602a",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -39,7 +39,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent info 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#d1d9fe",
+        "backgroundColor": "#b5c3fd",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -56,7 +56,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent success 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#017d6d",
+        "backgroundColor": "#5ace7d",
         "borderRadius": 999,
         "marginRight": 8,
         "width": 8,
@@ -104,7 +104,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
         "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#dadbde",
+        "shadowColor": "#ccced1",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
@@ -120,7 +120,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -164,7 +164,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -197,11 +197,11 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f1e9fb",
+        "backgroundColor": "#f3e6f6",
         "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#dadbde",
+        "shadowColor": "#ccced1",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
@@ -217,7 +217,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -249,7 +249,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
   style={
     Array [
       Object {
-        "backgroundColor": "#f1e9fb",
+        "backgroundColor": "#f3e6f6",
         "flexDirection": "row",
         "padding": 16,
       },
@@ -261,7 +261,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,

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

@@ -6,7 +6,7 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#292a2b",
+        "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -23,7 +23,7 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
         },
@@ -117,7 +117,7 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#292a2b",
+        "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -134,7 +134,7 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 28,
         },

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,
 };