diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx index 60f255fc..c9a683bd 100644 --- a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx +++ b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx @@ -97,3 +97,17 @@ export const Closed = (props: SaleHeaderBannerProps) => ( ); + +export const TimedAuction = (props: SaleHeaderBannerProps) => ( + + + +); diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx index 6911a061..55cdf6c2 100644 --- a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx +++ b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx @@ -6,6 +6,7 @@ import { AuctionStatus } from '../../types/commonTypes'; import { Text, TextVariants } from '../../components/Text'; import { PageContentWrapper as PageMargin } from '../../components/PageContentWrapper'; import Button from '../../components/Button/Button'; +import { Countdown } from '../../components/Countdown'; // You'll need to change the ComponentProps<"htmlelementname"> to match the top-level element of your component export interface SaleHeaderBannerProps extends ComponentProps<'div'> { @@ -37,6 +38,10 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> { * What is the current state of the auction? */ auctionState: AuctionStatus; + /** + * Used to display a countdown timer to show when the Lots begin to close + */ + auctionEndTime?: string; /** * What text should the CTA button display? */ @@ -59,6 +64,7 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> { const SaleHeaderBanner = forwardRef( ( { + auctionEndTime, auctionTitle, imageSrcUrl, location, @@ -75,6 +81,7 @@ const SaleHeaderBanner = forwardRef( const { className: baseClassName, ...commonProps } = getCommonProps(props, 'SaleHeaderBanner'); const isOpenForBidding = auctionState === AuctionStatus.live; const isClosed = auctionState === AuctionStatus.past; + const showCountdown = isOpenForBidding && auctionEndTime; return (
( className={`${baseClassName}__image`} /> + {showCountdown && ( + + )}
{isOpenForBidding && children} {auctionTitle} diff --git a/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss b/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss index 9d35b188..e95644e7 100644 --- a/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss +++ b/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss @@ -18,7 +18,6 @@ align-items: start; display: flex; flex-direction: column; - height: 100%; justify-content: center; padding: $spacing-md 0; } @@ -56,4 +55,12 @@ &__cta { margin: $spacing-sm 0; } + + &__countdown { + margin-top: $spacing-md; + + @include media($size-md, $type: 'min') { + margin-top: 109px; + } + } }