Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOPLT-157] Introducing legacy variants to switch, radio and checkbox components #68

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Introducing legacy variants
drmarro committed Sep 14, 2023
commit d63c2dc2e75576c4cf805e130c61167aaddb72ca
63 changes: 36 additions & 27 deletions example/src/pages/Selection.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<Screen>
<H2
style={{
marginVertical: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Checkbox
</H2>
{/* CheckboxLabel */}
{renderCheckboxLabel()}
{/* ListItemCheckbox */}
{renderListItemCheckbox()}
<H2 style={{ marginVertical: 16 }}>Radio</H2>
{/* RadioListItem */}
<RadioListItemsShowroom />
<H2 style={{ marginVertical: 16 }}>Switch</H2>
{/* Native Switch */}
<NativeSwitchShowroom />
{/* ListItemSwitch */}
<ListItemSwitchShowroom />
{/* SwitchLabel */}
{renderAnimatedSwitch()}
</Screen>
);
export const Selection = () => {
const { isExperimental, setExperimental } = useIOExperimentalDesign();
return (
<Screen>
<H2
style={{
marginVertical: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Checkbox
</H2>
<ListItemSwitch
label="Abilita Design Sperimentale"
value={isExperimental}
onSwitchValueChange={setExperimental}
/>
{/* CheckboxLabel */}
{renderCheckboxLabel()}
{/* ListItemCheckbox */}
{renderListItemCheckbox()}
<H2 style={{ marginVertical: 16 }}>Radio</H2>
{/* RadioListItem */}
<RadioListItemsShowroom />
<H2 style={{ marginVertical: 16 }}>Switch</H2>
{/* Native Switch */}
<NativeSwitchShowroom />
{/* ListItemSwitch */}
<ListItemSwitchShowroom />
{/* SwitchLabel */}
{renderAnimatedSwitch()}
</Screen>
);
};

const renderCheckboxLabel = () => (
<>
31 changes: 26 additions & 5 deletions src/components/checkbox/AnimatedCheckbox.tsx
Original file line number Diff line number Diff line change
@@ -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,17 +112,15 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
style={[
styles.checkboxBorder,
{
borderColor:
IOColors[IOSelectionTickVisualParams.borderColorOffState]
borderColor: borderColorProp
}
]}
/>
<Animated.View
style={[
styles.checkBoxSquare,
{
backgroundColor:
IOColors[IOSelectionTickVisualParams.bgColorOnState]
backgroundColor: backgroundColorProp
},
animatedCheckboxSquare
]}
30 changes: 20 additions & 10 deletions src/components/checkbox/AnimatedMessageCheckbox.tsx
Original file line number Diff line number Diff line change
@@ -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
]}
39 changes: 33 additions & 6 deletions src/components/checkbox/CheckboxLabel.tsx
Original file line number Diff line number Diff line change
@@ -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<React.ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
Pick<React.ComponentProps<typeof Pressable>, "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 = (
<H6 style={{ flexShrink: 1 }} color={"black"}>
{label}
</H6>
);

// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
const legacyCheckboxlabelText = (
<Text style={styles.legacyTextValue}>{label}</Text>
);

const checkboxLabelTextComponent = isExperimental
? checkboxLabelText
: legacyCheckboxlabelText;

const toggleCheckbox = () => {
triggerHaptic("impactLight");
setToggleValue(!toggleValue);
@@ -67,9 +96,7 @@ export const CheckboxLabel = ({
<AnimatedCheckbox checked={checked ?? toggleValue} />
</View>
<HSpacer size={8} />
<H6 color={"black"} style={{ flexShrink: 1 }}>
{label}
</H6>
{checkboxLabelTextComponent}
</View>
</Pressable>
);
31 changes: 26 additions & 5 deletions src/components/radio/AnimatedRadio.tsx
Original file line number Diff line number Diff line change
@@ -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,17 +110,15 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
style={[
styles.radioBorder,
{
borderColor:
IOColors[IOSelectionTickVisualParams.borderColorOffState]
borderColor: borderColorProp
}
]}
/>
<Animated.View
style={[
styles.radioCircle,
{
backgroundColor:
IOColors[IOSelectionTickVisualParams.bgColorOnState]
backgroundColor: backgroundColorProp
},
animatedCheckboxSquare
]}
48 changes: 35 additions & 13 deletions src/components/switch/NativeSwitch.tsx
Original file line number Diff line number Diff line change
@@ -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<SwitchProps, "onValueChange" | "value">;

export const NativeSwitch = ({ onValueChange, value }: OwnProps) => (
<Switch
trackColor={{
false: IOColors[IOSwitchVisualParams.bgColorOffState],
true: IOColors[IOSwitchVisualParams.bgColorOnState]
}}
thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
ios_backgroundColor={IOColors[IOSwitchVisualParams.bgColorOffState]}
onValueChange={onValueChange}
value={value}
/>
);
// 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 (
<Switch
trackColor={trackColorComponent}
thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
ios_backgroundColor={
isExperimental
? IOColors[IOSwitchVisualParams.bgColorOffState]
: bgLegacyTrackColorAndroid
}
onValueChange={onValueChange}
value={value}
/>
);
};
Loading