@phillips/seldon 1.167.0 → 1.169.0

package/dist/patterns/FiltersInline/types.d.ts

@@ -0,0 +1,191 @@
+/**
+ * Enum for the main filter button types.
+ * Used to distinguish between different filter categories.
+ */
+export declare enum FilterButtonType {
+    Filter = "Filter",// Drawer filter
+    Sort = "Sort",// Sort filter
+    Sale = "Sale",// Sale filter
+    Departments = "Departments",// Departments filter
+    Month = "Month",// Month filter
+    Location = "Location"
+}
+/**
+ * Enum for the icon types used in filter buttons.
+ */
+export declare enum FilterButtonIconType {
+    Filter = "Filter",// Filter icon
+    Sort = "Sort",// Sort icon
+    ChevronUp = "ChevronUp",// Chevron up icon
+    ChevronDown = "ChevronDown"
+}
+/**
+ * Represents a single filter option (e.g., for a dropdown or button group).
+ */
+export type AuctionFilter = {
+    /** Unique identifier for the filter option */
+    id: string;
+    /** Display label for the filter option */
+    label: string;
+};
+/**
+ * Represents a filter button with a count and optional labels.
+ */
+export type AuctionFilterButton = {
+    /** Number of items matching this filter */
+    auctionCount: number;
+    /** Optional list of filter labels for this button */
+    filterLabels?: AuctionFilter[];
+};
+/**
+ * Represents a single dimension/option within a filter (e.g., a checkbox or radio option).
+ */
+export type FilterDimension = {
+    /** Display label for the filter dimension */
+    label: string;
+    /** Whether this dimension is disabled */
+    disabled?: boolean;
+    /** Whether this dimension is currently active/selected */
+    active?: boolean;
+};
+/**
+ * Represents a filter group (e.g., "Sale", "Department") with its options.
+ */
+export type FilterType = {
+    /** Display label for the filter group */
+    label: string;
+    /** Unique identifier for the filter group */
+    id: string;
+    /** Type of filter (e.g., 'checkbox', 'radio') */
+    type: 'checkbox' | 'radio';
+    /** Set of filter dimensions/options for this filter group */
+    filterDimensions: Set<FilterDimension>;
+    /** FilterType for the filter */
+    buttonType: FilterButtonType;
+    /** Translated label for the filter button */
+    filterButtonLabelTranslated?: string;
+};
+/**
+ * Handler for when a filter input changes (checkbox, radio, or select).
+ */
+export type FilterChangeHandler = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, filterId: string) => void;
+/**
+ * Handler for when filters are updated (e.g., after selection).
+ */
+export type FilterUpdateHandler = (returnCountOnly?: boolean) => void;
+/**
+ * Handler for clearing a filter group by its id.
+ */
+export type ClearFilterHandler = (filterId: string) => void;
+/**
+ * Common props shared by all filter-related components.
+ */
+export interface BaseFilterProps {
+    /** Optional CSS class for the component */
+    className?: string;
+    /** Array of filter groups to display */
+    filters?: FilterType[];
+    /** Handler for filter selection changes */
+    onSelectFilter?: FilterChangeHandler;
+    /** Handler for updating filters/results */
+    onApplyFilter?: FilterUpdateHandler;
+    /** Handler for clearing a filter group */
+    onClickClear?: ClearFilterHandler;
+    /** Number of results to display */
+    resultsCount?: number;
+}
+/**
+ * Optional aria-labels for accessibility on various filter button elements.
+ */
+export interface FilterButtonAriaLabels {
+    /** Aria-label for the filter button itself */
+    button?: string;
+    /** Aria-label for the drawer (mobile or filter drawer) */
+    drawer?: string;
+    /** Aria-label for filter button */
+    ariaLabel?: string;
+}
+/**
+ * Props for the FiltersInline component (main component).
+ */
+export interface FiltersInlineProps extends BaseFilterProps {
+    /** Unique id for component testing */
+    id: string;
+    /** Handler for filter button click */
+    handleFilterClick?: () => void;
+    /** List of states for the filter buttons */
+    filtersListState?: boolean[];
+    /** Setter for the filter button states */
+    setFiltersLabelListState?: (state: boolean[]) => void;
+    /** Main filter button type (e.g., 'Filter', 'Sort') */
+    mainFilterLabel: FilterButtonType;
+    /** Object containing translated strings for dropdown menu actions.*/
+    dropdownMenuTranslation?: DropdownMenuTranslation;
+}
+/**
+ * Props for an individual filter button.
+ */
+export interface FilterDropdownProps extends BaseFilterProps {
+    /** Unique id for component testing */
+    id: string;
+    /** Unique id for this filter, used instead of index */
+    filterId?: number;
+    /** Label for the filter button */
+    filterButtonLabel: string;
+    /** Type of filter button (e.g., 'Filter', 'Sort') */
+    buttonType?: FilterButtonType;
+    /** Handler for filter button click */
+    handleClick?: (state: boolean[]) => void;
+    /** List of states for the filter buttons */
+    filtersListState?: boolean[];
+    /** Index of the filter button in the filtersListState */
+    index?: number;
+    /** Optional aria-labels for accessibility on various filter button elements. */
+    ariaLabels?: FilterButtonAriaLabels;
+    /** Translated label for the filter button */
+    filterButtonLabelTranslated?: string;
+    /** Object containing translated strings for dropdown menu actions.*/
+    dropdownMenuTranslation?: DropdownMenuTranslation;
+}
+/**
+ * Object containing translated strings for dropdown menu actions.
+ * - confirm: Label for the confirm/apply button.
+ * - clearAll: Label for the "Clear all" button.
+ * - showAuctions: Label for the button showing the number of auctions/results.
+ */
+export type DropdownMenuTranslation = {
+    confirm?: string | null;
+    clearAll?: string | null;
+    showAuctions?: string | null;
+};
+/**
+ * Props for the filter dropdown menu component (desktop or mobile).
+ */
+export interface FilterDropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Optional custom class name for the dropdown container */
+    className?: string;
+    /** The type of filter button (e.g. 'Sort', 'Departments', etc.) */
+    buttonType?: string;
+    /** Array of filter objects, each with a set of filter dimensions */
+    filters?: {
+        filterDimensions: Set<FilterDimension>;
+    }[];
+    /** Index of the filter to display (typically corresponds to the selected filter) */
+    filterIndex?: number;
+    /** Handler for when a filter input is changed */
+    onSelectFilter?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, filterType: string) => void;
+    /** Handler for when the filter is confirmed or updated */
+    onApplyFilter?: (returnCountOnly?: boolean) => void;
+    /** Handler for clearing the filter (by type) */
+    onClickClear?: (filterType: string) => void;
+    /** Number of results to display in the dropdown action button */
+    resultsCount?: number;
+    /** Optional aria-labels for accessibility, for mobile and desktop variants */
+    ariaLabels?: string;
+    /** Label for the filter button */
+    filterButtonLabel: string;
+    /** Translated label for the filter button */
+    filterButtonLabelTranslated?: string;
+    /** Object containing translated strings for dropdown menu actions.*/
+    dropdownMenuTranslation?: DropdownMenuTranslation;
+}

