@anker-in/headless-ui 1.1.63 → 1.1.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +2 -0
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +2 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var ce=Object.create;var N=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var be=(t,a)=>{for(var l in a)N(t,l,{get:a[l],enumerable:!0})},Q=(t,a,l,w)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of me(a))!ge.call(t,d)&&d!==l&&N(t,d,{get:()=>a[d],enumerable:!(w=ue(a,d))||w.enumerable});return t};var R=(t,a,l)=>(l=t!=null?ce(de(t)):{},Q(a||!t||!t.__esModule?N(l,"default",{value:t,enumerable:!0}):l,t)),xe=t=>Q(N({},"__esModule",{value:!0}),t);var ye={};be(ye,{default:()=>he});module.exports=xe(ye);var e=require("react/jsx-runtime"),o=R(require("react")),y=R(require("gsap")),v=require("gsap/dist/ScrollTrigger"),S=require("react-responsive"),J=require("react-intersection-observer"),K=R(require("../../helpers/ScrollLoadVideo.js")),r=require("../../components/index.js"),c=require("../../helpers/index.js"),O=require("../../shared/Styles.js"),W=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js"),X=require("../../components/button.js"),Y=require("../VideoModal/index.js");const u="image",m="hero_banner",fe=({size:t="base"})=>{const{width:a,height:l}=X.sizeMap[t];return(0,e.jsx)("svg",{width:a,height:l,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Z=o.default.forwardRef(({data:t,className:a,classNames:l={},onSecondaryClick:w,onPrimaryClick:d},ee)=>{const{label:L,title:i,subtitle:p,endDate:M,endDate_tz:te,dateFormat:ae,pcImage:B,padImage:D,mobileImage:k,pcVideo:oe,padVideo:re,mobileVideo:E,isShowVideo:le,isVideoLoop:se=!0,primaryButton:g,secondaryButton:n,theme:ne="light",size:z="default",titleSize:H,caption:T=[],blockLink:U,iconArray:ie}=t,_=(0,S.useMediaQuery)({query:"(max-width: 768px)"}),j=(0,S.useMediaQuery)({query:"(max-width: 1024px)"}),[F,G]=(0,o.useState)(!1),{ref:pe,inView:q}=(0,J.useInView)(),V=(0,o.useRef)(null),C=(0,o.useRef)(null),I=(0,o.useRef)(null),x=(0,o.useRef)(null),b=(0,o.useRef)(null);return(0,W.useExposure)(b,{componentType:u,componentName:m,componentTitle:i,componentDescription:p}),(0,o.useImperativeHandle)(ee,()=>b.current),(0,o.useEffect)(()=>{y.default.registerPlugin(v.ScrollTrigger);function s(){if(!x.current)return;const P=b.current?.clientHeight||100;window.innerHeight<=P?V.current=v.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:f=>{const h=f.progress*40-20;y.default.set(x.current,{yPercent:h})}}):(I.current=v.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:f=>{const h=f.progress*20-20;y.default.set(x.current,{yPercent:h})}}),C.current=v.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:f=>{const h=f.progress*20;y.default.set(x.current,{yPercent:h})}}))}return q&&s(),()=>{V.current&&V.current.kill(),I.current&&I.current.kill(),C.current&&C.current.kill()}},[q]),(0,e.jsx)("div",{ref:pe,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,c.cn)(ne==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":z==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":z==="sm"},a),children:[U&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,$.trackUrlRef)(U,`${u}_${m}`),"data-headless-type-name":`${u}#${m}`,"data-headless-title-desc-button":`${i}#${p}`,tabIndex:-1,"aria-hidden":"true","aria-label":i}),(0,e.jsx)("div",{ref:x,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:le?(0,e.jsx)(K.default,{poster:_?k?.url:j?D?.url||k?.url:B?.url,src:_?E?.url:j?re?.url||E?.url:oe?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:se,playsInline:!0}):(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:B?.alt||"",source:`${B?.url||""} , ${D?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[L&&(0,e.jsx)(r.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:L}),i&&(0,e.jsx)(r.Heading,{as:H==="4"?"h1":"h2",html:i,className:(0,c.cn)("hero-banner-title",l.title),size:H?Number(H||"5"):z==="sm"?4:5}),p&&(0,e.jsx)(r.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:p}),M&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(r.Countdown,{endDate:M,endDate_tz:te,dateFormat:ae,variant:"spacious"})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[n?.isShowPlayVideoButton&&n?.playVideoButtonText?(0,e.jsxs)(r.Button,{onClick:()=>G(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${u}#${m}`,"data-headless-title-desc-button":`${i}#${p}#${n?.playVideoButtonText}`,children:[n?.playVideoButtonText," ",(0,e.jsx)(fe,{size:"lg"})]}):n?.text?(0,e.jsxs)(r.Button,{"aria-label":i??p,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:n?.isCustomSecondaryButton?"button":"a",href:(0,$.trackUrlRef)(n?.link,`${u}_${m}`),onClick:s=>n?.isCustomSecondaryButton&&w?.(t,s),"data-headless-type-name":`${u}#${m}`,"data-headless-title-desc-button":`${i}#${p}#${n?.text}`,children:[n?.text,(0,e.jsx)("span",{className:"sr-only",children:i??p})]}):null,g&&g.text&&(0,e.jsx)(r.Button,{"aria-label":i??p,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:g?.isCustomPrimaryButton?"button":"a",href:(0,$.trackUrlRef)(g.link,`${u}_${m}`),onClick:s=>g?.isCustomPrimaryButton&&d?.(t,s),"data-headless-type-name":`${u}#${m}`,"data-headless-title-desc-button":`${i}#${p}#${g?.text}`,children:g.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:ie?.map(s=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:s?.pcImage?.alt||"",source:s?.pcImage?.url})},s?.pcImage?.url||s?.pcImage?.alt))})]}),T.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",l.captionGroup),children:T.map((s,P)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(r.Text,{size:2,className:(0,c.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:s.title}),P<T.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},s.title))}),F&&(0,e.jsx)(Y.VideoModal,{visible:F,videoUrl:n?.videoUrl?.url,youTubeId:n?.youtubeId,onCloseModal:()=>G(!1)})]})})});Z.displayName="HeroBanner";var he=(0,O.withLayout)(Z);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} variant=\"spacious\" />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAgCM,IAAAI,EAAA,6BA/BNC,EAAwE,oBACxEC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA8B,4BAC9BC,EAA0B,uCAC1BC,EAA4B,+CAC5BC,EAA0D,qCAC1DC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,sCACxBC,EAA2B,kCAE3B,MAAMC,EAAgB,QAChBC,EAAgB,cAWhBC,GAAuB,CAAC,CAAE,KAAAC,EAAO,MAAO,IAAsC,CAClF,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAI,UAAQF,CAAI,EACtC,SACE,OAAC,OAAI,MAAOC,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,eAAe,MAAM,6BAC/E,mBAAC,QACC,EAAE,0LACF,KAAK,eACP,EACF,CAEJ,EAEMC,EAAa,EAAAC,QAAM,WAKvB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAa,CAAC,EAAG,iBAAAC,EAAkB,eAAAC,CAAe,EAAGC,KAAQ,CACjF,KAAM,CACJ,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,WAAAC,GACA,WAAAC,GACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,GACA,SAAAC,GACA,YAAAC,EACA,YAAAC,GACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,GAAQ,QACR,
|
|
6
|
-
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "e", "icon", "c", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} variant=\"spacious\" />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "e", "icon", "c", "index"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps {\n data: {\n /** \u6807\u7B7E */\n label?: string\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n dateFormat?: string\n /** \u56FE\u6807\u5217\u8868 */\n iconArray?: Array<any>\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n pcVideo?: Media\n padVideo?: Media\n mobileVideo?: Media\n isShowVideo?: boolean\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n isCustomPrimaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n isShowPlayVideoButton?: boolean\n playVideoButtonText?: string\n playIcon?: boolean\n videoUrl?: Media\n youtubeId?: string\n isCustomSecondaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n titleSize?: TitleSizeType\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n onSecondaryClick?: (data: any, e: any) => void\n onPrimaryClick?: (data: any, e: any) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps {\n data: {\n /** \u6807\u7B7E */\n label?: string\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n dateFormat?: string\n /** \u56FE\u6807\u5217\u8868 */\n iconArray?: Array<any>\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n pcVideo?: Media\n padVideo?: Media\n mobileVideo?: Media\n isShowVideo?: boolean\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n isCustomPrimaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n isShowPlayVideoButton?: boolean\n playVideoButtonText?: string\n playIcon?: boolean\n videoUrl?: Media\n youtubeId?: string\n isCustomSecondaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n titleSize?: TitleSizeType\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n onSecondaryClick?: (data: any, e: any) => void\n onPrimaryClick?: (data: any, e: any) => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var J=Object.create;var u=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var F=(a,e)=>{for(var t in e)u(a,t,{get:e[t],enumerable:!0})},T=(a,e,t,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of V(e))!$.call(a,p)&&p!==t&&u(a,p,{get:()=>e[p],enumerable:!(d=R(e,p))||d.enumerable});return a};var y=(a,e,t)=>(t=a!=null?J(W(a)):{},T(e||!a||!a.__esModule?u(t,"default",{value:a,enumerable:!0}):t,a)),_=a=>T(u({},"__esModule",{value:!0}),a);var K={};F(K,{default:()=>G});module.exports=_(K);var n=require("react/jsx-runtime"),I=y(require("react")),N=require("class-variance-authority"),x=y(require("jump.js")),
|
|
1
|
+
"use strict";"use client";var J=Object.create;var u=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var F=(a,e)=>{for(var t in e)u(a,t,{get:e[t],enumerable:!0})},T=(a,e,t,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of V(e))!$.call(a,p)&&p!==t&&u(a,p,{get:()=>e[p],enumerable:!(d=R(e,p))||d.enumerable});return a};var y=(a,e,t)=>(t=a!=null?J(W(a)):{},T(e||!a||!a.__esModule?u(t,"default",{value:a,enumerable:!0}):t,a)),_=a=>T(u({},"__esModule",{value:!0}),a);var K={};F(K,{default:()=>G});module.exports=_(K);var n=require("react/jsx-runtime"),I=y(require("react")),N=require("class-variance-authority"),x=y(require("jump.js")),i=require("../../helpers/index.js"),o=require("../../components/index.js"),z=y(require("../Media/index.js"));const q=(0,N.cva)("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),M=I.forwardRef(({className:a,classNames:e={},data:t,jumpOptions:d={},...p},S)=>{const{pcImage:C,padImage:D,mobileImage:O,isVideoLoop:j=!0,endDate:k,endDate_tz:L,dateFormat:P,size:b="base",iconArray:g,theme:H="light",primaryButton:s,secondaryButton:r,title:w,titleTag:A="h1"}=t,v={...{duration:500,offset:0},...d},f=I.useId(),m=w?`${f}-title`:void 0,B=t.subtitle?`${f}-subtitle`:void 0,h=t.superTitle?`${f}-super-title`:void 0,E=[h,B].filter(Boolean).join(" ")||void 0;return(0,n.jsxs)("section",{ref:S,role:"banner","aria-labelledby":m,"aria-describedby":E,className:(0,i.cn)({"aiui-dark":H==="dark"},q({size:b}),a,e?.root),...p,children:[(0,n.jsx)(z.default,{pcImage:C,padImage:D,mobileImage:O,className:(0,i.cn)("absolute inset-0 size-full object-cover",{"h-fit":b==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:j,playsInline:!0,autoPlay:!0}),(0,n.jsxs)("div",{className:(0,i.cn)("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",e?.content),children:[(0,n.jsxs)("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&(0,n.jsx)(o.Text,{as:"p",size:2,id:h,className:(0,i.cn)("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",e?.superTitle),html:t.superTitle}),t.title&&(0,n.jsx)(o.Heading,{as:A,size:["xlg","lg"].includes(b)?5:4,id:m,className:(0,i.cn)("banner-title ",e?.title),html:t.title}),t.subtitle&&(0,n.jsx)(o.Text,{as:"p",size:3,id:B,className:(0,i.cn)("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",e?.subtitle),html:t.subtitle})]}),k&&(0,n.jsx)("div",{className:"banner-countdown",children:(0,n.jsx)(o.Countdown,{endDate:k,endDate_tz:L,dateFormat:P,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),(0,n.jsxs)("div",{className:(0,i.cn)("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",e?.buttonGroup),children:[r?.text&&(0,n.jsx)(o.Button,{variant:"secondary",onClick:c=>{if(r.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(r.link);l&&(0,x.default)(l,v)}r.onClick?.()},className:(0,i.cn)("",e?.secondaryButton),"aria-describedby":m,...r.link&&!r.link.startsWith("#")?{as:"a",href:r.link}:{},children:r.text}),s?.text&&(0,n.jsx)(o.Button,{onClick:c=>{if(s.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(s.link);l&&(0,x.default)(l,v)}s.onClick?.()},className:(0,i.cn)("",e?.primaryButton),"aria-describedby":m,...s.link&&!s.link.startsWith("#")?{as:"a",href:s.link}:{},children:s.text})]}),Array.isArray(g)&&g.length>0&&(0,n.jsx)("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:g.map((c,l)=>c.pcImage?(0,n.jsx)(o.Picture,{source:c.pcImage.url,alt:c.pcImage.alt||`icon ${l+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},l):null)})]})]})});M.displayName="SecondaryBanner";var G=M;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = false,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: secondaryButton.link }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: primaryButton.link }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: secondaryButton.link }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: primaryButton.link }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["SecondaryBanner_exports", "__export", "SecondaryBanner_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_jump", "import_helpers", "import_components", "import_Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "title", "titleTag", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "Media", "e", "element", "jump", "icon", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import G,{useImperativeHandle as
|
|
1
|
+
"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import G,{useImperativeHandle as le,useRef as b,useState as se,useEffect as ne}from"react";import h from"gsap";import{ScrollTrigger as y}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as ie}from"react-intersection-observer";import pe from"../../helpers/ScrollLoadVideo.js";import{Button as V,Heading as ce,Picture as A,Text as C,Countdown as ue}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as me}from"../../shared/Styles.js";import{useExposure as de}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as ge}from"../../components/button.js";import{VideoModal as be}from"../VideoModal/index.js";const s="image",n="hero_banner",xe=({size:u="base"})=>{const{width:v,height:x}=ge[u];return e("svg",{width:v,height:x,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=G.forwardRef(({data:u,className:v,classNames:x={},onSecondaryClick:Z,onPrimaryClick:J},K)=>{const{label:P,title:o,subtitle:r,endDate:R,endDate_tz:O,dateFormat:W,pcImage:w,padImage:S,mobileImage:f,pcVideo:X,padVideo:Y,mobileVideo:L,isShowVideo:ee,isVideoLoop:te=!0,primaryButton:i,secondaryButton:a,theme:ae="light",size:k="default",titleSize:N,caption:$=[],blockLink:M,iconArray:oe}=u,D=q({query:"(max-width: 768px)"}),E=q({query:"(max-width: 1024px)"}),[U,_]=se(!1),{ref:re,inView:j}=ie(),B=b(null),z=b(null),H=b(null),m=b(null),p=b(null);return de(p,{componentType:s,componentName:n,componentTitle:o,componentDescription:r}),le(K,()=>p.current),ne(()=>{h.registerPlugin(y);function t(){if(!m.current)return;const T=p.current?.clientHeight||100;window.innerHeight<=T?B.current=y.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:d=>{const g=d.progress*40-20;h.set(m.current,{yPercent:g})}}):(H.current=y.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:d=>{const g=d.progress*20-20;h.set(m.current,{yPercent:g})}}),z.current=y.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:d=>{const g=d.progress*20;h.set(m.current,{yPercent:g})}}))}return j&&t(),()=>{B.current&&B.current.kill(),H.current&&H.current.kill(),z.current&&z.current.kill()}},[j]),e("div",{ref:re,"data-ui-component-id":"HeroBanner",children:c("div",{ref:p,className:l(ae==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":k==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":k==="sm"},v),children:[M&&e("a",{className:"absolute inset-0 z-10",href:I(M,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}`,tabIndex:-1,"aria-hidden":"true","aria-label":o}),e("div",{ref:m,className:l("absolute left-0 top-0 size-full"),children:ee?e(pe,{poster:D?f?.url:E?S?.url||f?.url:w?.url,src:D?L?.url:E?Y?.url||L?.url:X?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:te,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:w?.alt||"",source:`${w?.url||""} , ${S?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),c("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[c("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[P&&e(C,{size:2,as:"p",className:l("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:P}),o&&e(ce,{as:N==="4"?"h1":"h2",html:o,className:l("hero-banner-title",x.title),size:N?Number(N||"5"):k==="sm"?4:5}),r&&e(C,{as:"p",size:2,className:l("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:r}),R&&e("div",{className:"mt-3",children:e(ue,{endDate:R,endDate_tz:O,dateFormat:W,variant:"spacious"})})]}),c("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[a?.isShowPlayVideoButton&&a?.playVideoButtonText?c(V,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${a?.playVideoButtonText}`,children:[a?.playVideoButtonText," ",e(xe,{size:"lg"})]}):a?.text?c(V,{"aria-label":o??r,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:a?.isCustomSecondaryButton?"button":"a",href:I(a?.link,`${s}_${n}`),onClick:t=>a?.isCustomSecondaryButton&&Z?.(u,t),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${a?.text}`,children:[a?.text,e("span",{className:"sr-only",children:o??r})]}):null,i&&i.text&&e(V,{"aria-label":o??r,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:i?.isCustomPrimaryButton?"button":"a",href:I(i.link,`${s}_${n}`),onClick:t=>i?.isCustomPrimaryButton&&J?.(u,t),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${i?.text}`,children:i.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:oe?.map(t=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:t?.pcImage?.alt||"",source:t?.pcImage?.url})},t?.pcImage?.url||t?.pcImage?.alt))})]}),$.length>0&&e("div",{className:l("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",x.captionGroup),children:$.map((t,T)=>c(G.Fragment,{children:[e(C,{size:2,className:l("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:t.title}),T<$.length-1&&e("div",{className:l("bg-info-primary w-px")})]},t.title))}),U&&e(be,{visible:U,videoUrl:a?.videoUrl?.url,youTubeId:a?.youtubeId,onCloseModal:()=>_(!1)})]})})});Q.displayName="HeroBanner";var Ie=me(Q);export{Ie as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} variant=\"spacious\" />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "aAgCM,cAAAA,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "c", "index", "HeroBanner_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} variant=\"spacious\" />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as y from"react";import{cva as w}from"class-variance-authority";import x from"jump.js";import{cn as a}from"../../helpers/index.js";import{Text as k,Button as v,Heading as A,Picture as E,Countdown as J}from"../../components/index.js";import R from"../Media/index.js";const V=w("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),B=y.forwardRef(({className:h,classNames:n={},data:t,jumpOptions:T={},...I},M)=>{const{pcImage:N,padImage:z,mobileImage:S,isVideoLoop:C=!
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as y from"react";import{cva as w}from"class-variance-authority";import x from"jump.js";import{cn as a}from"../../helpers/index.js";import{Text as k,Button as v,Heading as A,Picture as E,Countdown as J}from"../../components/index.js";import R from"../Media/index.js";const V=w("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),B=y.forwardRef(({className:h,classNames:n={},data:t,jumpOptions:T={},...I},M)=>{const{pcImage:N,padImage:z,mobileImage:S,isVideoLoop:C=!0,endDate:u,endDate_tz:D,dateFormat:O,size:c="base",iconArray:d,theme:j="light",primaryButton:o,secondaryButton:i,title:L,titleTag:P="h1"}=t,b={...{duration:500,offset:0},...T},m=y.useId(),l=L?`${m}-title`:void 0,g=t.subtitle?`${m}-subtitle`:void 0,f=t.superTitle?`${m}-super-title`:void 0,H=[f,g].filter(Boolean).join(" ")||void 0;return p("section",{ref:M,role:"banner","aria-labelledby":l,"aria-describedby":H,className:a({"aiui-dark":j==="dark"},V({size:c}),h,n?.root),...I,children:[e(R,{pcImage:N,padImage:z,mobileImage:S,className:a("absolute inset-0 size-full object-cover",{"h-fit":c==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:C,playsInline:!0,autoPlay:!0}),p("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",n?.content),children:[p("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&e(k,{as:"p",size:2,id:f,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:t.superTitle}),t.title&&e(A,{as:P,size:["xlg","lg"].includes(c)?5:4,id:l,className:a("banner-title ",n?.title),html:t.title}),t.subtitle&&e(k,{as:"p",size:3,id:g,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:t.subtitle})]}),u&&e("div",{className:"banner-countdown",children:e(J,{endDate:u,endDate_tz:D,dateFormat:O,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),p("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[i?.text&&e(v,{variant:"secondary",onClick:r=>{if(i.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(i.link);s&&x(s,b)}i.onClick?.()},className:a("",n?.secondaryButton),"aria-describedby":l,...i.link&&!i.link.startsWith("#")?{as:"a",href:i.link}:{},children:i.text}),o?.text&&e(v,{onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(o.link);s&&x(s,b)}o.onClick?.()},className:a("",n?.primaryButton),"aria-describedby":l,...o.link&&!o.link.startsWith("#")?{as:"a",href:o.link}:{},children:o.text})]}),Array.isArray(d)&&d.length>0&&e("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:d.map((r,s)=>r.pcImage?e(E,{source:r.pcImage.url,alt:r.pcImage.alt||`icon ${s+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},s):null)})]})]})});B.displayName="SecondaryBanner";var K=B;export{K as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = false,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: secondaryButton.link }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: primaryButton.link }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: secondaryButton.link }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: primaryButton.link }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cva", "jump", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "title", "titleTag", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "e", "element", "icon", "index", "SecondaryBanner_default"]
|
|
7
7
|
}
|