pagopa · drmarro · Jul 7, 2023 · Jul 6, 2023 · Jul 7, 2023
@@ -0,0 +1,46 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOColors, IOStyles } from "../../core";
+import { HSpacer } from "../spacer";
+import { Body } from "../typography";
+
+interface Props {
+    text: string;
+    iconName?: IOIcons;
+    iconSize?: IOIconSizeScale;
+    iconColor?: IOColors;
+};
+
+const styles = StyleSheet.create({
+    icon: {
+        marginTop: 4
+    }
+});
+
+const defaultIconSize: IOIconSizeScale = 20;
+
+/**
+ * This component displays an info icon on top-left and a text message
+ * @constructor
+ */
+const AdviceComponent: React.FC<Props> = ({
+    text,
+    iconName = "notice",
+    iconSize = defaultIconSize,
+    iconColor = "blue"
+}) => (
+    <View style={IOStyles.row}>
+        <View style={styles.icon}>
+            <Icon
+                name={iconName}
+                size={iconSize}
+                color={iconColor}
+            />
+        </View>
+        <HSpacer size={8} />
+        <Body>{text}</Body>
+    </View>
+);
+
+export default React.memo(AdviceComponent);
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Advice Components Advice Snapshot 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "marginTop": 4,
+      }
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      bbHeight={20}
+      bbWidth={20}
+      color={4278219750}
+      focusable={false}
+      height={20}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0073E6",
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      tintColor={4278219750}
+      vbHeight={24}
+      vbWidth={24}
+      width={20}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281 7.5c.8439 0 1.5281-.6842 1.5281-1.5281s-.6842-1.5281-1.5281-1.5281c-.844 0-1.5281.6842-1.5281 1.5281S11.1841 19.5 12.0281 19.5Zm0-15.05618h.0005c.5678 0 1.0281.46029 1.0281 1.02808v8.0046c0 .5678-.4603 1.028-1.0281 1.028h-.0005c-.5678 0-1.0281-.4602-1.0281-1.028V5.4719c0-.56779.4603-1.02808 1.0281-1.02808Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <Text
+    color="bluegrey"
+    defaultColor="bluegrey"
+    defaultWeight="Regular"
+    font="TitilliumWeb"
+    fontStyle={
+      {
+        "fontSize": 16,
+        "lineHeight": 24,
+      }
+    }
+    style={
+      [
+        {
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        {
+          "color": "#475A6D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+      ]
+    }
+    weight="Regular"
+  >
+    Text
+  </Text>
+</View>
+`;
@@ -0,0 +1,10 @@
+import React from "react";
+import * as TestRenderer from "react-test-renderer";
+import Advice from "../Advice";
+
+describe("Test Advice Components", () => {
+  it("Advice Snapshot", () => {
+    const advice = TestRenderer.create(<Advice text={"Text"}></Advice>).toJSON();
+    expect(advice).toMatchSnapshot();
+  });
+});
@@ -0,0 +1 @@
+export * from "./Advice";