[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
pagopa · Jul 21, 2023 · 8e7310b · 8e7310b
1 parent bd0e12b
commit 8e7310b
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 3 deletions.
diff --git a/example/src/components/SpacerViewerBox.tsx 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 (
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="tail"
+      style={{ fontSize: 9, color: IOColors[theme["textBody-tertiary"]] }}
+    >
+      {value}
+    </Text>
+  );
+};
+
+export const SpacerViewerBox = ({
+  size,
+  orientation = "vertical"
+}: SpacerViewerBoxProps) => {
+  const theme = useContext(IOThemeContext);
+  return (
+    <>
+      {orientation === "vertical" ? (
+        <View style={{ flexDirection: "column" }}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]]
+            }}
+          >
+            <VSpacer size={size} />
+          </View>
+          {size && (
+            <View style={{ flexDirection: "row", marginTop: 4 }}>
+              <SpacerLabel value={size} />
+            </View>
+          )}
+        </View>
+      ) : (
+        <View style={{ flexDirection: "row" }}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]],
+              height: 75
+            }}
+          >
+            <HSpacer size={size} />
+          </View>
+          {size && (
+            <View style={{ flexDirection: "column", marginLeft: 4 }}>
+              <SpacerLabel value={size} />
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+};
diff --git 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
       }}
     />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.LAYOUT.route}
+      component={Layout}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.LAYOUT.title,
+        headerBackTitleVisible: false
+      }}
+    />
     <Stack.Screen
       name={APP_ROUTES.COMPONENTS.ADVICE.route}
       component={DSAdvice}

diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx
@@ -0,0 +1,164 @@
+import {
+    Body,
+    ContentWrapper,
+    Divider,
+    H1,
+    H3,
+    HSpacer,
+    IOAppMargin,
+    IOColors,
+    IOSpacer,
+    IOThemeContext,
+    LabelSmall,
+    VDivider,
+    VSpacer
+} from "@pagopa/io-app-design-system";
+import React, { useContext } from "react";
+import { View } from "react-native";
+import { NoMarginScreen } from "../components/Screen";
+import { SpacerViewerBox } from "../components/SpacerViewerBox";
+
+export const Layout = () => {
+  const theme = useContext(IOThemeContext);
+
+  return (
+    <NoMarginScreen>
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Grid
+        </H1>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          ContentWrapper
+        </H3>
+      </ContentWrapper>
+      {IOAppMargin.map((value, i, arr) => (
+        <React.Fragment key={`${value}-${i}`}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]]
+            }}
+          >
+            <ContentWrapper margin={value}>
+              <View
+                style={{
+                  paddingVertical: 16,
+                  backgroundColor: IOColors[theme["appBackground-secondary"]]
+                }}
+              >
+                <Body color={theme["textBody-secondary"]}>Content example</Body>
+                <LabelSmall
+                  style={{ position: "absolute", right: 4, top: 4 }}
+                  fontSize="small"
+                  weight="Regular"
+                  color={theme["textBody-tertiary"]}
+                >
+                  {value}
+                </LabelSmall>
+              </View>
+            </ContentWrapper>
+          </View>
+          {i !== arr.length - 1 && <VSpacer size={16} />}
+        </React.Fragment>
+      ))}
+
+      <VSpacer size={40} />
+
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Spacing
+        </H1>
+
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          VSpacer
+        </H3>
+
+        {/* Vertical */}
+        {IOSpacer.map((spacerEntry, i, arr) => (
+          <React.Fragment key={`${spacerEntry}-${i}-vertical`}>
+            <SpacerViewerBox orientation="vertical" size={spacerEntry} />
+            {/* 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 && <VSpacer size={16} />}
+          </React.Fragment>
+        ))}
+
+        <VSpacer size={24} />
+
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          HSpacer
+        </H3>
+
+        {/* Horizontal */}
+        <View style={{ flexDirection: "row" }}>
+          {IOSpacer.map((spacerEntry, i, arr) => (
+            <React.Fragment key={`${spacerEntry}-${i}-horizontal`}>
+              <SpacerViewerBox orientation="horizontal" size={spacerEntry} />
+              {i !== arr.length - 1 && <HSpacer size={8} />}
+            </React.Fragment>
+          ))}
+        </View>
+
+        <VSpacer size={48} />
+      </ContentWrapper>
+
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Divider
+        </H1>
+
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          Default (Horizontal)
+        </H3>
+
+        <Divider />
+        <VSpacer size={48} />
+      </ContentWrapper>
+      <Divider />
+      <VSpacer size={48} />
+
+      <ContentWrapper>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          Vertical
+        </H3>
+
+        <View style={{ flexDirection: "row", height: 100 }}>
+          <VDivider />
+        </View>
+        <VSpacer size={48} />
+      </ContentWrapper>
+    </NoMarginScreen>
+  );
+};