@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.0

package/src/system/core/primitives/__snapshots__/Center.features.stories.tsx.snap

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/Center/Features CenteringText 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "height": 144,
+          "justifyContent": "center",
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+          "width": 144,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 24,
+            "letterSpacing": 0,
+            "lineHeight": 28,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Title
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "height": 144,
+          "justifyContent": "center",
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+          "width": 144,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+            "textAlign": "center",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Multi-line centered text content
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Center/Features CircularCentering 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 1000,
+          "borderBottomRightRadius": 1000,
+          "borderTopLeftRadius": 1000,
+          "borderTopRightRadius": 1000,
+          "height": 80,
+          "justifyContent": "center",
+          "width": 80,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 38,
+            "letterSpacing": 0,
+            "lineHeight": 44,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 1000,
+          "borderBottomRightRadius": 1000,
+          "borderTopLeftRadius": 1000,
+          "borderTopRightRadius": 1000,
+          "height": 80,
+          "justifyContent": "center",
+          "width": 80,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 38,
+            "letterSpacing": 0,
+            "lineHeight": 44,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 1000,
+          "borderBottomRightRadius": 1000,
+          "borderTopLeftRadius": 1000,
+          "borderTopRightRadius": 1000,
+          "height": 80,
+          "justifyContent": "center",
+          "width": 80,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 38,
+            "letterSpacing": 0,
+            "lineHeight": 44,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        3
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/system/core/primitives/__snapshots__/Center.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives Center 1`] = `
+exports[`Bumper/Core/Primitives/Center Default 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -16,22 +16,27 @@ exports[`bumper/Primitives Center 1`] = `
     style={
       {
         "alignItems": "center",
-        "backgroundColor": "#563B56",
+        "backgroundColor": "#F7F4EE",
         "height": 120,
         "justifyContent": "center",
-        "width": 120,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0,
+        "width": 208,
       }
     }
   >
-    <View
+    <Text
       style={
         {
-          "backgroundColor": "#F7F4EE",
-          "height": 16,
-          "width": 16,
+          "fontFamily": "GTStandard",
         }
       }
-    />
+      suppressHighlighting={true}
+    >
+      Centered content
+    </Text>
   </View>
 </RNCSafeAreaProvider>
 `;

package/src/system/core/primitives/__snapshots__/Pressable.features.stories.tsx.snap

@@ -0,0 +1,470 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/Pressable/Features HoverEffects 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#F8E7FF",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Hover to change background
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Hover to scale up
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "opacity": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Hover to reduce opacity
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Pressable/Features PolymorphicAs 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 14,
+            "letterSpacing": 0,
+            "lineHeight": 18,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Default as View
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "gap": 12,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 14,
+            "letterSpacing": 0,
+            "lineHeight": 18,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Pressable as HStack
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "column",
+          "gap": 8,
+          "opacity": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 14,
+            "letterSpacing": 0,
+            "lineHeight": 18,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Pressable as VStack
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Pressable/Features PressEffects 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Press to scale down
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "opacity": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Press to change background and opacity
+      </Text>
+    </View>
+    <View
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        {
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Press to scale and rotate
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;