From 66355e0ac26733666ea8d410b8770ea1537ca2f0 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 13 Oct 2023 10:04:06 +0200
Subject: [PATCH 1/4] Add the new `LoadingIndicator` component

---
 ts/components/ui/LoadingIndicator.tsx        | 29 ++++++++++++++++++
 ts/features/design-system/core/DSLoaders.tsx | 31 ++++++++++++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 ts/components/ui/LoadingIndicator.tsx

diff --git a/ts/components/ui/LoadingIndicator.tsx b/ts/components/ui/LoadingIndicator.tsx
new file mode 100644
index 00000000000..f59bed23513
--- /dev/null
+++ b/ts/components/ui/LoadingIndicator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import {
+  LoadingSpinner,
+  useIOExperimentalDesign
+} from "@pagopa/io-app-design-system";
+// import I18n from "i18n-js";
+
+export type LoadingIndicator = 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")
+// }: LoadingIndicator) => {
+export const LoadingIndicator = () => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return (
+    <LoadingSpinner
+      size={48}
+      // accessibilityHint={accessibilityHint}
+      // accessibilityLabel={accessibilityLabel}
+      color={isExperimental ? "blueIO-500" : "blue"}
+      testID="LoadingIndicator"
+    />
+  );
+};
diff --git a/ts/features/design-system/core/DSLoaders.tsx b/ts/features/design-system/core/DSLoaders.tsx
index a3728a0c5ac..d2baa6d6c8e 100644
--- a/ts/features/design-system/core/DSLoaders.tsx
+++ b/ts/features/design-system/core/DSLoaders.tsx
@@ -12,6 +12,7 @@ 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";
 
 export const DSLoaders = () => {
   const theme = useIOTheme();
@@ -42,7 +43,7 @@ export const DSLoaders = () => {
         Loading Spinner
       </H2>
       <VSpacer size={16} />
-      <DSComponentViewerBox name="LoadingSpinner, different colors">
+      <DSComponentViewerBox name="LoadingSpinner · Size 24, different colors">
         <View
           style={{
             alignSelf: "flex-start",
@@ -62,7 +63,7 @@ export const DSLoaders = () => {
           </View>
         </View>
       </DSComponentViewerBox>
-      <DSComponentViewerBox name="LoadingSpinner · Size 48, stroke 5, default color">
+      <DSComponentViewerBox name="LoadingSpinner · Size 48, default color">
         <View
           style={{
             alignSelf: "flex-start",
@@ -78,7 +79,31 @@ export const DSLoaders = () => {
               padding: 16
             }}
           >
-            <LoadingSpinner size={48} stroke={5} color="blueIO-500" />
+            <LoadingSpinner size={48} />
+          </View>
+        </View>
+      </DSComponentViewerBox>
+      <H2 color={theme["textHeading-default"]} weight={"SemiBold"}>
+        Loading Indicator
+      </H2>
+      <VSpacer size={16} />
+      <DSComponentViewerBox name="LoadingIndicator, with predefined visual attributes">
+        <View
+          style={{
+            alignSelf: "flex-start",
+            borderRadius: 16,
+            borderWidth: 1,
+            borderColor: hexToRgba(IOColors.black, 0.15),
+            overflow: "hidden"
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: IOColors.white,
+              padding: 16
+            }}
+          >
+            <LoadingIndicator />
           </View>
         </View>
       </DSComponentViewerBox>

From 8fd14822cef8dd61efc37e1a922a268045d67105 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 13 Oct 2023 12:07:28 +0200
Subject: [PATCH 2/4] Update visual appearance of the `DSLoaders` page

---
 ts/features/design-system/core/DSLoaders.tsx | 180 ++++++++++---------
 1 file changed, 98 insertions(+), 82 deletions(-)

diff --git a/ts/features/design-system/core/DSLoaders.tsx b/ts/features/design-system/core/DSLoaders.tsx
index d2baa6d6c8e..b9921a52fb7 100644
--- a/ts/features/design-system/core/DSLoaders.tsx
+++ b/ts/features/design-system/core/DSLoaders.tsx
@@ -6,7 +6,7 @@ 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";
@@ -14,99 +14,115 @@ 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 · Size 24, 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, 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} />
-          </View>
-        </View>
-      </DSComponentViewerBox>
-      <H2 color={theme["textHeading-default"]} weight={"SemiBold"}>
+      <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>
-      <VSpacer size={16} />
-      <DSComponentViewerBox name="LoadingIndicator, with predefined visual attributes">
-        <View
-          style={{
-            alignSelf: "flex-start",
-            borderRadius: 16,
-            borderWidth: 1,
-            borderColor: hexToRgba(IOColors.black, 0.15),
-            overflow: "hidden"
-          }}
-        >
-          <View
-            style={{
-              backgroundColor: IOColors.white,
-              padding: 16
-            }}
-          >
-            <LoadingIndicator />
-          </View>
-        </View>
-      </DSComponentViewerBox>
+      <SpinnerViewerBox name="LoadingIndicator, with predefined visual attributes">
+        <LoadingIndicator />
+      </SpinnerViewerBox>
     </DesignSystemScreen>
   );
 };

From 2f307fc591804e3ba570b0a0cc660250163e2a75 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 13 Oct 2023 14:26:27 +0200
Subject: [PATCH 3/4] Update `io-app-design-system` to the `1.13.1`

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a2d21de0982..c43ccad689f 100644
--- 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/yarn.lock b/yarn.lock
index cc80dcf2e71..7ef48b41845 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3122,10 +3122,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/io-app-design-system@1.13.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/io-app-design-system@1.13.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"

From 9955cc87512e2385c45cf4a825001f20b5ea5452 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 13 Oct 2023 14:31:39 +0200
Subject: [PATCH 4/4] Uncomment the a11y related props

---
 ts/components/ui/LoadingIndicator.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/ts/components/ui/LoadingIndicator.tsx b/ts/components/ui/LoadingIndicator.tsx
index f59bed23513..e41d9debb9a 100644
--- a/ts/components/ui/LoadingIndicator.tsx
+++ b/ts/components/ui/LoadingIndicator.tsx
@@ -3,27 +3,30 @@ import {
   LoadingSpinner,
   useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
-// import I18n from "i18n-js";
+import I18n from "i18n-js";
+import { WithTestID } from "../../types/WithTestID";
 
-export type LoadingIndicator = Exclude<
-  React.ComponentProps<typeof LoadingSpinner>,
-  "size" | "color" | "duration"
+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")
-// }: LoadingIndicator) => {
-export const LoadingIndicator = () => {
+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}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
       color={isExperimental ? "blueIO-500" : "blue"}
-      testID="LoadingIndicator"
+      testID={testID}
     />
   );
 };