package/dist/patterns/FiltersInline/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((a) => (a.Filter = "Filter", a.Sort = "Sort", a.Sale = "Sale", a.Departments = "Departments", a.Month = "Month", a.Location = "Location", a))(r || {});
+export {
+  r as FilterButtonType
+};

package/dist/patterns/FiltersInline/utils.d.ts

@@ -0,0 +1,61 @@
+import { FilterButtonIconType, FilterButtonType, FilterDimension, FilterType } from './types';
+export declare const FilterButtons: FilterButtonType[];
+export declare const FiltersInlineFilters: {
+    Sort: {
+        id: string;
+        label: string;
+        active: boolean;
+    }[];
+    Sale: {
+        id: string;
+        label: string;
+        active: boolean;
+    }[];
+    Departments: {
+        id: string;
+        label: string;
+        value: string;
+        active: boolean;
+    }[];
+    Month: ({
+        id: string;
+        label: string;
+        value: string;
+        active: boolean;
+        disabled?: undefined;
+    } | {
+        id: string;
+        label: string;
+        value: string;
+        active: boolean;
+        disabled: boolean;
+    })[];
+    Location: {
+        id: string;
+        label: string;
+        value: string;
+        active: boolean;
+    }[];
+};
+export declare const SalesMockData: {
+    auctionType: string;
+    titleText: string;
+    date: string;
+    location: string;
+    department: string;
+}[];
+export declare const countActiveFilters: (filters?: FilterType[], buttonType?: string) => {
+    totalCount: number;
+    filterCount: number;
+};
+export declare const getFilterDimensions: (filters: {
+    filterDimensions: Set<FilterDimension>;
+}[] | undefined, filterIndex: number | undefined) => FilterDimension[];
+export declare const getIcon: (type: FilterButtonIconType, isSelected: boolean) => "ChevronDown" | "ChevronUp" | "Filters";
+export declare const getFilterButtonClickHandler: (filtersListState: boolean[] | undefined, handleClick: ((state: boolean[]) => void) | undefined, filterId: number) => () => void;
+export declare function handleInputChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, buttonType: string, handleFilterSelection?: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, filterType: string) => void): void;
+/**
+ * Utility to reset all filter states to false and call the handler.
+ */
+export declare function resetAllFilters(filtersListState: boolean[] | undefined, handleClick: ((state: boolean[]) => void) | undefined): void;
+export declare function getFilterButtonLabel(filterButtonLabel: string, filterCount: number | null, filterButtonLabelTranslated: string | null): string;

