chore(Cross): [IOAPPX-448] Add missing components to the Design Syste…

…m section, remove legacy ones + Change `ListItemMessage` component API (#6541) ## Short description This PR updates the Design System section with missing components. Checking them in isolation is essential to avoid regression during development. ## List of changes proposed in this pull request - Add `BannerErrorState` to the `DSAdvice` page - Restrict the choice of possible icons to avoid excessive generalisation of the component itself - Add the `ListItemSearchInstitution` to the `DSListItems` page - Rename `CgnModuleDiscount` to `ModuleCgnDiscount`, **refactor it** and move it to `DSModules` from `DSListItems` - Remove gradients from `DSColors` because CGN doesn't use them anymore #### `MessageListItem` → `ListItemMessage` - Change the component name - Rename `DoubleAvatar` to `AvatarDouble` (to keep the same convention as the others) and add it to the `DSLogos` page - Replace `badgeText` and `badgeVariant` props with the single `tag` prop - Remove `CustomPressableListItemBase` by integrating it into `ListItemMessage` - Add all the `ListItemMessage` possible combinations to `DSListItems` for testing purposes ### Preview The new `ListItemMessage` section in the **_List Items_** page <img width="320" src="https://github.com/user-attachments/assets/b9689723-b9a3-4a4d-b222-2c7952952322" /> ## How to test Go to the **Design System** section and check the update pages --------- Co-authored-by: Emanuele Dall'Ara <[email protected]> Co-authored-by: Cristiano Tofani <[email protected]> Co-authored-by: Andrea <[email protected]>
pagopa · Dec 19, 2024 · 323996f · 323996f
1 parent 8cf64a9
commit 323996f
Show file tree

Hide file tree

Showing 26 changed files with 1,263 additions and 1,161 deletions.
diff --git a/ts/components/ui/BannerErrorState.tsx b/ts/components/ui/BannerErrorState.tsx
@@ -67,7 +67,7 @@ export type BannerErrorStateProps = BaseBannerErrorStateProps &
  */
 export const BannerErrorState = ({
   viewRef,
-  icon,
+  icon = "warningFilled",
   label,
   actionText,
   onPress,

diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx
@@ -7,7 +7,7 @@ import CGN_ROUTES from "../../navigation/routes";
 import { CgnDetailsParamsList } from "../../navigation/params";
 import { useIODispatch } from "../../../../../store/hooks";
 import { selectMerchantDiscount } from "../../store/actions/merchants";
-import { CgnModuleDiscount } from "./CgnModuleDiscount";
+import { ModuleCgnDiscount } from "./ModuleCgnDiscount";
 
 type Props = {
   discount: Discount;
@@ -38,7 +38,7 @@ export const CgnMerchantDiscountItem: React.FunctionComponent<Props> = ({
 
   return (
     <View style={styles.container}>
-      <CgnModuleDiscount onPress={onDiscountPress} discount={discount} />
+      <ModuleCgnDiscount onPress={onDiscountPress} discount={discount} />
     </View>
   );
 };
diff --git a/...omponents/merchants/CgnModuleDiscount.tsx → ...omponents/merchants/ModuleCgnDiscount.tsx b/...omponents/merchants/CgnModuleDiscount.tsx → ...omponents/merchants/ModuleCgnDiscount.tsx
@@ -1,14 +1,14 @@
 import {
   Badge,
   H6,
-  HSpacer,
+  HStack,
   IOColors,
   IOModuleStyles,
   IOStyles,
   Icon,
   Tag,
-  VSpacer,
-  useIOExperimentalDesign,
+  VStack,
+  useIOTheme,
   useScaleAnimation
 } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
@@ -21,7 +21,7 @@ import I18n from "../../../../../i18n";
 import { getCategorySpecs } from "../../utils/filters";
 import { isValidDiscount, normalizedDiscountPercentage } from "./utils";
 
-type Props = {
+export type ModuleCgnDiscount = {
   onPress: () => void;
   discount: Discount;
 };
@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
     borderWidth: 1
   }
 });
+
 type CategoryTagProps = {
   category: ProductCategory;
 };
@@ -47,24 +48,19 @@ export const CategoryTag = ({ category }: CategoryTagProps) => {
   const categorySpecs = getCategorySpecs(category);
 
   return O.isSome(categorySpecs) ? (
-    <>
-      <View>
-        <Tag
-          text={I18n.t(categorySpecs.value.nameKey)}
-          variant="custom"
-          icon={{
-            name: categorySpecs.value.icon,
-            color: "lightGrey"
-          }}
-        />
-        <VSpacer size={4} />
-      </View>
-      <HSpacer size={4} />
-    </>
+    <Tag
+      text={I18n.t(categorySpecs.value.nameKey)}
+      variant="custom"
+      icon={{
+        name: categorySpecs.value.icon,
+        color: "lightGrey"
+      }}
+    />
   ) : null;
 };
-export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
-  const { isExperimental } = useIOExperimentalDesign();
+
+export const ModuleCgnDiscount = ({ onPress, discount }: ModuleCgnDiscount) => {
+  const theme = useIOTheme();
   const { onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("medium");
 
@@ -92,37 +88,37 @@ export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
             { alignItems: "center", justifyContent: "space-between" }
           ]}
         >
-          <View style={IOStyles.flex}>
-            <View style={[IOStyles.flex, IOStyles.row]}>
-              {discount.isNew && (
-                <>
+          <VStack space={8} style={{ flexShrink: 1 }}>
+            {(discount.discount || discount.isNew) && (
+              <HStack space={8} style={{ flexWrap: "wrap" }}>
+                {discount.isNew && (
                   <Badge
                     variant="purple"
                     text={I18n.t("bonus.cgn.merchantsList.news")}
                   />
-                  <HSpacer size={8} />
-                </>
-              )}
-              {isValidDiscount(discount.discount) && (
-                <Badge
-                  variant="purple"
-                  outline
-                  text={`-${normalizedDiscountPercentage(discount.discount)}%`}
-                />
-              )}
-            </View>
-            <VSpacer size={8} />
+                )}
+                {isValidDiscount(discount.discount) && (
+                  <Badge
+                    variant="purple"
+                    outline
+                    text={`-${normalizedDiscountPercentage(
+                      discount.discount
+                    )}%`}
+                  />
+                )}
+              </HStack>
+            )}
+
             <H6>{discount.name}</H6>
-            <VSpacer size={8} />
-            <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+            <HStack space={4} style={{ flexWrap: "wrap" }}>
               {discount.productCategories.map(categoryKey => (
                 <CategoryTag key={categoryKey} category={categoryKey} />
               ))}
-            </View>
-          </View>
+            </HStack>
+          </VStack>
           <Icon
             name="chevronRightListItem"
-            color={isExperimental ? "blueIO-500" : "blue"}
+            color={theme["interactiveElem-default"]}
             size={24}
           />
         </View>

diff --git a/...ts/___tests___/CgnModuleDiscount.test.tsx → ...ts/___tests___/ModuleCgnDiscount.test.tsx b/...ts/___tests___/CgnModuleDiscount.test.tsx → ...ts/___tests___/ModuleCgnDiscount.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import { ProductCategoryEnum } from "../../../../../../../definitions/cgn/merchants/ProductCategory";
 import I18n from "../../../../../../i18n";
-import { CgnModuleDiscount } from "../CgnModuleDiscount";
+import { ModuleCgnDiscount } from "../ModuleCgnDiscount";
 
 describe("CgnModuleDiscount", () => {
   const discount: Discount = {
@@ -27,7 +27,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should render correctly", () => {
     const { getByText } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
 
     expect(getByText(I18n.t("bonus.cgn.merchantsList.news"))).toBeTruthy();
@@ -37,7 +37,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should call onPress when pressed", () => {
     const { getByRole } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
     fireEvent.press(getByRole("button"));
     expect(onPressMock).toHaveBeenCalled();

diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx
@@ -1,6 +1,7 @@
 import {
   Badge,
   H3,
+  HStack,
   IOColors,
   IOStyles,
   VSpacer
@@ -10,7 +11,7 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import I18n from "../../../../../../i18n";
-import { CategoryTag } from "../CgnModuleDiscount";
+import { CategoryTag } from "../ModuleCgnDiscount";
 import { isValidDiscount, normalizedDiscountPercentage } from "../utils";
 
 type CgnDiscountHeaderProps = {
@@ -65,11 +66,11 @@ export const CgnDiscountHeader = ({
         )}
         <H3>{name}</H3>
         <VSpacer size={12} />
-        <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+        <HStack space={4} style={{ flexWrap: "wrap" }}>
           {productCategories.map(categoryKey => (
             <CategoryTag key={categoryKey} category={categoryKey} />
           ))}
-        </View>
+        </HStack>
       </View>
     </View>
   );

diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
@@ -1,8 +1,8 @@
 import {
+  BodySmall,
   Divider,
-  H2,
+  H3,
   IOVisualCostants,
-  BodySmall,
   ListItemNav,
   VSpacer,
   VStack,
@@ -109,7 +109,9 @@ export const DesignSystem = () => {
     section: { title: string; description?: string };
   }) => (
     <VStack space={4}>
-      <H2 color={theme["textHeading-default"]}>{title}</H2>
+      <H3 weight="Bold" color={theme["textHeading-default"]}>
+        {title}
+      </H3>
       {description && (
         <BodySmall weight={"Regular"} color={theme["textBody-tertiary"]}>
           {description}

diff --git a/ts/features/design-system/core/DSAdvice.tsx b/ts/features/design-system/core/DSAdvice.tsx
@@ -10,6 +10,7 @@ import * as React from "react";
 import { Alert } from "react-native";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { BannerErrorState } from "../../../components/ui/BannerErrorState";
 
 const onLinkPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -35,6 +36,11 @@ export const DSAdvice = () => {
           {renderFeatureInfo()}
         </VStack>
 
+        <VStack space={sectionTitleMargin}>
+          <H4 color={theme["textHeading-default"]}>BannerErrorState</H4>
+          {renderBannerErrorState()}
+        </VStack>
+
         <VStack space={sectionTitleMargin}>
           <H4 color={theme["textHeading-default"]}>Banner</H4>
           {renderBanner()}
@@ -44,6 +50,26 @@ export const DSAdvice = () => {
   );
 };
 
+const renderBannerErrorState = () => (
+  <VStack space={componentMargin}>
+    <DSComponentViewerBox name="BannerErrorState, default icon">
+      <BannerErrorState
+        label="Il caricamento delle ricevute è fallito."
+        actionText={"Riprova"}
+        onPress={onLinkPress}
+      />
+    </DSComponentViewerBox>
+    <DSComponentViewerBox name="BannerErrorState, custom icon">
+      <BannerErrorState
+        icon="errorFilled"
+        label="Il caricamento delle ricevute è fallito."
+        actionText={"Riprova"}
+        onPress={onLinkPress}
+      />
+    </DSComponentViewerBox>
+  </VStack>
+);
+
 const renderFeatureInfo = () => (
   <VStack space={componentMargin}>
     <DSComponentViewerBox name="FeatureInfo · with Icon">