feat(SaleHeaderBanner): L3-4162 sale header banner updates (#450)

Co-authored-by: Aaron Hill <[email protected]>

src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx

@@ -20,6 +20,7 @@ Playground.args = {
   auctionState: AuctionStatus.ready,
   imageSrcUrl:
     'https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg',
+  headerLabel: 'Live Auction',
 };
 
 Playground.argTypes = {
@@ -38,6 +39,7 @@ export const PreSale = (props: SaleHeaderBannerProps) => (
     imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
     occurrenceInformation={[{ date: '10:00am EDT, 4 Sep 2024', occurrenceLabel: 'Begins' }]}
     location="New York"
+    headerLabel="Online Auction"
     auctionState={AuctionStatus.ready}
   />
 );
@@ -52,6 +54,7 @@ export const PreSaleTwoOccurrences = (props: SaleHeaderBannerProps) => (
       { date: '10:00am EDT, 5 Sep 2024', occurrenceLabel: 'Session II' },
     ]}
     location="New York"
+    headerLabel="Online Auction"
     auctionState={AuctionStatus.ready}
   />
 );
@@ -66,6 +69,7 @@ export const PreSaleThreeOccurrences = (props: SaleHeaderBannerProps) => (
       { date: '10:00am EDT, 5 Sep 2024', occurrenceLabel: 'Session II' },
       { date: '10:00am EDT, 6 Sep 2024', occurrenceLabel: 'Session III' },
     ]}
+    headerLabel="Online Auction"
     location="New York"
     auctionState={AuctionStatus.ready}
   />
@@ -79,6 +83,7 @@ export const OpenForBidding = (props: SaleHeaderBannerProps) => (
     imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
     occurrenceInformation={[{ date: '10:00am EDT, 4 Sep 2024', occurrenceLabel: 'Lots Begin to Close' }]}
     location="New York"
+    headerLabel="Online Auction"
     auctionState={AuctionStatus.live}
   />
 );
