chore(Cross): [IOAPPX-345] Refactor the entire DS section using `Stac…

…k` components (#5974) > [!important] > This PR depends on: > * #5944 ## Short description This PR refactors the entire **Design System** section using the new `Stack` components. This is a kind of exercise to test the functionality of the new components in real use cases. ## List of changes proposed in this pull request - Update almost all DS-related screens - Add the new MD-related typographic styles to the **Typography** page - Add the new `DSLegacyTypography` screen ## How to test 1. Launch the app in the local environment 2. Go to the **Design System** section and check every page --------- Co-authored-by: Jacopo Pompilii <[email protected]>
pagopa · Jul 29, 2024 · 1bc9cec · 1bc9cec
1 parent e36579b
commit 1bc9cec
Show file tree

Hide file tree

Showing 37 changed files with 3,611 additions and 3,654 deletions.
diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
@@ -3,10 +3,11 @@ import {
   IOVisualCostants,
   ListItemNav,
   VSpacer,
+  VStack,
   useIOTheme
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { SectionList, StatusBar, View, useColorScheme } from "react-native";
+import { SectionList, StatusBar, useColorScheme } from "react-native";
 import { H1 } from "../../components/core/typography/H1";
 import { LabelSmall } from "../../components/core/typography/LabelSmall";
 import { IOStyles } from "../../components/core/variables/IOStyles";
@@ -100,22 +101,22 @@ export const DesignSystem = () => {
   }: {
     section: { title: string; description?: string };
   }) => (
-    <View style={{ marginBottom: 8 }}>
+    <VStack space={4}>
       <H1 color={theme["textHeading-default"]}>{title}</H1>
       {description && (
         <LabelSmall weight={"Regular"} color={theme["textBody-tertiary"]}>
           {description}
         </LabelSmall>
       )}
-    </View>
+    </VStack>
   );
 
   const renderDSSectionFooter = ({ section }: { section: SectionDataProps }) =>
     /* We exclude the last section because
     we already apply the `screenEndMargin` */
     DESIGN_SYSTEM_SECTION_DATA.indexOf(section) !==
     DESIGN_SYSTEM_SECTION_DATA.length - 1 ? (
-      <VSpacer size={40} />
+      <VSpacer size={32} />
     ) : null;
 
   return (
@@ -136,6 +137,7 @@ export const DesignSystem = () => {
         ]}
         renderSectionHeader={renderDSSection}
         renderSectionFooter={renderDSSectionFooter}
+        SectionSeparatorComponent={() => <VSpacer size={8} />}
         renderItem={renderDSNavItem}
         ItemSeparatorComponent={() => <Divider />}
         sections={DESIGN_SYSTEM_SECTION_DATA}

diff --git a/ts/features/design-system/components/DSAssetViewerBox.tsx b/ts/features/design-system/components/DSAssetViewerBox.tsx
@@ -18,7 +18,6 @@ const styles = StyleSheet.create({
   assetWrapper: {
     width: "50%",
     justifyContent: "flex-start",
-    marginBottom: 16,
     paddingHorizontal: assetItemGutter / 2
   },
   assetWrapperSmall: {

diff --git a/ts/features/design-system/components/DSComponentViewerBox.tsx b/ts/features/design-system/components/DSComponentViewerBox.tsx
@@ -3,21 +3,20 @@ import { View, StyleSheet, Text } from "react-native";
 import { IOColors, useIOTheme } from "@pagopa/io-app-design-system";
 
 const styles = StyleSheet.create({
-  componentWrapper: {
-    marginBottom: 24
-  },
   componentWrapperFullWidth: {
     flexGrow: 1
   },
-  lastItem: {
-    marginBottom: 0
-  },
   labelWrapper: {
     display: "flex",
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "space-between"
+  },
+  labelBottom: {
     marginTop: 12
   },
+  labelTop: {
+    marginBottom: 12
+  },
   componentLabel: {
     fontSize: 10
   },
@@ -30,29 +29,38 @@ type DSComponentViewerBoxProps = {
   name: string;
   colorMode?: "dark" | "light";
   fullWidth?: boolean;
-  last?: boolean;
+  reverse?: boolean;
   children: React.ReactNode;
 };
 
 export const DSComponentViewerBox = ({
   name,
   colorMode = "light",
-  last = false,
   fullWidth = false,
+  reverse = false,
   children
 }: DSComponentViewerBoxProps) => {
   const theme = useIOTheme();
 
   return (
     <View
       style={[
-        last ? styles.lastItem : styles.componentWrapper,
-        fullWidth && styles.componentWrapperFullWidth
+        fullWidth && styles.componentWrapperFullWidth,
+        reverse && { flexDirection: "column-reverse" }
       ]}
     >
-      {children}
-      <View style={styles.labelWrapper}>
-        {name && (
+      {reverse ? (
+        <View style={{ flexDirection: "column" }}>{children}</View>
+      ) : (
+        children
+      )}
+      {name && (
+        <View
+          style={[
+            styles.labelWrapper,
+            reverse ? styles.labelTop : styles.labelBottom
+          ]}
+        >
           <Text
             numberOfLines={1}
             ellipsizeMode="tail"
@@ -65,8 +73,8 @@ export const DSComponentViewerBox = ({
           >
             {name}
           </Text>
-        )}
-      </View>
+        </View>
+      )}
     </View>
   );
 };
diff --git a/ts/features/design-system/components/DSIconViewerBox.tsx b/ts/features/design-system/components/DSIconViewerBox.tsx
@@ -7,7 +7,6 @@ export const iconItemGutter = 8;
 const styles = StyleSheet.create({
   iconWrapper: {
     justifyContent: "flex-start",
-    marginBottom: 16,
     paddingHorizontal: iconItemGutter / 2
   },
   iconWrapperSmall: {

diff --git a/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx b/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx
@@ -10,7 +10,6 @@ export const logoItemGutter = 8;
 const styles = StyleSheet.create({
   logoWrapper: {
     justifyContent: "flex-start",
-    marginBottom: 16,
     paddingHorizontal: logoItemGutter / 2
   },
   logoWrapperMedium: {

diff --git a/ts/features/design-system/components/DesignSystemSection.tsx b/ts/features/design-system/components/DesignSystemSection.tsx
@@ -1,23 +1,20 @@
+import { H3, VStack, useIOTheme } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { H1 } from "../../../components/core/typography/H1";
-
-const styles = StyleSheet.create({
-  content: {
-    marginBottom: 54
-  },
-  title: {
-    marginBottom: 16
-  }
-});
+import { View } from "react-native";
 
 type OwnProps = React.PropsWithChildren<{
   title: string;
 }>;
 
-export const DesignSystemSection = (props: OwnProps) => (
-  <View style={styles.content}>
-    <H1 style={styles.title}>{props.title}</H1>
-    {props.children}
-  </View>
-);
+const sectionTitleMargin = 24;
+
+export const DesignSystemSection = (props: OwnProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <VStack space={sectionTitleMargin}>
+      <H3 color={theme["textHeading-default"]}>{props.title}</H3>
+      <View>{props.children}</View>
+    </VStack>
+  );
+};
diff --git a/ts/features/design-system/core/DSAccordion.tsx b/ts/features/design-system/core/DSAccordion.tsx
@@ -1,12 +1,12 @@
 import {
   AccordionItem,
   VSpacer,
+  H4,
   useIOTheme
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { FlatList, ListRenderItemInfo, View } from "react-native";
 import { Body } from "../../../components/core/typography/Body";
-import { H3 } from "../../../components/core/typography/H3";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
 const assistanceData: Array<AccordionItem> = [
@@ -41,14 +41,14 @@ const assistanceData: Array<AccordionItem> = [
 ];
 
 export const DSAccordion = () => {
+  const theme = useIOTheme();
+
   const renderAccordionHeader = () => (
     <View style={{ marginBottom: 24 }}>
-      <H3 color={theme["textHeading-default"]}>AccordionItem</H3>
+      <H4 color={theme["textHeading-default"]}>AccordionItem</H4>
     </View>
   );
 
-  const theme = useIOTheme();
-
   const renderItem = ({ item }: ListRenderItemInfo<AccordionItem>) => (
     <AccordionItem title={item.title} body={item.body} />
   );