feat:Footer component

.changeset/few-gifts-doubt.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat:Footer component

docs/content/components/footer.mdx

@@ -0,0 +1,30 @@
+---
+title: Footer
+---
+
+# Footer
+
+## Description
+
+The `Footer` component is used to help structure contents of components.
+
+<MarigoldTheme>
+  <Footer>This is a footer!</Footer>
+</MarigoldTheme>
+
+```tsx onlyCode
+import { Footer } 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
+
+```tsx
+<Footer>This is a footer!</Footer>
+```

packages/components/src/Footer/Footer.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Footer } from './Footer';
+
+export default {
+  title: 'Components/Footer',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'The variant of the footer',
+    },
+    size: {
+      control: {
+        type: 'text',
+      },
+      description: 'The size of the footer',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Footer> = args => (
+  <Footer>This is a Footer.</Footer>
+);

packages/components/src/Footer/Footer.test.tsx

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

packages/components/src/Footer/Footer.tsx

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

packages/components/src/Footer/index.ts

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

packages/components/src/index.ts

@@ -13,6 +13,7 @@ export * from './Columns';
 export * from './Content';
 export * from './Dialog';
 export * from './Divider';
+export * from './Footer';
 export * from './VisuallyHidden';
 export * from './Headline';
 export * from './Image';

packages/components/src/theme.ts

@@ -11,6 +11,7 @@ import type { CardThemeExtension } from './Card';
 import type { CheckboxThemeExtension } from './Checkbox';
 import type { ContentThemeExtension } from './Content';
 import type { DividerThemeExtension } from './Divider';
+import type { FooterThemeExtension } from './Footer';
 import type { HeadlineThemeExtension } from './Headline';
 import type { HelpTextThemeExtension } from './Field/HelpText';
 import type { ImageThemeExtension } from './Image';
@@ -39,6 +40,7 @@ interface ComponentStyles
     CheckboxThemeExtension,
     ContentThemeExtension,
     DividerThemeExtension,
+    FooterThemeExtension,
     HeadlineThemeExtension,
     HelpTextThemeExtension,
     ImageThemeExtension,