@@ -90,6 +95,7 @@ export const Closed = (props: SaleHeaderBannerProps) => (
     imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
     occurrenceInformation={[{ date: '4 Sep 2024', occurrenceLabel: 'Concluded' }]}
     location="New York"
+    headerLabel="Online Auction"
     auctionState={AuctionStatus.past}
   >
     <SaleHeaderBrowseAuctions />

src/patterns/SaleHeaderBanner/SaleHeaderBanner.test.tsx

@@ -4,9 +4,11 @@ import SaleHeaderBanner, { SaleHeaderBannerProps } from './SaleHeaderBanner';
 import { AuctionStatus } from '../../types/commonTypes';
 import SaleHeaderBrowseAuctions from './SaleHeaderBrowseAuctions';
 import { addDays } from 'date-fns';
+import Button from '../../components/Button/Button';
 
 const defaultProps: SaleHeaderBannerProps = {
   auctionTitle: 'Sample Auction',
+  headerLabel: 'Auction',
   location: 'New York',
   occurrenceInformation: [{ date: '2023-12-01', occurrenceLabel: 'Auction Date' }],
   auctionState: AuctionStatus.ready,
@@ -36,16 +38,6 @@ describe('SaleHeaderBanner', () => {
     expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
   });
 
-  it('renders the "Register to Bid" button when auction is not closed', () => {
-    render(<SaleHeaderBanner {...defaultProps} />);
-    expect(screen.getByText('Register to Bid')).toBeInTheDocument();
-  });
-
-  it('does not render the "Register to Bid" button when auction is closed', () => {
-    render(<SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.past} />);
-    expect(screen.queryByText('Register to Bid')).not.toBeInTheDocument();
-  });
-
   it('renders the countdown timer when auction is open for bidding and there is an auctionEndTime', () => {
     render(
       <SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.live} auctionEndTime={addDays(new Date(), 2)} />,
@@ -65,15 +57,15 @@ describe('SaleHeaderBanner', () => {
     expect(screen.getByText('View Calendar')).toBeInTheDocument();
   });
 
-  it('renders custom CTA label when provided', () => {
-    render(<SaleHeaderBanner {...defaultProps} ctaLabel="Join Now" />);
-    expect(screen.getByText('Join Now')).toBeInTheDocument();
-  });
-
   it('calls onClick handler when CTA button is clicked', () => {
     const handleClick = vi.fn();
-    render(<SaleHeaderBanner {...defaultProps} onClick={handleClick} />);
-    screen.getByText('Register to Bid').click();
+    render(
+      <SaleHeaderBanner {...defaultProps} onClick={handleClick}>
+        <Button onClick={handleClick} />
+        Register to Bid
+      </SaleHeaderBanner>,
+    );
+    screen.getByRole('button').click();
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 

src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx

@@ -6,7 +6,6 @@ import { SeldonImage } from '../../components/SeldonImage';
 import { AuctionStatus } from '../../types/commonTypes';
 import { Text, TextVariants } from '../../components/Text';
 import { PageContentWrapper as PageMargin } from '../../components/PageContentWrapper';
-import Button from '../../components/Button/Button';
 
 // You'll need to change the ComponentProps<"htmlelementname"> to match the top-level element of your component
 export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
@@ -59,9 +58,13 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
    */
   auctionState: AuctionStatus;
   /**
-   * What text should the CTA button display?
+   * The label for the header
    */
-  ctaLabel?: React.ReactNode;
+  headerLabel: React.ReactNode;
+  /**
+   * An element to be rendered at the bottom of the banner
+   */
+  footerElement?: React.ReactNode;
   /**
    * What action does the CTA take?
    */
@@ -90,17 +93,17 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
       location,
       auctionState,
       occurrenceInformation,
-      ctaLabel = 'Register to Bid',
       onClick,
       children,
       className,
+      footerElement,
+      headerLabel,
       ...props
     },
     ref,
   ) => {
     const { className: baseClassName, ...commonProps } = getCommonProps(props, 'SaleHeaderBanner');
     const isOpenForBidding = auctionState === AuctionStatus.live;
-    const isClosed = auctionState === AuctionStatus.past;
 
     return (
       <div {...commonProps} className={classnames(baseClassName, className)} {...props} ref={ref}>
@@ -127,6 +130,7 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
                 {<Countdown endDateTime={auctionEndTime} />}
               </div>
             ) : null}
+            <Text variant={TextVariants.badge}>{headerLabel}</Text>
             <Text variant={TextVariants.title1}>{auctionTitle}</Text>
             <Text variant={TextVariants.string2} className={`${baseClassName}__location`}>
               {location}
@@ -140,14 +144,9 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
                   </Text>
                 </div>
               ))}
-
-              {isClosed ? children : null}
+              {children}
             </div>
-            {!isClosed ? (
-              <Button className={`${baseClassName}__cta`} onClick={onClick}>
-                {ctaLabel}
-              </Button>
-            ) : null}
+            {footerElement}
           </div>
         </PageMargin>
       </div>

src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -48,21 +48,27 @@
 
   &__occurrence-details {
     display: flex;
-    margin-bottom: 1.5rem;
 
     &-text {
       align-items: flex-start;
       display: flex;
       flex-direction: column;
       gap: 4px;
 
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        height: 1rem;
+      }
+
       &:first-child {
-        padding-right: $spacing-md;
+        padding-right: $spacing-xsm;
       }
 
       &:not(:first-child) {
         border-left: 1px solid $keyline-gray;
-        padding: 0 $spacing-md;
+        padding-left: $spacing-xsm;
       }
     }
   }

src/patterns/SaleHeaderBanner/index.ts

@@ -1,3 +1,2 @@
 export { default as SaleHeaderBanner, type SaleHeaderBannerProps } from './SaleHeaderBanner';
 export { default as SaleHeaderBrowseAuctions, type SaleHeaderBrowseAuctionsProps } from './SaleHeaderBrowseAuctions';
-export { AuctionState } from './types';