KIT-93: [react-kit] <Footer /> component

.changeset/curly-lobsters-battle.md

@@ -0,0 +1,5 @@
+---
+'@pantheon-systems/react-kit': minor
+---
+
+Add footer component

packages/react-kit/__tests__/snapshotTests/Footer.test.tsx

@@ -0,0 +1,39 @@
+import { Footer } from '@components/Footer';
+import { render } from '@testing-library/react';
+
+const Logo = () => {
+	return <span>ExampleLogo</span>;
+};
+
+const FooterContent = () => {
+	return (
+		<>
+			<div className="rk-text-base rk-font-bold">Test Company</div>
+
+			<div className="rk-pb-8 rk-text-base">© Test 2023</div>
+
+			<div className="rk-pb-16 rk-text-sm">
+				Built with{' '}
+				<a href="https://test.io" className={'rk-underline'}>
+					Test.io
+				</a>
+			</div>
+		</>
+	);
+};
+
+const TestFooter = () => {
+	return (
+		<Footer Logo={Logo}>
+			<FooterContent />
+		</Footer>
+	);
+};
+
+describe('<Footer />', () => {
+	it('should render Footer', () => {
+		const { asFragment } = render(<TestFooter />);
+
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

packages/react-kit/__tests__/snapshotTests/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,31 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Footer /> > should render Footer 1`] = `
+<DocumentFragment>
+  <footer
+    class="rk-bg-neutral-800 rk-text-center rk-text-white"
+  >
+    <div
+      class="rk-text-base rk-font-bold"
+    >
+      Test Company
+    </div>
+    <div
+      class="rk-pb-8 rk-text-base"
+    >
+      © Test 2023
+    </div>
+    <div
+      class="rk-pb-16 rk-text-sm"
+    >
+      Built with 
+      <a
+        class="rk-underline"
+        href="https://test.io"
+      >
+        Test.io
+      </a>
+    </div>
+  </footer>
+</DocumentFragment>
+`;

packages/react-kit/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,50 @@
+import PantheonLogo from '@assets/pantheon-fist-white.svg';
+import { Footer as BottomSignature } from '@components/Footer';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type FooterProps } from './props';
+
+const Footer = ({ Logo }: Pick<FooterProps, 'Logo'>) => {
+	return (
+		<div>
+			<BottomSignature Logo={Logo}>
+				<FooterContent />
+			</BottomSignature>
+		</div>
+	);
+};
+
+const FooterContent = () => {
+	return (
+		<>
+			<div className="rk-text-base rk-font-bold">Pantheon Decoupled Kit</div>
+
+			<div className="rk-pb-8 rk-text-base">© Pantheon 2023</div>
+
+			<div className="rk-pb-16 rk-text-sm">
+				Built with{' '}
+				<a href="https://pantheon.io/" className={'rk-underline'}>
+					Pantheon.io
+				</a>
+			</div>
+		</>
+	);
+};
+
+const meta: Meta<typeof Footer> = {
+	title: 'Footer/Footer',
+	component: Footer,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	args: {
+		Logo: { src: PantheonLogo, alt: 'Pantheon Systems', href: '/' },
+	},
+	argTypes: {},
+	tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/react-kit/src/components/Footer/Footer.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FooterProps } from './props';
+
+/**
+ * @see {@link https://live-storybook-react-kit.appa.pantheon.site/?path=/docs/footer-footer--docs}
+ */
+export const Footer = ({ Logo, className, children }: FooterProps) => {
+	const FooterLogo = () => {
+		if (React.isValidElement(Logo)) {
+			return Logo;
+		} else if (typeof Logo === 'object' && 'src' in Logo && 'alt' in Logo) {
+			const { src, alt } = Logo;
+			return (
+				<div
+					className={Logo?.styles || 'rk-mx-auto rk-block rk-pb-3.5 rk-pt-14'}
+				>
+					<img src={src} alt={alt} className={'rk-inline rk-h-16 rk-w-16'} />
+				</div>
+			);
+		}
+		return null;
+	};
+	return (
+		<footer
+			className={clsx(
+				className,
+				'rk-bg-neutral-800 rk-text-center rk-text-white',
+			)}
+		>
+			<FooterLogo />
+			{children}
+		</footer>
+	);
+};

packages/react-kit/src/components/Footer/index.tsx

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export * from './props';

packages/react-kit/src/components/Footer/props.ts

@@ -0,0 +1,27 @@
+export type FooterProps = Readonly<{
+	/**
+	 * A logo component to render in the footer.
+	 * @example
+	 * ```tsx
+	 * export const Logo = ({ exampleLogo }: { exampleLogo: string }) => {
+	 * 	// use the image component from your framework if applicable.
+	 * 	return (
+	 * 		<img src={exampleLogo} width="48" height="48" alt="Example Logo" />
+	 * 	);
+	 * };
+	 * ```
+	 *
+	 */
+	Logo:
+		| { src: string; alt: string; href: string; styles?: string }
+		| React.ReactElement
+		| JSX.Element;
+	/**
+	 * Styles to be passed to the footer component.
+	 */
+	className?: string;
+	/**
+	 *  An instance of React.ReactChild
+	 */
+	children: JSX.Element;
+}>;