Repository: marigold-ui/marigold
Pull request #1870 (2022-03-16 10:37:31)

feat(comp): Center component
#1860 

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: f0ab5434f2c157a8299f3bc348adaebeffd22c61

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/Center-component?filename=.changeset/tiny-insects-perform.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat(comp)%3A%20Center%20component%0A)


sebald: @ti10le add gap? :)
ti10le: Currently we do not know where and in which cases we can use center. Therefore, we leave it out for now and add it when needed.
ti10le: @sebald I've made some rewrite. It's not for super centering with an position absolute.
orientation: [every-layout](https://every-layout.dev/layouts/center/) & [chakra](https://chakra-ui.com/docs/components/layout/center)

sebald: Will take a look at it tomorrow :)

Patch:
diff --git a/.changeset/proud-drinks-marry.md b/.changeset/proud-drinks-marry.md
new file mode 100644
index 000000000..d2b3d71ec
--- /dev/null
+++ b/.changeset/proud-drinks-marry.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor 
+"@marigold/components": minor
+---
+
+feat(comp): Introduce Breakout component
diff --git a/.changeset/tiny-insects-perform.md b/.changeset/tiny-insects-perform.md
new file mode 100644
index 000000000..918288dcd
--- /dev/null
+++ b/.changeset/tiny-insects-perform.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat(comp): Center component
diff --git a/docs/content/components/breakout.mdx b/docs/content/components/breakout.mdx
new file mode 100644
index 000000000..3515c2972
--- /dev/null
+++ b/docs/content/components/breakout.mdx
@@ -0,0 +1,131 @@
+---
+title: Breakout
+---
+
+import { Box, Breakout, Text } from '@marigold/components';
+
+# Breakout
+
+## Description
+
+Breakout is a Layout element which lets you span the full row in a CSS grid context e.g. our Container component. You can use `horizontalAlign` or `verticalAlign` to place the items inside the Breakout element.
+
+<Container alignContainer="center">
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="80px" width="100%" />
+  <Breakout>
+    <Box
+      as={Breakout}
+      verticalAlign="center"
+      horizontalAlign="center"
+      border="1px solid #ced4da"
+      bg="#e9ecef"
+      height="80px"
+    >
+      BREAKOUT
+    </Box>
+  </Breakout>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="80px" width="100%" />
+</Container>
+<br />
+
+```tsx onlyCode
+import { Breakout } from '@marigold/components';
+```
+
+## Props
+
+| Property          | Type                  | Default  |
+| :---------------- | :-------------------- | :------- |
+| `verticalAlign`   | `left, center, right` | `center` |
+| `horizontalAlign` | `top, bottom, center` | `center` |
+
+## Examples
+
+Vertical alignment
+
+```tsx
+<Breakout>
+  <Box
+    as={Breakout}
+    border="1px solid #ced4da"
+    bg="#e9ecef"
+    height="100px"
+    p="small"
+  >
+    BREAKOUT with left aligned content
+  </Box>
+</Breakout>
+```
+
+Horizontal alignment
+
+```tsx
+<Breakout>
+  <Box
+    as={Breakout}
+    border="1px solid #ced4da"
+    bg="#e9ecef"
+    height="100px"
+    p="small"
+    horizontalAlign="bottom"
+    verticalAlign="center"
+  >
+    BREAKOUT with bottom aligned content
+  </Box>
+</Breakout>
+```
+
+## Breakout Text inside Container
+
+```tsx
+<Container size="large" alignContainer="center">
+  <Box as={Text} pb="medium">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book.
+  </Box>
+  <Box as={Breakout} verticalAlign="left" css={{ fontWeight: 800 }}>
+    IMPORTANT: This is a breakout text inside a container full of random text.
+    Aligned from left to write and more width than the maximum width of the
+    container.
+  </Box>
+  <Box as={Text} pt="medium">
+    It has survived not only five centuries, but also the leap into electronic
+    typesetting, remaining essentially unchanged. It was popularised in the
+    1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+    and more recently with desktop publishing software like Aldus PageMaker
+    including versions of Lorem Ipsum.
+  </Box>
+</Container>
+```
+
+## Breakout iframe inside Text Container
+
+```tsx
+<Container alignContainer="center">
+  <Box as={Text} pb="medium">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book.
+  </Box>
+  <Breakout>
+    <Aspect ratio="ultrawide">
+      <iframe
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4820.000043444012!2d7.826018541821473!3d48.020383262446884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47911b1e29425703%3A0xbe342117a976e59!2sEuropa-Park%20Stadion!5e1!3m2!1sde!2sde!4v1647595604899!5m2!1sde!2sde"
+        title="sc_map"
+        width="100%"
+        height="100%"
+      />
+    </Aspect>
+  </Breakout>
+  <Box as={Text} pt="medium">
+    It has survived not only five centuries, but also the leap into electronic
+    typesetting, remaining essentially unchanged. It was popularised in the
+    1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+    and more recently with desktop publishing software like Aldus PageMaker
+    including versions of Lorem Ipsum.
+  </Box>
+</Container>
+```
diff --git a/docs/content/components/center.mdx b/docs/content/components/center.mdx
new file mode 100644
index 000000000..816263402
--- /dev/null
+++ b/docs/content/components/center.mdx
@@ -0,0 +1,93 @@
+---
+title: Center
+---
+
+# Center
+
+Center is a layout component that centers its children horizontally.
+You can use it to center a single child or a list of children.
+
+<Center maxWidth="min(350px, 50vw)">
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+</Center>
+<br />
+
+```tsx onlyCode
+import { Center } from '@marigold/components';
+```
+
+## Props
+
+| Property   | Type                           | Default |
+| :--------- | :----------------------------- | :------ |
+| `maxWidth` | `string`                       |         |
+| `space`    | `ResponsiveStyleValue<string>` | `none`  |
+
+## Examples
+
+Center element with maximum width
+
+```tsx
+<Center maxWidth="xxlarge">
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+</Center>
+```
+
+```tsx
+<Center maxWidth="min(100px, 50vw)">
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+</Center>
+```
+
+Center more than one element with space
+
+```tsx
+<Center maxWidth="xxlarge" space="xsmall">
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+</Center>
+```
+
+## Center inside Text Block
+
+```tsx
+<Stack space="medium">
+  <Text as="h2" variant="headline2">
+    Star Wars - The Empire Strikes Back
+  </Text>
+  <Text>
+    It is a dark time for the Rebellion. Although the Death Star has been
+    destroyed, Imperial troops have driven the Rebel forces from their hidden
+    base and pursued them across the galaxy.
+  </Text>
+  <Center>
+    <Button variant="secondary">Watch now</Button>
+  </Center>
+  <Text>
+    Evading the dreaded Imperial Starfleet, a group of freedom fighters led by
+    Luke Skywalker has established a new secret base on the remote ice world of
+    Hoth. The evil lord Darth Vader, obsessed with finding young Skywalker, has
+    dispatched thousands of remote probes into the far reaches of space....
+  </Text>
+</Stack>
+```
+
+## Center something inside a box
+
+```tsx
+<Inline space="xsmall">
+  <Box as={Center} border="2px solid #ced4da" width="80px" height="40px">
+    <Text color="secondary">Song 1</Text>
+  </Box>
+  <Box as={Center} bg="secondary" width="40px" height="40px">
+    <Play fill="white" />
+  </Box>
+  <Box as={Center} bg="secondary" width="40px" height="40px">
+    <Pause fill="white" />
+  </Box>
+  <Box as={Center} bg="secondary" width="40px" height="40px">
+    <Stop fill="white" />
+  </Box>
+</Inline>
+```
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
new file mode 100644
index 000000000..b0aa82b17
--- /dev/null
+++ b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Box } from '../Box';
+import { Breakout } from './Breakout';
+import { Container } from '../Container';
+import { Text } from '../Text';
+import { Aspect } from '../Aspect';
+
+export default {
+  title: 'Components/Breakout',
+  argTypes: {
+    horizontalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'center', 'bottom'],
+      description: 'horizontal alignment',
+      table: {
+        defaultValue: {
+          summary: 'center',
+        },
+      },
+    },
+    verticalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'center', 'right'],
+      description: 'vertical alignment',
+      table: {
+        defaultValue: {
+          summary: 'center',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Breakout> = args => (
+  <Container size="large" alignContainer="center">
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+    <Box
+      as={Breakout}
+      border="1px solid #ced4da"
+      bg="#e9ecef"
+      height="100px"
+      {...args}
+    >
+      BREAKOUT
+    </Box>
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+  </Container>
+);
+
+export const ExampleText: ComponentStory<typeof Breakout> = args => (
+  <Container size="large" alignContainer="center">
+    <Box as={Text} p="small">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem
+      Ipsum.
+    </Box>
+    <Box
+      as={Breakout}
+      border="1px solid #ced4da"
+      bg="#e9ecef"
+      height="100px"
+      {...args}
+    >
+      BREAKOUT element inside a container
+    </Box>
+    <Box as={Text} p="small">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem
+      Ipsum.
+    </Box>
+  </Container>
+);
+
+export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
+  <Container alignContainer="center">
+    <Box as={Text} pb="medium">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </Box>
+    <Breakout>
+      <Aspect ratio="ultrawide">
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4820.000043444012!2d7.826018541821473!3d48.020383262446884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47911b1e29425703%3A0xbe342117a976e59!2sEuropa-Park%20Stadion!5e1!3m2!1sde!2sde!4v1647595604899!5m2!1sde!2sde"
+          title="sc_map"
+          width="100%"
+          height="100%"
+        />
+      </Aspect>
+    </Breakout>
+    <Box as={Text} pt="medium">
+      It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged. It was popularised in the
+      1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+      and more recently with desktop publishing software like Aldus PageMaker
+      including versions of Lorem Ipsum.
+    </Box>
+  </Container>
+);
diff --git a/packages/components/src/Breakout/Breakout.tsx b/packages/components/src/Breakout/Breakout.tsx
new file mode 100755
index 000000000..867e74257
--- /dev/null
+++ b/packages/components/src/Breakout/Breakout.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+
+import { Box } from '../Box';
+
+export interface BreakoutProps extends ComponentProps<'div'> {
+  horizontalAlign?: 'top' | 'bottom' | 'center';
+  verticalAlign?: 'left' | 'right' | 'center';
+}
+
+const useAlignment = (direction?: string) => {
+  switch (direction) {
+    case 'right':
+      return 'flex-end';
+    case 'bottom':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+  }
+  return 'flex-start';
+};
+
+export const Breakout: React.FC<BreakoutProps> = ({
+  horizontalAlign,
+  verticalAlign,
+  children,
+  ...props
+}) => {
+  const alignItems = useAlignment(horizontalAlign);
+  const justifyContent = useAlignment(verticalAlign);
+  return (
+    <Box
+      alignItems={alignItems}
+      justifyContent={justifyContent}
+      width="100%"
+      display={verticalAlign || horizontalAlign ? 'flex' : 'block'}
+      css={{
+        gridColumn: '1 / -1',
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/packages/components/src/Breakout/index.ts b/packages/components/src/Breakout/index.ts
new file mode 100644
index 000000000..859375f6b
--- /dev/null
+++ b/packages/components/src/Breakout/index.ts
@@ -0,0 +1,1 @@
+export * from './Breakout';
diff --git a/packages/components/src/Center/Center.stories.tsx b/packages/components/src/Center/Center.stories.tsx
new file mode 100644
index 000000000..b2bab9dce
--- /dev/null
+++ b/packages/components/src/Center/Center.stories.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Box } from '../Box';
+import { Center } from './Center';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { Ticket } from '@marigold/icons';
+
+export default {
+  title: 'Components/Center',
+  argTypes: {
+    maxWidth: {
+      control: {
+        type: 'select',
+      },
+      description: 'Center maximum width',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+        'huge',
+        'epic',
+      ],
+    },
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Center> = args => (
+  <Center {...args}>
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+  </Center>
+);
+
+export const Children: ComponentStory<typeof Center> = args => (
+  <Center {...args}>
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
+  </Center>
+);
+
+export const Icon: ComponentStory<typeof Center> = args => (
+  <Box as={Center} bg="blue70" width="40px" height="40px" {...args}>
+    <Ticket fill="white" />
+  </Box>
+);
+
+export const Complex: ComponentStory<typeof Center> = args => (
+  <Stack space="medium">
+    <Text as="h2" variant="headline2">
+      Star Wars - The Empire Strikes Back
+    </Text>
+    <Text>
+      It is a dark time for the Rebellion. Although the Death Star has been
+      destroyed, Imperial troops have driven the Rebel forces from their hidden
+      base and pursued them across the galaxy.
+    </Text>
+    <Center {...args}>
+      <Button variant="secondary">Watch now</Button>
+    </Center>
+    <Text>
+      Evading the dreaded Imperial Starfleet, a group of freedom fighters led by
+      Luke Skywalker has established a new secret base on the remote ice world
+      of Hoth. The evil lord Darth Vader, obsessed with finding young Skywalker,
+      has dispatched thousands of remote probes into the far reaches of
+      space....
+    </Text>
+  </Stack>
+);
diff --git a/packages/components/src/Center/Center.tsx b/packages/components/src/Center/Center.tsx
new file mode 100755
index 000000000..56377342e
--- /dev/null
+++ b/packages/components/src/Center/Center.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { ComponentProps } from '@marigold/types';
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export interface CenterProps extends ComponentProps<'div'> {
+  maxWidth?: string;
+  space?: ResponsiveStyleValue<string>;
+}
+
+export const Center: React.FC<CenterProps> = ({
+  maxWidth,
+  space = 'none',
+  children,
+  ...props
+}) => (
+  <Box
+    css={{
+      boxSizing: 'content-box',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginInline: 'auto',
+      maxInlineSize: maxWidth,
+      gap: space,
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+);
diff --git a/packages/components/src/Center/index.ts b/packages/components/src/Center/index.ts
new file mode 100644
index 000000000..831ad1f97
--- /dev/null
+++ b/packages/components/src/Center/index.ts
@@ -0,0 +1,1 @@
+export * from './Center';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 0f82ddd6c..861606714 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,7 +6,9 @@ export * from './Aspect';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
+export * from './Breakout';
 export * from './Card';
+export * from './Center';
 export * from './Checkbox';
 export * from './Column';
 export * from './Columns';


Test patch:
diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx
new file mode 100644
index 000000000..20034289a
--- /dev/null
+++ b/packages/components/src/Breakout/Breakout.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Breakout } from './Breakout';
+
+test('has gridColumn and default width', () => {
+  render(<Breakout data-testid="breakout">breakout</Breakout>);
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`grid-column: 1/-1`);
+  expect(breakout).toHaveStyle(`width: 100%`);
+});
+
+test('supports default verticalAlign left', () => {
+  render(<Breakout data-testid="breakout">breakout</Breakout>);
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`justifyContent: flex-start`);
+});
+
+test('supports verticalAlign center', () => {
+  render(
+    <Breakout verticalAlign="center" data-testid="breakout">
+      breakout
+    </Breakout>
+  );
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`justifyContent: center`);
+});
+
+test('supports verticalAlign right', () => {
+  render(
+    <Breakout verticalAlign="right" data-testid="breakout">
+      breakout
+    </Breakout>
+  );
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`justifyContent: flex-end`);
+});
+
+test('supports default horizontalAlign top', () => {
+  render(<Breakout data-testid="breakout">breakout</Breakout>);
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`alignItems: flex-start`);
+});
+
+test('supports horizontalAlign center', () => {
+  render(
+    <Breakout horizontalAlign="center" data-testid="breakout">
+      breakout
+    </Breakout>
+  );
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`alignItems: center`);
+});
+
+test('supports horizontalAlign bottom', () => {
+  render(
+    <Breakout horizontalAlign="bottom" data-testid="breakout">
+      breakout
+    </Breakout>
+  );
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`alignItems: flex-end`);
+});
diff --git a/packages/components/src/Center/Center.test.tsx b/packages/components/src/Center/Center.test.tsx
new file mode 100644
index 000000000..a1ee36e2a
--- /dev/null
+++ b/packages/components/src/Center/Center.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { ThemeProvider } from '@marigold/system';
+
+import { Box } from '../Box';
+import { Center } from './Center';
+
+const theme = {
+  sizes: {
+    none: 0,
+    large: 120,
+  },
+  space: {
+    none: 0,
+    medium: 16,
+  },
+};
+
+test('supports maxWidth', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Center maxWidth="50ch" data-testid="center">
+        <Box>content</Box>
+      </Center>
+    </ThemeProvider>
+  );
+  const center = screen.getByTestId(/center/);
+  expect(center).toHaveStyle(`maxInlineSize: 50ch`);
+});
+
+test('supports maxWidth from theme sizes', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Center maxWidth="large" data-testid="center">
+        <Box>content</Box>
+      </Center>
+    </ThemeProvider>
+  );
+  const center = screen.getByTestId(/center/);
+  expect(center).toHaveStyle(`maxInlineSize: 120px`);
+});
+
+test('supports space prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Center space="medium" data-testid="center">
+        <Box>content</Box>
+        <Box>content2</Box>
+      </Center>
+    </ThemeProvider>
+  );
+  const center = screen.getByTestId(/center/);
+  expect(center).toHaveStyle(`gap: 16px`);
+});