feat(subheading): add high-density support

packages/components/typography/src/Subheading/README.mdx

@@ -60,3 +60,7 @@ Sometimes you might have to truncate the text in the `Subheading` component, so
 ## Props (API reference)
 
 <PropsTable of="Subheading" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).

packages/components/typography/src/Subheading/Subheading.tsx

@@ -8,6 +8,7 @@ import type {
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const SUBHEADING_DEFAULT_TAG = 'h3';
 
@@ -28,12 +29,14 @@ function _Subheading<
   { children, testId = 'cf-ui-subheading', ...otherProps }: SubheadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={SUBHEADING_DEFAULT_TAG}
       testId={testId}
       marginBottom="spacingM"
-      fontSize="fontSizeL"
+      fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}
       lineHeight="lineHeightL"
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"

packages/components/typography/stories/Subheading.stories.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-
+import { Flex } from '@contentful/f36-core';
+import { Heading } from '@contentful/f36-typography';
+import type { Density } from '@contentful/f36-utils';
+import { DensityContainer } from '../../density-container';
 import { Subheading, SubheadingProps } from '../src/Subheading/Subheading';
 
 export default {
@@ -21,3 +24,35 @@ Basic.args = {
   as: 'h2',
   children: 'Subheading',
 };
+
+export const WithDensitySupport = (props: SubheadingProps<'h2'>) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex flexDirection="column" gap="spacingS">
+      {Densities.map((density) => {
+        return (
+          <Flex key={density.name} flexDirection="column">
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Subheading {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'The brown fox jumps over the lazy dog',
+};