Repository: marigold-ui/marigold
Pull request #2013 (2022-04-19 09:49:32)

feat:Footer component

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

Latest commit: 4f74e0e053b45cb5f9d7b5b1c7be55e52e94af47

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/footer-component?filename=.changeset/few-gifts-doubt.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat%3AFooter%20component%0A)



Patch:
diff --git a/.changeset/few-gifts-doubt.md b/.changeset/few-gifts-doubt.md
new file mode 100644
index 000000000..9cb94f056
--- /dev/null
+++ b/.changeset/few-gifts-doubt.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat:Footer component
diff --git a/docs/content/components/footer.mdx b/docs/content/components/footer.mdx
new file mode 100644
index 000000000..1e10cb618
--- /dev/null
+++ b/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>
+```
diff --git a/packages/components/src/Footer/Footer.stories.tsx b/packages/components/src/Footer/Footer.stories.tsx
new file mode 100644
index 000000000..d7774c083
--- /dev/null
+++ b/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>
+);
diff --git a/packages/components/src/Footer/Footer.tsx b/packages/components/src/Footer/Footer.tsx
new file mode 100644
index 000000000..956dc3c91
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/components/src/Footer/index.ts b/packages/components/src/Footer/index.ts
new file mode 100644
index 000000000..ddcc5a9cd
--- /dev/null
+++ b/packages/components/src/Footer/index.ts
@@ -0,0 +1,1 @@
+export * from './Footer';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 04a9e6f74..ddfcf467f 100644
--- a/packages/components/src/index.ts
+++ b/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';
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 046a0c213..a95bceb28 100644
--- a/packages/components/src/theme.ts
+++ b/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,


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