@pagopa/io-app-design-system 1.4.0 → 1.5.1

package/src/stories/LabelSmall.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { LabelSmall } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/LabelSmall",
+  component: LabelSmall,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof LabelSmall>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/Link.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Link } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/Link",
+  component: Link,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/Monospace.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Monospace } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/Monospace",
+  component: Monospace,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof Monospace>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/utils/fonts.ts

@@ -20,14 +20,17 @@ export type FontWeightValue = (typeof weightValues)[number];
 const fonts = {
   TitilliumWeb: Platform.select({
     android: "TitilliumWeb",
+    web: "TitilliumWeb",
     ios: "Titillium Web"
   }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
+    web: "ReadexPro",
     ios: "Readex Pro"
   }),
   RobotoMono: Platform.select({
     android: "RobotoMono",
+    web: "RobotoMono",
     ios: "Roboto Mono"
   })
 };
@@ -80,9 +83,10 @@ export const makeFontFamilyName = (
   isItalic: boolean = false
 ): string =>
   Platform.select({
-    default: "undefined",
+    web: fonts[font],
     android: `${fonts[font]}-${weight || "Regular"}${isItalic ? "Italic" : ""}`,
-    ios: fonts[font]
+    ios: fonts[font],
+    default: "undefined"
   });
 
 /**
@@ -97,8 +101,10 @@ export const makeFontStyleObject = (
   font: FontFamily | undefined = "TitilliumWeb"
 ): FontStyleObject =>
   Platform.select({
-    default: {
-      fontFamily: "undefined"
+    web: {
+      fontFamily: makeFontFamilyName(font, weight, isItalic),
+      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
+      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
     },
     android: {
       fontFamily: makeFontFamilyName(font, weight, isItalic)
@@ -107,5 +113,6 @@ export const makeFontStyleObject = (
       fontFamily: makeFontFamilyName(font, weight, isItalic),
       fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
       fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
-    }
+    },
+    default: { fontFamily: "undefined" }
   });