feat: New component <Content> (#1997)

Co-authored-by: sarahgm <sarah.gosmann@reservix.de>
Co-authored-by: Sebastian Sebald <sebastian.sebald@reservix.de>

.changeset/pink-pigs-cross.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat: New component <Content>

docs/content/components/card.mdx

@@ -26,10 +26,10 @@ import { Card } from '@marigold/components';
 
 ## Props
 
-| Property  | Type     | Default |
-| :-------- | :------- | :------ |
-| `variant` | `string` |         |
-| `size`    | `string` |         |
+| Property  | Type     | Default | Description                          |
+| :-------- | :------- | :------ | :----------------------------------- |
+| `variant` | `string` |         | Use a different _variant_ from theme |
+| `size`    | `string` |         | Use a different _size_ from theme    |
 
 ## Examples
 

docs/content/components/content.mdx

@@ -0,0 +1,41 @@
+---
+title: Content
+caption: <short purpose of component> (optional)
+---
+
+# Content
+
+## Description
+
+The `Content` component is used to help structure contents of components like a [`Card`](/components/card) or [`Dialog`](/components/dialog).
+
+<MarigoldTheme>
+  <Content>This is content!</Content>
+</MarigoldTheme>
+
+```tsx onlyCode
+import { Content } from '@marigold/components';
+```
+
+## Props
+
+| Name      | Type     | Default | Description                          |
+| :-------- | :------- | :------ | :----------------------------------- |
+| `variant` | `string` |         | Use a different _variant_ from theme |
+| `size`    | `string` |         | Use a different _size_ from theme    |
+
+## Examples
+
+<!-- show some cases and scenarios how the component can be used -->
+
+### Use case name
+
+<!-- describe the use case -->
+
+```tsx
+<div>Hello there!</div>
+```
+
+## Dos & Don'ts
+
+<!-- rules of behaviour -->

packages/components/src/Content/Content.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Content } from './Content';
+import { Container } from '../Container';
+
+export default {
+  title: 'Components/Card',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'The variant of the card',
+    },
+    size: {
+      control: {
+        type: 'text',
+      },
+      description: 'The size of the card',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Content> = args => (
+  <Container contentType="content" size="medium">
+    <Content {...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
+      Arts professor (1996-1997), and Headmaster (1997-1998) of the Hogwarts
+      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>
+  </Container>
+);

packages/components/src/Content/Content.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Content } from './Content';
+
+const theme = {
+  space: {
+    none: 0,
+    'small-1': 4,
+    'medium-1': 16,
+  },
+  colors: {
+    grey: '#dee2e6',
+    yellow: '#fff9db',
+  },
+  components: {
+    Content: {
+      base: {
+        p: 'small-1',
+        border: '1px solid',
+        borderColor: 'grey',
+      },
+      variant: {
+        yellow: {
+          bg: 'yellow',
+        },
+      },
+      size: {
+        medium: {
+          p: 'medium-1',
+        },
+      },
+    },
+  },
+};
+
+test('renders as a "section" element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Content data-testid="content" />
+    </ThemeProvider>
+  );
+
+  const content = screen.getByTestId('content');
+  expect(content.tagName).toEqual('SECTION');
+});
+
+test('uses base styling form "content" in theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Content data-testid="content" />
+    </ThemeProvider>
+  );
+  const content = screen.getByTestId('content');
+  expect(content).toHaveStyle(`padding: ${theme.space['small-1']}px`);
+});
+
+test('content accepts a variant and size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Content data-testid="content" 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`);
+});

packages/components/src/Content/Content.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import {
+  Box,
+  useComponentStyles,
+  ThemeComponentProps,
+  ThemeExtension,
+} from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+
+// Theme Extension
+// ---------------
+export interface ContentThemeExtension extends ThemeExtension<'Content'> {}
+
+// Props
+// ---------------
+export interface ContentProps
+  extends ThemeComponentProps,
+    ComponentProps<'section'> {
+  children?: ReactNode;
+}
+
+// Component
+// ---------------
+export const Content = ({
+  children,
+  variant,
+  size,
+  ...props
+}: ContentProps) => {
+  const styles = useComponentStyles('Content', { variant, size });
+  return (
+    <Box as="section" {...props} css={styles}>
+      {children}
+    </Box>
+  );
+};

packages/components/src/Content/index.ts

@@ -0,0 +1 @@
+export * from './Content';

packages/components/src/index.ts

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './Columns';
+export * from './Content';
 export * from './Dialog';
 export * from './Divider';
 export * from './VisuallyHidden';