@anker-in/headless-ui 0.0.59-alpha.2 → 0.0.59-alpha.3
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 +1 -0
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +2 -2
- package/dist/cjs/stories/HeroBanner.stories.d.ts +1 -0
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- 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 +1 -0
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +2 -2
- package/dist/esm/stories/HeroBanner.stories.d.ts +1 -0
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var _=Object.create;var f=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var C=(t,a)=>{for(var r in a)f(t,r,{get:a[r],enumerable:!0})},T=(t,a,r,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of j(a))!F.call(t,p)&&p!==r&&f(t,p,{get:()=>a[p],enumerable:!(c=S(a,p))||c.enumerable});return t};var R=(t,a,r)=>(r=t!=null?_(A(t)):{},T(a||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t)),G=t=>T(f({},"__esModule",{value:!0}),t);var J={};C(J,{default:()=>q});module.exports=G(J);var e=require("react/jsx-runtime"),s=R(require("react")),I=require("@gsap/react"),g=R(require("gsap")),m=require("gsap/dist/ScrollTrigger"),o=require("../../components/index.js"),i=require("../../helpers/index.js"),L=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const h="image",v="hero_banner",E=s.default.forwardRef(({data:t,className:a},r)=>{const{title:c,subtitle:p,pcImage:w,padImage:M,mobileImage:z,primaryButton:x,secondaryButton:b,theme:U="light",size:B="default",caption:k=[],blockLink:P}=t,u=(0,s.useRef)(null),l=(0,s.useRef)(null);return(0,D.useExposure)(l,{componentType:h,componentName:v,componentTitle:c,componentDescription:p}),(0,s.useImperativeHandle)(r,()=>l.current),(0,I.useGSAP)(()=>{if(g.default.registerPlugin(m.ScrollTrigger),!u.current)return;const N=l.current?.clientHeight||100;return window.innerHeight<=N?m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*40-20;g.default.set(u.current,{yPercent:d})}}):(m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:n=>{const d=n.progress*20-20;g.default.set(u.current,{yPercent:d})}}),m.ScrollTrigger.create({trigger:l.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*20;g.default.set(u.current,{yPercent:d})}})),()=>{m.ScrollTrigger.getAll().forEach(n=>n.kill())}},[]),(0,e.jsxs)("div",{ref:l,"data-ui-component-id":"HeroBanner",className:(0,i.cn)(U==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},a),children:[P&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,y.trackUrlRef)(P,`${h}_${v}`),tabIndex:-1,"aria-hidden":"true"}),(0,e.jsx)("div",{ref:u,className:(0,i.cn)("absolute left-0 top-0 size-full"),children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:w?.alt||"",source:`${w?.url||""} , ${M?.url??(z?.url||"")} 1024, ${z?.url||""} 767`})}),(0,e.jsxs)("div",{className:"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 max-w-[686px]",children:[c&&(0,e.jsx)(o.Heading,{as:"h2",size:5,className:(0,i.cn)("hero-banner-title"),html:c}),p&&(0,e.jsx)(o.Text,{as:"p",size:3,className:(0,i.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:p})]}),(0,e.jsxs)("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,e.jsx)("a",{href:(0,y.trackUrlRef)(b.link,`${h}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),x&&x.text&&(0,e.jsx)("a",{href:(0,y.trackUrlRef)(x.link,`${h}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:x.text})})]})]}),k.length>0&&(0,e.jsx)("div",{className:"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]",children:k.map((N,H)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:(0,i.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:N.title}),H<k.length-1&&(0,e.jsx)("div",{className:(0,i.cn)("bg-info-primary w-px")})]},H))})]})});E.displayName="HeroBanner";var q=(0,L.withStyles)(E);
|
|
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 } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\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 useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n 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 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 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 return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': 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 tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\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 || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"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 max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"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 {caption.map((c, index) => (\n <React.Fragment key={index}>\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 </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\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 useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n 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 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 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 return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': 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 tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\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 </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"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 max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"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 {caption.map((c, index) => (\n <React.Fragment key={index}>\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 </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwGQ,IAAAI,EAAA,6BAvGRC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EAAO,UACP,QAAAC,EAAU,CAAC,EACX,UAAAC,CACF,EAAIb,EAEEc,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAnB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMa,EAAO,OAAyB,KAE/D,WAAQ,IAAM,CAEZ,GADA,EAAAC,QAAK,eAAe,eAAa,EAC7B,CAACF,EAAM,QAAS,OACpB,MAAMG,EAAeF,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERE,EAClB,gBAAc,OAAO,CACnB,QAASF,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAED,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EACD,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKL,EACL,uBAAqB,aACrB,aAAW,MACTL,IAAU,OAAS,YAAc,GACjC,8FACA,CACE,kFAAmFC,IAAS,UAC5F,kFAAmFA,IAAS,IAC9F,EACAV,CACF,EAEC,UAAAY,MACC,OAAC,KACC,UAAU,wBACV,QAAM,eAAYA,EAAW,GAAGjB,CAAa,IAAIC,CAAa,EAAE,EAChE,SAAU,GACV,cAAY,OACb,KAEH,OAAC,OAAI,IAAKiB,EAAO,aAAW,MAAG,iCAAiC,EAC9D,mBAAC,WACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,IAAKT,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EACF,KAGA,QAAC,OAAI,UAAU,yLACb,qBAAC,OAAI,UAAU,iCACZ,UAAAJ,MAAS,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,EACpFC,MACC,OAAC,QACC,GAAG,IACH,KAAM,EACN,aAAW,MACT,wIACF,EACA,KAAMA,EACR,GAEJ,KAEA,QAAC,OAAI,UAAU,gEACZ,UAAAK,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGb,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAY,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAW,EAAc,KACjB,EACF,GAEJ,GACF,EAGCI,EAAQ,OAAS,MAChB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAQ,IAAI,CAACS,EAAGC,OACf,QAAC,EAAAvB,QAAM,SAAN,CACC,oBAAC,QACC,KAAM,EACN,aAAW,MACT,yIACF,EACA,KAAMsB,EAAE,MACV,EACCC,EAAQV,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IARxDU,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDxB,EAAW,YAAc,aAEzB,IAAOb,KAAQ,cAAWa,CAAU",
|
|
6
|
+
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "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\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n pcImage: Media\n mobileImage: Media\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\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}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\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}\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 _=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!A.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(l=x(t,o))||l.enumerable});return e};var y=(e,t,r)=>(r=e!=null?_($(e)):{},M(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),k=e=>M(f({},"__esModule",{value:!0}),e);var v={};L(v,{default:()=>X});module.exports=k(v);var g=require("react/jsx-runtime"),a=y(require("react"));const F=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],N=3960,D=3980,H=e=>F.some(t=>e==t),R=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),T=a.default.forwardRef(({imgClassName:e="",source:t="",quality:r=2,deviceSizes:l=[375,767,1023,1279,1439,1539,1919],className:o,loading:P="lazy",...d},b)=>{const m=(0,a.useCallback)(({src:n,width:c})=>{const i=c;try{const s=new URL(n);if(!H(s.hostname))return n;const p=s.pathname.split("/").pop()||"";if(R(p)&&!/_[0-9]{2,4}x/.test(n)){const[w,u]=p.split(".");return`${s.origin}${s.pathname.replace(p,`${w}_${i<N?i:D}x.${u}`)}`}}catch{return n}},[]),h=(0,a.useCallback)(({srcArr:n,width:c})=>{const i=c*r,s=m({src:n[0][0],width:i});let p;return n.forEach(u=>{var I=u[0];u.length>1&&parseInt(u[1],10)>=c&&(p=m({src:I,width:i}))}),(0,g.jsx)("source",{srcSet:p||s,media:`(max-width: ${c}px)`},c)},[m,r]),E=(0,a.useMemo)(()=>{if(typeof t!="string"||!t)return[];let n;try{n=t.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(s=>s.split(" ").filter(Boolean))}catch(s){return console.log(s),[]}const c=l.map(s=>h({srcArr:n,width:s})),i=m({src:n[0][0],width:1920*r});return c.push((0,g.jsx)("img",{src:i,className:`w-full ${e}`,loading:P,...d},"default")),c},[l,e,m,r,t,h]);return(0,g.jsxs)("picture",{ref:b,className:`block overflow-hidden ${o}`,children:[E,d.children]})});var X=T;
|
|
1
|
+
"use strict";"use client";var _=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!A.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(l=x(t,o))||l.enumerable});return e};var y=(e,t,r)=>(r=e!=null?_($(e)):{},M(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),k=e=>M(f({},"__esModule",{value:!0}),e);var v={};L(v,{default:()=>X});module.exports=k(v);var g=require("react/jsx-runtime"),a=y(require("react"));const F=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],N=3960,D=3980,H=e=>F.some(t=>e==t),R=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),T=a.default.forwardRef(({imgClassName:e="",source:t="",quality:r=2,deviceSizes:l=[375,767,1023,1024,1279,1440,1439,1539,1919,1920],className:o,loading:P="lazy",...d},b)=>{const m=(0,a.useCallback)(({src:n,width:c})=>{const i=c;try{const s=new URL(n);if(!H(s.hostname))return n;const p=s.pathname.split("/").pop()||"";if(R(p)&&!/_[0-9]{2,4}x/.test(n)){const[w,u]=p.split(".");return`${s.origin}${s.pathname.replace(p,`${w}_${i<N?i:D}x.${u}`)}`}}catch{return n}},[]),h=(0,a.useCallback)(({srcArr:n,width:c})=>{const i=c*r,s=m({src:n[0][0],width:i});let p;return n.forEach(u=>{var I=u[0];u.length>1&&parseInt(u[1],10)>=c&&(p=m({src:I,width:i}))}),(0,g.jsx)("source",{srcSet:p||s,media:`(max-width: ${c}px)`},c)},[m,r]),E=(0,a.useMemo)(()=>{if(typeof t!="string"||!t)return[];let n;try{n=t.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(s=>s.split(" ").filter(Boolean))}catch(s){return console.log(s),[]}const c=l.map(s=>h({srcArr:n,width:s})),i=m({src:n[0][0],width:1920*r});return c.push((0,g.jsx)("img",{src:i,className:`w-full ${e}`,loading:P,...d},"default")),c},[l,e,m,r,t,h]);return(0,g.jsxs)("picture",{ref:b,className:`block overflow-hidden ${o}`,children:[E,d.children]})});var X=T;
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n className,\n loading = 'lazy',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n const [name, extension] = fileName.split('.')\n return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n fileName,\n `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n )}`\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEe,IAAAI,EAAA,6BApEfC,EAA4C,oBAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAiBC,GACdJ,EAAgC,KAAKK,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAEzGC,EAAU,EAAAC,QAAM,WACpB,CACE,CACE,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n const [name, extension] = fileName.split('.')\n return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n fileName,\n `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n )}`\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},p=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!f.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(s=h(t,o))||s.enumerable});return e};var y=(e,t,r)=>(r=e!=null?c(k(e)):{},p(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),P=e=>p(n({},"__esModule",{value:!0}),e);var W={};b(W,{DarkTheme:()=>u,LightTheme:()=>g,MultiBanner:()=>A,WithPadImage:()=>L,WithoutSecondaryButton:()=>w,default:()=>B});module.exports=P(W);var i=require("react/jsx-runtime"),m=y(require("../biz-components/HeroBanner/HeroBanner.js"));const x={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
|
|
9
9
|
- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
|
|
10
|
-
`}}},tags:["autodocs"]};var
|
|
10
|
+
`}}},tags:["autodocs"]};var B=x;const a="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",S="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",g={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:a,alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},mobileImage:{url:a,alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},u={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},A=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(m.default,{data:{...g.args.data,size:"sm"}}),(0,i.jsx)(m.default,{data:{...u.args.data,size:"sm"}})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:a,alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},mobileImage:{url:a,alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},L={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:a,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
|
|
11
11
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "darkBackground"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPadImage: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,iBAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GA8GI,IAAAS,EAAA,6BA7GJC,EAAuB,yDAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWZ,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKU,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaX,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKa,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaX,EAAc,OAEvB,QAAC,OAAI,UAAU,gBAEb,oBAAC,EAAAQ,QAAA,CAAW,KAAM,CAAE,GAAGT,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,KAE7D,OAAC,EAAAS,QAAA,CAAW,KAAM,CAAE,GAAGV,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,GAC9D,EAISI,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKO,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaR,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcQ,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
|
|
6
|
+
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithPadImage", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import w,{useImperativeHandle as D,useRef as z}from"react";import{useGSAP as M}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as B,Heading as U,Picture as _,Text as P}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as S}from"../../shared/Styles.js";import{useExposure as j}from"../../hooks/useExposure.js";import{trackUrlRef as h}from"../../shared/trackUrlRef.js";const m="image",u="hero_banner",$=w.forwardRef(({data:T,className:R},E)=>{const{title:d,subtitle:g,pcImage:v,padImage:I,mobileImage:y,primaryButton:n,secondaryButton:i,theme:L="light",size:k="default",caption:x=[],blockLink:N}=T,o=z(null),t=z(null);return j(t,{componentType:m,componentName:u,componentTitle:d,componentDescription:g}),D(E,()=>t.current),M(()=>{if(c.registerPlugin(s),!o.current)return;const b=t.current?.clientHeight||100;return window.innerHeight<=b?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:a=>{const p=a.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(a=>a.kill())}},[]),l("div",{ref:t,"data-ui-component-id":"HeroBanner",className:r(L==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":k==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":k==="sm"},R),children:[N&&e("a",{className:"absolute inset-0 z-10",href:h(N,`${m}_${u}`),tabIndex:-1,"aria-hidden":"true"}),e("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:e(_,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:v?.alt||"",source:`${v?.url||""} , ${I?.url??(y?.url||"")} 1024, ${y?.url||""} 767`})}),l("div",{className:"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:[l("div",{className:"laptop:text-left max-w-[686px]",children:[d&&e(U,{as:"h2",size:5,className:r("hero-banner-title"),html:d}),g&&e(P,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:g})]}),l("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:h(i.link,`${m}_${u}`),children:e(B,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),n&&n.text&&e("a",{href:h(n.link,`${m}_${u}`),children:e(B,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})})]})]}),x.length>0&&e("div",{className:"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]",children:x.map((b,f)=>l(w.Fragment,{children:[e(P,{size:2,className:r("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:b.title}),f<x.length-1&&e("div",{className:r("bg-info-primary w-px")})]},f))})]})});$.displayName="HeroBanner";var V=S($);export{V 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 } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\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 useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n 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 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 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 return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': 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 tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\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 || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"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 max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"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 {caption.map((c, index) => (\n <React.Fragment key={index}>\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 </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\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 useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n 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 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 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 return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': 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 tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\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 </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"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 max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"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 {caption.map((c, index) => (\n <React.Fragment key={index}>\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 </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as d,jsxs as y}from"react/jsx-runtime";import E,{useCallback as f,useMemo as I}from"react";const _=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],x=3960,S=3980,$=n=>_.some(c=>n==c),A=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),L=E.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:l=[375,767,1023,1279,1439,1539,1919],className:h,loading:w="lazy",...m},M)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!$(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if(A(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<x?s:S}x.${a}`)}`}}catch{return t}},[]),u=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var b=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:b,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),P=I(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=l.map(e=>u({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,loading:w,...m},"default")),r},[l,n,i,p,c,u]);return y("picture",{ref:M,className:`block overflow-hidden ${h}`,children:[P,m.children]})});var F=L;export{F as default};
|
|
1
|
+
"use client";import{jsx as d,jsxs as y}from"react/jsx-runtime";import E,{useCallback as f,useMemo as I}from"react";const _=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],x=3960,S=3980,$=n=>_.some(c=>n==c),A=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),L=E.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:l=[375,767,1023,1024,1279,1440,1439,1539,1919,1920],className:h,loading:w="lazy",...m},M)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!$(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if(A(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<x?s:S}x.${a}`)}`}}catch{return t}},[]),u=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var b=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:b,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),P=I(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=l.map(e=>u({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,loading:w,...m},"default")),r},[l,n,i,p,c,u]);return y("picture",{ref:M,className:`block overflow-hidden ${h}`,children:[P,m.children]})});var F=L;export{F as default};
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n className,\n loading = 'lazy',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n const [name, extension] = fileName.split('.')\n return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n fileName,\n `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n )}`\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
-
"mappings": "aAqEe,cAAAA,EA6BT,QAAAC,MA7BS,oBApEf,OAAOC,GAAS,eAAAC,EAAa,WAAAC,MAAe,QAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAiBC,GACdJ,EAAgC,KAAKK,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAEzGC,EAAUX,EAAM,WACpB,CACE,CACE,aAAAY,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n const [name, extension] = fileName.split('.')\n return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n fileName,\n `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n )}`\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as r,jsxs as l}from"react/jsx-runtime";import a from"../biz-components/HeroBanner/HeroBanner.js";const o={title:"Biz-Components/HeroBanner",component:a,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
|
|
9
9
|
- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
|
|
10
|
-
`}}},tags:["autodocs"]};var
|
|
10
|
+
`}}},tags:["autodocs"]};var s=o;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",p="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",i={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},n={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},g=()=>l("div",{className:"flex flex-col",children:[r(a,{data:{...i.args.data,size:"sm"}}),r(a,{data:{...n.args.data,size:"sm"}})]}),u={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},c={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};export{n as DarkTheme,i as LightTheme,g as MultiBanner,c as WithPadImage,u as WithoutSecondaryButton,s as default};
|
|
11
11
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPadImage: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AA8GI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBA7GJ,OAAOC,MAAgB,6CAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWC,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKH,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaI,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKF,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaG,EAAc,IAEvBT,EAAC,OAAI,UAAU,gBAEb,UAAAD,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGM,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,EAE7DR,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGO,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,GAC9D,EAISE,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKN,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaO,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcP,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
|
|
6
|
+
"names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithPadImage"]
|
|
7
7
|
}
|