feat: add high density typography scale

packages/components/density-container/stories/DensityContainer.stories.tsx

@@ -134,44 +134,45 @@ export const Overview: Story<DensityContainerProps> = ({
         {Densities.map((density) => {
           return (
             <Box key={density.name}>
-              <DensityContainer
-                key={density.name}
-                density={density.density as Density}
-                {...args}
-              >
+              <>
                 <Heading as="h2" marginBottom="spacingXs">
                   {density.name}
                 </Heading>
-
-                {Components.map((Component) => {
-                  return (
-                    <Box
-                      key={Component.name}
-                      marginBottom="spacingL"
-                      style={{ minHeight: '100px' }}
-                    >
-                      <Text>{Component.name}</Text>
-
+                <DensityContainer
+                  key={density.name}
+                  density={density.density as Density}
+                  {...args}
+                >
+                  {Components.map((Component) => {
+                    return (
                       <Box
-                        marginTop="spacingS"
-                        style={{
-                          backgroundColor: tokens.gray200,
-                          padding: tokens.spacingS,
-                          borderRadius: tokens.borderRadiusMedium,
-                        }}
+                        key={Component.name}
+                        marginBottom="spacingL"
+                        style={{ minHeight: '100px' }}
                       >
-                        <Flex gap="spacingS" alignItems="end">
-                          {Component.props.map((props, index) => {
-                            return (
-                              <Component.component key={index} {...props} />
-                            );
-                          })}
-                        </Flex>
+                        <Text>{Component.name}</Text>
+
+                        <Box
+                          marginTop="spacingS"
+                          style={{
+                            backgroundColor: tokens.gray200,
+                            padding: tokens.spacingS,
+                            borderRadius: tokens.borderRadiusMedium,
+                          }}
+                        >
+                          <Flex gap="spacingS" alignItems="end">
+                            {Component.props.map((props, index) => {
+                              return (
+                                <Component.component key={index} {...props} />
+                              );
+                            })}
+                          </Flex>
+                        </Box>
                       </Box>
-                    </Box>
-                  );
-                })}
-              </DensityContainer>
+                    );
+                  })}
+                </DensityContainer>
+              </>
             </Box>
           );
         })}

packages/components/typography/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@contentful/f36-core": "^4.58.1",
     "@contentful/f36-tokens": "^4.0.3",
+    "@contentful/f36-utils": "^4.24.2",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {

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,12 +35,14 @@ 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"
-      lineHeight="lineHeightS"
+      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
+      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}
       fontColor="gray900"
       fontWeight={fontWeight}
       {...otherProps}

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/src/Heading/Heading.tsx

@@ -7,6 +7,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const HEADING_DEFAULT_TAG = 'h1';
 
@@ -27,15 +28,17 @@ function _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(
   { children, testId = 'cf-ui-heading', ...otherProps }: HeadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={HEADING_DEFAULT_TAG}
       testId={testId}
       marginBottom="spacingM"
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
-      fontSize="fontSizeXl"
-      lineHeight="lineHeightXl"
+      fontSize={density === 'high' ? 'fontSizeXlHigh' : 'fontSizeXl'}
+      lineHeight={density === 'high' ? 'lineHeightXlHigh' : 'lineHeightXl'}
       {...otherProps}
       ref={ref}
     >

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

@@ -58,3 +58,7 @@ Sometimes you might have to truncate the text in the `Heading` component, so we
 ## Props (API reference)
 
 <PropsTable of="Heading" />
+
+## 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/Paragraph/Paragraph.tsx

@@ -6,6 +6,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 export type ParagraphInternalProps = CommonProps &
   MarginProps & {
@@ -20,12 +21,15 @@ export const Paragraph = React.forwardRef<
   HTMLParagraphElement,
   ExpandProps<ParagraphProps>
 >(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {
+  const density = useDensity();
+
   return (
     <Text
       as="p"
       testId={testId}
+      fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
       marginBottom="spacingM"
-      lineHeight="lineHeightM"
       {...otherProps}
       ref={ref}
     >

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

@@ -46,3 +46,7 @@ Sometimes you might have to truncate the text in the `Paragraph` component, so w
 ## Props (API reference)
 
 <PropsTable of="Paragraph" />
+
+## 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/SectionHeading/README.mdx

@@ -60,3 +60,7 @@ Sometimes you might have to truncate the text in the `SectionHeading` component,
 ## Props (API reference)
 
 <PropsTable of="SectionHeading" />
+
+## 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/SectionHeading/SectionHeading.tsx

@@ -10,6 +10,7 @@ import type {
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
 import { Text } from '../Text';
+import { useDensity } from '@contentful/f36-utils';
 
 const SECTION_HEADING_DEFAULT_TAG = 'h2';
 
@@ -35,14 +36,16 @@ function _SectionHeading<
   }: SectionHeadingProps<E>,
   ref: React.Ref<any>,
 ) {
+  const density = useDensity();
+
   return (
     <Text
       as={SECTION_HEADING_DEFAULT_TAG}
       testId={testId}
       marginBottom="spacingL"
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
-      fontSize="fontSizeS"
+      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
       lineHeight="lineHeightS"
       className={cx(
         css({

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,13 +29,15 @@ 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"
-      lineHeight="lineHeightL"
+      fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}
+      lineHeight={density === 'high' ? 'lineHeightLHigh' : 'lineHeightL'}
       fontWeight="fontWeightDemiBold"
       fontColor="gray900"
       {...otherProps}

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,39 @@ 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 gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading marginBottom="spacingXs">{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Caption {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};

packages/components/typography/stories/Heading.stories.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import type { Density } from '@contentful/f36-utils';
+import { Flex } from '@contentful/f36-core';
 import { Heading, HeadingProps } from '../src/Heading/Heading';
+import { DensityContainer } from '../../density-container/';
 
 export default {
   title: 'Typography/Heading',
@@ -18,3 +21,40 @@ Basic.args = {
   children: 'Heading',
   as: 'h1',
 };
+
+export const WithDensitySupport = (props: HeadingProps<'h1'>) => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <Flex gap="spacing2Xl">
+      {Densities.map((density) => {
+        return (
+          <Flex
+            key={density.name}
+            flexDirection="column"
+            style={{ width: '230px' }}
+          >
+            <Heading>{density.name}</Heading>
+            <DensityContainer density={density.density as Density}>
+              <Heading {...props} />
+            </DensityContainer>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+WithDensitySupport.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  as: 'h1',
+};