Merge pull request #58 from PhillipsAuctionHouse/footer

L3-40: Build out Footer Component

.eslintignore

@@ -1 +1,2 @@
-/dist
+/dist
+/storybook-static

.prettierignore

@@ -34,4 +34,5 @@ coverage
 
 *.notes.md
 
-CHANGELOG.md
+CHANGELOG.md
+src/design/type-tokens/type-tokens.mdx

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
@@ -15,6 +16,17 @@ const config: StorybookConfig = {
     autodocs: "tag",
     defaultName: "Overview"
   },
+  viteFinal: (config) => {
+    if (config && config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '#scss': path.resolve(__dirname, '../src/scss/'),
+      };
+    }
+    return {
+      ...config,
+    };
+  },
   typescript: {
     reactDocgen: 'react-docgen',
     reactDocgenTypescriptOptions: {

CHANGELOG.md

@@ -44,7 +44,6 @@
 
 # [1.16.0](https://github.com/PhillipsAuctionHouse/seldon/compare/v1.15.0...v1.16.0) (2024-04-09)
 
-
 ### Features
 
 * add grid mixins, stories, and styles ([defa0b9](https://github.com/PhillipsAuctionHouse/seldon/commit/defa0b980e97ea09b85a04b26177638cae915840))

package.json

@@ -77,7 +77,7 @@
     "prettier": "3.0.3",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.5",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.75.0",
     "semantic-release": "^21.0.5",
@@ -92,7 +92,8 @@
     "typescript": "^5.0.2",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^2.3.0",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

src/components/Button/Button.tsx

@@ -1,20 +1,20 @@
 import classnames from 'classnames';
 
-import { CommonProps, px } from '../../utils';
+import { px } from '../../utils';
 
-export interface ButtonProps extends CommonProps, Record<string, unknown> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**
    * Button contents
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * True if button comes after text
    */
   iconLast?: boolean;
   /**
    * Optional click handler
    */
-  onClick?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
+  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
   /**
    * Is this the principal call to action on the page?
    */
@@ -23,17 +23,36 @@ export interface ButtonProps extends CommonProps, Record<string, unknown> {
    * How large should the button be?
    */
   size?: 'sm' | 'md' | 'lg';
+  /**
+   * The type of the button.
+   */
+  type?: 'button' | 'submit' | 'reset';
 }
 
-const Button = ({ buttonType = 'primary', size = 'md', children, iconLast = false, id, ...props }: ButtonProps) => {
+const Button = ({
+  buttonType = 'primary',
+  size = 'md',
+  children,
+  className,
+  iconLast = false,
+  id,
+  type = 'button',
+  ...props
+}: ButtonProps) => {
   return (
     <button
       data-testid={id ? `button-${id}` : `button`}
       id={id}
-      type="button"
-      className={classnames(`${px}-button`, `${px}-button--${size}`, `${px}-button--${buttonType}`, {
-        [`${px}-button--icon-last`]: iconLast,
-      })}
+      type={type}
+      className={classnames(
+        `${px}-button`,
+        `${px}-button--${size}`,
+        `${px}-button--${buttonType}`,
+        {
+          [`${px}-button--icon-last`]: iconLast,
+        },
+        className,
+      )}
       {...props}
     >
       {children}

src/components/Button/_button.scss

@@ -1,5 +1,6 @@
-@import '../../vars';
-@import '../../_utils';
+@import '#scss/vars';
+@import '#scss/typography';
+@import '#scss/utils';
 
 .#{$px}-button {
   @include bodyText;
@@ -12,8 +13,8 @@
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  min-width: 9rem;
-  padding: 0.5em 1.75em;
+  min-width: 3rem;
+  padding: 0.5em $spacing-medium;
   transition:
     color 0.25s,
     background-color 0.25s,

src/components/DatePicker/_datePicker.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 @import 'flatpickr/dist/flatpickr.css';
-@import '../../vars';
-@import '../../typography';
+@import '#scss/vars';
+@import '#scss/typography';
 
 .flatpickr-calendar {
   @include DistinctText;

src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta } from '@storybook/react';
+
+import Footer, { FooterProps } from './Footer';
+import Subscribe from '../Subscribe/Subscribe';
+import { px } from '../../utils';
+
+import Youtube from '../../assets/youtube.svg?react';
+import Instagram from '../../assets/instagram.svg?react';
+import Wechat from '../../assets/wechat.svg?react';
+import Spotify from '../../assets/spotify.svg?react';
+import Social from '../Social/Social';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: 'Components/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+const navigationComponent = (
+  <ul>
+    <li>
+      <a>Locations</a>
+    </li>
+    <li>
+      <a>Press</a>
+    </li>
+    <li>
+      <a>Careers</a>
+    </li>
+    <li>
+      <a>Privacy policy</a>
+    </li>
+    <li>
+      <a>Cookie policy</a>
+    </li>
+    <li>
+      <a>Modern Slavery Policy</a>
+    </li>
+  </ul>
+);
+
+const socialIcons = (
+  <ul>
+    <li>
+      <a>
+        <Youtube />
+      </a>
+    </li>
+    <li>
+      <a>
+        <Instagram />
+      </a>
+    </li>
+    <li>
+      <a>
+        <Wechat />
+      </a>
+    </li>
+    <li>
+      <a>
+        <Spotify />
+      </a>
+    </li>
+  </ul>
+);
+
+const leftComponent = (
+  <Subscribe
+    className={`${px}-footer__newsletter`}
+    title="Subscribe to Newsletter"
+    blurb="Receive exclusive content about our auctions, exhibitions, and special events."
+    buttonText="Sign Up"
+    element="form"
+    buttonProps={{
+      size: 'sm',
+      onClick: (e: React.MouseEvent) => {
+        e.preventDefault();
+        const inputElement = (e.target as HTMLElement).closest('form')?.querySelector('input');
+        if (inputElement) {
+          console.log(`subscribe ${inputElement.value}`);
+          inputElement.value = '';
+        }
+      },
+    }}
+  />
+);
+
+const rightComponent = <Social className={`${px}-footer__social`}>{socialIcons}</Social>;
+
+export const Playground = (props: FooterProps) => (
+  <Footer {...props}>
+    {leftComponent}
+    {rightComponent}
+  </Footer>
+);
+
+Playground.args = {
+  navigationComponent,
+};