From 0b36e4bddc9c83369ea221bd9187afb777a5de5e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 6 Mar 2023 11:57:46 +0100 Subject: [PATCH] chore: [IOAPPFD0-43] Add new toggle to enable preview of new design system (#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. ### Aknowledgments @CrisTofani ## How to test Enable/Disable the toggle from the Profile section (with Developer mode enabled) --- locales/en/index.yml | 1 + locales/it/index.yml | 1 + .../__snapshots__/persistedStore.test.ts.snap | 1 + ts/components/Alert/index.tsx | 107 ++++++++++-------- ts/components/core/typography/H1.tsx | 8 +- ts/screens/profile/ProfileMainScreen.tsx | 19 +++- ts/store/actions/persistedPreferences.ts | 5 + ts/store/reducers/persistedPreferences.ts | 17 ++- 8 files changed, 107 insertions(+), 52 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 51c49ac5d7f..3f1c4ba361c 100644 --- 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 index 2eb1f0e63b8..725e6a9486f 100644 --- 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 index a91081ad0a8..6efaf5d1190 100644 --- 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 index 2ff83f82aa3..f78868bd903 100644 --- 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) => ( - - - - - {title && ( - <> -

- {title} -

- - - )} - - {action && ( - <> - - - {action} - - - )} +}: Props) => { + const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector); + + return ( + + + + + {title && ( + <> + {isDesignSystemEnabled ? ( +

{title}

+ ) : ( +

+ {title} +

+ )} + + + + )} + + {action && ( + <> + + + {action} + + + )} + - -); + ); +}; diff --git a/ts/components/core/typography/H1.tsx b/ts/components/core/typography/H1.tsx index c4a279e661b..4e9ec7c9fa1 100644 --- 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; +type PartialAllowedColors = Extract< + IOColors, + "bluegreyDark" | "white" | "blue" +>; +type AllowedColors = PartialAllowedColors | IOColorsStatusForeground; type AllowedWeight = Extract; type OwnProps = ExternalTypographyProps< diff --git a/ts/screens/profile/ProfileMainScreen.tsx b/ts/screens/profile/ProfileMainScreen.tsx index 981e8cc8cd9..59a1eccdc06 100644 --- 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 { 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 { isDebugModeEnabled, isPagoPATestEnabled, isPnTestEnabled, + isDesignSystemEnabled, navigation, notificationId, notificationToken, @@ -356,6 +363,11 @@ class ProfileMainScreen extends React.PureComponent { isDebugModeEnabled, setDebugModeEnabled )} + {this.developerListItem( + I18n.t("profile.main.designSystemEnvironment"), + isDesignSystemEnabled, + this.onDesignSystemToggle + )} {isDebugModeEnabled && ( {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 index 6d915b50703..5b414722d08 100644 --- 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 index d95bc170222..cd3c6f377a0 100644 --- 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,