chore: [IOAPPFD0-43] Add new toggle to enable preview of new design s…

…ystem (pagopa#4427) ## Short description This PR adds a new toggle to enable/disable the preview of the new design system. ## List of changes proposed in this pull request - Add new Redux action to manage the single toggle and relative global state - Add a simple example to the new `Alert` component ### Preview Right now, the toggle makes the alert title insanely HUUGE. <img src="https://user-images.githubusercontent.com/1255491/222496703-30788af0-3400-4073-9801-d05d04159371.png" width="350" /> <img src="https://user-images.githubusercontent.com/1255491/222496886-6efe664e-9897-411b-a6ff-7bdee6903c7d.png" width="350" /> ### Aknowledgments @CrisTofani ## How to test Enable/Disable the toggle from the Profile section (with Developer mode enabled)
dvisionlab · Mar 6, 2023 · 0b36e4b · 0b36e4b
1 parent 22721b8
commit 0b36e4b
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 52 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -433,6 +433,7 @@ profile:
       alertMessage: The application must be restarted for the changes to take effect.
     pnEnvironment:
       pnEnv: PN Test Environment
+    designSystemEnvironment: Experimental Design System
     appVersion: App Version
     backendVersion: Backend Version
     debugMode: Debug mode

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -433,6 +433,7 @@ profile:
       alertMessage: È necessario il riavvio dell'applicazione affinché le modifiche abbiano effetto.
     pnEnvironment:
       pnEnv: Ambiente PN di Test
+    designSystemEnvironment: Design System sperimentale
     appVersion: Versione App
     backendVersion: Versione Backend
     debugMode: Modalità debug

diff --git a/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap b/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap
@@ -155,6 +155,7 @@ Object {
   "isCustomEmailChannelEnabled": Object {
     "kind": "PotNone",
   },
+  "isDesignSystemEnabled": false,
   "isExperimentalFeaturesEnabled": false,
   "isFingerprintEnabled": undefined,
   "isMixpanelEnabled": null,

diff --git a/ts/components/Alert/index.tsx b/ts/components/Alert/index.tsx
@@ -19,6 +19,9 @@ import { H2 } from "../core/typography/H2";
 import { IOStyles } from "../core/variables/IOStyles";
 import { IOAlertRadius } from "../core/variables/IOShapes";
 import { IOAlertSpacing } from "../core/variables/IOSpacing";
+import { H1 } from "../core/typography/H1";
+import { useIOSelector } from "../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";
 
 const iconSize = 24;
 const [spacingDefault, spacingFullWidth] = IOAlertSpacing;
@@ -96,50 +99,62 @@ export const Alert = ({
   accessibilityLabel,
   accessibilityRole,
   testID
-}: Props) => (
-  <View
-    ref={viewRef}
-    style={[
-      styles.container,
-      fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
-      { backgroundColor: IOColors[mapVariantStates[variant].background] }
-    ]}
-    testID={testID}
-    accessibilityHint={accessibilityHint}
-    accessibilityLabel={accessibilityLabel}
-    accessibilityRole={accessibilityRole}
-    accessible={accessible ?? true}
-  >
-    <Icon
-      name={mapVariantStates[variant].icon}
-      size={iconSize}
-      color={mapVariantStates[variant].foreground}
-    />
-    <HSpacer />
-    <View style={IOStyles.flex}>
-      {title && (
-        <>
-          <H2 weight="SemiBold" color={mapVariantStates[variant].foreground}>
-            {title}
-          </H2>
-          <VSpacer size={4} />
-        </>
-      )}
-      <Label color={mapVariantStates[variant].foreground} weight={"Regular"}>
-        {content}
-      </Label>
-      {action && (
-        <>
-          <VSpacer size={4} />
-          <Link
-            color={mapVariantStates[variant].foreground}
-            onPress={onPress}
-            style={{ alignSelf: "flex-start" }}
-          >
-            {action}
-          </Link>
-        </>
-      )}
+}: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+
+  return (
+    <View
+      ref={viewRef}
+      style={[
+        styles.container,
+        fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+        { backgroundColor: IOColors[mapVariantStates[variant].background] }
+      ]}
+      testID={testID}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible ?? true}
+    >
+      <Icon
+        name={mapVariantStates[variant].icon}
+        size={iconSize}
+        color={mapVariantStates[variant].foreground}
+      />
+      <HSpacer />
+      <View style={IOStyles.flex}>
+        {title && (
+          <>
+            {isDesignSystemEnabled ? (
+              <H1 color={mapVariantStates[variant].foreground}>{title}</H1>
+            ) : (
+              <H2
+                weight="SemiBold"
+                color={mapVariantStates[variant].foreground}
+              >
+                {title}
+              </H2>
+            )}
+
+            <VSpacer size={4} />
+          </>
+        )}
+        <Label color={mapVariantStates[variant].foreground} weight={"Regular"}>
+          {content}
+        </Label>
+        {action && (
+          <>
+            <VSpacer size={4} />
+            <Link
+              color={mapVariantStates[variant].foreground}
+              onPress={onPress}
+              style={{ alignSelf: "flex-start" }}
+            >
+              {action}
+            </Link>
+          </>
+        )}
+      </View>
     </View>
-  </View>
-);
+  );
+};
diff --git a/ts/components/core/typography/H1.tsx b/ts/components/core/typography/H1.tsx
@@ -1,10 +1,14 @@
 import * as React from "react";
 import { IOFontFamily, IOFontWeight } from "../fonts";
