chore(merge): from main

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.97.1](https://github.com/PhillipsAuctionHouse/seldon/compare/v1.97.0...v1.97.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **footer:** L3-4461 Update casing on newsletter subscription ([#440](https://github.com/PhillipsAuctionHouse/seldon/issues/440)) ([84e5a98](https://github.com/PhillipsAuctionHouse/seldon/commit/84e5a98d5e20efef82aa9c8db40c759baf0b8e61))
+
+# [1.97.0](https://github.com/PhillipsAuctionHouse/seldon/compare/v1.96.1...v1.97.0) (2024-11-22)
+
+
+### Features
+
+* **filter:** L3-4114 - create dumb filter component ([#418](https://github.com/PhillipsAuctionHouse/seldon/issues/418)) ([0014771](https://github.com/PhillipsAuctionHouse/seldon/commit/001477125684f081511315ab7c031d1d2efce9e4))
+
 ## [1.96.1](https://github.com/PhillipsAuctionHouse/seldon/compare/v1.96.0...v1.96.1) (2024-11-21)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.96.1",
+  "version": "1.97.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -115,6 +115,7 @@
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.4.1",
     "ts-node": "^10.9.2",
+    "type-fest": "^4.27.0",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.2.4",

src/componentStyles.scss

@@ -40,6 +40,11 @@
 @use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
+@use 'components/Detail/detail';
+@use 'components/PinchZoom/pinchZoom';
+@use 'components/Tabs/tabs';
+@use 'components/SeldonImage/seldonImage';
+@use 'components/Filter/filter';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';
@@ -49,14 +54,11 @@
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
 @use 'patterns/SaleHeaderBanner/saleHeaderBanner';
+@use 'patterns/ObjectTile/objectTile';
+@use 'patterns/BidSnapshot/bidSnapshot';
+@use 'patterns/FilterMenu/filterMenu';
+@use 'patterns/DetailList/detailList';
 
 // Site Furniture
 @use 'site-furniture/Header/header';
 @use 'site-furniture/Footer/footer';
-@use 'components/Detail/detail';
-@use 'patterns/DetailList/detailList';
-@use 'components/PinchZoom/pinchZoom';
-@use 'components/Tabs/tabs';
-@use 'components/SeldonImage/seldonImage';
-@use 'patterns/ObjectTile/objectTile';
-@use 'patterns/BidSnapshot/bidSnapshot';

src/components/DatePicker/DatePicker.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { noOp, useNormalizedInputProps } from '../../utils';
 import Input, { InputProps } from '../Input/Input';
 
-export interface DatePickerProps extends Omit<InputProps, 'defaultValue'>, Record<string, unknown> {
+export interface DatePickerProps extends Omit<InputProps, 'defaultValue' | 'onChange'>, Record<string, unknown> {
   /**
    * Optionally allow manual entry to the date input
    */
@@ -181,12 +181,12 @@ const DatePicker = React.forwardRef(
       };
     }, [allowInput, defaultValue, inputProps.disabled, enableTime, id, locale, onChange, ref, type]);
 
-    const handleKeyPress = (e: KeyboardEvent) => {
+    const handleKeyPress: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
       if (allowInput && /[0-9-/:]+/g.test(e.key)) {
         manualValue.current = fp?.current?.selectedDates;
       }
     };
-    const handOnBlur = (e: FocusEvent) => {
+    const handOnBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
       if (
         !allowInput ||
         (e.relatedTarget instanceof HTMLElement && e.relatedTarget?.classList.value.includes('flatpickr'))

src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -13,7 +13,7 @@ const VolatileComponent = ({ throwError }: WrappedProps) => {
       throwError();
     }
   }, [throwError]);
-  return <Input {...reqProps} defaultValue={['2023-06-01T08:30', '2023-06-05T08:30']} />;
+  return <Input {...reqProps} defaultValue="2023-06-01T08:30" />;
 };
 
 describe('An ErrorBoundary', () => {

src/components/Filter/Filter.stories.tsx

@@ -0,0 +1,99 @@
+import { Meta } from '@storybook/react';
+import Filter from './Filter';
+import FilterHeader from './FilterHeader';
+import FilterInput from './FilterInput';
+import { useState } from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: 'Components/Filter',
+  component: Filter,
+} satisfies Meta<typeof Filter>;
+
+export default meta;
+
+type FilterDimension = { label: string; disabled?: boolean | undefined; checked: boolean };
+
+type FilterType = {
+  label: string;
+  id: string;
+  filterDimensions: FilterDimension[];
+};
+
+type PropTypes = {
+  filter: FilterType;
+  viewAllLimit: number;
+  isViewingAll: boolean;
+};
+
+const filter: FilterType = {
+  label: 'Artists & Makers',
+  id: 'makers',
+  filterDimensions: [
+    { label: 'Jimmy', checked: true },
+    { label: 'Bob', checked: false },
+    { label: 'Alan', checked: false },
+    { label: 'Nick', checked: false },
+    { label: 'Joe', checked: false },
+    { label: 'Fred', checked: false },
+    { label: 'Rob', checked: false },
+    { label: 'Roy', checked: false },
+    { label: 'disabled', disabled: true, checked: false },
+  ],
+};
+
+const FilterComponent = (props: PropTypes) => {
+  const { filter: intialFilters, viewAllLimit, isViewingAll } = props;
+  const [filter, setFilter] = useState(intialFilters);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { checked, name } = e.target as HTMLInputElement;
+    const updatedFilterDimensions = filter.filterDimensions.map((dimension) => {
+      if (dimension.label === name) {
+        return {
+          ...dimension,
+          checked,
+        };
+      }
+      return dimension;
+    });
+
+    const updatedFilter = {
+      ...filter,
+      filterDimensions: updatedFilterDimensions,
+    };
+
+    setFilter(updatedFilter);
+  };
+
+  return (
+    <Filter key={filter.label} name={filter.label} viewAllLimit={viewAllLimit} isViewingAll={isViewingAll}>
+      <FilterHeader heading={filter.label} />
+      {filter.filterDimensions.map((value: FilterDimension) => (
+        <FilterInput
+          id={value.label}
+          key={value.label}
+          labelText={value.label}
+          onChange={handleChange}
+          type="checkbox"
+          disabled={value?.disabled}
+          name={value.label}
+          checked={value.checked}
+        />
+      ))}
+    </Filter>
+  );
+};
+
+export const Playground = (props: PropTypes) => {
+  return <FilterComponent {...props} />;
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+Playground.args = {
+  filter,
+  viewAllLimit: 10,
+  isViewingAll: false,
+};
+
+Playground.argTypes = {};