package/dist/patterns/FiltersInline/utils.js

@@ -0,0 +1,33 @@
+import { FilterButtonType as e } from "./types.js";
+e.Filter, e.Sort, e.Sale, e.Departments, e.Month, e.Location;
+const f = (n, t) => {
+  if (!n) return { totalCount: 0, filterCount: 0 };
+  const r = n.filter((o) => o.id !== "Sort").reduce(
+    (o, i) => o + Array.from(i.filterDimensions).filter((s) => s.active).length,
+    0
+  ), u = t === "Sort" ? 0 : (() => {
+    const o = n.find((i) => i.id === t)?.filterDimensions;
+    return o ? Array.from(o).filter((i) => i.active).length : 0;
+  })();
+  return { totalCount: r, filterCount: u };
+}, m = (n, t) => n && typeof t == "number" && n[t - 1] && n[t - 1].filterDimensions ? Array.from(n[t - 1].filterDimensions) : [], a = (n, t) => n === "Filter" ? "Filters" : t ? "ChevronUp" : "ChevronDown", l = (n, t, r) => () => {
+  n && t && t(n.map((u, o) => o === r ? !u : !1));
+};
+function p(n, t, r) {
+  r && r(n, t);
+}
+function D(n, t) {
+  n && t && t(n.map(() => !1));
+}
+function F(n, t, r) {
+  return r || `${n}` + (t && t > 0 ? ` (${t})` : "");
+}
+export {
+  f as countActiveFilters,
+  l as getFilterButtonClickHandler,
+  F as getFilterButtonLabel,
+  m as getFilterDimensions,
+  a as getIcon,
+  p as handleInputChange,
+  D as resetAllFilters
+};

package/dist/scss/componentStyles.scss

@@ -70,6 +70,9 @@
 @use 'patterns/FavoritesCollectionTile/favoritesCollectionTile';
 @use 'patterns/SaleCard/saleCard';
 @use 'patterns/SaleCard/saleCardActions';
+@use 'patterns/FiltersInline/filtersInline';
+@use 'patterns/FiltersInline/filterButton';
+@use 'patterns/FiltersInline/filterDropdownMenu';
 
 // Site Furniture
 @use 'site-furniture/Header/header';

package/dist/scss/components/Drawer/_drawer.scss

@@ -46,9 +46,47 @@
     position: absolute;
     right: 10px;
     top: 10px;
+
+    &--bottom {
+      align-self: flex-start;
+      margin: $spacing-md;
+    }
+  }
+
+  // Bottom sheet modifier
+  &--bottom {
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -2px 16px rgba(0, 0, 0, 8%);
+    height: auto;
+    inset: auto 0 0;
+    max-width: 100%;
+    min-height: 30vh;
+    width: 100%;
+
+    @media (max-width: $breakpoint-sm) {
+      max-width: 100%;
+    }
+  }
+
+  &__bottom-content {
+    align-items: center;
+    border-bottom: 1px solid $medium-gray;
+    display: flex;
+    margin-bottom: $spacing-sm;
+    width: 100%;
+
+    &--label {
+      flex: 1;
+      font-variation-settings: 'wght' 600;
+      margin: $spacing-md;
+      padding-right: $spacing-xxxl;
+      text-align: center;
+      width: fit-content;
+    }
   }
 }
 
+// Drawer open/close animations
 .#{$px}-drawer[data-state='open'] {
   animation: content-show $drawer-content-transition;
 }
@@ -57,14 +95,39 @@
   animation: content-close $drawer-content-transition;
 }
 
-.#{$px}__overlay[data-state='open'] {
+// Overlay animations
+.#{$px}-drawer__overlay[data-state='open'] {
   animation: overlay-show $default-overlay-transition;
 }
 
-.#{$px}__overlay[data-state='closed'] {
+.#{$px}-drawer__overlay[data-state='closed'] {
   animation: overlay-close $default-overlay-transition;
 }
 