-import type { IOColors } from "../variables/IOColors";
+import { IOColors, IOColorsStatusForeground } from "../variables/IOColors";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 import { useTypographyFactory } from "./Factory";
 
-type AllowedColors = Extract<IOColors, "bluegreyDark" | "white" | "blue">;
+type PartialAllowedColors = Extract<
+  IOColors,
+  "bluegreyDark" | "white" | "blue"
+>;
+type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
 type AllowedWeight = Extract<IOFontWeight, "Bold">;
 
 type OwnProps = ExternalTypographyProps<

diff --git a/ts/screens/profile/ProfileMainScreen.tsx b/ts/screens/profile/ProfileMainScreen.tsx
@@ -31,7 +31,8 @@ import { setDebugModeEnabled } from "../../store/actions/debug";
 import { navigateToLogout } from "../../store/actions/navigation";
 import {
   preferencesPagoPaTestEnvironmentSetEnabled,
-  preferencesPnTestEnvironmentSetEnabled
+  preferencesPnTestEnvironmentSetEnabled,
+  preferencesDesignSystemSetEnabled
 } from "../../store/actions/persistedPreferences";
 import { clearCache } from "../../store/actions/profile";
 import { Dispatch } from "../../store/actions/types";
@@ -42,6 +43,7 @@ import {
 import { isDebugModeEnabledSelector } from "../../store/reducers/debug";
 import { notificationsInstallationSelector } from "../../store/reducers/notifications/installation";
 import {
+  isDesignSystemEnabledSelector,
   isPagoPATestEnabledSelector,
   isPnTestEnabledSelector
 } from "../../store/reducers/persistedPreferences";
@@ -238,6 +240,10 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
     this.props.setPnTestEnabled(enabled);
   };
 
+  private onDesignSystemToggle = (enabled: boolean) => {
+    this.props.setDesignSystemEnabled(enabled);
+  };
+
   private idResetTap?: number;
 
   // When tapped 5 times activate the debug mode of the application.
@@ -278,6 +284,7 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
       isDebugModeEnabled,
       isPagoPATestEnabled,
       isPnTestEnabled,
+      isDesignSystemEnabled,
       navigation,
       notificationId,
       notificationToken,
@@ -356,6 +363,11 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
           isDebugModeEnabled,
           setDebugModeEnabled
         )}
