@pagopa/io-app-design-system 2.0.3 → 2.0.4

package/lib/module/components/typography/index.js

@@ -1,6 +1,7 @@
 export * from "./BaseTypography";
 export * from "./IOText";
 export * from "./Body";
+export * from "./ComposedBodyFromArray";
 export * from "./Caption";
 export * from "./Chip";
 export * from "./ButtonText";

package/lib/module/components/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/typography/index.tsx"],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB"}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/typography/index.tsx"],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,yBAAyB;AACvC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,MAAM;AACpB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB"}

package/lib/typescript/components/featureInfo/FeatureInfo.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { GestureResponderEvent } from "react-native";
 import { IOIcons, IOPictograms } from "../../components";
 type PartialFeatureInfo = {
-    body?: string | React.ReactNode;
+    body?: string | ReactNode;
 };
 type FeatureInfoActionProps = {
     action: {

package/lib/typescript/components/featureInfo/FeatureInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/featureInfo/FeatureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAQ,MAAM,cAAc,CAAC;AAC3D,OAAO,EAIL,OAAO,EAEP,YAAY,EAKb,MAAM,kBAAkB,CAAC;AAG1B,KAAK,kBAAkB,GAAG;IAExB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;KACjD,CAAC;CACH,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEN,KAAK,uBAAuB,GACxB;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,EAAE,YAAY,CAAA;CAAE,GACjD;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEjD,KAAK,gBAAgB,GAAG,uBAAuB,GAC7C,kBAAkB,GAClB,sBAAsB,CAAC;AAiBzB,eAAO,MAAM,WAAW,8CAKrB,gBAAgB,sBA8BlB,CAAC"}
+{"version":3,"file":"FeatureInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/featureInfo/FeatureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAQ,MAAM,cAAc,CAAC;AAC3D,OAAO,EAIL,OAAO,EAEP,YAAY,EAKb,MAAM,kBAAkB,CAAC;AAG1B,KAAK,kBAAkB,GAAG;IAExB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;KACjD,CAAC;CACH,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEN,KAAK,uBAAuB,GACxB;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,EAAE,YAAY,CAAA;CAAE,GACjD;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEjD,KAAK,gBAAgB,GAAG,uBAAuB,GAC7C,kBAAkB,GAClB,sBAAsB,CAAC;AAiBzB,eAAO,MAAM,WAAW,8CAKrB,gBAAgB,sBA8BlB,CAAC"}

package/lib/typescript/components/typography/ComposedBodyFromArray.d.ts

@@ -0,0 +1,13 @@
+import React, { ComponentProps, ReactElement } from "react";
+import { TextStyle } from "react-native";
+import { Body } from "./Body";
+export type BodyProps = ComponentProps<typeof Body> & {
+    text: string | ReactElement;
+};
+type PropsComposedBody = {
+    body: Array<BodyProps>;
+    textAlign?: TextStyle["textAlign"];
+};
+export declare const ComposedBodyFromArray: ({ body, textAlign }: PropsComposedBody) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ComposedBodyFromArray.d.ts.map

package/lib/typescript/components/typography/ComposedBodyFromArray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposedBodyFromArray.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/ComposedBodyFromArray.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,wBAG/B,iBAAiB,sBAQnB,CAAC"}

package/lib/typescript/components/typography/__test__/ComposedBodyFromArray.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ComposedBodyFromArray.test.d.ts.map

package/lib/typescript/components/typography/__test__/ComposedBodyFromArray.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposedBodyFromArray.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/__test__/ComposedBodyFromArray.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/components/typography/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./BaseTypography";
 export * from "./IOText";
 export * from "./Body";
+export * from "./ComposedBodyFromArray";
 export * from "./Caption";
 export * from "./Chip";
 export * from "./ButtonText";

package/lib/typescript/components/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { GestureResponderEvent, View } from "react-native";
 import {
   Body,
@@ -16,7 +16,7 @@ import { IOStyles } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
-  body?: string | React.ReactNode;
+  body?: string | ReactNode;
 };
 
 type FeatureInfoActionProps =

package/src/components/typography/ComposedBodyFromArray.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentProps, ReactElement } from "react";
+import { TextStyle } from "react-native";
+import { Body } from "./Body";
+
+export type BodyProps = ComponentProps<typeof Body> & {
+  text: string | ReactElement;
+};
+
+type PropsComposedBody = {
+  body: Array<BodyProps>;
+  textAlign?: TextStyle["textAlign"];
+};
+
+export const ComposedBodyFromArray = ({
+  body,
+  textAlign = "center"
+}: PropsComposedBody) => (
+  <Body style={{ textAlign }}>
+    {body.map(({ text, key, ...props }, i) => (
+      <Body key={key ?? `OpResScreen_${i}`} {...props}>
+        {text}
+      </Body>
+    ))}
+  </Body>
+);

package/src/components/typography/__test__/ComposedBodyFromArray.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { BodyProps, ComposedBodyFromArray } from "../ComposedBodyFromArray";
+
+describe("ComposedBodyFromArray", () => {
+  it("should match snapshot, empty body, default text align", () => {
+    const component = render(<ComposedBodyFromArray body={[]} />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, empty body, auto text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={[]} textAlign="auto" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, empty body, center text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={[]} textAlign="center" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, empty body, justify text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={[]} textAlign="justify" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, empty body, left text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={[]} textAlign="left" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, empty body, right text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={[]} textAlign="right" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, default text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, auto text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} textAlign="auto" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, center text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} textAlign="center" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, justify text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} textAlign="justify" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, left text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} textAlign="left" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, multiple items body, right text align", () => {
+    const component = render(
+      <ComposedBodyFromArray body={multipleItemsBody} textAlign="right" />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  const multipleItemsBody = [
+    {
+      text: "Multiple ",
+      weight: "Regular"
+    },
+    {
+      text: "styles",
+      weight: "Bold"
+    },
+    {
+      text: " text ",
+      weight: "Light"
+    },
+    {
+      text: "just",
+      weight: "Medium"
+    },
+    {
+      text: " weights",
+      weight: "Semibold"
+    }
+  ] as Array<BodyProps>;
+});