[IOAPPX-310] Remove VDivider and EndOfPage components (#277)

## Short description
This PR removes the `VDivider` and `EndOfPage` components. The former
because it wasn't used. The latter because it's replaced by the
`useScreenEndMargin` hook or space already managed by `FooterActions` or
`IOScrollView`.

## List of changes proposed in this pull request
- Remove mentioned components
- Update example app and Storybook docs accordingly

## Related PRs
Here are the PRs for the components listed above:
- pagopa/io-app#5808
- pagopa/io-app#5787
- pagopa/io-app#5704

example/src/navigation/navigator.tsx

@@ -20,7 +20,6 @@ import { DSAlert } from "../pages/Alert";
 import { Badges } from "../pages/Badges";
 import { Buttons } from "../pages/Buttons";
 import { Colors } from "../pages/Colors";
-import { EndOfPageScreen, EndOfPageScreenWithCTA } from "../pages/EndOfPage";
 import { FooterWithButton } from "../pages/FooterWithButton";
 import { FooterWithButtonEmptyState } from "../pages/FooterWithButtonEmptyState";
 import { ForceScrollDownViewPage } from "../pages/ForceScrollDownViewPage";
@@ -300,23 +299,6 @@ const AppNavigator = () => {
             }}
           />
 
-          <Stack.Screen
-            name={APP_ROUTES.COMPONENTS.END_OF_PAGE.route}
-            component={EndOfPageScreen}
-            options={{
-              headerTitle: APP_ROUTES.COMPONENTS.END_OF_PAGE.title,
-              headerBackTitleVisible: false
-            }}
-          />
-
-          <Stack.Screen
-            name={APP_ROUTES.COMPONENTS.END_OF_PAGE_WITH_CTA.route}
-            component={EndOfPageScreenWithCTA}
-            options={{
-              headerTitle: APP_ROUTES.COMPONENTS.END_OF_PAGE_WITH_CTA.title,
-              headerBackTitleVisible: false
-            }}
-          />
           <Stack.Screen
             name={APP_ROUTES.COMPONENTS.HEADER_FIRST_LEVEL.route}
             component={HeaderFirstLevelScreen}

example/src/navigation/params.ts

@@ -25,8 +25,6 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.TEXT_INPUT.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.SEARCH_INPUT.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.FORCE_SCROLL_DOWN.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.COMPONENTS.END_OF_PAGE.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.COMPONENTS.END_OF_PAGE_WITH_CTA.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_FIRST_LEVEL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.route]: undefined;

example/src/navigation/routes.ts

@@ -31,14 +31,6 @@ const APP_ROUTES = {
       route: "DESIGN_SYSTEM_TAB_NAVIGATION",
       title: "Tab Navigation"
     },
-    END_OF_PAGE: {
-      route: "DESIGN_SYSTEM_HEADER_END_OF_PAGE",
-      title: "End of Page"
-    },
-    END_OF_PAGE_WITH_CTA: {
-      route: "DESIGN_SYSTEM_HEADER_END_OF_PAGE_WITH_CTA",
-      title: "End of Page (with CTA)"
-    },
     HEADER_FIRST_LEVEL: {
       route: "DESIGN_SYSTEM_HEADER_FIRST_LEVEL",
       title: "Header First Level"

example/src/pages/Layout.tsx

@@ -10,7 +10,6 @@ import {
   IOSpacer,
   IOVisualCostants,
   LabelSmall,
-  VDivider,
   VSpacer,
   VStack,
   useIOTheme
@@ -212,17 +211,6 @@ export const Layout = () => {
       </ContentWrapper>
       <Divider />
       <VSpacer size={48} />
-
-      <ContentWrapper>
-        <H3 color={theme["textHeading-default"]} style={{ marginBottom: 16 }}>
-          Vertical
-        </H3>
-
-        <View style={{ flexDirection: "row", height: 100 }}>
-          <VDivider />
-        </View>
-        <VSpacer size={48} />
-      </ContentWrapper>
     </NoMarginScreen>
   );
 };

src/components/divider/Divider.tsx

@@ -2,34 +2,20 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 import { IOColors, useIOTheme } from "../../core";
 
-type DividerOrientation = "vertical" | "horizontal";
-
-type DividerProps = {
-  orientation: DividerOrientation;
-};
-
 const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth;
 
 /**
-Native `Divider` component
-@param  {DividerOrientation} orientation
+Horizontal `Divider` component
  */
-const BaseDivider = React.memo(({ orientation }: DividerProps) => {
+export const Divider = () => {
   const theme = useIOTheme();
-  const baseStyle = {
-    backgroundColor: IOColors[theme["divider-default"]],
-    ...(orientation === "vertical"
-      ? { width: DEFAULT_BORDER_SIZE }
-      : { height: DEFAULT_BORDER_SIZE })
-  };
-  return <View style={baseStyle} />;
-});
 
-/**
-Horizontal Divider component
- */
-export const Divider = () => <BaseDivider orientation={"horizontal"} />;
-/**
-Vertical Divider component
- */
-export const VDivider = () => <BaseDivider orientation={"vertical"} />;
+  return (
+    <View
+      style={{
+        backgroundColor: IOColors[theme["divider-default"]],
+        height: DEFAULT_BORDER_SIZE
+      }}
+    />
+  );
+};

src/components/index.tsx

@@ -8,7 +8,6 @@ export * from "./checkbox";
 export * from "./codeInput";
 export * from "./contentWrapper";
 export * from "./divider";
-export * from "./endOfPage";
 export * from "./featureInfo";
 export * from "./icons";
 export * from "./image";

stories/markdown/Layout.md

@@ -3,7 +3,7 @@
 There are different kinds of layout components:
 * **ContentWrapper**: it is a simple `<View>` component with a default `paddingHorizontal` of `16` (defined as a style constant in `IOVisualConstants`). It is used to wrap the content of a screen to the fixed spacing. The value of the padding can be overridden by passing a `margin` prop that accepts values defined in `IOAppMargin`.
 * **Spacer**: there are two spacer components, `VSpacer` and `HSpacer`, which are used to add vertical and horizontal spacing between components. They are defined as `<View>` components with a fixed height or width, respectively.
-* **Divider**: there are two divider components, `Divider` and `VDivider`, which are used to add a dividing bar between components.
+* **Divider**: used to add a divider between components.
 
 ## Examples
 <br />
@@ -55,7 +55,7 @@ Example for **Spacers** can be found in related stories of [HSpacer](/docs/found
 ### Divider
 
 ```
-import { Divider, VDivider } from '@pagopa/io-app-design-system';
+import { Divider } from '@pagopa/io-app-design-system';
 
 const Component = () => (
   <>
@@ -64,15 +64,5 @@ const Component = () => (
     {// your content here}
   </>
 );
-
-const ComponentWithVDivider = () => (
-  <View style={{
-    flexDirection: 'row'
-  }}>
-    {// your content here}
-    <VDivider />
-    {// your content here}
-  </ View>
-);
 ```
-Example for **Dividers** can be found in related stories of [Divider](/docs/foundation-layout-divider--docs) and [VDivider](/docs/foundation-layout-vdivider--docs).
+Example for **Divider** can be found in the [Divider](/docs/foundation-layout-divider--docs) relative story.