@hero-design/rn 7.25.1 → 7.27.0

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -14,6 +14,7 @@ exports[`Progress.Bar renders correctly 1`] = `
     ]
   }
   testID="progress-bar"
+  themeIntent="primary"
 >
   <View
     collapsable={false}
@@ -52,6 +53,7 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
     ]
   }
   testID="progress-bar"
+  themeIntent="success"
 >
   <View
     collapsable={false}
@@ -76,6 +78,299 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
 </View>
 `;
 
+exports[`Progress.Circle allows to custom value renderer 1`] = `
+<View
+  testID="progress-circle"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 999,
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "height": 72,
+              "overflow": "hidden",
+              "width": 36,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#017d6d",
+                "borderRadius": 999,
+                "borderWidth": 4,
+                "height": 72,
+                "width": 72,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="success"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 18,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -18,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 72,
+                "overflow": "hidden",
+                "width": 36,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderColor": "#e8e9ea",
+                  "borderRadius": 999,
+                  "borderWidth": 4,
+                  "height": 72,
+                  "width": 72,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="success"
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "marginLeft": -0.1,
+          "transform": Array [
+            Object {
+              "rotate": "180deg",
+            },
+          ],
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "height": 72,
+              "overflow": "hidden",
+              "width": 36,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#017d6d",
+                "borderRadius": 999,
+                "borderWidth": 4,
+                "height": 72,
+                "width": 72,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="success"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "opacity": 1,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 18,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -18,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 72,
+                "overflow": "hidden",
+                "width": 36,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderColor": "#e8e9ea",
+                  "borderRadius": 999,
+                  "borderWidth": 4,
+                  "height": 72,
+                  "width": 72,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="success"
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#017d6d",
+            "borderRadius": 999,
+            "height": 4,
+            "left": 34,
+            "position": "absolute",
+            "top": 0,
+            "width": 4,
+            "zIndex": 2,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="success"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+          "zIndex": 2,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#017d6d",
+              "borderRadius": 999,
+              "height": 4,
+              "left": 34,
+              "position": "absolute",
+              "top": 0,
+              "width": 4,
+              "zIndex": 2,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="success"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 999,
+            "height": 64,
+            "justifyContent": "center",
+            "left": 4,
+            "position": "absolute",
+            "top": 4,
+            "width": 64,
+            "zIndex": 3,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        175
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`Progress.Circle renders correctly 1`] = `
 <View
   testID="progress-circle"
@@ -108,8 +403,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#401960",
+                "borderColor": "#401960",
                 "borderRadius": 999,
+                "borderWidth": 4,
                 "height": 72,
                 "width": 72,
               },
@@ -159,14 +455,16 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "backgroundColor": "#e8e9ea",
+                  "borderColor": "#e8e9ea",
                   "borderRadius": 999,
+                  "borderWidth": 4,
                   "height": 72,
                   "width": 72,
                 },
                 undefined,
               ]
             }
+            themeIntent="primary"
           />
         </View>
       </View>
@@ -200,8 +498,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#401960",
+                "borderColor": "#401960",
                 "borderRadius": 999,
+                "borderWidth": 4,
                 "height": 72,
                 "width": 72,
               },
@@ -252,14 +551,16 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "backgroundColor": "#e8e9ea",
+                  "borderColor": "#e8e9ea",
                   "borderRadius": 999,
+                  "borderWidth": 4,
                   "height": 72,
                   "width": 72,
                 },
                 undefined,
               ]
             }
+            themeIntent="primary"
           />
         </View>
       </View>
@@ -270,11 +571,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#401960",
             "borderRadius": 999,
-            "height": 5.3999999999999995,
-            "left": 33.3,
+            "height": 4,
+            "left": 34,
             "position": "absolute",
             "top": 0,
-            "width": 5.3999999999999995,
+            "width": 4,
             "zIndex": 2,
           },
           undefined,
@@ -307,11 +608,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 5.3999999999999995,
-              "left": 33.3,
+              "height": 4,
+              "left": 34,
               "position": "absolute",
               "top": 0,
-              "width": 5.3999999999999995,
+              "width": 4,
               "zIndex": 2,
             },
             undefined,
@@ -325,14 +626,13 @@ exports[`Progress.Circle renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 61.199999999999996,
+            "height": 64,
             "justifyContent": "center",
-            "left": 5.3999999999999995,
+            "left": 4,
             "position": "absolute",
-            "top": 5.3999999999999995,
-            "width": 61.199999999999996,
+            "top": 4,
+            "width": 64,
             "zIndex": 3,
           },
           undefined,
@@ -355,6 +655,7 @@ exports[`Progress.Circle renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         25%
       </Text>
@@ -395,8 +696,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#017d6d",
+                "borderColor": "#017d6d",
                 "borderRadius": 999,
+                "borderWidth": 4,
                 "height": 72,
                 "width": 72,
               },
