@pagopa/io-app-design-system 4.0.1 → 4.2.0

package/src/components/featureInfo/FeatureInfo.tsx

@@ -9,9 +9,9 @@ import {
   IOPictograms,
   Icon,
   Pictogram,
-  VSpacer
+  VStack
 } from "../../components";
-import { IOStyles } from "../../core";
+import { IOStyles, useIOTheme } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
@@ -42,11 +42,7 @@ const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 
 const renderNode = (body: FeatureInfoProps["body"]) => {
   if (typeof body === "string") {
-    return (
-      <BodySmall color="grey-700" testID="infoScreenBody">
-        {body}
-      </BodySmall>
-    );
+    return <BodySmall testID="infoScreenBody">{body}</BodySmall>;
   }
 
   return body;
@@ -57,23 +53,25 @@ export const FeatureInfo = ({
   pictogramName,
   body,
   action
-}: FeatureInfoProps) => (
-  <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
-    {iconName && (
-      <Icon name={iconName} size={DEFAULT_ICON_SIZE} color="grey-300" />
-    )}
-    {pictogramName && (
-      <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
-    )}
-    <HSpacer size={24} />
-    <View style={{ flexShrink: 1 }}>
-      {renderNode(body)}
-      {action && (
-        <>
-          {/* Add "marginTop" equivalent if body text is present.
-          This verbose code could be deleted once we got "gap"
-          property support */}
-          {body && <VSpacer size={4} />}
+}: FeatureInfoProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
+      {iconName && (
+        <Icon
+          name={iconName}
+          size={DEFAULT_ICON_SIZE}
+          color={theme["icon-decorative"]}
+        />
+      )}
+      {pictogramName && (
+        <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
+      )}
+      <HSpacer size={24} />
+      <VStack space={4} style={{ flexShrink: 1 }}>
+        {renderNode(body)}
+        {action && (
           <BodySmall
             weight="Semibold"
             asLink
@@ -84,8 +82,8 @@ export const FeatureInfo = ({
           >
             {action.label}
           </BodySmall>
-        </>
-      )}
+        )}
+      </VStack>
     </View>
-  </View>
-);
+  );
+};

package/src/components/layout/index.tsx

@@ -1,4 +1,3 @@
-export * from "./BlockButtons";
 export * from "./FooterActions";
 export * from "./FooterActionsInline";
 export * from "./FooterWithButtons";

package/src/components/spacer/Spacer.tsx

@@ -2,10 +2,8 @@ import React from "react";
 import { View } from "react-native";
 import { hexToRgba, IOColors, IOSpacer } from "../../core";
 
-export type SpacerOrientation = "vertical" | "horizontal";
-
 type BaseSpacerProps = {
-  orientation: SpacerOrientation;
+  orientation: "vertical" | "horizontal";
   size: IOSpacer;
 };
 
@@ -21,7 +19,7 @@ const debugBg = hexToRgba(IOColors.red, 0.2);
 
 /**
 Native `Spacer` component
-@param  {SpacerOrientation} orientation 
+@param  {string} orientation
 @param {IOSpacer} size
  */
 const Spacer = ({ orientation, size }: BaseSpacerProps) => {

package/src/components/stack/Stack.tsx

@@ -1,27 +1,36 @@
-import React, { ReactNode } from "react";
+import React, { PropsWithChildren } from "react";
 import { View, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
 type AllowedStyleProps = Pick<
   ViewStyle,
-  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
+  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
 >;
 
-type Stack = {
+type Stack = PropsWithChildren<{
   space?: IOSpacer;
-  children: ReactNode;
   style?: AllowedStyleProps;
+}>;
+
+type BaseStack = Stack & {
+  orientation: "vertical" | "horizontal";
 };
 
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export const HStack = ({ space, children, style }: Stack) => (
+
+const Stack = ({
+  space,
+  style,
+  orientation = "vertical",
+  children
+}: BaseStack) => (
   <View
     style={{
       display: "flex",
-      flexDirection: "row",
+      flexDirection: orientation === "horizontal" ? "row" : "column",
       gap: space,
       ...style
     }}
@@ -30,20 +39,19 @@ export const HStack = ({ space, children, style }: Stack) => (
   </View>
 );
 
+export const HStack = ({ children, ...props }: Stack) => (
+  <Stack orientation="horizontal" {...props}>
+    {children}
+  </Stack>
+);
+
 /**
 Vertical Stack component
 @param {IOSpacer} space
  */
 
-export const VStack = ({ space, children, style }: Stack) => (
-  <View
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      gap: space,
-      ...style
-    }}
-  >
+export const VStack = ({ children, ...props }: Stack) => (
+  <Stack orientation="vertical" {...props}>
     {children}
-  </View>
+  </Stack>
 );

package/src/core/IOColors.ts

@@ -233,6 +233,7 @@ export const IOColorsStatus = asIOColors({
 });
 
 export type IOColorsStatus = keyof typeof IOColorsStatus;
+
 export type IOColorsStatusForeground = Extract<
   IOColorsStatus,
   "error-850" | "warning-850" | "info-850" | "success-850"