chore: [IOAPPFD0-174] Add the new LoadingIndicator component (#5111)

pagopa · Oct 13, 2023 · af80467 · af80467
1 parent 3606446
commit af80467
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -112,7 +112,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.13.0",
+    "@pagopa/io-app-design-system": "1.13.1",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.2.1",
     "@pagopa/io-react-native-login-utils": "^0.2.0",

diff --git a/ts/components/ui/LoadingIndicator.tsx b/ts/components/ui/LoadingIndicator.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  LoadingSpinner,
+  useIOExperimentalDesign
+} from "@pagopa/io-app-design-system";
+import I18n from "i18n-js";
+import { WithTestID } from "../../types/WithTestID";
+
+export type LoadingIndicator = WithTestID<
+  Exclude<
+    React.ComponentProps<typeof LoadingSpinner>,
+    "size" | "color" | "duration"
+  >
+>;
+
+export const LoadingIndicator = ({
+  accessibilityHint = I18n.t("global.accessibility.activityIndicator.hint"),
+  accessibilityLabel = I18n.t("global.accessibility.activityIndicator.label"),
+  testID = "LoadingIndicator"
+}: LoadingIndicator) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return (
+    <LoadingSpinner
+      size={48}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      color={isExperimental ? "blueIO-500" : "blue"}
+      testID={testID}
+    />
+  );
+};
diff --git a/ts/features/design-system/core/DSLoaders.tsx b/ts/features/design-system/core/DSLoaders.tsx
@@ -6,82 +6,123 @@ import {
   hexToRgba,
   useIOTheme
 } from "@pagopa/io-app-design-system";
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 import ActivityIndicator from "../../../components/ui/ActivityIndicator";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 import I18n from "../../../i18n";
 import { H2 } from "../../../components/core/typography/H2";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
+import { LoadingIndicator } from "../../../components/ui/LoadingIndicator";
+
+const styles = StyleSheet.create({
+  spinnerOuter: {
+    alignSelf: "flex-start",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: hexToRgba(IOColors.black, 0.15),
+    padding: 16,
+    overflow: "hidden"
+  },
+  sectionTitle: {
+    marginBottom: 16
+  }
+});
+
+type SpinnerViewerBox = {
+  name: string;
+  children: React.ReactNode;
+  variant?: "default" | "primary";
+};
+
+const viewerBackgroundMap: Record<
+  NonNullable<SpinnerViewerBox["variant"]>,
+  IOColors
+> = {
+  default: "white",
+  primary: "blueIO-500"
+};
+
+const SpinnerViewerBox = ({
+  name,
+  children,
+  variant = "default"
+}: SpinnerViewerBox) => (
+  <DSComponentViewerBox name={name}>
+    <View
+      style={[
+        styles.spinnerOuter,
+        { backgroundColor: IOColors[viewerBackgroundMap[variant]] }
+      ]}
+    >
+      {children}
+    </View>
+  </DSComponentViewerBox>
+);
 
 export const DSLoaders = () => {
   const theme = useIOTheme();
 
   return (
     <DesignSystemScreen title={"Loaders"}>
       {/* Present in the main Messages screen */}
-      <H2 color={theme["textHeading-default"]} weight={"SemiBold"}>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={styles.sectionTitle}
+      >
         Activity Indicator
       </H2>
-      <VSpacer size={24} />
-      <ActivityIndicator
-        animating={true}
-        size={"large"}
-        color={IOColors.blue}
-        accessible={true}
-        accessibilityHint={I18n.t(
-          "global.accessibility.activityIndicator.hint"
-        )}
-        accessibilityLabel={I18n.t(
-          "global.accessibility.activityIndicator.label"
-        )}
-        importantForAccessibility={"no-hide-descendants"}
-        testID={"activityIndicator"}
-      />
-      <VSpacer size={40} />
-      <H2 color={theme["textHeading-default"]} weight={"SemiBold"}>
+      <SpinnerViewerBox name="ActivityIndicator · Large size, primary legacy color">
+        <ActivityIndicator
+          animating={true}
+          size={"large"}
+          color={IOColors.blue}
+          accessible={true}
+          accessibilityHint={I18n.t(
+            "global.accessibility.activityIndicator.hint"
+          )}
+          accessibilityLabel={I18n.t(
+            "global.accessibility.activityIndicator.label"
+          )}
+          importantForAccessibility={"no-hide-descendants"}
+          testID={"activityIndicator"}
+        />
+      </SpinnerViewerBox>
+
+      <VSpacer />
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={styles.sectionTitle}
+      >
         Loading Spinner
       </H2>
-      <VSpacer size={16} />
-      <DSComponentViewerBox name="LoadingSpinner, different colors">
-        <View
-          style={{
-            alignSelf: "flex-start",
-            borderRadius: 16,
-            borderWidth: 1,
-            borderColor: hexToRgba(IOColors.black, 0.15),
-            overflow: "hidden"
-          }}
-        >
-          <View style={{ backgroundColor: IOColors.white, padding: 16 }}>
-            <LoadingSpinner color="blueIO-500" />
-          </View>
-          <View
-            style={{ backgroundColor: IOColors["blueIO-500"], padding: 16 }}
-          >
-            <LoadingSpinner color="white" />
-          </View>
-        </View>
-      </DSComponentViewerBox>
-      <DSComponentViewerBox name="LoadingSpinner · Size 48, stroke 5, default color">
-        <View
-          style={{
-            alignSelf: "flex-start",
-            borderRadius: 16,
-            borderWidth: 1,
-            borderColor: hexToRgba(IOColors.black, 0.15),
-            overflow: "hidden"
-          }}
-        >
-          <View
-            style={{
-              backgroundColor: IOColors.white,
-              padding: 16
-            }}
-          >
-            <LoadingSpinner size={48} stroke={5} color="blueIO-500" />
-          </View>
-        </View>
-      </DSComponentViewerBox>
+      <SpinnerViewerBox name="LoadingSpinner · Size 24, primary color">
+        <LoadingSpinner color="blueIO-500" />
+      </SpinnerViewerBox>
+      <SpinnerViewerBox
+        name="LoadingSpinner · Size 24, white color"
+        variant="primary"
+      >
+        <LoadingSpinner color="white" />
+      </SpinnerViewerBox>
+      <SpinnerViewerBox name="LoadingSpinner · Size 48, default color">
+        <LoadingSpinner size={48} />
+      </SpinnerViewerBox>
+
+      <VSpacer />
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={styles.sectionTitle}
+      >
+        Loading Indicator
+      </H2>
+      <SpinnerViewerBox name="LoadingIndicator, with predefined visual attributes">
+        <LoadingIndicator />
+      </SpinnerViewerBox>
     </DesignSystemScreen>
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3122,10 +3122,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/[email protected].0":
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.13.0.tgz#202352cf5c221f658bc164b493af50a7de581657"
-  integrity sha512-QeBmh1wvSeoU+2x3PXle1dRhxYgy00v4TeXRAbunz8p7PPmvC6EkpHveM3vdHnBhDEVMNiiAXkrFx59D4SbKpA==
+"@pagopa/[email protected].1":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.13.1.tgz#409c065e5cb96fe7dcf65c3550f32e795481ee78"
+  integrity sha512-99/ojMGrEEzDYSI9BzfCT8W774QGmRQfJdDv9hn9UohSTZSacOQJxWWYwYRQzeSYz/kYnj/v0nH0FP5bu7H/mw==
   dependencies:
     "@expo/vector-icons" "^13.0.0"
     "@pagopa/ts-commons" "^12.0.0"