From 8e7310b5655002723f84ca9e95de56957d55d4f9 Mon Sep 17 00:00:00 2001
From: Davide Marro <131177412+drmarro@users.noreply.github.com>
Date: Fri, 21 Jul 2023 14:14:01 +0200
Subject: [PATCH] [IOPLT-94] Creating showcase for dividers and spacers (#23)
## Short description
Creating a showcase for dividers and spacers in the example app.
## List of changes proposed in this pull request
- Added a page (Layout) to the example app showing the spacers and the
dividers of the DS
---
example/src/components/SpacerViewerBox.tsx | 71 +++++++++
example/src/navigation/navigator.tsx | 14 +-
example/src/pages/Layout.tsx | 164 +++++++++++++++++++++
3 files changed, 246 insertions(+), 3 deletions(-)
create mode 100644 example/src/components/SpacerViewerBox.tsx
create mode 100644 example/src/pages/Layout.tsx
diff --git a/example/src/components/SpacerViewerBox.tsx b/example/src/components/SpacerViewerBox.tsx
new file mode 100644
index 00000000..87e3ef47
--- /dev/null
+++ b/example/src/components/SpacerViewerBox.tsx
@@ -0,0 +1,71 @@
+import {
+ HSpacer,
+ IOColors,
+ IOSpacer,
+ IOThemeContext,
+ SpacerOrientation,
+ VSpacer
+} from "@pagopa/io-app-design-system";
+import React, { useContext } from "react";
+import { Text, View } from "react-native";
+
+type SpacerViewerBoxProps = {
+ size: IOSpacer;
+ orientation?: SpacerOrientation;
+};
+
+const SpacerLabel = ({ value }: { value: IOSpacer }) => {
+ const theme = useContext(IOThemeContext);
+ return (
+
+ {value}
+
+ );
+};
+
+export const SpacerViewerBox = ({
+ size,
+ orientation = "vertical"
+}: SpacerViewerBoxProps) => {
+ const theme = useContext(IOThemeContext);
+ return (
+ <>
+ {orientation === "vertical" ? (
+
+
+
+
+ {size && (
+
+
+
+ )}
+
+ ) : (
+
+
+
+
+ {size && (
+
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 53e50e8e..f79a7702 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -1,10 +1,10 @@
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
-import { Icons } from "../pages/Icons";
-import { Logos } from "../pages/Logos";
-
import { DSAdvice } from "../pages/Advice";
import { DSAlert } from "../pages/Alert";
+import { Icons } from "../pages/Icons";
+import { Layout } from "../pages/Layout";
+import { Logos } from "../pages/Logos";
import MainScreen from "../pages/MainScreen";
import { Pictograms } from "../pages/Pictograms";
import { Typography } from "../pages/Typography";
@@ -57,6 +57,14 @@ const AppNavigator = () => (
headerBackTitleVisible: false
}}
/>
+
{
+ const theme = useContext(IOThemeContext);
+
+ return (
+
+
+
+ Grid
+
+
+ ContentWrapper
+
+
+ {IOAppMargin.map((value, i, arr) => (
+
+
+
+
+ Content example
+
+ {value}
+
+
+
+
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+
+ Spacing
+
+
+
+ VSpacer
+
+
+ {/* Vertical */}
+ {IOSpacer.map((spacerEntry, i, arr) => (
+
+
+ {/* Don't add spacer to the last item. Quick and dirty
+ alternative to the Stack component.
+ https://stackoverflow.com/a/60975451 */}
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+ HSpacer
+
+
+ {/* Horizontal */}
+
+ {IOSpacer.map((spacerEntry, i, arr) => (
+
+
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+
+
+
+ Divider
+
+
+
+ Default (Horizontal)
+
+
+
+
+
+
+
+
+
+
+ Vertical
+
+
+
+
+
+
+
+
+ );
+};