feat(caption): add high-density support

packages/components/typography/src/Caption/Caption.tsx

@@ -8,6 +8,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const CAPTION_DEFAULT_TAG = 'span';
 
@@ -34,11 +35,13 @@ function _Caption<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG>(
   }: CaptionProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={CAPTION_DEFAULT_TAG}
       testId={testId}
-      fontSize="fontSizeS"
+      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
       lineHeight="lineHeightS"
       fontColor="gray900"
       fontWeight={fontWeight}

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

@@ -38,3 +38,7 @@ We provide you with `as` property, to allow you to set the tag of the `Caption`
 ## Props (API reference)
 
 <PropsTable of="Caption" />
+
+## 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/stories/Caption.stories.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Flex } from '@contentful/f36-core';
+import type { Density } from '@contentful/f36-utils';
+import { Heading } from '@contentful/f36-typography';
 
+import { DensityContainer } from '../../density-container';
 import { Caption, CaptionProps } from '../src/Caption/Caption';
 import { Paragraph } from '../src/Paragraph/Paragraph';
 
@@ -38,3 +41,35 @@ export const Overview = (props: CaptionProps) => (
 Overview.args = {
   children: 'Caption',
 };
+
+export const WithDensitySupport = (props: CaptionProps) => {
+  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}>
+              <Caption {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'The brown fox jumps over the lazy dog',
+};