@@ -446,14 +748,16 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             style={
               Array [
                 Object {
-                  "backgroundColor": "#e8e9ea",
+                  "borderColor": "#e8e9ea",
                   "borderRadius": 999,
+                  "borderWidth": 4,
                   "height": 72,
                   "width": 72,
                 },
                 undefined,
               ]
             }
+            themeIntent="success"
           />
         </View>
       </View>
@@ -487,8 +791,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#017d6d",
+                "borderColor": "#017d6d",
                 "borderRadius": 999,
+                "borderWidth": 4,
                 "height": 72,
                 "width": 72,
               },
@@ -539,14 +844,16 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             style={
               Array [
                 Object {
-                  "backgroundColor": "#e8e9ea",
+                  "borderColor": "#e8e9ea",
                   "borderRadius": 999,
+                  "borderWidth": 4,
                   "height": 72,
                   "width": 72,
                 },
                 undefined,
               ]
             }
+            themeIntent="success"
           />
         </View>
       </View>
@@ -557,11 +864,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#017d6d",
             "borderRadius": 999,
-            "height": 5.3999999999999995,
-            "left": 33.3,
+            "height": 4,
+            "left": 34,
             "position": "absolute",
             "top": 0,
-            "width": 5.3999999999999995,
+            "width": 4,
             "zIndex": 2,
           },
           undefined,
@@ -594,11 +901,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#017d6d",
               "borderRadius": 999,
-              "height": 5.3999999999999995,
-              "left": 33.3,
+              "height": 4,
+              "left": 34,
               "position": "absolute",
               "top": 0,
-              "width": 5.3999999999999995,
+              "width": 4,
               "zIndex": 2,
             },
             undefined,
@@ -612,14 +919,13 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 61.199999999999996,
+            "height": 64,
             "justifyContent": "center",
-            "left": 5.3999999999999995,
+            "left": 4,
             "position": "absolute",
-            "top": 5.3999999999999995,
-            "width": 61.199999999999996,
+            "top": 4,
+            "width": 64,
             "zIndex": 3,
           },
           undefined,
@@ -642,6 +948,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         themeFontSize="large"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         75%
       </Text>

package/src/components/Progress/__tests__/index.spec.js

@@ -23,6 +23,21 @@ describe('Progress.Circle', () => {
     expect(getByText('75%')).toBeDefined();
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('allows to custom value renderer', () => {
+    const { toJSON, getByText, queryAllByTestId } = renderWithTheme(
+      <Progress.Circle
+        testID="progress-circle"
+        intent="success"
+        value={75}
+        renderValue={(value) => value + 100}
+      />
+    );
+
+    expect(queryAllByTestId('progress-circle')).toHaveLength(1);
+    expect(getByText('175')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('Progress.Bar', () => {

package/src/components/Progress/constants.ts

@@ -0,0 +1,16 @@
+const THEME_INTENT_MAP = {
+  primary: 'primary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  archived: 'archived',
+  'primary-inverted': 'primaryInverted',
+  'success-inverted': 'successInverted',
+  'warning-inverted': 'warningInverted',
+  'danger-inverted': 'dangerInverted',
+  'info-inverted': 'infoInverted',
+  'archived-inverted': 'archivedInverted',
+} as const;
+
+export { THEME_INTENT_MAP };

package/src/components/Progress/types.ts

@@ -4,4 +4,10 @@ export type ThemeIntent =
   | 'warning'
   | 'danger'
   | 'info'
-  | 'archived';
+  | 'archived'
+  | 'primary-inverted'
+  | 'success-inverted'
+  | 'warning-inverted'
+  | 'danger-inverted'
+  | 'info-inverted'
+  | 'archived-inverted';

package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -50,6 +50,7 @@ exports[`rendering renders correctly when checked 1`] = `
       themeFontSize="large"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Option A
     </Text>
@@ -149,6 +150,7 @@ exports[`rendering renders correctly when not checked 1`] = `
       themeFontSize="large"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Option A
     </Text>

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -51,6 +51,7 @@ exports[`rendering renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Everything
       </Text>
@@ -142,6 +143,7 @@ exports[`rendering renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Direct mentions only
       </Text>
@@ -233,6 +235,7 @@ exports[`rendering renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Nothing
       </Text>

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@emotion/react';
 import { isEmptyContent } from 'hero-editor';
-import * as heroEditorApp from 'hero-editor/dist/app.js';
 import React, {
   forwardRef,
   useCallback,
@@ -15,6 +14,7 @@ import { Keyboard, TouchableWithoutFeedback } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import heroEditorApp from './heroEditorApp';
 import { isAndroid } from '../../utils/helpers';
 import Icon from '../Icon';
 import {

package/src/components/RichTextEditor/__mocks__/heroEditorApp.ts

@@ -0,0 +1,2 @@
+const mockHeroEditApp = 'mockHeroEditApp';
+export default mockHeroEditApp;