+        {this.developerListItem(
+          I18n.t("profile.main.designSystemEnvironment"),
+          isDesignSystemEnabled,
+          this.onDesignSystemToggle
+        )}
         {isDebugModeEnabled && (
           <React.Fragment>
             {isDevEnv &&
@@ -583,7 +595,8 @@ const mapStateToProps = (state: GlobalState) => ({
   notificationToken: notificationsInstallationSelector(state).token,
   isDebugModeEnabled: isDebugModeEnabledSelector(state),
   isPagoPATestEnabled: isPagoPATestEnabledSelector(state),
-  isPnTestEnabled: isPnTestEnabledSelector(state)
+  isPnTestEnabled: isPnTestEnabledSelector(state),
+  isDesignSystemEnabled: isDesignSystemEnabledSelector(state)
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
@@ -597,6 +610,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     ),
   setPnTestEnabled: (isPnTestEnabled: boolean) =>
     dispatch(preferencesPnTestEnvironmentSetEnabled({ isPnTestEnabled })),
+  setDesignSystemEnabled: (isDesignSystemEnabled: boolean) =>
+    dispatch(preferencesDesignSystemSetEnabled({ isDesignSystemEnabled })),
   dispatchSessionExpired: () => dispatch(sessionExpired())
 });
 

diff --git a/ts/store/actions/persistedPreferences.ts b/ts/store/actions/persistedPreferences.ts
@@ -45,6 +45,10 @@ export const preferencesPnTestEnvironmentSetEnabled = createStandardAction(
   "PREFERENCES_PN_TEST_ENVIRONMENT_SET_ENABLED"
 )<{ isPnTestEnabled: boolean }>();
 
+export const preferencesDesignSystemSetEnabled = createStandardAction(
+  "PREFERENCES_DESIGN_SYSTEM_SET_ENABLED"
+)<{ isDesignSystemEnabled: boolean }>();
+
 export type PersistedPreferencesActions = ActionType<
   // eslint-disable-next-line
   | typeof preferenceFingerprintIsEnabledSaveSuccess
@@ -57,4 +61,5 @@ export type PersistedPreferencesActions = ActionType<
   | typeof customEmailChannelSetEnabled
   | typeof continueWithRootOrJailbreak
   | typeof preferencesPnTestEnvironmentSetEnabled
+  | typeof preferencesDesignSystemSetEnabled
 >;
diff --git a/ts/store/reducers/persistedPreferences.ts b/ts/store/reducers/persistedPreferences.ts
@@ -18,7 +18,8 @@ import {
   preferredCalendarSaveSuccess,
   preferredLanguageSaveSuccess,
   serviceAlertDisplayedOnceSuccess,
-  preferencesPnTestEnvironmentSetEnabled
+  preferencesPnTestEnvironmentSetEnabled,
+  preferencesDesignSystemSetEnabled
 } from "../actions/persistedPreferences";
 import { Action } from "../actions/types";
 import { differentProfileLoggedIn } from "../actions/crossSessions";
@@ -37,6 +38,7 @@ export type PersistedPreferencesState = Readonly<{
   continueWithRootOrJailbreak?: boolean;
   isMixpanelEnabled: boolean | null;
   isPnTestEnabled: boolean;
+  isDesignSystemEnabled: boolean;
 }>;
 
 export const initialPreferencesState: PersistedPreferencesState = {
@@ -49,7 +51,8 @@ export const initialPreferencesState: PersistedPreferencesState = {
   isCustomEmailChannelEnabled: pot.none,
   continueWithRootOrJailbreak: false,
   isMixpanelEnabled: null,
-  isPnTestEnabled: false
+  isPnTestEnabled: false,
+  isDesignSystemEnabled: false
 };
 
 export default function preferencesReducer(
@@ -128,6 +131,13 @@ export default function preferencesReducer(
     };
   }
 
+  if (isActionOf(preferencesDesignSystemSetEnabled, action)) {
+    return {
+      ...state,
+      isDesignSystemEnabled: action.payload.isDesignSystemEnabled
+    };
+  }
+
   // when the current user is different from the previous logged one
   // reset the mixpanel opt-in preference
   if (isActionOf(differentProfileLoggedIn, action)) {
@@ -168,6 +178,9 @@ export const isMixpanelEnabled = (state: GlobalState): boolean | null =>
 export const isPnTestEnabledSelector = (state: GlobalState) =>
   state.persistedPreferences.isPnTestEnabled;
 
+export const isDesignSystemEnabledSelector = (state: GlobalState) =>
+  state.persistedPreferences.isDesignSystemEnabled;
+
 // returns the preferred language as an Option from the persisted store
 export const preferredLanguageSelector = createSelector<
   GlobalState,