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

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

@@ -0,0 +1,826 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Typography/Features BodyVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 24,
+          "letterSpacing": 0.3,
+          "lineHeight": 32,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body XL Regular - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 18,
+          "letterSpacing": 0.3,
+          "lineHeight": 26,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body L Regular - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body M Regular - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 14,
+          "letterSpacing": 0.3,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body S Regular - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 12,
+          "letterSpacing": 0.3,
+          "lineHeight": 16,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body XS Regular - The quick brown fox jumps over the lazy dog
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features BodyVariantsBold 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 24,
+          "letterSpacing": 0.3,
+          "lineHeight": 32,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body XL Bold - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 18,
+          "letterSpacing": 0.3,
+          "lineHeight": 26,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body L Bold - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body M Bold - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 14,
+          "letterSpacing": 0.3,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body S Bold - The quick brown fox jumps over the lazy dog
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 12,
+          "letterSpacing": 0.3,
+          "lineHeight": 16,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Body XS Bold - The quick brown fox jumps over the lazy dog
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 40,
+          "letterSpacing": 0,
+          "lineHeight": 40,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS 3XL
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 32,
+          "letterSpacing": 0,
+          "lineHeight": 40,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS 2XL
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 24,
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS XL
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 18,
+          "letterSpacing": 0,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS L
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 16,
+          "letterSpacing": 0,
+          "lineHeight": 18,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS M
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 14,
+          "letterSpacing": 0,
+          "lineHeight": 16,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS S
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardBold",
+          "fontSize": 12,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      CONTENT CAPS XS
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features ContextInheritance 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": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Parent variant
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandardBold",
+            "fontSize": 18,
+            "letterSpacing": 0.3,
+            "lineHeight": 26,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Parent: body-l bold accent
+        <Text
+          style={
+            {
+              "color": "#563B56",
+              "fontFamily": "GTStandardBold",
+              "fontSize": 18,
+              "letterSpacing": 0.3,
+              "lineHeight": 26,
+            }
+          }
+          suppressHighlighting={true}
+        >
+           - Child inherits all (variant, weight, color)
+        </Text>
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Weight inheritance
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandardBold",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Parent: body-m bold
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+           - Child inherits weight
+        </Text>
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Color inheritance
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#357105",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Parent: success color
+        <Text
+          style={
+            {
+              "color": "#357105",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+           - Child inherits color
+        </Text>
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Override inherited values
+      </Text>
+      <Text
+        style={
+          {
+            "color": "#563B56",
+            "fontFamily": "GTStandardBold",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Parent: body-m bold accent
+        <Text
+          style={
+            {
+              "color": "#BD100F",
+              "fontFamily": "GTStandardRegular",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+           
+          - Child overrides all
+        </Text>
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features HeaderComponents 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      aria-level={1}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 56,
+          "letterSpacing": 0,
+          "lineHeight": 64,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 1 - heading-2xl
+    </Text>
+    <Text
+      aria-level={2}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 48,
+          "letterSpacing": 0,
+          "lineHeight": 56,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 2 - heading-xl
+    </Text>
+    <Text
+      aria-level={3}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 38,
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 3 - heading-l
+    </Text>
+    <Text
+      aria-level={4}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 28,
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 4 - heading-m
+    </Text>
+    <Text
+      aria-level={5}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 24,
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 5 - heading-s
+    </Text>
+    <Text
+      aria-level={6}
+      role="heading"
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 20,
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Header 6 - heading-xs
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features HeadingVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 56,
+          "letterSpacing": 0,
+          "lineHeight": 64,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading 2XL - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 48,
+          "letterSpacing": 0,
+          "lineHeight": 56,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading XL - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 38,
+          "letterSpacing": 0,
+          "lineHeight": 44,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading L - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 28,
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading M - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 24,
+          "letterSpacing": 0,
+          "lineHeight": 28,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading S - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 20,
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading XS - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 20,
+          "letterSpacing": 0,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Heading 2XS - Semibold
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/Typography/Features LabelVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 18,
+          "letterSpacing": 0,
+          "lineHeight": 26,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Label XL - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 16,
+          "letterSpacing": 0,
+          "lineHeight": 20,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Label L - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 14,
+          "letterSpacing": 0,
+          "lineHeight": 18,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Label M - Semibold
+    </Text>
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 12,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Label S - Semibold
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;