[IOAPPX-334] Add alignItems prop to HStack and VStack components (

#297) ## Short description This PR adds the new optional `alignItems` prop to `HStack` and `VStack` components ## List of changes proposed in this pull request - Add the new optional `alignItems` prop ### Preview <img src="https://github.com/pagopa/io-app-design-system/assets/1255491/819ad785-caca-4d2d-9c9d-29413b01127c" width="320" /> ## How to test 1. Launch the example app 2. Check the **Layout** screen
pagopa · Jul 5, 2024 · 55bf252 · 55bf252
1 parent 409cccf
commit 55bf252
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 64 deletions.
diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx
@@ -122,34 +122,20 @@ export const Layout = () => {
             }}
           >
             <VStack space={16}>
-              {[...Array(3)].map((_el, i) => (
-                <View
-                  key={`block-${i}`}
-                  style={{
-                    height: 32,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: IOColors[theme["appBackground-tertiary"]]
-                  }}
-                >
-                  <LabelSmall
-                    weight="Regular"
-                    color={theme["textBody-tertiary"]}
-                  >{`Block n.${i + 1}`}</LabelSmall>
-                </View>
-              ))}
-              <View
-                style={{
-                  height: 72,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: IOColors[theme["appBackground-tertiary"]]
-                }}
-              >
-                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                  Different height
-                </LabelSmall>
-              </View>
+              <VStackBlocks />
+            </VStack>
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox name="VStack, space 16, centered">
+          <View
+            style={{
+              alignSelf: "flex-start",
+              backgroundColor: IOColors[theme["appBackground-secondary"]]
+            }}
+          >
+            <VStack space={16} alignItems="center">
+              <VStackBlocks />
             </VStack>
           </View>
         </ComponentViewerBox>
@@ -161,35 +147,19 @@ export const Layout = () => {
             }}
           >
             <HStack space={16}>
-              {[...Array(3)].map((_el, i) => (
-                <View
-                  key={`block-${i}`}
-                  style={{
-                    width: 48,
-                    height: 48,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: IOColors[theme["appBackground-tertiary"]]
-                  }}
-                >
-                  <LabelSmall
-                    weight="Regular"
-                    color={theme["textBody-tertiary"]}
-                  >{`${i + 1}`}</LabelSmall>
-                </View>
-              ))}
-              <View
-                style={{
-                  flexGrow: 1,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: IOColors[theme["appBackground-tertiary"]]
-                }}
-              >
-                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                  Growing block
-                </LabelSmall>
-              </View>
+              <HStackBlocks />
+            </HStack>
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox name="HStack, space 16, centered">
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-secondary"]]
+            }}
+          >
+            <HStack space={16} alignItems="center">
+              <HStackBlocks />
             </HStack>
           </View>
         </ComponentViewerBox>
@@ -214,3 +184,80 @@ export const Layout = () => {
     </NoMarginScreen>
   );
 };
+
+const VStackBlocks = () => {
+  const theme = useIOTheme();
+
+  return (
+    <>
+      {[...Array(3)].map((_el, i) => (
+        <View
+          key={`block-${i}`}
+          style={{
+            height: 32,
+            paddingHorizontal: 8,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: IOColors[theme["appBackground-tertiary"]]
+          }}
+        >
+          <LabelSmall
+            weight="Regular"
+            color={theme["textBody-tertiary"]}
+          >{`Block n.${i + 1}`}</LabelSmall>
+        </View>
+      ))}
+      <View
+        style={{
+          height: 72,
+          paddingHorizontal: 16,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: IOColors[theme["appBackground-tertiary"]]
+        }}
+      >
+        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          Different height
+        </LabelSmall>
+      </View>
+    </>
+  );
+};
+
+const HStackBlocks = () => {
+  const theme = useIOTheme();
+
+  return (
+    <>
+      {[...Array(3)].map((_el, i) => (
+        <View
+          key={`block-${i}`}
+          style={{
+            width: 48,
+            paddingVertical: 8,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: IOColors[theme["appBackground-tertiary"]]
+          }}
+        >
+          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>{`${
+            i + 1
+          }`}</LabelSmall>
+        </View>
+      ))}
+      <View
+        style={{
+          flexGrow: 1,
+          paddingVertical: 16,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: IOColors[theme["appBackground-tertiary"]]
+        }}
+      >
+        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          Growing block
+        </LabelSmall>
+      </View>
+    </>
+  );
+};
diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx
@@ -1,22 +1,24 @@
 import React, { ReactNode } from "react";
-import { View } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
 type Stack = {
   space?: IOSpacer;
   children: ReactNode;
+  alignItems?: ViewStyle["alignItems"];
 };
 
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export const HStack = ({ space, children }: Stack) => (
+export const HStack = ({ space, children, alignItems }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "row",
-      columnGap: space
+      columnGap: space,
+      alignItems
     }}
   >
     {children}
@@ -28,12 +30,13 @@ Vertical Stack component
 @param {IOSpacer} space
  */
 
-export const VStack = ({ space, children }: Stack) => (
+export const VStack = ({ space, children, alignItems }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "column",
-      rowGap: space
+      rowGap: space,
+      alignItems
     }}
   >
     {children}

diff --git a/src/core/IOSpacing.ts b/src/core/IOSpacing.ts
@@ -23,9 +23,12 @@ export type IOSpacingScale =
   | 96;
 
 // Values used in the new `<Spacer>` component
-export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;
+export type IOSpacer = Extract<
+  IOSpacingScale,
+  4 | 8 | 12 | 16 | 24 | 32 | 40 | 48
+>;
 export const IOSpacer: ReadonlyArray<IOSpacer> = [
-  4, 8, 16, 24, 32, 40, 48
+  4, 8, 12, 16, 24, 32, 40, 48
 ] as const;
 
 // Margin values used in the new `<ContentWrapper>` component