Repository: marigold-ui/marigold
Pull request #1997 (2022-04-14 10:50:03)

feat: New component <Content>

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

Latest commit: 28c5ce226f41e4d3c6e4b3191c6d4aac4c0e1b4b

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/new-component-content?filename=.changeset/honest-mice-vanish.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Anew%20component%20content%0A)



Patch:
diff --git a/.changeset/pink-pigs-cross.md b/.changeset/pink-pigs-cross.md
new file mode 100644
index 000000000..74828331d
--- /dev/null
+++ b/.changeset/pink-pigs-cross.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat: New component <Content>
diff --git a/docs/content/components/card.mdx b/docs/content/components/card.mdx
index 00ca0c746..f1fa2bff8 100644
--- a/docs/content/components/card.mdx
+++ b/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
 
diff --git a/docs/content/components/content.mdx b/docs/content/components/content.mdx
new file mode 100644
index 000000000..93ea67bde
--- /dev/null
+++ b/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 -->
diff --git a/packages/components/src/Content/Content.stories.tsx b/packages/components/src/Content/Content.stories.tsx
new file mode 100644
index 000000000..2d9841261
--- /dev/null
+++ b/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>
+);
diff --git a/packages/components/src/Content/Content.tsx b/packages/components/src/Content/Content.tsx
new file mode 100644
index 000000000..4adc71b3c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/components/src/Content/index.ts b/packages/components/src/Content/index.ts
new file mode 100644
index 000000000..b39182a1a
--- /dev/null
+++ b/packages/components/src/Content/index.ts
@@ -0,0 +1,1 @@
+export * from './Content';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 97d085cef..224a88880 100644
--- a/packages/components/src/index.ts
+++ b/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';


Test patch:
diff --git a/packages/components/src/Content/Content.test.tsx b/packages/components/src/Content/Content.test.tsx
new file mode 100644
index 000000000..d46430bf1
--- /dev/null
+++ b/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`);
+});