+// Drawer left side
+.#{$px}-drawer[data-side='left'][data-state='open'] {
+  animation: content-show-left $drawer-content-transition;
+}
+
+.#{$px}-drawer[data-side='left'][data-state='closed'] {
+  animation: content-close-left $drawer-content-transition;
+}
+
+.#{$px}-drawer[data-side='left'] {
+  left: 0;
+  right: auto;
+}
+
+// Drawer bottom sheet animations
+.#{$px}-drawer--bottom[data-state='open'] {
+  animation: bottom-sheet-content-show $drawer-content-transition;
+}
+
+.#{$px}-drawer--bottom[data-state='closed'] {
+  animation: bottom-sheet-content-close $drawer-content-transition;
+}
+
+// Keyframes
 @keyframes content-show {
   from {
     opacity: 0;
@@ -89,6 +152,54 @@
   }
 }
 
+@keyframes content-show-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes content-close-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes bottom-sheet-content-show {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottom-sheet-content-close {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
 @keyframes overlay-show {
   from {
     opacity: 0;

package/dist/scss/components/Modal/_modal.scss

@@ -12,6 +12,11 @@
   transform: translate(-50%, -50%);
   z-index: 30;
 
+  &__close--left {
+    left: 0.4rem;
+    right: auto;
+  }
+
   &__overlay {
     background-color: $overlay-black;
     inset: 0;

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -0,0 +1,26 @@
+@use '../../allPartials' as *;
+
+.#{$px}-filter-button {
+  border: 1px solid $light-gray;
+  gap: 4px;
+  padding: $spacing-xsm $spacing-sm;
+
+  &--selected {
+    border: 1px solid $pure-black;
+  }
+
+  &--count {
+    background: $pure-black;
+    border: 2px solid $white;
+    border-radius: 50%;
+    color: $white;
+    display: inline-block;
+    font-size: var(--label-size3);
+    height: 1.5rem;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: -15px;
+    width: 1.5rem;
+  }
+}

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -0,0 +1,126 @@
+@use '../../allPartials' as *;
+
+.#{$px}-filter-dropdown-menu {
+  background: $white;
+  border-radius: $spacing-xsm;
+  box-shadow: 0 4px 6px $medium-gray;
+  display: flex;
+  flex-direction: column;
+  min-width: 430px;
+  padding: $spacing-md;
+
+  &__filters {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xsm;
+    padding-bottom: var(--spacing-sm);
+
+    &--mobile {
+      padding: 0 $spacing-md $spacing-md;
+    }
+  }
+
+  &__button-wrap {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__buttons-wrap {
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: space-between;
+
+    &--drawer {
+      box-shadow: 0 -4px 8px -4px $medium-gray;
+      gap: $spacing-xl;
+      padding: $spacing-md;
+      width: 100%;
+    }
+  }
+
+  &__mobile-wrap {
+    box-shadow: 0 -4px 8px -4px $medium-gray;
+  }
+
+  &__header {
+    margin-bottom: $spacing-sm;
+    margin-top: 0;
+
+    &--mobile {
+      padding: $spacing-md $spacing-md 0 $spacing-md;
+    }
+  }
+
+  &__button {
+    align-self: flex-end;
+    padding: $spacing-sm $spacing-md;
+
+    &--mobile {
+      display: block;
+      margin: $spacing-sm auto $spacing-md auto;
+      width: 80%;
+    }
+  }
+
+  &__buttons {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 14px $spacing-md;
+
+    &--left {
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    &--right {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &--mobile {
+      display: block;
+      margin-bottom: $spacing-md;
+      margin-top: $spacing-sm;
+      width: 45%;
+    }
+  }
+
+  &__button-text {
+    color: $white;
+  }
+
+  &--mobile {
+    border-radius: $spacing-xsm $spacing-xsm 0 0;
+    box-shadow: none;
+    padding: 0;
+    width: 100vw;
+  }
+
+  .#{$px}-input {
+    &__wrapper {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    &__label {
+      align-self: center;
+      margin: 0;
+    }
+  }
+  .#{$px}-input__input[type='radio'] {
+    align-self: center;
+    margin-left: auto;
+  }
+  .#{$px}-input__input[type='checkbox'] {
+    align-self: center;
+    margin-left: auto;
+  }
+}
+
+.#{$px}-filter-drawer-mobile {
+  padding: 0;
+}

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -0,0 +1,15 @@
+@use '../../scss/allPartials' as *;
+
+.#{$px}-filters-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+}
+
+.#{$px}-filter-drawer {
+  padding: 0;
+}
+
+.#{$px}-filter-drawer-menu {
+  padding: $spacing-md;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.167.0",
+  "version": "1.169.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"