@hero-design/rn 7.25.0 → 7.26.0

package/src/components/Progress/ProgressCircle.tsx

@@ -18,45 +18,64 @@ export interface ProgressCircleProps extends ViewProps {
    * The progress completion percentage: 0-100.
    */
   value: number;
+  /*
+   * Testing id of the component.
+   */
+  renderValue?: (value: number) => React.ReactNode;
   /**
    * Set intent for your progress.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+  intent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'archived'
+    | 'primary-inverted'
+    | 'success-inverted'
+    | 'warning-inverted'
+    | 'danger-inverted'
+    | 'info-inverted'
+    | 'archived-inverted';
   /**
    * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /*
    * Testing id of the component.
-   * */
+   */
   testID?: string;
 }
 
 const HalfCircle = ({
   type,
-  themeIntent = 'primary',
+  themeIntent,
 }: {
   type: 'background' | 'foreground';
-  themeIntent?: ThemeIntent;
+  themeIntent: ThemeIntent;
 }) => (
   <StyledHalfCircleWrapper>
     {type === 'background' ? (
-      <StyledHalfCircleInnerBG />
+      <StyledHalfCircleInnerBG themeIntent={themeIntent} />
     ) : (
       <StyledHalfCircleInnerFG themeIntent={themeIntent} />
     )}
   </StyledHalfCircleWrapper>
 );
 
+const defaultRenderValue = (value: number) => `${value}%`;
+
 const ProgressCircle = ({
   value,
+  renderValue = defaultRenderValue,
   intent = 'primary',
   style,
   testID,
   ...nativeProps
 }: ProgressCircleProps): JSX.Element => {
   const theme = useTheme();
-  const radius = theme.__hd__.progress.sizes.circleWidth / 2;
+  const radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -116,7 +135,7 @@ const ProgressCircle = ({
               ],
             }}
           >
-            <HalfCircle type="background" />
+            <HalfCircle type="background" themeIntent={intent} />
           </Animated.View>
         </View>
         <View
@@ -138,7 +157,7 @@ const ProgressCircle = ({
               opacity: interpolateOpacityRightHalf,
             }}
           >
-            <HalfCircle type="background" />
+            <HalfCircle type="background" themeIntent={intent} />
           </Animated.View>
         </View>
         <StyledStrokeEnd themeIntent={intent} />
@@ -152,7 +171,9 @@ const ProgressCircle = ({
           <StyledStrokeEnd themeIntent={intent} />
         </Animated.View>
         <StyledDonutCircle>
-          <Typography.Text fontSize="large">{`${value}%`}</Typography.Text>
+          <Typography.Text fontSize="large">
+            {renderValue(value)}
+          </Typography.Text>
         </StyledDonutCircle>
       </StyledContainer>
     </View>

package/src/components/Progress/StyledProgressBar.tsx

@@ -2,19 +2,26 @@ import { Animated, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
+import { THEME_INTENT_MAP } from './constants';
 
-const StyledWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  height: theme.__hd__.progress.sizes.barHeight,
-  alignSelf: 'stretch',
-  backgroundColor: theme.__hd__.progress.colors.background,
-  overflow: 'hidden',
-}));
+const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
+  ({ theme, themeIntent }) => ({
+    height: theme.__hd__.progress.sizes.barHeight,
+    alignSelf: 'stretch',
+    backgroundColor:
+      theme.__hd__.progress.colors.incompleteness[
+        THEME_INTENT_MAP[themeIntent]
+      ],
+    overflow: 'hidden',
+  })
+);
 
 const StyledInner = styled(Animated.View)<{ themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
     flex: 1,
     alignSelf: 'stretch',
-    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    backgroundColor:
+      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
   })
 );
 

package/src/components/Progress/StyledProgressCircle.tsx

@@ -2,9 +2,7 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
-
-const INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
-const STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design
+import { THEME_INTENT_MAP } from './constants';
 
 const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
   flexDirection: 'row',
@@ -12,35 +10,46 @@ const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledHalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.progress.sizes.circleWidth / 2,
-  height: theme.__hd__.progress.sizes.circleWidth,
+  width: theme.__hd__.progress.sizes.circleDiameter / 2,
+  height: theme.__hd__.progress.sizes.circleDiameter,
   overflow: 'hidden',
 }));
 
 const StyledHalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.circleWidth,
-    height: theme.__hd__.progress.sizes.circleWidth,
-    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    width: theme.__hd__.progress.sizes.circleDiameter,
+    height: theme.__hd__.progress.sizes.circleDiameter,
     borderRadius: theme.__hd__.progress.radii.default,
+    borderColor:
+      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
+    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
   })
 );
 
-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 StyledHalfCircleInnerBG = styled(View)<{ themeIntent: ThemeIntent }>(
+  ({ theme, themeIntent }) => ({
+    width: theme.__hd__.progress.sizes.circleDiameter,
+    height: theme.__hd__.progress.sizes.circleDiameter,
+    borderRadius: theme.__hd__.progress.radii.default,
+    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
+    borderColor:
+      theme.__hd__.progress.colors.incompleteness[
+        THEME_INTENT_MAP[themeIntent]
+      ],
+  })
+);
 
 const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
-  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,
+  top: theme.__hd__.progress.sizes.circleCompletenessHeight,
+  left: theme.__hd__.progress.sizes.circleCompletenessHeight,
+  width:
+    theme.__hd__.progress.sizes.circleDiameter -
+    theme.__hd__.progress.sizes.circleCompletenessHeight * 2,
+  height:
+    theme.__hd__.progress.sizes.circleDiameter -
+    theme.__hd__.progress.sizes.circleCompletenessHeight * 2,
   zIndex: 3,
-  backgroundColor: theme.__hd__.progress.colors.innerBackground,
   borderRadius: theme.__hd__.progress.radii.default,
   alignItems: 'center',
   justifyContent: 'center',
@@ -51,12 +60,14 @@ const StyledStrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
     position: 'absolute',
     top: 0,
     left:
-      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,
+      (theme.__hd__.progress.sizes.circleDiameter -
+        theme.__hd__.progress.sizes.circleCompletenessHeight) /
+      2,
+    width: theme.__hd__.progress.sizes.circleCompletenessHeight,
+    height: theme.__hd__.progress.sizes.circleCompletenessHeight,
     borderRadius: theme.__hd__.progress.radii.default,
-    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    backgroundColor:
+      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
     zIndex: 2,
   })
 );