From d63c2dc2e75576c4cf805e130c61167aaddb72ca Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Thu, 14 Sep 2023 17:25:34 +0200 Subject: [PATCH] Introducing legacy variants --- example/src/pages/Selection.tsx | 63 +++++++++++-------- src/components/checkbox/AnimatedCheckbox.tsx | 31 +++++++-- .../checkbox/AnimatedMessageCheckbox.tsx | 30 ++++++--- src/components/checkbox/CheckboxLabel.tsx | 39 ++++++++++-- src/components/radio/AnimatedRadio.tsx | 31 +++++++-- src/components/switch/NativeSwitch.tsx | 48 ++++++++++---- src/components/switch/SwitchLabel.tsx | 39 ++++++++++-- 7 files changed, 209 insertions(+), 72 deletions(-) diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx index 3b7a609b..d9f1a273 100644 --- a/example/src/pages/Selection.tsx +++ b/example/src/pages/Selection.tsx @@ -9,39 +9,48 @@ import { NewRadioItem, RadioGroup, SwitchLabel, - VSpacer + VSpacer, + useIOExperimentalDesign } from "@pagopa/io-app-design-system"; import React, { useState } from "react"; import { View } from "react-native"; import { ComponentViewerBox } from "../components/ComponentViewerBox"; import { Screen } from "../components/Screen"; -export const Selection = () => ( - -

- Checkbox -

- {/* CheckboxLabel */} - {renderCheckboxLabel()} - {/* ListItemCheckbox */} - {renderListItemCheckbox()} -

Radio

- {/* RadioListItem */} - -

Switch

- {/* Native Switch */} - - {/* ListItemSwitch */} - - {/* SwitchLabel */} - {renderAnimatedSwitch()} - -); +export const Selection = () => { + const { isExperimental, setExperimental } = useIOExperimentalDesign(); + return ( + +

+ Checkbox +

+ + {/* CheckboxLabel */} + {renderCheckboxLabel()} + {/* ListItemCheckbox */} + {renderListItemCheckbox()} +

Radio

+ {/* RadioListItem */} + +

Switch

+ {/* Native Switch */} + + {/* ListItemSwitch */} + + {/* SwitchLabel */} + {renderAnimatedSwitch()} + + ); +}; const renderCheckboxLabel = () => ( <> diff --git a/src/components/checkbox/AnimatedCheckbox.tsx b/src/components/checkbox/AnimatedCheckbox.tsx index b2370440..63fd1050 100644 --- a/src/components/checkbox/AnimatedCheckbox.tsx +++ b/src/components/checkbox/AnimatedCheckbox.tsx @@ -8,9 +8,13 @@ import Animated, { withSpring, withTiming } from "react-native-reanimated"; +import { useIOExperimentalDesign } from "../../core"; import { IOSpringValues } from "../../core/IOAnimations"; import { IOColors } from "../../core/IOColors"; -import { IOSelectionTickVisualParams } from "../../core/IOStyles"; +import { + IOSelectionTickLegacyVisualParams, + IOSelectionTickVisualParams +} from "../../core/IOStyles"; import { AnimatedTick } from "../common/AnimatedTick"; type Props = { @@ -52,6 +56,25 @@ const styles = StyleSheet.create({ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { const isChecked = checked ?? false; + const { isExperimental } = useIOExperimentalDesign(); + const borderColorOffState = + IOColors[IOSelectionTickVisualParams.borderColorOffState]; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyBorderColorOffState = + IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState]; + const borderColorProp = isExperimental + ? borderColorOffState + : legacyBorderColorOffState; + + const backgroundColorOnState = + IOColors[IOSelectionTickVisualParams.bgColorOnState]; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyBackgroundColorOnState = + IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState]; + const backgroundColorProp = isExperimental + ? backgroundColorOnState + : legacyBackgroundColorOnState; + const squareAnimationProgress = useSharedValue(checked ? 1 : 0); const tickAnimationProgress = useSharedValue(checked ? 1 : 0); @@ -89,8 +112,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { style={[ styles.checkboxBorder, { - borderColor: - IOColors[IOSelectionTickVisualParams.borderColorOffState] + borderColor: borderColorProp } ]} /> @@ -98,8 +120,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { style={[ styles.checkBoxSquare, { - backgroundColor: - IOColors[IOSelectionTickVisualParams.bgColorOnState] + backgroundColor: backgroundColorProp }, animatedCheckboxSquare ]} diff --git a/src/components/checkbox/AnimatedMessageCheckbox.tsx b/src/components/checkbox/AnimatedMessageCheckbox.tsx index b9ebac97..a4fb4292 100644 --- a/src/components/checkbox/AnimatedMessageCheckbox.tsx +++ b/src/components/checkbox/AnimatedMessageCheckbox.tsx @@ -1,21 +1,23 @@ import React, { useEffect } from "react"; -import { StyleSheet, Pressable, PressableProps } from "react-native"; +import { Pressable, PressableProps, StyleSheet } from "react-native"; import Animated, { - useSharedValue, - useAnimatedStyle, + Easing, interpolate, + useAnimatedStyle, + useSharedValue, withSpring, - withTiming, - Easing + withTiming } from "react-native-reanimated"; -import { IOColors } from "../../core/IOColors"; +import { useIOExperimentalDesign } from "../../core"; import { IOSpringValues } from "../../core/IOAnimations"; -import { AnimatedTick } from "../common/AnimatedTick"; +import { IOColors } from "../../core/IOColors"; +import { IOSpacingScale } from "../../core/IOSpacing"; import { + IOSelectionTickLegacyVisualParams, IOSelectionTickVisualParams, IOVisualCostants } from "../../core/IOStyles"; -import { IOSpacingScale } from "../../core/IOSpacing"; +import { AnimatedTick } from "../common/AnimatedTick"; type Props = { checked?: boolean; @@ -50,9 +52,18 @@ export const AnimatedMessageCheckbox = ({ onPress }: AnimatedMessageCheckbox) => { const isChecked = checked ?? true; + const { isExperimental } = useIOExperimentalDesign(); const circleAnimationProgress = useSharedValue(checked ? 1 : 0); const tickAnimationProgress = useSharedValue(checked ? 1 : 0); + const backgroundColorOnState = + IOColors[IOSelectionTickVisualParams.bgColorOnState]; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyBackgroundColorOnState = + IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState]; + const backgroundColorProp = isExperimental + ? backgroundColorOnState + : legacyBackgroundColorOnState; useEffect(() => { // eslint-disable-next-line functional/immutable-data @@ -87,8 +98,7 @@ export const AnimatedMessageCheckbox = ({ style={[ styles.checkBoxCircle, { - backgroundColor: - IOColors[IOSelectionTickVisualParams.bgColorOnState] + backgroundColor: backgroundColorProp }, animatedCheckboxCircle ]} diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx index 31a706bc..9f0379de 100644 --- a/src/components/checkbox/CheckboxLabel.tsx +++ b/src/components/checkbox/CheckboxLabel.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { useState } from "react"; -import { Pressable, View } from "react-native"; -import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; -import { H6 } from "../typography/H6"; +import { Pressable, StyleSheet, Text, View } from "react-native"; +import { IOColors, useIOExperimentalDesign } from "../../core"; import { IOStyles } from "../../core/IOStyles"; +import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; +import { makeFontStyleObject } from "../../utils/fonts"; import { HSpacer } from "../spacer/Spacer"; +import { H6 } from "../typography/H6"; import { AnimatedCheckbox } from "./AnimatedCheckbox"; type Props = { @@ -21,6 +23,17 @@ type OwnProps = Props & Pick, "disabled" | "checked"> & Pick, "onPress">; +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const styles = StyleSheet.create({ + legacyTextValue: { + fontSize: 16, + lineHeight: 24, + color: IOColors.bluegreyDark, + flexShrink: 1, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); + /** * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox} * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`. @@ -36,6 +49,22 @@ export const CheckboxLabel = ({ }: OwnProps) => { const [toggleValue, setToggleValue] = useState(checked ?? false); + const { isExperimental } = useIOExperimentalDesign(); + const checkboxLabelText = ( +
+ {label} +
+ ); + + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyCheckboxlabelText = ( + {label} + ); + + const checkboxLabelTextComponent = isExperimental + ? checkboxLabelText + : legacyCheckboxlabelText; + const toggleCheckbox = () => { triggerHaptic("impactLight"); setToggleValue(!toggleValue); @@ -67,9 +96,7 @@ export const CheckboxLabel = ({ -
- {label} -
+ {checkboxLabelTextComponent} ); diff --git a/src/components/radio/AnimatedRadio.tsx b/src/components/radio/AnimatedRadio.tsx index 7bda863d..ec22617a 100644 --- a/src/components/radio/AnimatedRadio.tsx +++ b/src/components/radio/AnimatedRadio.tsx @@ -8,9 +8,13 @@ import Animated, { withSpring, withTiming } from "react-native-reanimated"; +import { useIOExperimentalDesign } from "../../core"; import { IOSpringValues } from "../../core/IOAnimations"; import { IOColors } from "../../core/IOColors"; -import { IOSelectionTickVisualParams } from "../../core/IOStyles"; +import { + IOSelectionTickLegacyVisualParams, + IOSelectionTickVisualParams +} from "../../core/IOStyles"; import { AnimatedTick } from "../common/AnimatedTick"; type Props = { @@ -50,6 +54,25 @@ const styles = StyleSheet.create({ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { const isChecked = checked ?? false; + const { isExperimental } = useIOExperimentalDesign(); + const borderColorOffState = + IOColors[IOSelectionTickVisualParams.borderColorOffState]; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyBorderColorOffState = + IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState]; + const borderColorProp = isExperimental + ? borderColorOffState + : legacyBorderColorOffState; + + const backgroundColorOnState = + IOColors[IOSelectionTickVisualParams.bgColorOnState]; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyBackgroundColorOnState = + IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState]; + const backgroundColorProp = isExperimental + ? backgroundColorOnState + : legacyBackgroundColorOnState; + const circleAnimationProgress = useSharedValue(checked ? 1 : 0); const tickAnimationProgress = useSharedValue(checked ? 1 : 0); @@ -87,8 +110,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { style={[ styles.radioBorder, { - borderColor: - IOColors[IOSelectionTickVisualParams.borderColorOffState] + borderColor: borderColorProp } ]} /> @@ -96,8 +118,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { style={[ styles.radioCircle, { - backgroundColor: - IOColors[IOSelectionTickVisualParams.bgColorOnState] + backgroundColor: backgroundColorProp }, animatedCheckboxSquare ]} diff --git a/src/components/switch/NativeSwitch.tsx b/src/components/switch/NativeSwitch.tsx index 9cc1a953..c900dd19 100644 --- a/src/components/switch/NativeSwitch.tsx +++ b/src/components/switch/NativeSwitch.tsx @@ -1,19 +1,41 @@ import React from "react"; -import { Switch, SwitchProps } from "react-native"; +import { Platform, Switch, SwitchProps } from "react-native"; +import { useIOExperimentalDesign } from "../../core"; import { IOColors } from "../../core/IOColors"; import { IOSwitchVisualParams } from "../../core/IOStyles"; type OwnProps = Pick; -export const NativeSwitch = ({ onValueChange, value }: OwnProps) => ( - -); +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const bgLegacyTrackColorAndroid = + Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight; + +export const NativeSwitch = ({ onValueChange, value }: OwnProps) => { + const { isExperimental } = useIOExperimentalDesign(); + const trackColor = { + false: IOColors[IOSwitchVisualParams.bgColorOffState], + true: IOColors[IOSwitchVisualParams.bgColorOnState] + }; + + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyTrackColor = { + false: bgLegacyTrackColorAndroid, + true: IOColors.blue + }; + + const trackColorComponent = isExperimental ? trackColor : legacyTrackColor; + + return ( + + ); +}; diff --git a/src/components/switch/SwitchLabel.tsx b/src/components/switch/SwitchLabel.tsx index 7de4488b..e37cb7b7 100644 --- a/src/components/switch/SwitchLabel.tsx +++ b/src/components/switch/SwitchLabel.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { useState } from "react"; -import { Pressable, View } from "react-native"; -import { H6 } from "../typography/H6"; -import { HSpacer } from "../spacer/Spacer"; +import { Pressable, StyleSheet, Text, View } from "react-native"; +import { IOColors, useIOExperimentalDesign } from "../../core"; import { IOStyles } from "../../core/IOStyles"; import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; +import { makeFontStyleObject } from "../../utils/fonts"; +import { HSpacer } from "../spacer/Spacer"; +import { H6 } from "../typography/H6"; import { AnimatedSwitch } from "./AnimatedSwitch"; type Props = { @@ -21,6 +23,17 @@ type OwnProps = Props & Pick, "disabled" | "checked"> & Pick, "onPress">; +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const styles = StyleSheet.create({ + legacyTextValue: { + fontSize: 16, + lineHeight: 24, + color: IOColors.bluegreyDark, + flexShrink: 1, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); + /** * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox} * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`. @@ -36,6 +49,22 @@ export const SwitchLabel = ({ }: OwnProps) => { const [toggleValue, setToggleValue] = useState(checked ?? false); + const { isExperimental } = useIOExperimentalDesign(); + const switchLabelText = ( +
+ {label} +
+ ); + + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacySwitchlabelText = ( + {label} + ); + + const switchLabelTextComponent = isExperimental + ? switchLabelText + : legacySwitchlabelText; + const toggleCheckbox = () => { triggerHaptic("impactLight"); setToggleValue(!toggleValue); @@ -64,9 +93,7 @@ export const SwitchLabel = ({ -
- {label} -
+ {switchLabelTextComponent} );