@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap

@@ -0,0 +1,839 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#563B56",
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 38,
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 32,
+              "width": 32,
+            }
+          }
+        >
+          <svg
+            color="#563B56"
+            data-file-name="star.inline.svg"
+          />
+        </View>
+      </View>
+       Large heading with size 32 icon
+    </Text>
+    <Text
+      style={
+        {
+          "color": "#563B56",
+          "fontFamily": "GTStandard",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 20,
+              "width": 20,
+            }
+          }
+        >
+          <svg
+            color="#563B56"
+            data-file-name="star.inline.svg"
+          />
+        </View>
+      </View>
+       Body text with size 20 icon
+    </Text>
+    <Text
+      style={
+        {
+          "color": "#563B56",
+          "fontFamily": "GTStandard",
+          "fontSize": 14,
+          "letterSpacing": 0.3,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 16,
+              "width": 16,
+            }
+          }
+        >
+          <svg
+            color="#563B56"
+            data-file-name="star.inline.svg"
+          />
+        </View>
+      </View>
+       Small text with size 16 icon
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Icon inherits accent color from Typography
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#563B56"
+              data-file-name="star.inline.svg"
+            />
+          </View>
+        </View>
+         This icon inherits the accent color
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Icon inherits success color from Typography
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#357105",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#357105"
+              data-file-name="check-circle.inline.svg"
+            />
+          </View>
+        </View>
+         Operation completed successfully
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Icon inherits danger color from Typography
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#BD100F",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#BD100F"
+              data-file-name="warning.inline.svg"
+            />
+          </View>
+        </View>
+         Error: Something went wrong
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Icon inherits warning color from Typography
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#BA930B",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#BA930B"
+              data-file-name="info.inline.svg"
+            />
+          </View>
+        </View>
+         Warning: Please review this item
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Nested Typography components - icon inherits from parent
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandard",
+            "fontSize": 18,
+            "letterSpacing": 0.3,
+            "lineHeight": 26,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#563B56"
+              data-file-name="star.inline.svg"
+            />
+          </View>
+        </View>
+         Parent text with icon
+        <Text
+          style={
+            {
+              "color": "#563B56",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          <View>
+            <View
+              style={
+                {
+                  "height": 16,
+                  "width": 16,
+                }
+              }
+            >
+              <svg
+                color="#563B56"
+                data-file-name="check-circle.inline.svg"
+              />
+            </View>
+          </View>
+           Nested text - icon inherits parent color
+        </Text>
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Nested with override - child overrides parent color
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandard",
+            "fontSize": 18,
+            "letterSpacing": 0.3,
+            "lineHeight": 26,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#563B56"
+              data-file-name="star.inline.svg"
+            />
+          </View>
+        </View>
+         Parent accent color
+        <Text
+          style={
+            {
+              "color": "#357105",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          <View>
+            <View
+              style={
+                {
+                  "height": 16,
+                  "width": 16,
+                }
+              }
+            >
+              <svg
+                color="#357105"
+                data-file-name="check-circle.inline.svg"
+              />
+            </View>
+          </View>
+           Child overrides to success
+        </Text>
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Typography is accent, but icon explicitly uses success color
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#357105"
+              data-file-name="check-circle.inline.svg"
+            />
+          </View>
+        </View>
+         Icon overrides inherited color
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Typography is success, but icon explicitly uses danger color
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#357105",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        <View>
+          <View
+            style={
+              {
+                "height": 20,
+                "width": 20,
+              }
+            }
+          >
+            <svg
+              color="#BD100F"
+              data-file-name="warning.inline.svg"
+            />
+          </View>
+        </View>
+         Mixed color scenario
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        >
+          <svg
+            color="#563B56"
+            data-file-name="star.inline.svg"
+          />
+        </View>
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Explicit accent
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        >
+          <svg
+            color="#357105"
+            data-file-name="check-circle.inline.svg"
+          />
+        </View>
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Explicit success
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        >
+          <svg
+            color="#BA930B"
+            data-file-name="warning.inline.svg"
+          />
+        </View>
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Explicit warning
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            {
+              "height": 24,
+              "width": 24,
+            }
+          }
+        >
+          <svg
+            color="#BD100F"
+            data-file-name="warning.inline.svg"
+          />
+        </View>
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandard",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Explicit danger
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;