Repository: marigold-ui/marigold
Pull request #2467 (2022-09-16 09:25:55)

chore: rename Content to Body and write docs

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

Latest commit: 3a9616816ca3cbd2bcbd3c476821a7485d14ee5b

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/content-docs?filename=.changeset/perfect-goats-grab.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Achore%3A%20rename%20Content%20to%20Body%20and%20write%20docs%0A)



Patch:
diff --git a/docs/src/demos/components/Body/index.ts b/docs/src/demos/components/Body/index.ts
new file mode 100644
index 000000000..3c86fe364
--- /dev/null
+++ b/docs/src/demos/components/Body/index.ts
@@ -0,0 +1,1 @@
+export * from './simple-body.demo';
diff --git a/docs/src/demos/components/Body/simple-body.demo.tsx b/docs/src/demos/components/Body/simple-body.demo.tsx
new file mode 100644
index 000000000..167e56bad
--- /dev/null
+++ b/docs/src/demos/components/Body/simple-body.demo.tsx
@@ -0,0 +1,24 @@
+import {
+  Card,
+  Header,
+  Headline,
+  Body,
+  Footer,
+  Text,
+} from '@marigold/components';
+
+export const BasicBody = () => (
+  <>
+    <Card>
+      <Header>
+        <Headline level="2">A really good header!</Headline>
+      </Header>
+      <Body>
+        <Text>In this body fits really great content.</Text>
+      </Body>
+      <Footer>
+        <Text>And awesome footer!</Text>
+      </Footer>
+    </Card>
+  </>
+);
diff --git a/docs/src/demos/components/Headline/headline.demo.tsx b/docs/src/demos/components/Headline/headline.demo.tsx
index 584ecef07..28ffef733 100644
--- a/docs/src/demos/components/Headline/headline.demo.tsx
+++ b/docs/src/demos/components/Headline/headline.demo.tsx
@@ -1,12 +1,12 @@
-import { Content, Headline, Text } from '@marigold/components';
+import { Body, Headline, Text } from '@marigold/components';
 
 export const BasicHeadline = () => (
-  <Content>
+  <Body>
     <Headline level="3">Lorem ipsum</Headline>
     <Text>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
       voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     </Text>
-  </Content>
+  </Body>
 );
diff --git a/docs/src/demos/components/index.ts b/docs/src/demos/components/index.ts
index 81e59f3d4..fe4bf1cde 100644
--- a/docs/src/demos/components/index.ts
+++ b/docs/src/demos/components/index.ts
@@ -8,6 +8,7 @@ export * from './_test_hook_';
 export * from './Aside';
 export * from './Aspect';
 export * from './Badge';
+export * from './Body';
 export * from './Box';
 export * from './Breakout';
 export * from './Button';
