Skip to content

Commit

Permalink
chore(Cross): [IOAPPX-316] Remove fixed ratio from `FeaturedServiceCa…
Browse files Browse the repository at this point in the history 
…rd` (#5842)

## Short description
This PR removes the fixed ratio from `FeaturedServiceCard`. The end
result is currently visible in the skeleton component:

<img width="336" alt="Screenshot 2024-06-07 at 16 28 16"
src="https://github.com/pagopa/io-app/assets/1255491/cc3bd7c0-5faf-43f4-83d7-e49125f25c83">

## List of changes proposed in this pull request
- Update both `CardPressableBase` and `FeaturedServiceCard` to grow in
size
- Replace small variant of `Avatar` with the bigger one

## How to test
You have two options:
- Launch the app and go to the **Design System → Cards**
- Launch the app and go to the **Services** main screen

---------

Co-authored-by: Alessandro Dell'Oste <[email protected]>
  • Loading branch information
@dmnplb @adelloste
dmnplb and adelloste authored Jun 28, 2024
1 parent 1590395 commit 0f2399c
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 67 deletions.
5 changes: 4 additions & 1 deletion ts/features/services/common/components/CardPressableBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ export const CardPressableBase = ({
onPressIn={onPressIn}
onPressOut={onPressOut}
onTouchEnd={onPressOut}
style={{ flexGrow: 1 }}
>
<Animated.View style={animatedScaleStyle}>{children}</Animated.View>
<Animated.View style={[animatedScaleStyle, { flexGrow: 1 }]}>
{children}
</Animated.View>
</Pressable>
);
};
53 changes: 29 additions & 24 deletions ts/features/services/home/components/FeaturedServiceCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import Placeholder from "rn-placeholder";
import {
Avatar,
Badge,
Expand All @@ -11,6 +8,9 @@ import {
TestID,
VSpacer
} from "@pagopa/io-app-design-system";
import React from "react";
import { StyleSheet, View } from "react-native";
import Placeholder from "rn-placeholder";
import I18n from "../../../../i18n";
import { WithTestID } from "../../../../types/WithTestID";
import { CardPressableBase } from "../../common/components/CardPressableBase";
Expand All @@ -30,12 +30,13 @@ export const CARD_WIDTH = 210;

const cardPadding: IOSpacingScale = 16;
const cardBorderRadius: number = 8;
const cardTitleMargin: number = 8;
/* Space between the `Avatar` and the content below */
const cardSafeInnerSpace: IOSpacingScale = 16;

const styles = StyleSheet.create({
cardContainer: {
flex: 1,
width: CARD_WIDTH,
aspectRatio: 1,
padding: cardPadding,
borderRadius: cardBorderRadius,
borderCurve: "continuous",
Expand All @@ -58,40 +59,44 @@ const styles = StyleSheet.create({
},
cardTitle: {
width: "100%",
marginTop: cardTitleMargin
marginTop: cardSafeInnerSpace
}
});

const FeaturedServiceCard = (props: FeaturedServiceCardProps) => (
const FeaturedServiceCard = ({
onPress,
testID,
accessibilityLabel,
isNew,
id,
name,
organizationName
}: FeaturedServiceCardProps) => (
<CardPressableBase
onPress={props.onPress}
testID={`${props.testID}-pressable`}
accessibilityLabel={props.accessibilityLabel}
onPress={onPress}
testID={`${testID}-pressable`}
accessibilityLabel={accessibilityLabel}
>
<View
style={[styles.cardContainer, props.isNew && styles.cardContainerNew]}
testID={props.testID}
style={[styles.cardContainer, isNew && styles.cardContainerNew]}
testID={testID}
>
<View style={styles.cardHeader}>
<Avatar logoUri={logoForService(props.id, "")} size="small" />
{props.isNew && (
<Badge variant="purple" text={I18n.t("services.new")} />
)}
<Avatar logoUri={logoForService(id, "")} size="medium" />
{isNew && <Badge variant="purple" text={I18n.t("services.new")} />}
</View>
<View style={styles.cardTitle}>
<H4
lineBreakMode="head"
numberOfLines={3}
color={props.isNew ? "hanPurple-850" : "blueIO-850"}
color={isNew ? "hanPurple-850" : "blueIO-850"}
>
{props.name}
{name}
</H4>
{props.organizationName && (
{organizationName && (
<>
<VSpacer size={4} />
<OrganizationNameLabel>
{props.organizationName}
</OrganizationNameLabel>
<OrganizationNameLabel>{organizationName}</OrganizationNameLabel>
</>
)}
</View>
Expand All @@ -106,8 +111,8 @@ const FeaturedServiceCardSkeleton = ({ testID }: TestID) => (
color={IOColors["grey-200"]}
animate="fade"
radius={8}
width={IOVisualCostants.avatarSizeSmall}
height={IOVisualCostants.avatarSizeSmall}
width={IOVisualCostants.avatarSizeMedium}
height={IOVisualCostants.avatarSizeMedium}
/>
</View>
<View style={styles.cardTitle}>
Expand Down
48 changes: 34 additions & 14 deletions ...es/services/home/components/__tests__/__snapshots__/FeaturedInstitutionCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,17 +334,27 @@ exports[`FeaturedInstitutionCard should match the snapshot 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTouchEnd={[Function]}
style={
Object {
"flexGrow": 1,
}
}
testID="FeaturedInstitutionCardTestID-pressable"
>
<View
style={
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
}
Array [
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
},
Object {
"flexGrow": 1,
},
]
}
>
<View
Expand Down Expand Up @@ -827,17 +837,27 @@ exports[`FeaturedInstitutionCard should match the snapshot when isNew is true 1`
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTouchEnd={[Function]}
style={
Object {
"flexGrow": 1,
}
}
testID="FeaturedInstitutionCardTestID-pressable"
>
<View
style={
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
}
Array [
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
},
Object {
"flexGrow": 1,
},
]
}
>
<View
Expand Down
76 changes: 48 additions & 28 deletions ...atures/services/home/components/__tests__/__snapshots__/FeaturedServiceCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,30 +334,40 @@ exports[`FeaturedServiceCard should match the snapshot 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTouchEnd={[Function]}
style={
Object {
"flexGrow": 1,
}
}
testID="FeaturedServiceCardTestID-pressable"
>
<View
style={
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
}
Array [
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
},
Object {
"flexGrow": 1,
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "flex-start",
"aspectRatio": 1,
"backgroundColor": "#F4F5F8",
"borderColor": "#E8EBF1",
"borderCurve": "continuous",
"borderRadius": 8,
"borderWidth": 1,
"flex": 1,
"flexDirection": "column",
"justifyContent": "space-between",
"padding": 16,
Expand Down Expand Up @@ -390,10 +400,10 @@ exports[`FeaturedServiceCard should match the snapshot 1`] = `
},
Object {
"backgroundColor": "#FFFFFF",
"borderRadius": 8,
"height": 44,
"padding": 6,
"width": 44,
"borderRadius": 12,
"height": 66,
"padding": 9,
"width": 66,
},
]
}
Expand All @@ -407,7 +417,7 @@ exports[`FeaturedServiceCard should match the snapshot 1`] = `
"overflow": "hidden",
},
Object {
"borderRadius": 2,
"borderRadius": 3,
},
]
}
Expand All @@ -434,7 +444,7 @@ exports[`FeaturedServiceCard should match the snapshot 1`] = `
<View
style={
Object {
"marginTop": 8,
"marginTop": 16,
"width": "100%",
}
}
Expand Down Expand Up @@ -822,30 +832,40 @@ exports[`FeaturedServiceCard should match the snapshot when isNew is true 1`] =
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTouchEnd={[Function]}
style={
Object {
"flexGrow": 1,
}
}
testID="FeaturedServiceCardTestID-pressable"
>
<View
style={
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
}
Array [
Object {
"transform": Array [
Object {
"scale": undefined,
},
],
},
Object {
"flexGrow": 1,
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "flex-start",
"aspectRatio": 1,
"backgroundColor": "#F4F5F8",
"borderColor": "#E8EBF1",
"borderCurve": "continuous",
"borderRadius": 8,
"borderWidth": 1,
"flex": 1,
"flexDirection": "column",
"justifyContent": "space-between",
"padding": 16,
Expand Down Expand Up @@ -881,10 +901,10 @@ exports[`FeaturedServiceCard should match the snapshot when isNew is true 1`] =
},
Object {
"backgroundColor": "#FFFFFF",
"borderRadius": 8,
"height": 44,
"padding": 6,
"width": 44,
"borderRadius": 12,
"height": 66,
"padding": 9,
"width": 66,
},
]
}
Expand All @@ -898,7 +918,7 @@ exports[`FeaturedServiceCard should match the snapshot when isNew is true 1`] =
"overflow": "hidden",
},
Object {
"borderRadius": 2,
"borderRadius": 3,
},
]
}
Expand Down Expand Up @@ -969,7 +989,7 @@ exports[`FeaturedServiceCard should match the snapshot when isNew is true 1`] =
<View
style={
Object {
"marginTop": 8,
"marginTop": 16,
"width": "100%",
}
}
Expand Down

0 comments on commit 0f2399c

Please sign in to comment.