Merge branch 'ONE-3464-update-crash-screen' into 'main'

[ONE-3464] Update crash screen See merge request procivis/one/one-react-native-components!152
procivis · Oct 4, 2024 · 6d03b5b · 6d03b5b
2 parents 4ddf5d0 + fb2a167
commit 6d03b5b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",

diff --git a/src/gradient/gradient-background.tsx b/src/gradient/gradient-background.tsx
diff --git a/src/gradient/index.ts b/src/gradient/index.ts
diff --git a/src/icons/icons.tsx b/src/icons/icons.tsx
@@ -3,10 +3,6 @@ import Svg, { Path, Rect, SvgProps } from 'react-native-svg';
 
 import { useAppColorScheme } from '../theme/color-scheme-context';
 
-interface IconProps {
-  accent?: boolean;
-}
-
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-10315&t=S6UEbGflD2ZT95eA-4
 export const ScanIcon: FC<SvgProps> = ({ color, ...props }) => {
   return (
@@ -136,19 +132,3 @@ export const FilterIcon: FC<SvgProps> = ({ color, ...props }) => {
     </Svg>
   );
 };
-
-export const ErrorStateIcon: React.FunctionComponent<IconProps> = ({ accent = true }) => {
-  const colorScheme = useAppColorScheme();
-  return (
-    <Svg fill="none" viewBox="0 0 160 161" width={150} height={150}>
-      <Rect width={160} height={160} y={0.5} fill={accent ? '#FFA0A0' : colorScheme.accent} rx={80} />
-      <Rect width={136} height={136} x={12} y={12.5} fill={accent ? colorScheme.accent : colorScheme.white} rx={68} />
-      <Path
-        fill={accent ? colorScheme.white : colorScheme.black}
-        fillRule="evenodd"
-        d="m80.298 53.684 30.874 50.17H49.424l30.874-50.17ZM77.162 91.31h6.271v6.272h-6.271V91.31Zm6.271-21.949h-6.271V85.04h6.271V69.362Z"
-        clipRule="evenodd"
-      />
-    </Svg>
-  );
-};
diff --git a/src/state/error-screen.stories.tsx b/src/state/error-screen.stories.tsx
@@ -1,18 +1,14 @@
 import type { ComponentMeta, Story } from '@storybook/react';
 import React from 'react';
 
-import ErrorScreen, { ErrorScreenProps, ErrorScreenVariation } from './error-screen';
+import ErrorScreen, { ErrorScreenProps } from './error-screen';
 
 const Basic: Story<ErrorScreenProps> = (props) => <ErrorScreen {...props} />;
 
 Basic.args = {
   title: 'Error',
   subtitle: 'The app has reached an error state.',
-  variation: ErrorScreenVariation.Neutral,
-  buttons: [
-    { label: 'Primary', onPress: () => null },
-    { label: 'Secondary', onPress: () => null },
-  ],
+  button: { label: 'Primary', onPress: () => null },
 };
 
 export { Basic as ErrorScreen };
@@ -22,15 +18,5 @@ export default {
   component: ErrorScreen,
   parameters: {
     noSafeArea: true,
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/baolhE7fB2BMdCN5RVjusX/App-Feature-Library?node-id=782%3A31982&t=EX6zyqvONranvehN-4',
-    },
-  },
-  argTypes: {
-    variation: {
-      options: [ErrorScreenVariation.Neutral, ErrorScreenVariation.Accent],
-      control: { type: 'radio' },
-    },
   },
 } as ComponentMeta<typeof ErrorScreen>;