diff --git a/docs/src/pages/components/body.mdx b/docs/src/pages/components/body.mdx
new file mode 100644
index 000000000..67f7ce6ce
--- /dev/null
+++ b/docs/src/pages/components/body.mdx
@@ -0,0 +1,46 @@
+---
+title: Body
+group: Content
+switchTheme: true
+github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Body/Body.tsx
+edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/body.mdx
+caption: Structure for contents in a content context.
+---
+
+The `<Body>` is a content component, like the [`<Header>`](/components/header) and [`<Footer>`](/components/footer/) and is used to help structure the contents of components such as a [`<Card>`](/components/card) or [`<Dialog>`](/components/dialog).
+
+It behaves similar to its related components [`<Header>`](/components/header) and [`<Footer>`](/components/footer/). So the component has no properties, but that is not its task. It should wrap other components and structure its contents for a better code base.
+
+You can set `variant` and `size` props to style your `<Body>` element.
+
+<Preview>
+  <Body>This is a body!</Body>
+</Preview>
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx onlyCode
+import { Body } from '@marigold/components';
+```
+
+### Apperance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable />
+
+## Examples
+
+### Body used in context
+
+In this example you can see a `<Body>` element within a `<Card>`. This is a context in which the `<Body>` should be used.
+
+```tsx preview file=components/Body/simple-body.demo.tsx
+
+```
diff --git a/docs/src/pages/components/content.mdx b/docs/src/pages/components/content.mdx
deleted file mode 100644
index 5d3466bb3..000000000
--- a/docs/src/pages/components/content.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Content
-group: Layout
-github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Content/Content.tsx
-edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/content.mdx
----
-
-The `Content` component is used to help structure contents of components like a [`Card`](/components/card) or [`Dialog`](/components/dialog).
-
-<Preview>
-  <Content>This is content!</Content>
-</Preview>
-
-```tsx onlyCode
-import { Content } from '@marigold/components';
-```
-
-## Usage
-
-### Apperance
-
-<AppearanceTable component={title} />
-
-### Props
-
-<PropsTable />
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index 7d9f06a5c..c72f6d591 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -7,23 +7,23 @@ Hey there and welcome to _Marigold_, the design system from [Reservix](https://w
 <Inline space="large-1">
     <Card variant="hovering" size="large" px="medium-1" pb="medium-2">
     <Headline level="2">What is Marigold?</Headline>
-    <Content>
+    <Body>
         <Text>Marigold is a React implementation of Reservix' design language.</Text>
         <Inline>
             <ChevronRight/>
             <Link href="/introduction/about/">click here to learn more</Link>
         </Inline>
-    </Content>
+    </Body>
     </Card>
 
     <Card variant="hovering" size="large" px="medium-1" pb="medium-2">
     <Headline level="2">Installation</Headline>
-    <Content>
+    <Body>
        <Inline>
         <ChevronRight/>
         <Link href="/introduction/getting-started/">click here to start</Link>
         </Inline>
-    </Content>
+    </Body>
     </Card>
 
 </Inline>
diff --git a/packages/components/src/Content/Content.stories.tsx b/packages/components/src/Body/Body.stories.tsx
similarity index 77%
rename from packages/components/src/Content/Content.stories.tsx
rename to packages/components/src/Body/Body.stories.tsx
index ba3c8bb68..b540e8755 100644
--- a/packages/components/src/Content/Content.stories.tsx
+++ b/packages/components/src/Body/Body.stories.tsx
@@ -1,29 +1,29 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
-import { Content } from './Content';
+import { Body } from './Body';
 import { Container } from '../Container';
 
 export default {
-  title: 'Components/Content',
+  title: 'Components/Body',
   argTypes: {
     variant: {
       control: {
         type: 'text',
       },
-      description: 'The variant of the content',
+      description: 'The variant of the body',
     },
     size: {
       control: {
         type: 'text',
       },
-      description: 'The size of the content',
+      description: 'The size of the body',
     },
   },
 } as Meta;
 
-export const Basic: ComponentStory<typeof Content> = args => (
+export const Basic: ComponentStory<typeof Body> = args => (
   <Container contentType="content" size="medium">
-    <Content {...args}>
+    <Body {...args}>
       <strong>Professor Severus Snape</strong> (9 January, 1960[1] - 2 May,
       1998)[2] was an English half-blood[3] wizard serving as Potions Master
       (1981-1996), Head of Slytherin House (1981-1997), Defence Against the Dark
@@ -31,6 +31,6 @@ export const Basic: ComponentStory<typeof Content> = args => (
       School of Witchcraft and Wizardry as well as a member of the Order of the
       Phoenix and a Death Eater. His double life played an extremely important
       role in both of the Wizarding Wars against Voldemort.
-    </Content>
+    </Body>
   </Container>
 );
diff --git a/packages/components/src/Content/Content.tsx b/packages/components/src/Body/Body.tsx
similarity index 64%
rename from packages/components/src/Content/Content.tsx
rename to packages/components/src/Body/Body.tsx
index 4adc71b3c..1f44ae174 100644
--- a/packages/components/src/Content/Content.tsx
+++ b/packages/components/src/Body/Body.tsx
@@ -9,11 +9,11 @@ import { ComponentProps } from '@marigold/types';
 
 // Theme Extension
 // ---------------
-export interface ContentThemeExtension extends ThemeExtension<'Content'> {}
+export interface BodyThemeExtension extends ThemeExtension<'Body'> {}
 
 // Props
 // ---------------
-export interface ContentProps
+export interface BodyProps
   extends ThemeComponentProps,
     ComponentProps<'section'> {
   children?: ReactNode;
@@ -21,13 +21,8 @@ export interface ContentProps
 
 // Component
 // ---------------
-export const Content = ({
-  children,
-  variant,
-  size,
-  ...props
-}: ContentProps) => {
-  const styles = useComponentStyles('Content', { variant, size });
+export const Body = ({ children, variant, size, ...props }: BodyProps) => {
+  const styles = useComponentStyles('Body', { variant, size });
   return (
     <Box as="section" {...props} css={styles}>
       {children}
diff --git a/packages/components/src/Body/index.ts b/packages/components/src/Body/index.ts
new file mode 100644
index 000000000..0b63ac835
--- /dev/null
+++ b/packages/components/src/Body/index.ts
@@ -0,0 +1,1 @@
+export * from './Body';
diff --git a/packages/components/src/Content/index.ts b/packages/components/src/Content/index.ts
deleted file mode 100644
index b39182a1a..000000000
--- a/packages/components/src/Content/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from './Content';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e2498c0dd..89029df93 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,13 +6,13 @@ export * from './Aspect';
 export * from './Badge';
 export * from './Box';
 export * from './Breakout';
+export * from './Body';
 export * from './Button';
 export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './Columns';
 export * from './Container';
-export * from './Content';
 export * from './Dialog';
 export * from './Divider';
 export * from './Footer';
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 582e5de12..5be9f5975 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -3,13 +3,13 @@ import type { Theme as BaseTheme } from '@marigold/system';
 // Components
 // ---------------
 import type { BadgeThemeExtension } from './Badge';
+import type { BodyThemeExtension } from './Body';
 import type { ButtonThemeExtension } from './Button';
 import type { CardThemeExtension } from './Card';
 import type {
   CheckboxThemeExtension,
   CheckboxGroupThemeExtension,
 } from './Checkbox';
-import type { ContentThemeExtension } from './Content';
 import type { DialogThemeExtension } from './Dialog';
 import type { DividerThemeExtension } from './Divider';
 import type { FooterThemeExtension } from './Footer';
@@ -41,7 +41,7 @@ interface ComponentStyles
     CardThemeExtension,
     CheckboxThemeExtension,
     CheckboxGroupThemeExtension,
-    ContentThemeExtension,
+    BodyThemeExtension,
     DialogThemeExtension,
     DividerThemeExtension,
     FooterThemeExtension,


Test patch:
diff --git a/packages/components/src/Content/Content.test.tsx b/packages/components/src/Body/Body.test.tsx
similarity index 54%
rename from packages/components/src/Content/Content.test.tsx
rename to packages/components/src/Body/Body.test.tsx
index d46430bf1..a9b7722fc 100644
--- a/packages/components/src/Content/Content.test.tsx
+++ b/packages/components/src/Body/Body.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
 
-import { Content } from './Content';
+import { Body } from './Body';
 
 const theme = {
   space: {
@@ -15,7 +15,7 @@ const theme = {
     yellow: '#fff9db',
   },
   components: {
-    Content: {
+    Body: {
       base: {
         p: 'small-1',
         border: '1px solid',
@@ -38,31 +38,31 @@ const theme = {
 test('renders as a "section" element', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" />
+      <Body data-testid="body" />
     </ThemeProvider>
   );
 
-  const content = screen.getByTestId('content');
-  expect(content.tagName).toEqual('SECTION');
+  const body = screen.getByTestId('body');
+  expect(body.tagName).toEqual('SECTION');
 });
 
-test('uses base styling form "content" in theme', () => {
+test('uses base styling form "body" in theme', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" />
+      <Body data-testid="body" />
     </ThemeProvider>
   );
-  const content = screen.getByTestId('content');
-  expect(content).toHaveStyle(`padding: ${theme.space['small-1']}px`);
+  const body = screen.getByTestId('body');
+  expect(body).toHaveStyle(`padding: ${theme.space['small-1']}px`);
 });
 
-test('content accepts a variant and size', () => {
+test('body accepts a variant and size', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" variant="yellow" size="medium" />
+      <Body data-testid="body" variant="yellow" size="medium" />
     </ThemeProvider>
   );
-  const content = screen.getByTestId('content');
-  expect(content).toHaveStyle(`background: ${theme.colors.yellow}`);
-  expect(content).toHaveStyle(`padding: ${theme.space['medium-1']}px`);
+  const body = screen.getByTestId('body');
+  expect(body).toHaveStyle(`background: ${theme.colors.yellow}`);
+  expect(body).toHaveStyle(`padding: ${theme.space['medium-1']}px`);
 });