@factorialco/f0-react-native 0.22.0 → 0.23.1

package/src/components/OnePreset/index.tsx

@@ -1,5 +1,6 @@
-import { Text, Pressable, View } from "react-native";
+import { Text, View } from "react-native";
 import { Counter } from "../Counter";
+import { PressableFeedback } from "../PressableFeedback";
 import { cn } from "../../lib/utils";
 
 interface PresetProps {
@@ -17,20 +18,29 @@ export const OnePreset = ({
 }: PresetProps) => {
   return (
     <View className="flex items-start">
-      <Pressable
+      <PressableFeedback
         onPress={onClick}
+        variant="both"
         className={cn(
-          "flex grow-0 flex-row items-center gap-2 rounded border border-f1-border px-2.5 py-1.5 font-medium text-f1-foreground",
+          "flex grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium",
           number !== undefined && number !== null && "pr-1.5",
-          selected &&
-            "border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected",
+          selected
+            ? "border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected"
+            : "border-f1-border text-f1-foreground",
         )}
       >
-        <Text className="whitespace-nowrap text-f1-foreground">{label}</Text>
+        <Text
+          className={cn(
+            "whitespace-nowrap",
+            selected ? "text-f1-foreground-selected" : "text-f1-foreground",
+          )}
+        >
+          {label}
+        </Text>
         {number !== undefined && number !== null && (
           <Counter value={number} type={selected ? "selected" : "default"} />
         )}
-      </Pressable>
+      </PressableFeedback>
     </View>
   );
 };

package/src/components/PressableFeedback/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,597 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`PressableFeedback Snapshots Snapshot - default variant (both) 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - disabled state 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - highlight variant 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - none variant 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - scale variant 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - with custom className 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden bg-blue-500 p-4"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - with custom highlightAnimation config 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(255, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - with custom scaleAnimation config 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - with custom style 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      {
+        "padding": 16,
+      },
+    ]
+  }
+>
+  <View
+    className="absolute inset-0"
+    pointerEvents="none"
+    style={
+      [
+        {
+          "opacity": 0,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 1)",
+        },
+      ]
+    }
+  />
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;
+
+exports[`PressableFeedback Snapshots Snapshot - with disableAnimation 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="overflow-hidden"
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+>
+  <Text>
+    Test Content
+  </Text>
+</View>
+`;