diff --git a/src/state/error-screen.tsx b/src/state/error-screen.tsx
@@ -1,116 +1,70 @@
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { useAccessibilityFocus } from '../accessibility/accessibility';
-import type { TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
-import { Button, ButtonProps, ButtonType } from '../buttons';
-import { GradientBackground } from '../gradient';
-import { ErrorStateIcon } from '../icons';
+import { ScrollViewScreen } from '..';
+import { Button } from '../buttons';
+import { CredentialWarningIcon } from '../icons';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
-import { ContrastingStatusBar } from '../utils';
-
-export enum ErrorScreenVariation {
-  Neutral = 'neutral',
-  Accent = 'accent',
-}
 
 export interface ErrorScreenButton {
   testID?: string;
   label: string;
-
-  /** if `undefined`, the button is displayed disabled */
+  disabled?: boolean;
   onPress?: () => void;
-
-  /** if `undefined`, the first button is primary, the others secondary */
-  type?: ButtonProps['type'];
 }
 
 export interface ErrorScreenProps {
   testID?: string;
-  variation: ErrorScreenVariation;
   title: string;
   subtitle: string;
-  buttons: ErrorScreenButton[];
+  button: ErrorScreenButton;
 }
 
-const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({ testID, variation, title, subtitle, buttons }) => {
+const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({ testID, title, subtitle, button }) => {
   const colorScheme = useAppColorScheme();
 
-  const accentVariation = variation === ErrorScreenVariation.Accent;
-
-  const [announcementFinished, setAnnouncementFinished] = useState(false);
-  const accessibilityFocus = useAccessibilityFocus<TouchableOpacityRef>(announcementFinished);
-
-  const backgroundColor = accentVariation ? colorScheme.accent : colorScheme.background;
   return (
-    <>
-      {!accentVariation && <GradientBackground />}
-      <ContrastingStatusBar backgroundColor={backgroundColor} />
-      <SafeAreaView testID={testID} style={[styles.content, { backgroundColor }]}>
-        <View style={styles.top}>
-          <Typography
-            accessibilityRole="header"
-            align="center"
-            preset="xl"
-            allowFontScaling={false}
-            color={accentVariation ? colorScheme.accentText : colorScheme.text}>
-            {title}
-          </Typography>
-          <Typography
-            announcementActive={true}
-            announcementCumulative={true}
-            onAnnouncementFinished={setAnnouncementFinished}
-            style={styles.subtitle}
-            align="center"
-            color={accentVariation ? colorScheme.accentText : colorScheme.text}>
+    <ScrollViewScreen
+      header={{
+        static: true,
+        title: title,
+      }}
+      modalPresentation
+      scrollView={{
+        testID,
+      }}>
+      <View style={[styles.wrapper, { backgroundColor: colorScheme.background }]}>
+        <View style={styles.warning}>
+          <CredentialWarningIcon height={42} width={42} />
+          <Typography color={colorScheme.text} preset="regular" style={styles.message}>
             {subtitle}
           </Typography>
         </View>
-        <View style={styles.statusWrapper}>
-          <ErrorStateIcon accent={accentVariation} />
-        </View>
-        <View style={styles.bottom}>
-          {buttons.map((button, index) => (
-            <Button
-              key={index}
-              testID={button.testID}
-              ref={index === 0 ? accessibilityFocus : undefined}
-              type={button.type ?? accentVariation === !index ? ButtonType.SmallTech : ButtonType.Primary}
-              disabled={!button.onPress}
-              onPress={button.onPress}
-              title={button.label}
-            />
-          ))}
-        </View>
-      </SafeAreaView>
-    </>
+
+        {button ? (
+          <Button disabled={button.disabled} onPress={button.onPress} testID={button.testID} title={button.label} />
+        ) : undefined}
+      </View>
+    </ScrollViewScreen>
   );
 };
 
 const styles = StyleSheet.create({
-  bottom: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'flex-end',
+  message: {
+    textAlign: 'center',
   },
-  content: {
-    flex: 1,
-    paddingBottom: 12,
-    paddingHorizontal: 24,
-    paddingTop: 24,
-  },
-  statusWrapper: {
+  warning: {
     alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
     justifyContent: 'center',
   },
-  subtitle: {
-    paddingTop: 12,
-  },
-  top: {
-    alignItems: 'center',
-    flex: 1,
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingHorizontal: 16,
   },
 });
 

diff --git a/src/state/index.ts b/src/state/index.ts
@@ -1,3 +1,3 @@
-import ErrorScreen, { ErrorScreenButton, ErrorScreenProps, ErrorScreenVariation } from './error-screen';
+import ErrorScreen, { ErrorScreenButton, ErrorScreenProps } from './error-screen';
 
-export { ErrorScreen, ErrorScreenButton, ErrorScreenProps, ErrorScreenVariation };
+export { ErrorScreen, ErrorScreenButton, ErrorScreenProps };