feat(DensityContainer): add package (#2618)

* feat(DensityContainer): add package

* feat(Button/IconButton): add density support

* docs(DensityContainer): edit README

* chore: update package version

* chore: update `jscodeshift` dependency tree

* chore: update to accommodate alpha

* chore: bump version after publishing

* chore: update package-lock file

* feat: add DensityContainer to ComponentSource for LiveEditor

* chore: update comment

Co-authored-by: Thomas Kellermeier <Chaoste@users.noreply.github.com>

---------

Co-authored-by: Renato Massao Yonamine <1071799+massao@users.noreply.github.com>
Co-authored-by: Renato Massao Yonamine <massao.yonamine@contentful.com>
Co-authored-by: Thomas Kellermeier <Chaoste@users.noreply.github.com>

.changeset/config.json

@@ -8,6 +8,7 @@
   ],
   "ignore": [
     "@contentful/f36-avatar",
+    "@contentful/f36-density-container",
     "@contentful/f36-image",
     "@contentful/f36-header",
     "@contentful/f36-layout",

packages/components/density-container/README.mdx

@@ -0,0 +1,43 @@
+---
+title: 'DensityContainer'
+type: 'component'
+status: 'alpha'
+section: 'layoutComponents'
+slug: /components/density-container/
+github: 'https://github.com/contentful/forma-36/tree/main/packages/components/density-container'
+storybook: 'https://f36-storybook.contentful.com/?path=/story/components-density-container--overview'
+typescript: ./src/DensityContainer.tsx
+---
+
+This container can be used to change the density of the children.
+
+## Import
+
+```jsx static=true
+import { DensityContainer } from '@contentful/f36-density-container';
+```
+
+## Examples
+
+### Usage
+
+- A `low` density results in the default experience.
+- A `high` density results in a denser UI, allowing more content and actions to fit on a single screen.
+
+```jsx file=./examples/DensityUsage.tsx
+
+```
+
+## Props (API reference)
+
+<PropsTable of="DensityContainer" />
+
+## Density support
+
+To enable density support in your component, use the `useDensity` hook from `@contentful/f36-utils`.
+
+Follow the density documentation (WIP) to ensure a consistent experience across the product.
+
+```jsx file=./examples/DensitySupport.tsx
+
+```

packages/components/density-container/examples/DensitySupport.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Box } from '@contentful/f36-components';
+import { useDensity } from '@contentful/f36-utils';
+
+export default function YourComponent() {
+  const density = useDensity();
+
+  return <Box>{density === 'high' ? 'High density' : 'Low density'}</Box>;
+}

packages/components/density-container/examples/DensityUsage.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { DensityContainer } from '@contentful/f36-density-container';
+import { Box, Button, Flex, Heading } from '@contentful/f36-components';
+
+export default function DensityUsage() {
+  return (
+    <Flex gap="spacing2Xl" alignItems="start" marginTop="spacingM">
+      <Box>
+        <DensityContainer density="low">
+          <Heading as="h2" marginBottom="spacingXs">
+            Low density
+          </Heading>
+          <Box marginBottom="spacingL">
+            <Box
+              marginTop="spacingS"
+              style={{
+                backgroundColor: tokens.gray200,
+                padding: tokens.spacingS,
+                borderRadius: tokens.borderRadiusMedium,
+              }}
+            >
+              <Flex gap="spacingS" alignItems="end">
+                <Button variant="primary" size="medium">
+                  Medium button
+                </Button>
+                <Button variant="primary" size="small">
+                  Small button
+                </Button>
+              </Flex>
+            </Box>
+          </Box>
+        </DensityContainer>
+      </Box>
+
+      <Box>
+        <DensityContainer density="high">
+          <Heading as="h2" marginBottom="spacingXs">
+            High density
+          </Heading>
+          <Box marginBottom="spacingL">
+            <Box
+              marginTop="spacingS"
+              style={{
+                backgroundColor: tokens.gray200,
+                padding: tokens.spacingS,
+                borderRadius: tokens.borderRadiusMedium,
+              }}
+            >
+              <Flex gap="spacingS" alignItems="end">
+                <Button variant="primary" size="medium">
+                  Medium button
+                </Button>
+                <Button variant="primary" size="small">
+                  Small button
+                </Button>
+              </Flex>
+            </Box>
+          </Box>
+        </DensityContainer>
+      </Box>
+    </Flex>
+  );
+}

packages/components/density-container/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@contentful/f36-density-container",
+  "version": "4.0.0-alpha.3",
+  "description": "Forma 36: DensityContainer component",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@contentful/f36-core": "^4.54.3",
+    "@contentful/f36-tokens": "^4.0.2",
+    "@contentful/f36-utils": "^4.24.1",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/density-container/src/DensityContainer.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DensityContainer } from './DensityContainer';
+import { axe } from '@/scripts/test/axeHelper';
+
+describe('DensityContainer', function () {
+  it('renders the component', () => {
+    const { getByText } = render(
+      <DensityContainer density="low">Density container</DensityContainer>,
+    );
+
+    expect(getByText('Density container')).toBeTruthy();
+  });
+
+  it('renders the component with the appropriate density - low', () => {
+    const { getByTestId } = render(
+      <DensityContainer density="low" className="my-extra-class">
+        Density container
+      </DensityContainer>,
+    );
+
+    expect(getByTestId('cf-ui-density-container--low')).toBeTruthy();
+  });
+
+  it('renders the component with the appropriate density - high', () => {
+    const { getByTestId } = render(
+      <DensityContainer density="high" className="my-extra-class">
+        Density container
+      </DensityContainer>,
+    );
+
+    expect(getByTestId('cf-ui-density-container--high')).toBeTruthy();
+  });
+
+  it('renders the component with an additional class name', () => {
+    const { container } = render(
+      <DensityContainer density="low" className="my-extra-class">
+        Density container
+      </DensityContainer>,
+    );
+
+    expect(container.firstChild).toHaveClass('my-extra-class');
+  });
+
+  it('has no a11y issues', async () => {
+    const { container } = render(
+      <DensityContainer density="low">Density container</DensityContainer>,
+    );
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, type CommonProps } from '@contentful/f36-core';
+import { DensityProvider, type Density } from '@contentful/f36-utils';
+
+export interface DensityContainerProps extends CommonProps {
+  children: React.ReactNode;
+  /**
+   * The density of the container:
+   *
+   * - A `low` density results in the default UI.
+   * - A `high` density results in a denser UI, allowing more content and actions to fit on a single screen.
+   */
+  density: Density;
+}
+
+function _DensityContainer(
+  props: DensityContainerProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {
+    density,
+    testId = `cf-ui-density-container--${density}`,
+    className,
+    children,
+  } = props;
+
+  return (
+    <DensityProvider value={density}>
+      <Box ref={ref} data-test-id={testId} className={className}>
+        {children}
+      </Box>
+    </DensityProvider>
+  );
+}
+
+_DensityContainer.displayName = 'DensityContainer';
+
+export const DensityContainer = React.forwardRef(_DensityContainer);

packages/components/density-container/src/index.ts

@@ -0,0 +1,2 @@
+export { DensityContainer } from './DensityContainer';
+export type { DensityContainerProps } from './DensityContainer';