@anker-in/headless-ui 1.1.17-alpha.1766026822963 → 1.1.17-alpha.1766030104268
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/AccordionCards/index.d.ts +17 -0
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.d.ts +22 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.js +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +7 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.d.ts +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.js +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.js.map +7 -0
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +83 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +7 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.d.ts +40 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js.map +7 -0
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/CollectionShelves/index.js +1 -1
- package/dist/cjs/biz-components/CollectionShelves/index.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrap.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrap.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.d.ts +39 -0
- package/dist/cjs/biz-components/EventSchedule/index.js +2 -0
- package/dist/cjs/biz-components/EventSchedule/index.js.map +7 -0
- package/dist/cjs/biz-components/FooterNavigation/icons/Subtract.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/icons/Subtract.js.map +2 -2
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/Close.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/Close.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/DownArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/DownArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/LeftArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/LeftArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/RightArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/RightArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.d.ts +5 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/Countdown.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.d.ts +4 -1
- 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/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +2 -2
- package/dist/cjs/biz-components/Media/index.d.ts +32 -0
- package/dist/cjs/biz-components/Media/index.js +2 -0
- package/dist/cjs/biz-components/Media/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaPlayerBase/index.backup.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.backup.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/cjs/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/cjs/biz-components/PromotionalBar/index.d.ts +35 -0
- package/dist/cjs/biz-components/PromotionalBar/index.js +2 -0
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +7 -0
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +3 -3
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +61 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js +2 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +7 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +1 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +2 -2
- package/dist/cjs/biz-components/StockShelf/index.d.ts +21 -0
- package/dist/cjs/biz-components/StockShelf/index.js +2 -0
- package/dist/cjs/biz-components/StockShelf/index.js.map +7 -0
- package/dist/cjs/biz-components/Subscribe/index.js.map +2 -2
- package/dist/cjs/biz-components/Tabs/Tabs.js +1 -1
- package/dist/cjs/biz-components/Tabs/Tabs.js.map +2 -2
- package/dist/cjs/biz-components/TabsGroup/index.js +1 -1
- package/dist/cjs/biz-components/TabsGroup/index.js.map +2 -2
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
- package/dist/cjs/biz-components/VideoModal/index.js +1 -1
- package/dist/cjs/biz-components/VideoModal/index.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +5 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/components/drop-down.js +1 -1
- package/dist/cjs/components/drop-down.js.map +2 -2
- package/dist/cjs/components/picture.d.ts +2 -0
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.d.ts +5 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- package/dist/cjs/stories/accordionCards.stories.js +1 -1
- package/dist/cjs/stories/accordionCards.stories.js.map +3 -3
- package/dist/cjs/stories/anchorNavigation.stories.js +2 -0
- package/dist/cjs/stories/anchorNavigation.stories.js.map +7 -0
- package/dist/cjs/stories/buyOneGetOneShelf.stories.js +2 -0
- package/dist/cjs/stories/buyOneGetOneShelf.stories.js.map +7 -0
- package/dist/cjs/stories/eventSchedule.stories.js +2 -0
- package/dist/cjs/stories/eventSchedule.stories.js.map +7 -0
- package/dist/cjs/stories/picture.stories.js +2 -2
- package/dist/cjs/stories/picture.stories.js.map +3 -3
- package/dist/cjs/stories/promotionalBar.stories.js +2 -0
- package/dist/cjs/stories/promotionalBar.stories.js.map +7 -0
- package/dist/cjs/stories/secondaryBanner.stories.js +2 -0
- package/dist/cjs/stories/secondaryBanner.stories.js.map +7 -0
- package/dist/cjs/stories/stockShelf.stories.js +2 -0
- package/dist/cjs/stories/stockShelf.stories.js.map +7 -0
- package/dist/esm/biz-components/AccordionCards/index.d.ts +17 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.d.ts +22 -0
- package/dist/esm/biz-components/AnchorNavigation/index.js +2 -0
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +7 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.d.ts +2 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.js +2 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.js.map +7 -0
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +83 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +7 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.d.ts +40 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js.map +7 -0
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/CollectionShelves/index.js +1 -1
- package/dist/esm/biz-components/CollectionShelves/index.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/EventSchedule/index.d.ts +39 -0
- package/dist/esm/biz-components/EventSchedule/index.js +2 -0
- package/dist/esm/biz-components/EventSchedule/index.js.map +7 -0
- package/dist/esm/biz-components/FooterNavigation/icons/Subtract.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/icons/Subtract.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/Close.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/Close.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/DownArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/DownArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/LeftArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/LeftArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/RightArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/RightArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.d.ts +5 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts +4 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +2 -2
- package/dist/esm/biz-components/Media/index.d.ts +32 -0
- package/dist/esm/biz-components/Media/index.js +2 -0
- package/dist/esm/biz-components/Media/index.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerBase/index.backup.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.backup.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/esm/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/esm/biz-components/PromotionalBar/index.d.ts +35 -0
- package/dist/esm/biz-components/PromotionalBar/index.js +2 -0
- package/dist/esm/biz-components/PromotionalBar/index.js.map +7 -0
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +3 -3
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +61 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +2 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +7 -0
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +1 -1
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +2 -2
- package/dist/esm/biz-components/StockShelf/index.d.ts +21 -0
- package/dist/esm/biz-components/StockShelf/index.js +2 -0
- package/dist/esm/biz-components/StockShelf/index.js.map +7 -0
- package/dist/esm/biz-components/Subscribe/index.js.map +2 -2
- package/dist/esm/biz-components/Tabs/Tabs.js +1 -1
- package/dist/esm/biz-components/Tabs/Tabs.js.map +2 -2
- package/dist/esm/biz-components/TabsGroup/index.js +1 -1
- package/dist/esm/biz-components/TabsGroup/index.js.map +2 -2
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +2 -2
- package/dist/esm/biz-components/VideoModal/index.js +1 -1
- package/dist/esm/biz-components/VideoModal/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +5 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/components/drop-down.js +1 -1
- package/dist/esm/components/drop-down.js.map +2 -2
- package/dist/esm/components/picture.d.ts +2 -0
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.d.ts +5 -1
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/dist/esm/stories/accordionCards.stories.js +1 -1
- package/dist/esm/stories/accordionCards.stories.js.map +3 -3
- package/dist/esm/stories/anchorNavigation.stories.js +2 -0
- package/dist/esm/stories/anchorNavigation.stories.js.map +7 -0
- package/dist/esm/stories/buyOneGetOneShelf.stories.js +2 -0
- package/dist/esm/stories/buyOneGetOneShelf.stories.js.map +7 -0
- package/dist/esm/stories/eventSchedule.stories.js +2 -0
- package/dist/esm/stories/eventSchedule.stories.js.map +7 -0
- package/dist/esm/stories/picture.stories.js +2 -2
- package/dist/esm/stories/picture.stories.js.map +3 -3
- package/dist/esm/stories/promotionalBar.stories.js +2 -0
- package/dist/esm/stories/promotionalBar.stories.js.map +7 -0
- package/dist/esm/stories/secondaryBanner.stories.js +2 -0
- package/dist/esm/stories/secondaryBanner.stories.js.map +7 -0
- package/dist/esm/stories/stockShelf.stories.js +2 -0
- package/dist/esm/stories/stockShelf.stories.js.map +7 -0
- package/package.json +2 -1
- package/style.css +1 -1
|
@@ -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 React from '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 endDate: '2025-11-15T03:32:00.000Z',\n endDate_tz: 'America/Sao_Paulo',\n dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\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' }} className=\"mt-[8px]\" />\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 WithVideoModal: Story = {\n args: {\n data: {\n title: 'Experience Anker Innovation',\n subtitle: 'Watch our latest product demo and discover the future of charging technology',\n pcImage: {\n url: defaultBackground,\n alt: 'tech background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'tech background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n link: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn-more',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch Demo',\n playIcon: true,\n videoUrl: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'product demo video',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger' },\n { title: 'Anker PowerCore 27,650mAh Power Bank' },\n { title: 'Anker Wireless Charging Station' },\n ],\n },\n },\n}\n\nexport const WithYoutubeVideo: Story = {\n args: {\n data: {\n title: 'Anker Prime Series',\n subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n pcImage: {\n url: defaultBackground,\n alt: 'anker products',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: defaultBackground,\n alt: 'anker products pad',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'anker products mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Buy Now',\n link: '/buy',\n },\n secondaryButton: {\n text: 'Explore',\n link: '/explore',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch on YouTube',\n youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n },\n caption: [\n { title: 'Prime 240W Desktop Charger' },\n { title: 'Prime 27,650mAh Power Bank' },\n { title: 'Prime 100W Wireless Charger' },\n ],\n },\n },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n return (\n <div className=\"min-h-[500vh]\">\n {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n theme: 'dark',\n title: 'Powered by Innovation',\n subtitle:\n 'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n pcImage: {\n url: defaultBackground,\n alt: 'fallback background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'fallback background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'background video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'First Video',\n link: '/first',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn',\n },\n caption: [\n { title: 'IntersectionObserver Controlled' },\n { title: 'Auto Play on Viewport Entry' },\n { title: 'Restart from Beginning' },\n ],\n }}\n />\n\n {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Second Video Banner',\n subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n pcImage: {\n url: darkBackground,\n alt: 'second banner background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'second banner mobile',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n alt: 'second video desktop',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'second video tablet',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'second video mobile',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'Second Video',\n link: '/second',\n },\n secondaryButton: {\n text: 'Explore More',\n link: '/explore',\n },\n caption: [\n { title: 'Independent Video Control' },\n { title: 'Pause When Out of View' },\n { title: 'Resource Efficient' },\n ],\n }}\n />\n\n {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Third Video Experience',\n subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n pcImage: {\n url: defaultBackground,\n alt: 'third banner background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'third banner mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n alt: 'third video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n theme: 'dark',\n isShowVideo: true,\n primaryButton: {\n text: 'Third Video',\n link: '/third',\n },\n secondaryButton: {\n text: 'Complete Test',\n link: '/complete',\n },\n caption: [\n { title: 'Seamless Performance' },\n { title: 'Multiple Video Management' },\n { title: 'Optimized for All Devices' },\n ],\n }}\n />\n\n {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n <div className=\"bg-black py-20 text-white\">\n <div className=\"container mx-auto px-4 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAkHI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAjHJ,MAAkB,QAClB,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,EACA,QAAS,2BACT,WAAY,oBACZ,WAAY,8DACd,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,UAAU,WAAW,GACnF,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,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,8BACP,SAAU,+EACV,QAAS,CACP,IAAKP,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,yBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,cACN,sBAAuB,GACvB,oBAAqB,aACrB,SAAU,GACV,SAAU,CACR,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,CACF,EACA,QAAS,CACP,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,iCAAkC,CAC7C,CACF,CACF,CACF,EAEaQ,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,+EACV,QAAS,CACP,IAAKR,EACL,IAAK,iBACL,aAAcA,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,wBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACN,KAAM,MACR,EACA,gBAAiB,CACf,KAAM,UACN,KAAM,WACN,sBAAuB,GACvB,oBAAqB,mBACrB,UAAW,aACb,EACA,QAAS,CACP,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,6BAA8B,CACzC,CACF,CACF,CACF,
|
|
6
|
-
"names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithVideoModal", "WithYoutubeVideo", "ScrollableBackgroundVideo"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from '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 endDate: '2025-11-15T03:32:00.000Z',\n endDate_tz: 'America/Sao_Paulo',\n dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\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' }} className=\"mt-[8px]\" />\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 WithVideoModal: Story = {\n args: {\n data: {\n title: 'Experience Anker Innovation',\n subtitle: 'Watch our latest product demo and discover the future of charging technology',\n pcImage: {\n url: defaultBackground,\n alt: 'tech background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'tech background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n link: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn-more',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch Demo',\n playIcon: true,\n videoUrl: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'product demo video',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger' },\n { title: 'Anker PowerCore 27,650mAh Power Bank' },\n { title: 'Anker Wireless Charging Station' },\n ],\n },\n },\n}\n\nexport const WithYoutubeVideo: Story = {\n args: {\n data: {\n title: 'Anker Prime Series',\n subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n pcImage: {\n url: defaultBackground,\n alt: 'anker products',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: defaultBackground,\n alt: 'anker products pad',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'anker products mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Buy Now',\n link: '/buy',\n },\n secondaryButton: {\n text: 'Explore',\n link: '/explore',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch on YouTube',\n youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n },\n caption: [\n { title: 'Prime 240W Desktop Charger' },\n { title: 'Prime 27,650mAh Power Bank' },\n { title: 'Prime 100W Wireless Charger' },\n ],\n },\n },\n}\n\n// \u8BED\u4E49\u5316 ClassNames \u793A\u4F8B\nexport const WithSemanticClassNames: Story = {\n args: {\n data: LightTheme.args!.data,\n classNames: {\n root: '',\n title: ' text-red-500',\n subtitle: 'text-blue-500',\n buttonGroup: 'justify-left mt-[200px]',\n primaryButton: 'shadow-lg',\n secondaryButton: 'custom-secondary-btn',\n captionGroup: 'bg-black/40',\n },\n },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n return (\n <div className=\"min-h-[500vh]\">\n {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n theme: 'dark',\n title: 'Powered by Innovation',\n subtitle:\n 'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n pcImage: {\n url: defaultBackground,\n alt: 'fallback background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'fallback background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'background video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'First Video',\n link: '/first',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn',\n },\n caption: [\n { title: 'IntersectionObserver Controlled' },\n { title: 'Auto Play on Viewport Entry' },\n { title: 'Restart from Beginning' },\n ],\n }}\n />\n\n {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Second Video Banner',\n subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n pcImage: {\n url: darkBackground,\n alt: 'second banner background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'second banner mobile',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n alt: 'second video desktop',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'second video tablet',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'second video mobile',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'Second Video',\n link: '/second',\n },\n secondaryButton: {\n text: 'Explore More',\n link: '/explore',\n },\n caption: [\n { title: 'Independent Video Control' },\n { title: 'Pause When Out of View' },\n { title: 'Resource Efficient' },\n ],\n }}\n />\n\n {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Third Video Experience',\n subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n pcImage: {\n url: defaultBackground,\n alt: 'third banner background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'third banner mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n alt: 'third video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n theme: 'dark',\n isShowVideo: true,\n primaryButton: {\n text: 'Third Video',\n link: '/third',\n },\n secondaryButton: {\n text: 'Complete Test',\n link: '/complete',\n },\n caption: [\n { title: 'Seamless Performance' },\n { title: 'Multiple Video Management' },\n { title: 'Optimized for All Devices' },\n ],\n }}\n />\n\n {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n <div className=\"bg-black py-20 text-white\">\n <div className=\"container mx-auto px-4 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithVideoModal", "WithYoutubeVideo", "WithSemanticClassNames", "ScrollableBackgroundVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import o from"../biz-components/AccordionCards/index.js";import{Container as s}from"../components/container.js";const r={title:"Biz-Components/AccordionCards",component:o,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=r;const e=[{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],n={args:{data:{products:e,primaryButton:"Learn More",theme:"dark",shape:"round",itemShape:"round"}}},d={args:{data:{products:e,shape:"round",itemShape:"round",primaryButton:"Learn More"}}},l=()=>t("div",{className:"py-10",children:t(s,{children:t(o,{data:{products:e,shape:"round",itemShape:"round",primaryButton:"Learn More",theme:"dark"}})})}),c={args:{data:{products:e,shape:"round",itemShape:"round",theme:"dark"},autoplay:{enabled:!0,loop:!0,interval:1500}}};export{c as Autoplay,l as CustomLayout,n as Default,d as Round,i as default};
|
|
2
2
|
//# sourceMappingURL=accordionCards.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/accordionCards.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n\nexport const CustomLayout = () => {\n return (\n <div className=\"py-10\">\n <Container>\n <AccordionCards\n data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n />\n </Container>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "AA0EQ,cAAAA,MAAA,oBAzER,OAAOC,MAAoB,4CAC3B,OAAS,aAAAC,MAAiB,6BAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAWF,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOG,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUD,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUF,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaG,EAAe,IAExBR,EAAC,OAAI,UAAU,QACb,SAAAA,EAACE,EAAA,CACC,SAAAF,EAACC,EAAA,CACC,KAAM,CAAE,SAAUI,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF",
|
|
6
|
-
"names": ["jsx", "AccordionCards", "Container", "meta", "accordionCards_stories_default", "mock", "Default", "Round", "CustomLayout"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n\nexport const CustomLayout = () => {\n return (\n <div className=\"py-10\">\n <Container>\n <AccordionCards\n data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n />\n </Container>\n </div>\n )\n}\n\nexport const Autoplay = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n theme: 'dark',\n },\n autoplay: { enabled: true, loop: true, interval: 1500 },\n },\n}"],
|
|
5
|
+
"mappings": "AA0EQ,cAAAA,MAAA,oBAzER,OAAOC,MAAoB,4CAC3B,OAAS,aAAAC,MAAiB,6BAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAWF,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOG,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUD,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUF,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaG,EAAe,IAExBR,EAAC,OAAI,UAAU,QACb,SAAAA,EAACE,EAAA,CACC,SAAAF,EAACC,EAAA,CACC,KAAM,CAAE,SAAUI,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF,EAISI,EAAW,CACtB,KAAM,CACJ,KAAM,CACJ,SAAUJ,EACV,MAAO,QACP,UAAW,QACX,MAAO,MACT,EACA,SAAU,CAAE,QAAS,GAAM,KAAM,GAAM,SAAU,IAAK,CACxD,CACF",
|
|
6
|
+
"names": ["jsx", "AccordionCards", "Container", "meta", "accordionCards_stories_default", "mock", "Default", "Round", "CustomLayout", "Autoplay"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import"react";import t from"../biz-components/AnchorNavigation/index.js";const o={sectionIds:[{id:"section1",label:"Section 1"},{id:"section2",label:"Section 2"},{id:"section3",label:"Section 3"}]},e={title:"Biz Components/AnchorNavigation",component:t,parameters:{layout:"centered",docs:{description:{component:"\u951A\u70B9\u5BFC\u822A - \u951A\u70B9\u5BFC\u822A"}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E"}},args:{data:o}};var s=e;const p={args:{data:o},render:a=>i(t,{...a})};export{p as Default,s as default};
|
|
2
|
+
//# sourceMappingURL=anchorNavigation.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/anchorNavigation.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport React from 'react'\n\nimport AnchorNavigation, { type AnchorNavigationData } from '../biz-components/AnchorNavigation/index.js'\n\n// \u6A21\u62DF\u4E1A\u52A1\u6570\u636E\nconst mockData: AnchorNavigationData = {\n sectionIds: [\n {\n id: 'section1',\n label: 'Section 1',\n },\n {\n id: 'section2',\n label: 'Section 2',\n },\n {\n id: 'section3',\n label: 'Section 3',\n },\n ],\n} satisfies AnchorNavigationData\n\nconst meta = {\n title: 'Biz Components/AnchorNavigation',\n component: AnchorNavigation,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: '\u951A\u70B9\u5BFC\u822A - \u951A\u70B9\u5BFC\u822A',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u4E1A\u52A1\u6570\u636E',\n },\n },\n args: {\n data: mockData,\n },\n} satisfies Meta<typeof AnchorNavigation>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: mockData,\n },\n render: (args: { data: AnchorNavigationData }) => <AnchorNavigation {...args} />,\n}\n"],
|
|
5
|
+
"mappings": "AAqDoD,cAAAA,MAAA,oBAnDpD,MAAkB,QAElB,OAAOC,MAAqD,8CAG5D,MAAMC,EAAiC,CACrC,WAAY,CACV,CACE,GAAI,WACJ,MAAO,WACT,EACA,CACE,GAAI,WACJ,MAAO,WACT,EACA,CACE,GAAI,WACJ,MAAO,WACT,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAWF,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,qDACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,0BACf,CACF,EACA,KAAM,CACJ,KAAMC,CACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAMH,CACR,EACA,OAASI,GAAyCN,EAACC,EAAA,CAAkB,GAAGK,EAAM,CAChF",
|
|
6
|
+
"names": ["jsx", "AnchorNavigation", "mockData", "meta", "anchorNavigation_stories_default", "Default", "args"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"react";import r from"../biz-components/BuyOneGetOneShelf/index.js";const t={title:"\u4E70\u8D60\u6D3B\u52A8\u4E13\u533A",description:"\u7CBE\u9009\u4F18\u8D28\u4EA7\u54C1\uFF0C\u4E70\u4E3B\u5546\u54C1\u5373\u53EF\u83B7\u5F97\u8D85\u503C\u8D60\u54C1",layout:"single",products:[{image:"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80",tags:[{text:"20% OFF",type:"discount",variant:"filled"},{text:"New",type:"new",variant:"outlined"}],name:"eufyCam 3 Security Camera System",description:"4K Ultra HD wireless security camera with advanced AI detection",freeGiftLabel:"\u514D\u8D39\u8D60\u54C1",freeGifts:[{id:"gift-1",image:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufyCam Solar Panel Charger",currentPrice:"Free",originalPrice:"$199.00",isNew:!0,selected:!0},{id:"gift-2",image:"https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufy HomeBase 3 Hub",currentPrice:"Free",originalPrice:"$149.00",isNew:!0,selected:!1}],giftSelectionMode:"multiple",currentPrice:"$1,999.00",originalPrice:"$2,999.00",learnMoreText:"Learn More",shopNowText:"Shop Now"}]},a={...t,layout:"double",products:[{...t.products[0],image:"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80"},{image:"https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80",tags:[{text:"30% OFF",type:"discount",variant:"filled"}],name:"Anker PowerCore Portable Charger",description:"High-capacity portable charger with fast charging technology",freeGiftLabel:"\u514D\u8D39\u8D60\u54C1",freeGifts:[{id:"gift-3",image:"https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"USB-C Cable Premium",currentPrice:"Free",originalPrice:"$29.00",isNew:!1,selected:!0}],giftSelectionMode:"single",currentPrice:"$79.99",originalPrice:"$119.99",learnMoreText:"Learn More",shopNowText:"Shop Now"}]},c={title:"Biz Components/BuyOneGetOneShelf",component:r,parameters:{layout:"fullscreen",docs:{description:{component:"\u4E70\u8D60\u8D27\u67B6 - \u5C55\u793A\u4E70\u4E00\u8D60\u4E00\u6D3B\u52A8\u7684\u4EA7\u54C1\u7EC4\u4EF6\uFF0C\u652F\u6301\u5355\u5217\u548C\u53CC\u5217\u5E03\u5C40\uFF0C\u5305\u542B\u4EA7\u54C1\u4FE1\u606F\u3001\u6807\u7B7E\u3001\u8D60\u54C1\u5217\u8868\u548C\u8D2D\u4E70\u6309\u94AE"}}},tags:["autodocs"],argTypes:{data:{control:"object",description:"\u4E70\u8D60\u8D27\u67B6\u6570\u636E\u914D\u7F6E"},onProductClick:{action:"product-clicked",description:"\u4EA7\u54C1\u5361\u7247\u70B9\u51FB\u4E8B\u4EF6"},onProductImageClick:{action:"product-image-clicked",description:"\u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u4E8B\u4EF6"},onLearnMore:{action:"learn-more-clicked",description:"Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6"},onShopNow:{action:"shop-now-clicked",description:"Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6"},onGiftClick:{action:"gift-clicked",description:"\u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6"},onGiftSelectionChange:{action:"gift-selection-changed",description:"\u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6"}}};var p=c;const d={args:{data:t,onProductClick:e=>console.log("Product clicked:",e.name),onProductImageClick:e=>console.log("Product image clicked:",e.name),onLearnMore:e=>console.log("Learn More clicked:",e.name),onShopNow:e=>console.log("Shop Now clicked:",e.name),onGiftClick:(e,o)=>console.log("Gift clicked:",e.name,"for product:",o.name),onGiftSelectionChange:(e,o)=>console.log("Gift selection changed:",e.length,"gifts selected for",o.name)}},m={args:{data:t},parameters:{docs:{description:{story:"\u5355\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E00\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u91CD\u70B9\u63A8\u8350\u5355\u4E2A\u4EA7\u54C1\u7684\u573A\u666F\u3002"}}}},f={args:{data:a},parameters:{docs:{description:{story:"\u53CC\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E24\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u573A\u666F\u3002"}}}},g={args:{data:{layout:"single",products:[t.products[0]]}},parameters:{docs:{description:{story:"\u65E0\u6807\u9898\u63CF\u8FF0\u7248\u672C\uFF1A\u53EA\u663E\u793A\u4EA7\u54C1\u5361\u7247\uFF0C\u9002\u5408\u5D4C\u5165\u5230\u5176\u4ED6\u9875\u9762\u4E2D\u7684\u573A\u666F\u3002"}}}},u={args:{data:{layout:"single",products:[{image:"https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80",tags:[{text:"Limited",type:"new",variant:"filled"}],name:"Smart Home Device Collection",description:"Complete smart home automation solution",currentPrice:"$599.00",originalPrice:"$799.00"}]}},parameters:{docs:{description:{story:"\u6700\u5C0F\u5316\u4EA7\u54C1\uFF1A\u65E0\u8D60\u54C1\u5217\u8868\uFF0C\u53EA\u663E\u793A\u57FA\u672C\u4EA7\u54C1\u4FE1\u606F\u548C\u4EF7\u683C\u3002"}}}},h={args:{data:{...t,products:[{...t.products[0],learnMoreText:"\u4E86\u89E3\u8BE6\u60C5",shopNowText:"\u7ACB\u5373\u8D2D\u4E70"}]},onLearnMore:e=>alert(`\u8DF3\u8F6C\u5230\u4EA7\u54C1\u8BE6\u60C5\u9875\u9762: ${e.name}`),onShopNow:e=>alert(`\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66: ${e.name}`),onGiftClick:(e,o)=>alert(`\u9009\u62E9\u8D60\u54C1: ${e.name}`)},parameters:{docs:{description:{story:"\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u6848\u548C\u70B9\u51FB\u4E8B\u4EF6\uFF1A\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57\u548C\u5904\u7406\u51FD\u6570\u3002"}}}},y={args:{data:{...t,products:[{...t.products[0],giftSelectionMode:"single",freeGifts:[{id:"gift-a",image:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufyCam Solar Panel Charger",currentPrice:"Free",originalPrice:"$199.00",isNew:!0,selected:!1},{id:"gift-b",image:"https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufy HomeBase 3 Hub",currentPrice:"Free",originalPrice:"$149.00",isNew:!0,selected:!0},{id:"gift-c",image:"https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"USB-C Cable Premium",currentPrice:"Free",originalPrice:"$29.00",isNew:!1,selected:!1}]}]},onGiftClick:(e,o)=>console.log("Single gift selection:",e.name),onGiftSelectionChange:(e,o)=>console.log("Single selection changed:",e)},parameters:{docs:{description:{story:"\u5355\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Radio\u6309\u94AE\u3002"}}}},S={args:{data:{...t,products:[{...t.products[0],giftSelectionMode:"multiple"}]},onGiftClick:(e,o)=>console.log("Multiple gift selection:",e.name,"for",o.name),onGiftSelectionChange:(e,o)=>console.log("Multiple selection changed:",e.map(i=>i.name),"for",o.name)},parameters:{docs:{description:{story:"\u591A\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Checkbox\u3002"}}}},b={args:{data:t,onProductClick:e=>{console.log("\u{1F3AF} Product card clicked:",e.name)},onProductImageClick:e=>{console.log("\u{1F5BC}\uFE0F Product image clicked - opening gallery for:",e.name)},onLearnMore:e=>{console.log("\u{1F4DA} Learn More - navigating to product details:",e.name)},onShopNow:e=>{console.log("\u{1F6D2} Shop Now - adding to cart:",e.name)},onGiftClick:(e,o)=>{console.log("\u{1F381} Gift clicked:",e.name,"for product:",o.name)},onGiftSelectionChange:(e,o)=>{console.log("\u2705 Gift selection changed for",o.name+":",e.map(i=>i.name).join(", "))}},parameters:{docs:{description:{story:"\u7EC4\u5408\u5F0F\u8BBE\u8BA1\u793A\u4F8B\uFF1A\u6240\u6709\u4E8B\u4EF6\u90FD\u901A\u8FC7 props \u900F\u4F20\uFF0C\u5916\u90E8\u53EF\u4EE5\u5B8C\u5168\u63A7\u5236\u4EA4\u4E92\u903B\u8F91\u3002\u6253\u5F00\u6D4F\u89C8\u5668\u63A7\u5236\u53F0\u67E5\u770B\u4E8B\u4EF6\u65E5\u5FD7\u3002"}}}};export{b as ComposableDesign,d as Default,f as DoubleLayout,u as MinimalProduct,S as MultipleGiftSelection,g as NoHeader,y as SingleGiftSelection,m as SingleLayout,h as WithCustomActions,p as default};
|
|
2
|
+
//# sourceMappingURL=buyOneGetOneShelf.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/buyOneGetOneShelf.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\n\nimport BuyOneGetOneShelf, { type BuyOneGetOneShelfData } from '../biz-components/BuyOneGetOneShelf/index.js'\n\n// \u57FA\u7840\u6570\u636E\u914D\u7F6E\nconst basicShelfData: BuyOneGetOneShelfData = {\n title: '\u4E70\u8D60\u6D3B\u52A8\u4E13\u533A',\n description: '\u7CBE\u9009\u4F18\u8D28\u4EA7\u54C1\uFF0C\u4E70\u4E3B\u5546\u54C1\u5373\u53EF\u83B7\u5F97\u8D85\u503C\u8D60\u54C1',\n layout: 'single',\n products: [\n {\n image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80',\n tags: [\n { text: '20% OFF', type: 'discount', variant: 'filled' },\n { text: 'New', type: 'new', variant: 'outlined' },\n ],\n name: 'eufyCam 3 Security Camera System',\n description: '4K Ultra HD wireless security camera with advanced AI detection',\n freeGiftLabel: '\u514D\u8D39\u8D60\u54C1',\n freeGifts: [\n {\n id: 'gift-1',\n image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'eufyCam Solar Panel Charger',\n currentPrice: 'Free',\n originalPrice: '$199.00',\n isNew: true,\n selected: true,\n },\n {\n id: 'gift-2',\n image: 'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'eufy HomeBase 3 Hub',\n currentPrice: 'Free',\n originalPrice: '$149.00',\n isNew: true,\n selected: false,\n },\n ],\n giftSelectionMode: 'multiple',\n currentPrice: '$1,999.00',\n originalPrice: '$2,999.00',\n learnMoreText: 'Learn More',\n shopNowText: 'Shop Now',\n },\n ],\n}\n\n// \u53CC\u5217\u5E03\u5C40\u6570\u636E\nconst doubleLayoutData: BuyOneGetOneShelfData = {\n ...basicShelfData,\n layout: 'double',\n products: [\n {\n ...basicShelfData.products![0],\n image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80',\n },\n {\n image: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80',\n tags: [\n { text: '30% OFF', type: 'discount', variant: 'filled' },\n ],\n name: 'Anker PowerCore Portable Charger',\n description: 'High-capacity portable charger with fast charging technology',\n freeGiftLabel: '\u514D\u8D39\u8D60\u54C1',\n freeGifts: [\n {\n id: 'gift-3',\n image: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'USB-C Cable Premium',\n currentPrice: 'Free',\n originalPrice: '$29.00',\n isNew: false,\n selected: true,\n },\n ],\n giftSelectionMode: 'single',\n currentPrice: '$79.99',\n originalPrice: '$119.99',\n learnMoreText: 'Learn More',\n shopNowText: 'Shop Now',\n },\n ],\n}\n\nconst meta = {\n title: 'Biz Components/BuyOneGetOneShelf',\n component: BuyOneGetOneShelf,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u4E70\u8D60\u8D27\u67B6 - \u5C55\u793A\u4E70\u4E00\u8D60\u4E00\u6D3B\u52A8\u7684\u4EA7\u54C1\u7EC4\u4EF6\uFF0C\u652F\u6301\u5355\u5217\u548C\u53CC\u5217\u5E03\u5C40\uFF0C\u5305\u542B\u4EA7\u54C1\u4FE1\u606F\u3001\u6807\u7B7E\u3001\u8D60\u54C1\u5217\u8868\u548C\u8D2D\u4E70\u6309\u94AE',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n control: 'object',\n description: '\u4E70\u8D60\u8D27\u67B6\u6570\u636E\u914D\u7F6E',\n },\n onProductClick: {\n action: 'product-clicked',\n description: '\u4EA7\u54C1\u5361\u7247\u70B9\u51FB\u4E8B\u4EF6',\n },\n onProductImageClick: {\n action: 'product-image-clicked',\n description: '\u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u4E8B\u4EF6',\n },\n onLearnMore: {\n action: 'learn-more-clicked',\n description: 'Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6',\n },\n onShopNow: {\n action: 'shop-now-clicked',\n description: 'Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6',\n },\n onGiftClick: {\n action: 'gift-clicked',\n description: '\u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6',\n },\n onGiftSelectionChange: {\n action: 'gift-selection-changed',\n description: '\u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6',\n },\n },\n} satisfies Meta<typeof BuyOneGetOneShelf>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: basicShelfData,\n onProductClick: (product) => console.log('Product clicked:', product.name),\n onProductImageClick: (product) => console.log('Product image clicked:', product.name),\n onLearnMore: (product) => console.log('Learn More clicked:', product.name),\n onShopNow: (product) => console.log('Shop Now clicked:', product.name),\n onGiftClick: (gift, product) => console.log('Gift clicked:', gift.name, 'for product:', product.name),\n onGiftSelectionChange: (selectedGifts, product) => console.log('Gift selection changed:', selectedGifts.length, 'gifts selected for', product.name),\n },\n}\n\nexport const SingleLayout: Story = {\n args: {\n data: basicShelfData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u5355\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E00\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u91CD\u70B9\u63A8\u8350\u5355\u4E2A\u4EA7\u54C1\u7684\u573A\u666F\u3002',\n },\n },\n },\n}\n\nexport const DoubleLayout: Story = {\n args: {\n data: doubleLayoutData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u53CC\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E24\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u573A\u666F\u3002',\n },\n },\n },\n}\n\nexport const NoHeader: Story = {\n args: {\n data: {\n layout: 'single',\n products: [basicShelfData.products![0]],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u65E0\u6807\u9898\u63CF\u8FF0\u7248\u672C\uFF1A\u53EA\u663E\u793A\u4EA7\u54C1\u5361\u7247\uFF0C\u9002\u5408\u5D4C\u5165\u5230\u5176\u4ED6\u9875\u9762\u4E2D\u7684\u573A\u666F\u3002',\n },\n },\n },\n}\n\nexport const MinimalProduct: Story = {\n args: {\n data: {\n layout: 'single',\n products: [\n {\n image: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80',\n tags: [\n { text: 'Limited', type: 'new', variant: 'filled' },\n ],\n name: 'Smart Home Device Collection',\n description: 'Complete smart home automation solution',\n currentPrice: '$599.00',\n originalPrice: '$799.00',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u6700\u5C0F\u5316\u4EA7\u54C1\uFF1A\u65E0\u8D60\u54C1\u5217\u8868\uFF0C\u53EA\u663E\u793A\u57FA\u672C\u4EA7\u54C1\u4FE1\u606F\u548C\u4EF7\u683C\u3002',\n },\n },\n },\n}\n\nexport const WithCustomActions: Story = {\n args: {\n data: {\n ...basicShelfData,\n products: [\n {\n ...basicShelfData.products![0],\n learnMoreText: '\u4E86\u89E3\u8BE6\u60C5',\n shopNowText: '\u7ACB\u5373\u8D2D\u4E70',\n },\n ],\n },\n onLearnMore: (product) => alert(`\u8DF3\u8F6C\u5230\u4EA7\u54C1\u8BE6\u60C5\u9875\u9762: ${product.name}`),\n onShopNow: (product) => alert(`\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66: ${product.name}`),\n onGiftClick: (gift, product) => alert(`\u9009\u62E9\u8D60\u54C1: ${gift.name}`),\n },\n parameters: {\n docs: {\n description: {\n story: '\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u6848\u548C\u70B9\u51FB\u4E8B\u4EF6\uFF1A\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57\u548C\u5904\u7406\u51FD\u6570\u3002',\n },\n },\n },\n}\n\nexport const SingleGiftSelection: Story = {\n args: {\n data: {\n ...basicShelfData,\n products: [\n {\n ...basicShelfData.products![0],\n giftSelectionMode: 'single',\n freeGifts: [\n {\n id: 'gift-a',\n image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'eufyCam Solar Panel Charger',\n currentPrice: 'Free',\n originalPrice: '$199.00',\n isNew: true,\n selected: false,\n },\n {\n id: 'gift-b',\n image: 'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'eufy HomeBase 3 Hub',\n currentPrice: 'Free',\n originalPrice: '$149.00',\n isNew: true,\n selected: true,\n },\n {\n id: 'gift-c',\n image: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80',\n name: 'USB-C Cable Premium',\n currentPrice: 'Free',\n originalPrice: '$29.00',\n isNew: false,\n selected: false,\n },\n ],\n },\n ],\n },\n onGiftClick: (gift, product) => console.log('Single gift selection:', gift.name),\n onGiftSelectionChange: (selectedGifts, product) => console.log('Single selection changed:', selectedGifts),\n },\n parameters: {\n docs: {\n description: {\n story: '\u5355\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Radio\u6309\u94AE\u3002',\n },\n },\n },\n}\n\nexport const MultipleGiftSelection: Story = {\n args: {\n data: {\n ...basicShelfData,\n products: [\n {\n ...basicShelfData.products![0],\n giftSelectionMode: 'multiple',\n },\n ],\n },\n onGiftClick: (gift, product) => console.log('Multiple gift selection:', gift.name, 'for', product.name),\n onGiftSelectionChange: (selectedGifts, product) => console.log('Multiple selection changed:', selectedGifts.map(g => g.name), 'for', product.name),\n },\n parameters: {\n docs: {\n description: {\n story: '\u591A\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Checkbox\u3002',\n },\n },\n },\n}\n\nexport const ComposableDesign: Story = {\n args: {\n data: basicShelfData,\n onProductClick: (product) => {\n console.log('\uD83C\uDFAF Product card clicked:', product.name)\n },\n onProductImageClick: (product) => {\n console.log('\uD83D\uDDBC\uFE0F Product image clicked - opening gallery for:', product.name)\n },\n onLearnMore: (product) => {\n console.log('\uD83D\uDCDA Learn More - navigating to product details:', product.name)\n },\n onShopNow: (product) => {\n console.log('\uD83D\uDED2 Shop Now - adding to cart:', product.name)\n },\n onGiftClick: (gift, product) => {\n console.log('\uD83C\uDF81 Gift clicked:', gift.name, 'for product:', product.name)\n },\n onGiftSelectionChange: (selectedGifts, product) => {\n console.log('\u2705 Gift selection changed for', product.name + ':', selectedGifts.map(g => g.name).join(', '))\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u7EC4\u5408\u5F0F\u8BBE\u8BA1\u793A\u4F8B\uFF1A\u6240\u6709\u4E8B\u4EF6\u90FD\u901A\u8FC7 props \u900F\u4F20\uFF0C\u5916\u90E8\u53EF\u4EE5\u5B8C\u5168\u63A7\u5236\u4EA4\u4E92\u903B\u8F91\u3002\u6253\u5F00\u6D4F\u89C8\u5668\u63A7\u5236\u53F0\u67E5\u770B\u4E8B\u4EF6\u65E5\u5FD7\u3002',\n },\n },\n },\n}"],
|
|
5
|
+
"mappings": "AACA,MAAkB,QAElB,OAAOA,MAAuD,+CAG9D,MAAMC,EAAwC,CAC5C,MAAO,uCACP,YAAa,qHACb,OAAQ,SACR,SAAU,CACR,CACE,MAAO,iHACP,KAAM,CACJ,CAAE,KAAM,UAAW,KAAM,WAAY,QAAS,QAAS,EACvD,CAAE,KAAM,MAAO,KAAM,MAAO,QAAS,UAAW,CAClD,EACA,KAAM,mCACN,YAAa,kEACb,cAAe,2BACf,UAAW,CACT,CACE,GAAI,SACJ,MAAO,+GACP,KAAM,8BACN,aAAc,OACd,cAAe,UACf,MAAO,GACP,SAAU,EACZ,EACA,CACE,GAAI,SACJ,MAAO,kHACP,KAAM,sBACN,aAAc,OACd,cAAe,UACf,MAAO,GACP,SAAU,EACZ,CACF,EACA,kBAAmB,WACnB,aAAc,YACd,cAAe,YACf,cAAe,aACf,YAAa,UACf,CACF,CACF,EAGMC,EAA0C,CAC9C,GAAGD,EACH,OAAQ,SACR,SAAU,CACR,CACE,GAAGA,EAAe,SAAU,CAAC,EAC7B,MAAO,gHACT,EACA,CACE,MAAO,iHACP,KAAM,CACJ,CAAE,KAAM,UAAW,KAAM,WAAY,QAAS,QAAS,CACzD,EACA,KAAM,mCACN,YAAa,+DACb,cAAe,2BACf,UAAW,CACT,CACE,GAAI,SACJ,MAAO,kHACP,KAAM,sBACN,aAAc,OACd,cAAe,SACf,MAAO,GACP,SAAU,EACZ,CACF,EACA,kBAAmB,SACnB,aAAc,SACd,cAAe,UACf,cAAe,aACf,YAAa,UACf,CACF,CACF,EAEME,EAAO,CACX,MAAO,mCACP,UAAWH,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,+RACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,SACT,YAAa,kDACf,EACA,eAAgB,CACd,OAAQ,kBACR,YAAa,kDACf,EACA,oBAAqB,CACnB,OAAQ,wBACR,YAAa,kDACf,EACA,YAAa,CACX,OAAQ,qBACR,YAAa,gDACf,EACA,UAAW,CACT,OAAQ,mBACR,YAAa,8CACf,EACA,YAAa,CACX,OAAQ,eACR,YAAa,sCACf,EACA,sBAAuB,CACrB,OAAQ,yBACR,YAAa,kDACf,CACF,CACF,EAEA,IAAOI,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAMJ,EACN,eAAiBK,GAAY,QAAQ,IAAI,mBAAoBA,EAAQ,IAAI,EACzE,oBAAsBA,GAAY,QAAQ,IAAI,yBAA0BA,EAAQ,IAAI,EACpF,YAAcA,GAAY,QAAQ,IAAI,sBAAuBA,EAAQ,IAAI,EACzE,UAAYA,GAAY,QAAQ,IAAI,oBAAqBA,EAAQ,IAAI,EACrE,YAAa,CAACC,EAAMD,IAAY,QAAQ,IAAI,gBAAiBC,EAAK,KAAM,eAAgBD,EAAQ,IAAI,EACpG,sBAAuB,CAACE,EAAeF,IAAY,QAAQ,IAAI,0BAA2BE,EAAc,OAAQ,qBAAsBF,EAAQ,IAAI,CACpJ,CACF,EAEaG,EAAsB,CACjC,KAAM,CACJ,KAAMR,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,0KACT,CACF,CACF,CACF,EAEaS,EAAsB,CACjC,KAAM,CACJ,KAAMR,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,0KACT,CACF,CACF,CACF,EAEaS,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,OAAQ,SACR,SAAU,CAACV,EAAe,SAAU,CAAC,CAAC,CACxC,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,sLACT,CACF,CACF,CACF,EAEaW,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,OAAQ,SACR,SAAU,CACR,CACE,MAAO,oHACP,KAAM,CACJ,CAAE,KAAM,UAAW,KAAM,MAAO,QAAS,QAAS,CACpD,EACA,KAAM,+BACN,YAAa,0CACb,aAAc,UACd,cAAe,SACjB,CACF,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,wJACT,CACF,CACF,CACF,EAEaC,EAA2B,CACtC,KAAM,CACJ,KAAM,CACJ,GAAGZ,EACH,SAAU,CACR,CACE,GAAGA,EAAe,SAAU,CAAC,EAC7B,cAAe,2BACf,YAAa,0BACf,CACF,CACF,EACA,YAAcK,GAAY,MAAM,2DAAcA,EAAQ,IAAI,EAAE,EAC5D,UAAYA,GAAY,MAAM,yCAAWA,EAAQ,IAAI,EAAE,EACvD,YAAa,CAACC,EAAMD,IAAY,MAAM,6BAASC,EAAK,IAAI,EAAE,CAC5D,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,0KACT,CACF,CACF,CACF,EAEaO,EAA6B,CACxC,KAAM,CACJ,KAAM,CACJ,GAAGb,EACH,SAAU,CACR,CACE,GAAGA,EAAe,SAAU,CAAC,EAC7B,kBAAmB,SACnB,UAAW,CACT,CACE,GAAI,SACJ,MAAO,+GACP,KAAM,8BACN,aAAc,OACd,cAAe,UACf,MAAO,GACP,SAAU,EACZ,EACA,CACE,GAAI,SACJ,MAAO,kHACP,KAAM,sBACN,aAAc,OACd,cAAe,UACf,MAAO,GACP,SAAU,EACZ,EACA,CACE,GAAI,SACJ,MAAO,kHACP,KAAM,sBACN,aAAc,OACd,cAAe,SACf,MAAO,GACP,SAAU,EACZ,CACF,CACF,CACF,CACF,EACA,YAAa,CAACM,EAAMD,IAAY,QAAQ,IAAI,yBAA0BC,EAAK,IAAI,EAC/E,sBAAuB,CAACC,EAAeF,IAAY,QAAQ,IAAI,4BAA6BE,CAAa,CAC3G,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qIACT,CACF,CACF,CACF,EAEaO,EAA+B,CAC1C,KAAM,CACJ,KAAM,CACJ,GAAGd,EACH,SAAU,CACR,CACE,GAAGA,EAAe,SAAU,CAAC,EAC7B,kBAAmB,UACrB,CACF,CACF,EACA,YAAa,CAACM,EAAMD,IAAY,QAAQ,IAAI,2BAA4BC,EAAK,KAAM,MAAOD,EAAQ,IAAI,EACtG,sBAAuB,CAACE,EAAeF,IAAY,QAAQ,IAAI,8BAA+BE,EAAc,IAAIQ,GAAKA,EAAE,IAAI,EAAG,MAAOV,EAAQ,IAAI,CACnJ,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4HACT,CACF,CACF,CACF,EAEaW,EAA0B,CACrC,KAAM,CACJ,KAAMhB,EACN,eAAiBK,GAAY,CAC3B,QAAQ,IAAI,kCAA4BA,EAAQ,IAAI,CACtD,EACA,oBAAsBA,GAAY,CAChC,QAAQ,IAAI,+DAAoDA,EAAQ,IAAI,CAC9E,EACA,YAAcA,GAAY,CACxB,QAAQ,IAAI,wDAAkDA,EAAQ,IAAI,CAC5E,EACA,UAAYA,GAAY,CACtB,QAAQ,IAAI,uCAAiCA,EAAQ,IAAI,CAC3D,EACA,YAAa,CAACC,EAAMD,IAAY,CAC9B,QAAQ,IAAI,0BAAoBC,EAAK,KAAM,eAAgBD,EAAQ,IAAI,CACzE,EACA,sBAAuB,CAACE,EAAeF,IAAY,CACjD,QAAQ,IAAI,oCAAgCA,EAAQ,KAAO,IAAKE,EAAc,IAAIQ,GAAKA,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAC3G,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,6RACT,CACF,CACF,CACF",
|
|
6
|
+
"names": ["BuyOneGetOneShelf", "basicShelfData", "doubleLayoutData", "meta", "buyOneGetOneShelf_stories_default", "Default", "product", "gift", "selectedGifts", "SingleLayout", "DoubleLayout", "NoHeader", "MinimalProduct", "WithCustomActions", "SingleGiftSelection", "MultipleGiftSelection", "g", "ComposableDesign"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as t,jsxs as n}from"react/jsx-runtime";import"react";import i from"../biz-components/EventSchedule/index.js";const e=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M15.833 3.333h-11.666c-.92 0-1.667.746-1.667 1.667v11.667c0 .92.746 1.666 1.667 1.666h11.666c.92 0 1.667-.746 1.667-1.666V5c0-.921-.746-1.667-1.667-1.667z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M13.333 1.667V5M6.667 1.667V5M2.5 8.333h15",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),o=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M10 5v5l3.333 1.667",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),a=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M16.667 10v6.667c0 .442-.176.866-.489 1.179-.313.312-.737.488-1.178.488H5c-.442 0-.866-.176-1.179-.488A1.667 1.667 0 013.333 16.667V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M18.333 5.833v4.167H1.667V5.833c0-.442.175-.866.488-1.178.313-.313.737-.489 1.179-.489h13.333c.441 0 .865.176 1.178.489.313.312.489.736.489 1.178zM10 18.333V4.167",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M10 4.167H6.25A2.083 2.083 0 014.167 2.083c0-1.15.933-2.083 2.083-2.083C8.333 0 10 4.167 10 4.167zM10 4.167h3.75a2.083 2.083 0 002.083-2.084c0-1.15-.933-2.083-2.083-2.083C11.667 0 10 4.167 10 4.167z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),c={scheduleList:[{title:"\u65E9\u9E1F\u4E13\u5C5E\u798F\u5229",date:"2024-12-01",active:!0,backgroundImage:"https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u67081\u65E5 - 12\u670815\u65E5"},{icon:t(o,{}),label:"\u9650\u65F6\u4F18\u60E0 48 \u5C0F\u65F6"},{icon:t(a,{}),label:"\u8D2D\u4E70\u5373\u9001\u7CBE\u7F8E\u793C\u54C1"}]},{title:"\u5723\u8BDE\u7279\u60E0\u6D3B\u52A8",date:"2024-12-16",active:!1,backgroundImage:"https://images.unsplash.com/photo-1512909006721-3d6018887383?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u670816\u65E5 - 12\u670831\u65E5"},{icon:t(o,{}),label:"\u5168\u5929\u5019\u4F18\u60E0"},{icon:t(a,{}),label:"\u6EE1\u989D\u8D60\u9001\u5723\u8BDE\u793C\u76D2"}]}]},r={scheduleList:[{title:"\u65B0\u5E74\u9884\u70ED\u6D3B\u52A8",date:"2024-12-01",active:!0,backgroundImage:"https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u67081\u65E5 - 12\u670810\u65E5"},{icon:t(o,{}),label:"\u6BCF\u65E5\u4E0A\u534810\u70B9\u5F00\u62A2"},{icon:t(a,{}),label:"\u524D100\u540D\u9001\u795E\u79D8\u793C\u7269"}]},{title:"\u5723\u8BDE\u72C2\u6B22",date:"2024-12-11",active:!1,backgroundImage:"https://images.unsplash.com/photo-1512909006721-3d6018887383?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u670811\u65E5 - 12\u670825\u65E5"},{icon:t(o,{}),label:"\u5168\u5929\u4F18\u60E0\u4E0D\u95F4\u65AD"},{icon:t(a,{}),label:"\u6EE1\u51CF\u6D3B\u52A8\u6700\u9AD8\u7701500"}]},{title:"\u8DE8\u5E74\u7279\u60E0",date:"2024-12-26",active:!1,backgroundImage:"https://images.unsplash.com/photo-1467810563316-b5476525c0f9?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u670826\u65E5 - 1\u67081\u65E5"},{icon:t(o,{}),label:"\u5012\u8BA1\u65F6\u7279\u60E0"},{icon:t(a,{}),label:"\u65B0\u5E74\u793C\u5305\u9650\u91CF\u62A2\u8D2D"}]}]},s={title:"Biz Components/EventSchedule",component:i,parameters:{layout:"fullscreen",docs:{description:{component:"\u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6 - \u5C55\u793A\u6D3B\u52A8\u65F6\u95F4\u8F74\u548C\u8BE6\u7EC6\u4FE1\u606F\u5361\u7247\uFF0C\u652F\u6301\u591A\u4E2A\u6D3B\u52A8\u540C\u65F6\u5C55\u793A\uFF0C\u5E26\u6709\u6FC0\u6D3B\u72B6\u6001\u6307\u793A"}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E\uFF0C\u5305\u542B\u65E5\u7A0B\u5217\u8868",control:{type:"object"}},className:{description:"\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D",control:{type:"text"}}}};var p=s;const u={args:{data:c}},m={args:{data:r}},g={args:{data:{scheduleList:[{title:"\u9650\u65F6\u79D2\u6740\u6D3B\u52A8",date:"2024-12-01",active:!0,backgroundImage:"https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop",items:[{icon:t(e,{}),label:"12\u67081\u65E5\u5168\u5929"},{icon:t(o,{}),label:"\u6BCF\u5C0F\u65F6\u6574\u70B9\u5F00\u62A2"},{icon:t(a,{}),label:"\u79D2\u6740\u4EF7\u4F4E\u81F33\u6298"}]}]}}},b={args:{data:{scheduleList:[{title:"\u590F\u5B63\u6E05\u4ED3\u7279\u5356",date:"2024-06-01",active:!0,items:[{icon:t(e,{}),label:"6\u67081\u65E5 - 6\u670830\u65E5"},{icon:t(o,{}),label:"\u5168\u5929\u5019\u4F18\u60E0"},{icon:t(a,{}),label:"\u4E70\u4E00\u9001\u4E00"}]},{title:"\u65B0\u54C1\u4E0A\u5E02",date:"2024-07-01",active:!1,items:[{icon:t(e,{}),label:"7\u67081\u65E5\u8D77"},{icon:t(o,{}),label:"\u6301\u7EED\u4E00\u4E2A\u6708"},{icon:t(a,{}),label:"\u65B0\u54C1\u5C1D\u9C9C\u4EF7"}]}]}}};export{u as Default,g as SingleEvent,m as ThreeEvents,b as WithoutBackgroundImage,p as default};
|
|
2
|
+
//# sourceMappingURL=eventSchedule.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/eventSchedule.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\n\nimport EventSchedule, { type EventScheduleData } from '../biz-components/EventSchedule/index.js'\n\n// \u6A21\u62DF\u56FE\u6807\u7EC4\u4EF6\nconst CalendarIcon = () => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.833 3.333h-11.666c-.92 0-1.667.746-1.667 1.667v11.667c0 .92.746 1.666 1.667 1.666h11.666c.92 0 1.667-.746 1.667-1.666V5c0-.921-.746-1.667-1.667-1.667z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M13.333 1.667V5M6.667 1.667V5M2.5 8.333h15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst ClockIcon = () => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M10 5v5l3.333 1.667\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst GiftIcon = () => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M16.667 10v6.667c0 .442-.176.866-.489 1.179-.313.312-.737.488-1.178.488H5c-.442 0-.866-.176-1.179-.488A1.667 1.667 0 013.333 16.667V10\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M18.333 5.833v4.167H1.667V5.833c0-.442.175-.866.488-1.178.313-.313.737-.489 1.179-.489h13.333c.441 0 .865.176 1.178.489.313.312.489.736.489 1.178zM10 18.333V4.167\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M10 4.167H6.25A2.083 2.083 0 014.167 2.083c0-1.15.933-2.083 2.083-2.083C8.333 0 10 4.167 10 4.167zM10 4.167h3.75a2.083 2.083 0 002.083-2.084c0-1.15-.933-2.083-2.083-2.083C11.667 0 10 4.167 10 4.167z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\n// \u6A21\u62DF\u4E1A\u52A1\u6570\u636E\nconst mockData: EventScheduleData = {\n scheduleList: [\n {\n title: '\u65E9\u9E1F\u4E13\u5C5E\u798F\u5229',\n date: '2024-12-01',\n active: true,\n backgroundImage: 'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u67081\u65E5 - 12\u670815\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u9650\u65F6\u4F18\u60E0 48 \u5C0F\u65F6',\n },\n {\n icon: <GiftIcon />,\n label: '\u8D2D\u4E70\u5373\u9001\u7CBE\u7F8E\u793C\u54C1',\n },\n ],\n },\n {\n title: '\u5723\u8BDE\u7279\u60E0\u6D3B\u52A8',\n date: '2024-12-16',\n active: false,\n backgroundImage: 'https://images.unsplash.com/photo-1512909006721-3d6018887383?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u670816\u65E5 - 12\u670831\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u5168\u5929\u5019\u4F18\u60E0',\n },\n {\n icon: <GiftIcon />,\n label: '\u6EE1\u989D\u8D60\u9001\u5723\u8BDE\u793C\u76D2',\n },\n ],\n },\n ],\n}\n\n// \u4E09\u4E2A\u6D3B\u52A8\u7684\u6570\u636E\nconst threeEventsData: EventScheduleData = {\n scheduleList: [\n {\n title: '\u65B0\u5E74\u9884\u70ED\u6D3B\u52A8',\n date: '2024-12-01',\n active: true,\n backgroundImage: 'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u67081\u65E5 - 12\u670810\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u6BCF\u65E5\u4E0A\u534810\u70B9\u5F00\u62A2',\n },\n {\n icon: <GiftIcon />,\n label: '\u524D100\u540D\u9001\u795E\u79D8\u793C\u7269',\n },\n ],\n },\n {\n title: '\u5723\u8BDE\u72C2\u6B22',\n date: '2024-12-11',\n active: false,\n backgroundImage: 'https://images.unsplash.com/photo-1512909006721-3d6018887383?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u670811\u65E5 - 12\u670825\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u5168\u5929\u4F18\u60E0\u4E0D\u95F4\u65AD',\n },\n {\n icon: <GiftIcon />,\n label: '\u6EE1\u51CF\u6D3B\u52A8\u6700\u9AD8\u7701500',\n },\n ],\n },\n {\n title: '\u8DE8\u5E74\u7279\u60E0',\n date: '2024-12-26',\n active: false,\n backgroundImage: 'https://images.unsplash.com/photo-1467810563316-b5476525c0f9?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u670826\u65E5 - 1\u67081\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u5012\u8BA1\u65F6\u7279\u60E0',\n },\n {\n icon: <GiftIcon />,\n label: '\u65B0\u5E74\u793C\u5305\u9650\u91CF\u62A2\u8D2D',\n },\n ],\n },\n ],\n}\n\nconst meta = {\n title: 'Biz Components/EventSchedule',\n component: EventSchedule,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6 - \u5C55\u793A\u6D3B\u52A8\u65F6\u95F4\u8F74\u548C\u8BE6\u7EC6\u4FE1\u606F\u5361\u7247\uFF0C\u652F\u6301\u591A\u4E2A\u6D3B\u52A8\u540C\u65F6\u5C55\u793A\uFF0C\u5E26\u6709\u6FC0\u6D3B\u72B6\u6001\u6307\u793A',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u4E1A\u52A1\u6570\u636E\uFF0C\u5305\u542B\u65E5\u7A0B\u5217\u8868',\n control: { type: 'object' },\n },\n className: {\n description: '\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D',\n control: { type: 'text' },\n },\n },\n} satisfies Meta<typeof EventSchedule>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n/**\n * \u9ED8\u8BA4\u5C55\u793A - \u4E24\u4E2A\u6D3B\u52A8\n */\nexport const Default: Story = {\n args: {\n data: mockData,\n },\n}\n\n/**\n * \u4E09\u4E2A\u6D3B\u52A8\u5C55\u793A\n */\nexport const ThreeEvents: Story = {\n args: {\n data: threeEventsData,\n },\n}\n\n/**\n * \u5355\u4E2A\u6D3B\u52A8\n */\nexport const SingleEvent: Story = {\n args: {\n data: {\n scheduleList: [\n {\n title: '\u9650\u65F6\u79D2\u6740\u6D3B\u52A8',\n date: '2024-12-01',\n active: true,\n backgroundImage: 'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?w=200&h=150&fit=crop',\n items: [\n {\n icon: <CalendarIcon />,\n label: '12\u67081\u65E5\u5168\u5929',\n },\n {\n icon: <ClockIcon />,\n label: '\u6BCF\u5C0F\u65F6\u6574\u70B9\u5F00\u62A2',\n },\n {\n icon: <GiftIcon />,\n label: '\u79D2\u6740\u4EF7\u4F4E\u81F33\u6298',\n },\n ],\n },\n ],\n },\n },\n}\n\n/**\n * \u65E0\u80CC\u666F\u56FE\u7247\n */\nexport const WithoutBackgroundImage: Story = {\n args: {\n data: {\n scheduleList: [\n {\n title: '\u590F\u5B63\u6E05\u4ED3\u7279\u5356',\n date: '2024-06-01',\n active: true,\n items: [\n {\n icon: <CalendarIcon />,\n label: '6\u67081\u65E5 - 6\u670830\u65E5',\n },\n {\n icon: <ClockIcon />,\n label: '\u5168\u5929\u5019\u4F18\u60E0',\n },\n {\n icon: <GiftIcon />,\n label: '\u4E70\u4E00\u9001\u4E00',\n },\n ],\n },\n {\n title: '\u65B0\u54C1\u4E0A\u5E02',\n date: '2024-07-01',\n active: false,\n items: [\n {\n icon: <CalendarIcon />,\n label: '7\u67081\u65E5\u8D77',\n },\n {\n icon: <ClockIcon />,\n label: '\u6301\u7EED\u4E00\u4E2A\u6708',\n },\n {\n icon: <GiftIcon />,\n label: '\u65B0\u54C1\u5C1D\u9C9C\u4EF7',\n },\n ],\n },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AAOE,OACE,OAAAA,EADF,QAAAC,MAAA,oBANF,MAAkB,QAElB,OAAOC,MAA+C,2CAGtD,MAAMC,EAAe,IACnBF,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,UAAAD,EAAC,QACC,EAAE,6JACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACAA,EAAC,QACC,EAAE,6CACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,GACF,EAGII,EAAY,IAChBH,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,UAAAD,EAAC,QACC,EAAE,gEACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACAA,EAAC,QACC,EAAE,sBACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,GACF,EAGIK,EAAW,IACfJ,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,UAAAD,EAAC,QACC,EAAE,yIACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACAA,EAAC,QACC,EAAE,qKACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACAA,EAAC,QACC,EAAE,yMACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,GACF,EAIIM,EAA8B,CAClC,aAAc,CACZ,CACE,MAAO,uCACP,KAAM,aACN,OAAQ,GACR,gBAAiB,iFACjB,MAAO,CACL,CACE,KAAMN,EAACG,EAAA,EAAa,EACpB,MAAO,oCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,0CACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,kDACT,CACF,CACF,EACA,CACE,MAAO,uCACP,KAAM,aACN,OAAQ,GACR,gBAAiB,oFACjB,MAAO,CACL,CACE,KAAML,EAACG,EAAA,EAAa,EACpB,MAAO,qCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,gCACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,kDACT,CACF,CACF,CACF,CACF,EAGME,EAAqC,CACzC,aAAc,CACZ,CACE,MAAO,uCACP,KAAM,aACN,OAAQ,GACR,gBAAiB,iFACjB,MAAO,CACL,CACE,KAAMP,EAACG,EAAA,EAAa,EACpB,MAAO,oCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,8CACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,+CACT,CACF,CACF,EACA,CACE,MAAO,2BACP,KAAM,aACN,OAAQ,GACR,gBAAiB,oFACjB,MAAO,CACL,CACE,KAAML,EAACG,EAAA,EAAa,EACpB,MAAO,qCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,4CACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,+CACT,CACF,CACF,EACA,CACE,MAAO,2BACP,KAAM,aACN,OAAQ,GACR,gBAAiB,oFACjB,MAAO,CACL,CACE,KAAML,EAACG,EAAA,EAAa,EACpB,MAAO,mCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,gCACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,kDACT,CACF,CACF,CACF,CACF,EAEMG,EAAO,CACX,MAAO,+BACP,UAAWN,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,qPACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,qEACb,QAAS,CAAE,KAAM,QAAS,CAC5B,EACA,UAAW,CACT,YAAa,6CACb,QAAS,CAAE,KAAM,MAAO,CAC1B,CACF,CACF,EAEA,IAAOO,EAAQD,EAMR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAMJ,CACR,CACF,EAKaK,EAAqB,CAChC,KAAM,CACJ,KAAMJ,CACR,CACF,EAKaK,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,aAAc,CACZ,CACE,MAAO,uCACP,KAAM,aACN,OAAQ,GACR,gBAAiB,iFACjB,MAAO,CACL,CACE,KAAMZ,EAACG,EAAA,EAAa,EACpB,MAAO,6BACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,4CACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,uCACT,CACF,CACF,CACF,CACF,CACF,CACF,EAKaQ,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,aAAc,CACZ,CACE,MAAO,uCACP,KAAM,aACN,OAAQ,GACR,MAAO,CACL,CACE,KAAMb,EAACG,EAAA,EAAa,EACpB,MAAO,kCACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,gCACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,0BACT,CACF,CACF,EACA,CACE,MAAO,2BACP,KAAM,aACN,OAAQ,GACR,MAAO,CACL,CACE,KAAML,EAACG,EAAA,EAAa,EACpB,MAAO,sBACT,EACA,CACE,KAAMH,EAACI,EAAA,EAAU,EACjB,MAAO,gCACT,EACA,CACE,KAAMJ,EAACK,EAAA,EAAS,EAChB,MAAO,gCACT,CACF,CACF,CACF,CACF,CACF,CACF",
|
|
6
|
+
"names": ["jsx", "jsxs", "EventSchedule", "CalendarIcon", "ClockIcon", "GiftIcon", "mockData", "threeEventsData", "meta", "eventSchedule_stories_default", "Default", "ThreeEvents", "SingleEvent", "WithoutBackgroundImage"]
|
|
7
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{Picture as
|
|
1
|
+
import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Picture as e}from"../components/index.js";const l="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219",d="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627",o="https://images.unsplash.com/photo-1549388604-817d15aa0110?w=800",r="https://images.unsplash.com/photo-1549388604-817d15aa0110?w=400",m={title:"Components/Picture",component:e,parameters:{layout:"centerd",docs:{description:{component:`\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource="url1 1920\uFF0C url2 1080, url3 767".
|
|
2
2
|
\u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002
|
|
3
3
|
|
|
4
4
|
\u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A
|
|
5
5
|
- \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8
|
|
6
6
|
- \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570
|
|
7
7
|
- \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C
|
|
8
|
-
`}}},tags:["autodocs"]};var
|
|
8
|
+
`}}},tags:["autodocs"]};var i=m;const p={args:{source:`${l}, ${d} 768`,imgClassName:"rounded-[24px]"}},n={args:{source:`${o}, ${r} 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D"}}}},g={args:{source:`${o}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${r}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,className:"w-[300px]"},render:s=>a("div",{className:"space-y-2",children:[t(e,{...s}),a("div",{className:"text-sm text-gray-600 p-2 bg-gray-50 rounded",children:[t("strong",{children:"Alt\u5C5E\u6027:"})," \u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0"]})]}),parameters:{docs:{description:{story:"\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027\uFF0C\u4E0B\u65B9\u663E\u793A\u4E86\u5B9E\u9645\u89E3\u6790\u51FA\u7684alt\u6587\u672C"}}}},y={args:{source:`${o}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${r}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${o}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,className:"w-[300px]"},render:s=>a("div",{className:"space-y-2",children:[t(e,{...s}),a("div",{className:"text-sm text-gray-600 p-2 bg-gray-50 rounded",children:[t("strong",{children:"Alt\u5C5E\u6027:"})," \u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0",t("div",{className:"text-xs mt-1 text-gray-500",children:'(\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709alt\u53C2\u6570\u7684URL: "\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0")'})]})]}),parameters:{docs:{description:{story:"\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C"}}}},x={args:{source:`${o}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${r}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,alt:"\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027",className:"w-[300px]"},render:s=>a("div",{className:"space-y-2",children:[t(e,{...s}),a("div",{className:"text-sm text-gray-600 p-2 bg-gray-50 rounded",children:[t("strong",{children:"Alt\u5C5E\u6027:"})," \u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027",t("div",{className:"text-xs mt-1 text-gray-500",children:'(\u76F4\u63A5\u4F20\u5165\u7684alt\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF0C\u8986\u76D6URL\u53C2\u6570\u4E2D\u7684"URL\u4E2D\u7684alt\u53C2\u6570")'})]})]}),parameters:{docs:{description:{story:"\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF0C\u4F1A\u8986\u76D6URL\u53C2\u6570\u4E2D\u7684alt\u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C"}}}},u={args:{source:`${o}, ${r}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,className:"w-[300px]"},render:s=>a("div",{className:"space-y-2",children:[t(e,{...s}),a("div",{className:"text-sm text-gray-600 p-2 bg-gray-50 rounded",children:[t("strong",{children:"Alt\u5C5E\u6027:"})," \u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570",t("div",{className:"text-xs mt-1 text-gray-500",children:"(\u7B2C\u4E00\u4E2AURL\u6CA1\u6709alt\u53C2\u6570\uFF0C\u4F7F\u7528\u7B2C\u4E8C\u4E2AURL\u7684alt\u53C2\u6570)"})]})]}),parameters:{docs:{description:{story:"\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709\u3002\u4F1A\u4F7F\u7528\u627E\u5230\u7684\u7B2C\u4E00\u4E2A\u6709\u6548alt\u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C"}}}},v={args:{source:"https://m.media-amazon.com/images/S/aplus-media-library-service-media/b4b0b7a8-b5ae-4ee3-8cc5-a8f93cb91f7a.__CR0,0,1200,900_PT0_SX600_V1___.png 1920, https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80 768, https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&q=80 400",alt:"Amazon\u4EA7\u54C1\u5C55\u793A\u56FE\u7247",className:"w-full max-w-[600px]",imgClassName:"rounded-lg shadow-lg"},render:s=>a("div",{className:"space-y-3",children:[t(e,{...s}),a("div",{className:"text-sm text-gray-600 p-3 bg-gray-50 rounded-lg",children:[t("div",{className:"font-semibold mb-2",children:"\u89E3\u6790\u7ED3\u679C\u5C55\u793A:"}),a("div",{children:[t("strong",{children:"Alt\u5C5E\u6027:"})," Amazon\u4EA7\u54C1\u5C55\u793A\u56FE\u7247"]}),a("div",{className:"text-xs mt-2 text-gray-500",children:[t("strong",{children:"\u667A\u80FD\u89E3\u6790\u7684URL:"}),t("div",{className:"mt-1 font-mono text-xs bg-white p-2 rounded border break-all",children:"1. https://m.media-amazon.com/images/S/aplus-media-library-service-media/b4b0b7a8-b5ae-4ee3-8cc5-a8f93cb91f7a.__CR0,0,1200,900_PT0_SX600_V1___.png (1920px)"}),t("div",{className:"mt-1 font-mono text-xs bg-white p-2 rounded border break-all",children:"2. https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80 (768px)"})]})]})]}),parameters:{docs:{description:{story:"\u2728 **URL\u5305\u542B\u9017\u53F7\u7684\u667A\u80FD\u89E3\u6790** - \u5C55\u793A\u5982\u4F55\u6B63\u786E\u5904\u7406\u5305\u542B\u9017\u53F7\u7684\u590D\u6742URL\uFF08\u5982Amazon CDN URL\u4E2D\u7684 `__CR0,0,1200,900_`\uFF09\u3002\u65B0\u7684\u89E3\u6790\u903B\u8F91\u80FD\u591F\u8BC6\u522B\u5B8C\u6574\u7684 `http://domain/path` \u6A21\u5F0F\uFF0C\u4E0D\u4F1A\u88ABURL\u5185\u90E8\u7684\u9017\u53F7\u5206\u5272\uFF0C\u540C\u65F6\u4FDD\u6301\u4E0E\u539F\u6709\u683C\u5F0F\u7684\u5B8C\u5168\u517C\u5BB9\u3002\u4E0B\u65B9\u663E\u793A\u4E86\u89E3\u6790\u7ED3\u679C\u3002"}}}};export{x as AltPriority,v as AmazonImageWithCommas,p as Default,u as MixedAltSources,n as NotMatchDomain,g as WithAltFromUrl,y as WithAltFromUrlMultipleBreakpoints,i as default};
|
|
9
9
|
//# sourceMappingURL=picture.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/picture.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Picture", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta", "picture_stories_default", "Default", "NotMatchDomain", "WithAltFromUrl", "WithAltFromUrlMultipleBreakpoints", "AltPriority", "MixedAltSources"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://images.unsplash.com/photo-1549388604-817d15aa0110?w=800'\nconst mobImageUrl2 = 'https://images.unsplash.com/photo-1549388604-817d15aa0110?w=400'\n\nconst meta = {\n title: 'Components/Picture',\n component: Picture,\n parameters: {\n layout: 'centerd',\n docs: {\n description: {\n component: `\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource=\"url1 1920\uFF0C url2 1080, url3 767\". \n \u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002\n\n \u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A\n - \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8\n - \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570\n - \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Picture>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n source: `${imageUrl}, ${mobImageUrl} 768`,\n imgClassName: 'rounded-[24px]',\n },\n}\n\nexport const NotMatchDomain: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2} 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D',\n },\n },\n },\n}\n\nexport const WithAltFromUrl: Story = {\n args: {\n source: `${imageUrl2}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,\n className: 'w-[300px]',\n },\n render: (args) => (\n <div className=\"space-y-2\">\n <Picture {...args} />\n <div className=\"text-sm text-gray-600 p-2 bg-gray-50 rounded\">\n <strong>Alt\u5C5E\u6027:</strong> \u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: '\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027\uFF0C\u4E0B\u65B9\u663E\u793A\u4E86\u5B9E\u9645\u89E3\u6790\u51FA\u7684alt\u6587\u672C',\n },\n },\n },\n}\n\nexport const WithAltFromUrlMultipleBreakpoints: Story = {\n args: {\n source: `${imageUrl2}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${imageUrl2}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,\n className: 'w-[300px]',\n },\n render: (args) => (\n <div className=\"space-y-2\">\n <Picture {...args} />\n <div className=\"text-sm text-gray-600 p-2 bg-gray-50 rounded\">\n <strong>Alt\u5C5E\u6027:</strong> \u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0\n <div className=\"text-xs mt-1 text-gray-500\">\n (\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709alt\u53C2\u6570\u7684URL: \"\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0\")\n </div>\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: '\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C',\n },\n },\n },\n}\n\nexport const AltPriority: Story = {\n args: {\n source: `${imageUrl2}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,\n alt: '\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027',\n className: 'w-[300px]',\n },\n render: (args) => (\n <div className=\"space-y-2\">\n <Picture {...args} />\n <div className=\"text-sm text-gray-600 p-2 bg-gray-50 rounded\">\n <strong>Alt\u5C5E\u6027:</strong> \u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027\n <div className=\"text-xs mt-1 text-gray-500\">\n (\u76F4\u63A5\u4F20\u5165\u7684alt\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF0C\u8986\u76D6URL\u53C2\u6570\u4E2D\u7684\"URL\u4E2D\u7684alt\u53C2\u6570\")\n </div>\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: '\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF0C\u4F1A\u8986\u76D6URL\u53C2\u6570\u4E2D\u7684alt\u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C',\n },\n },\n },\n}\n\nexport const MixedAltSources: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,\n className: 'w-[300px]',\n },\n render: (args) => (\n <div className=\"space-y-2\">\n <Picture {...args} />\n <div className=\"text-sm text-gray-600 p-2 bg-gray-50 rounded\">\n <strong>Alt\u5C5E\u6027:</strong> \u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570\n <div className=\"text-xs mt-1 text-gray-500\">\n (\u7B2C\u4E00\u4E2AURL\u6CA1\u6709alt\u53C2\u6570\uFF0C\u4F7F\u7528\u7B2C\u4E8C\u4E2AURL\u7684alt\u53C2\u6570)\n </div>\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: '\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709\u3002\u4F1A\u4F7F\u7528\u627E\u5230\u7684\u7B2C\u4E00\u4E2A\u6709\u6548alt\u503C\uFF0C\u4E0B\u65B9\u663E\u793A\u5B9E\u9645\u4F7F\u7528\u7684alt\u6587\u672C',\n },\n },\n },\n}\n\nexport const AmazonImageWithCommas: Story = {\n args: {\n source: 'https://m.media-amazon.com/images/S/aplus-media-library-service-media/b4b0b7a8-b5ae-4ee3-8cc5-a8f93cb91f7a.__CR0,0,1200,900_PT0_SX600_V1___.png 1920, https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80 768, https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&q=80 400',\n alt: 'Amazon\u4EA7\u54C1\u5C55\u793A\u56FE\u7247',\n className: 'w-full max-w-[600px]',\n imgClassName: 'rounded-lg shadow-lg',\n },\n render: (args) => (\n <div className=\"space-y-3\">\n <Picture {...args} />\n <div className=\"text-sm text-gray-600 p-3 bg-gray-50 rounded-lg\">\n <div className=\"font-semibold mb-2\">\u89E3\u6790\u7ED3\u679C\u5C55\u793A:</div>\n <div><strong>Alt\u5C5E\u6027:</strong> Amazon\u4EA7\u54C1\u5C55\u793A\u56FE\u7247</div>\n <div className=\"text-xs mt-2 text-gray-500\">\n <strong>\u667A\u80FD\u89E3\u6790\u7684URL:</strong>\n <div className=\"mt-1 font-mono text-xs bg-white p-2 rounded border break-all\">\n 1. https://m.media-amazon.com/images/S/aplus-media-library-service-media/b4b0b7a8-b5ae-4ee3-8cc5-a8f93cb91f7a.__CR0,0,1200,900_PT0_SX600_V1___.png (1920px)\n </div>\n <div className=\"mt-1 font-mono text-xs bg-white p-2 rounded border break-all\">\n 2. https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80 (768px)\n </div>\n </div>\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: '\u2728 **URL\u5305\u542B\u9017\u53F7\u7684\u667A\u80FD\u89E3\u6790** - \u5C55\u793A\u5982\u4F55\u6B63\u786E\u5904\u7406\u5305\u542B\u9017\u53F7\u7684\u590D\u6742URL\uFF08\u5982Amazon CDN URL\u4E2D\u7684 `__CR0,0,1200,900_`\uFF09\u3002\u65B0\u7684\u89E3\u6790\u903B\u8F91\u80FD\u591F\u8BC6\u522B\u5B8C\u6574\u7684 `http://domain/path` \u6A21\u5F0F\uFF0C\u4E0D\u4F1A\u88ABURL\u5185\u90E8\u7684\u9017\u53F7\u5206\u5272\uFF0C\u540C\u65F6\u4FDD\u6301\u4E0E\u539F\u6709\u683C\u5F0F\u7684\u5B8C\u5168\u517C\u5BB9\u3002\u4E0B\u65B9\u663E\u793A\u4E86\u89E3\u6790\u7ED3\u679C\u3002',\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Picture", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta", "picture_stories_default", "Default", "NotMatchDomain", "WithAltFromUrl", "args", "WithAltFromUrlMultipleBreakpoints", "AltPriority", "MixedAltSources", "AmazonImageWithCommas"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import t from"../biz-components/PromotionalBar/index.js";const o={title:"\u63A8\u5E7F\u680F"},a={title:"Biz Components/PromotionalBar",component:t,parameters:{layout:"centered",docs:{description:{component:"\u63A8\u5E7F\u680F - \u63A8\u5E7F\u680F"}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E"}},args:{data:o}};var e=a;const n={args:{}};export{n as Default,e as default};
|
|
2
|
+
//# sourceMappingURL=promotionalBar.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/promotionalBar.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport PromotionalBar, { type PromotionalBarData } from '../biz-components/PromotionalBar/index.js'\n\n// \u6A21\u62DF\u4E1A\u52A1\u6570\u636E\nconst mockData: PromotionalBarData = {\n title: '\u63A8\u5E7F\u680F',\n // \u6839\u636E\u5B9E\u9645\u4E1A\u52A1\u9700\u6C42\u6DFB\u52A0\u66F4\u591A\u6570\u636E\u5B57\u6BB5\n}\n\nconst meta = {\n title: 'Biz Components/PromotionalBar',\n component: PromotionalBar,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: '\u63A8\u5E7F\u680F - \u63A8\u5E7F\u680F',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u4E1A\u52A1\u6570\u636E',\n },\n },\n args: {\n data: mockData,\n },\n} satisfies Meta<typeof PromotionalBar>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {},\n}\n"],
|
|
5
|
+
"mappings": "AAEA,OAAOA,MAAiD,4CAGxD,MAAMC,EAA+B,CACnC,MAAO,oBAET,EAEMC,EAAO,CACX,MAAO,gCACP,UAAWF,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,yCACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,0BACf,CACF,EACA,KAAM,CACJ,KAAMC,CACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CAAC,CACT",
|
|
6
|
+
"names": ["PromotionalBar", "mockData", "meta", "promotionalBar_stories_default", "Default"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"react";import e from"../biz-components/SecondaryBanner/index.js";const t={title:"Explore Endless Possibilities",superTitle:"New Experience",subtitle:"Discover more exciting content and start your digital journey",size:"base",theme:"light",primaryButton:{text:"Get Started",onClick:()=>alert("Button clicked!"),link:"#start"},secondaryButton:{text:"Learn More",onClick:()=>alert("Learn More clicked!"),link:"#learn-more"},endDate:"2025-12-31T23:59:59",endDate_tz:"America/Los_Angeles",dateFormat:"Day, Hour, Minute, Second",pcImage:{url:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/banner_pc.png?v=1765779947",alt:"PC background image",thumbnailURL:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/banner_pc.png?v=1765779947",mimeType:"image/jpeg"},padImage:{url:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile.png?v=1765780165",alt:"Tablet background image",thumbnailURL:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile.png?v=1765780165",mimeType:"image/jpeg"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile_2.png?v=1765780255",alt:"Mobile background image",thumbnailURL:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile_2.png?v=1765780255",mimeType:"image/jpeg"},iconArray:[{url:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement_2.png?v=1765765485",alt:"icon1",thumbnailURL:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement_2.png?v=1765765485",mimeType:"image/png"},{url:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement.png?v=1765765486",alt:"icon2",thumbnailURL:"https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement.png?v=1765765486",mimeType:"image/png"}]},a={title:"Biz Components/SecondaryBanner",component:e,parameters:{layout:"fullscreen",docs:{description:{component:'\u6B21\u7EA7\u6A2A\u5E45banner - \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373"\u9996\u5C4F"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\u652F\u6301\u54CD\u5E94\u5F0F\u8BBE\u8BA1\uFF0C\u9002\u914D\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u3002'}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E",control:"object"},className:{description:"\u81EA\u5B9A\u4E49CSS\u7C7B\u540D",control:"text"},classNames:{description:"\u8BED\u4E49\u5316\u7C7B\u540D\u6620\u5C04",control:"object"}},args:{data:t}};var p=a;const s={args:{}},r={args:{data:{...t,title:"Filter Page Title",superTitle:"Product Filter",subtitle:"Find the products that suit you best",size:"sm",pcImage:{url:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Filter page background image",thumbnailURL:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Filter page background image",thumbnailURL:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Filter page background image",thumbnailURL:"https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},l={args:{data:{...t,title:"Exciting Topic Page Content",superTitle:"Special Topic",subtitle:"Deep exploration, discover more value",size:"lg",pcImage:{url:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Topic page background image",thumbnailURL:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Topic page background image",thumbnailURL:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Topic page background image",thumbnailURL:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},c={args:{data:{...t,title:"Exciting Events in Progress",superTitle:"Limited Time Event",subtitle:"Don't miss out, join now to get exclusive offers",size:"xlg",pcImage:{url:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Event page background image",thumbnailURL:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Event page background image",thumbnailURL:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Event page background image",thumbnailURL:"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},n={args:{data:{...t,title:"Start Your Journey Now",superTitle:"Welcome Experience",subtitle:"Click the button below to explore more exciting content",pcImage:{url:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Background image with button",thumbnailURL:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Background image with button",thumbnailURL:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Background image with button",thumbnailURL:"https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},u={args:{data:{...t,title:"Clear and Concise Main Title",superTitle:void 0,subtitle:void 0,pcImage:{url:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Simple title background image",thumbnailURL:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Simple title background image",thumbnailURL:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Simple title background image",thumbnailURL:"https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},g={args:{data:{...t,title:"Complete Banner Content Display",superTitle:"Full Example",subtitle:"This showcases all available text fields, including main title, subtitle and description text, plus action button",size:"lg",pcImage:{url:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Full content background image",thumbnailURL:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Full content background image",thumbnailURL:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Full content background image",thumbnailURL:"https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},b={args:{data:{...t,title:"Dark Theme Display",superTitle:"Theme Style",subtitle:"Showcasing banner effects under dark theme",theme:"dark",pcImage:{url:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",alt:"Dark theme background image",thumbnailURL:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},padImage:{url:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80",alt:"Dark theme background image",thumbnailURL:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"},mobileImage:{url:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80",alt:"Dark theme background image",thumbnailURL:"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"image/jpeg"}}}},h={args:{data:{...t,theme:"dark",title:"Multi-Device Video Display",superTitle:"Responsive Video",subtitle:"Different video content optimized for each device size",size:"base",pcImage:{url:"https://cdn.shopify.com/videos/c/o/v/159d37d62cef485fa14bf2491b6e8725.mp4",alt:"PC background video",thumbnailURL:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"video/mp4"},padImage:{url:"https://cdn.shopify.com/videos/c/o/v/159d37d62cef485fa14bf2491b6e8725.mp4",alt:"Tablet background video",thumbnailURL:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"Mobile background video",thumbnailURL:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",mimeType:"video/mp4"},iconArray:void 0}}};export{b as DarkTheme,s as Default,c as ExtraLargeSize,g as FullContent,l as LargeSize,r as SmallSize,u as TitleOnly,n as WithButton,h as WithVideosBackground,p as default};
|
|
2
|
+
//# sourceMappingURL=secondaryBanner.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/secondaryBanner.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\n\nimport SecondaryBanner, { type SecondaryBannerData } from '../biz-components/SecondaryBanner/index.js'\n\n// \u57FA\u7840\u6A21\u62DF\u6570\u636E\nconst baseData: SecondaryBannerData = {\n title: 'Explore Endless Possibilities',\n superTitle: 'New Experience',\n subtitle: 'Discover more exciting content and start your digital journey',\n size: 'base',\n theme: 'light',\n primaryButton: {\n text: 'Get Started',\n onClick: () => alert('Button clicked!'),\n link: '#start',\n },\n secondaryButton: {\n text: 'Learn More',\n onClick: () => alert('Learn More clicked!'),\n link: '#learn-more',\n },\n endDate: '2025-12-31T23:59:59',\n endDate_tz: 'America/Los_Angeles',\n dateFormat: 'Day, Hour, Minute, Second',\n pcImage: {\n url: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/banner_pc.png?v=1765779947',\n alt: 'PC background image',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/banner_pc.png?v=1765779947',\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile.png?v=1765780165',\n alt: 'Tablet background image',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile.png?v=1765780165',\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile_2.png?v=1765780255',\n alt: 'Mobile background image',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/Secondary_Banner_public_mobile_2.png?v=1765780255',\n mimeType: 'image/jpeg',\n },\n iconArray: [\n {\n url: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement_2.png?v=1765765485',\n alt: 'icon1',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement_2.png?v=1765765485',\n mimeType: 'image/png',\n },\n {\n url: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement.png?v=1765765486',\n alt: 'icon2',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0501/7678/6607/files/icon_endorsement.png?v=1765765486',\n mimeType: 'image/png',\n },\n ],\n}\n\nconst meta = {\n title: 'Biz Components/SecondaryBanner',\n component: SecondaryBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u6B21\u7EA7\u6A2A\u5E45banner - \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\u652F\u6301\u54CD\u5E94\u5F0F\u8BBE\u8BA1\uFF0C\u9002\u914D\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u3002',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u4E1A\u52A1\u6570\u636E',\n control: 'object',\n },\n className: {\n description: '\u81EA\u5B9A\u4E49CSS\u7C7B\u540D',\n control: 'text',\n },\n classNames: {\n description: '\u8BED\u4E49\u5316\u7C7B\u540D\u6620\u5C04',\n control: 'object',\n },\n },\n args: {\n data: baseData,\n },\n} satisfies Meta<typeof SecondaryBanner>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// Default state\nexport const Default: Story = {\n args: {},\n}\n\n// Small size variant (suitable for filter pages)\nexport const SmallSize: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Filter Page Title',\n superTitle: 'Product Filter',\n subtitle: 'Find the products that suit you best',\n size: 'sm',\n pcImage: {\n url: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Filter page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Filter page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Filter page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Large size variant (suitable for topic pages)\nexport const LargeSize: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Exciting Topic Page Content',\n superTitle: 'Special Topic',\n subtitle: 'Deep exploration, discover more value',\n size: 'lg',\n pcImage: {\n url: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Topic page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Topic page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Topic page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Extra large size variant (suitable for event page banner)\nexport const ExtraLargeSize: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Exciting Events in Progress',\n superTitle: 'Limited Time Event',\n subtitle: 'Don\\'t miss out, join now to get exclusive offers',\n size: 'xlg',\n pcImage: {\n url: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Event page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Event page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Event page background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Variant with button\nexport const WithButton: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Start Your Journey Now',\n superTitle: 'Welcome Experience',\n subtitle: 'Click the button below to explore more exciting content',\n\n pcImage: {\n url: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Background image with button',\n thumbnailURL: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Background image with button',\n thumbnailURL: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Background image with button',\n thumbnailURL: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Simplified version (title only)\nexport const TitleOnly: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Clear and Concise Main Title',\n superTitle: undefined,\n subtitle: undefined,\n pcImage: {\n url: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Simple title background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Simple title background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Simple title background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Full content version (includes all text and button)\nexport const FullContent: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Complete Banner Content Display',\n superTitle: 'Full Example',\n subtitle: 'This showcases all available text fields, including main title, subtitle and description text, plus action button',\n \n size: 'lg',\n pcImage: {\n url: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Full content background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Full content background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Full content background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n// Dark theme variant\nexport const DarkTheme: Story = {\n args: {\n data: {\n ...baseData,\n title: 'Dark Theme Display',\n superTitle: 'Theme Style',\n subtitle: 'Showcasing banner effects under dark theme',\n theme: 'dark',\n pcImage: {\n url: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',\n alt: 'Dark theme background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n padImage: {\n url: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1024&q=80',\n alt: 'Dark theme background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n mobileImage: {\n url: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=768&q=80',\n alt: 'Dark theme background image',\n thumbnailURL: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'image/jpeg'\n },\n },\n },\n}\n\n\n// Multiple video sources variant\nexport const WithVideosBackground: Story = {\n args: {\n data: {\n ...baseData,\n theme: 'dark',\n title: 'Multi-Device Video Display',\n superTitle: 'Responsive Video',\n subtitle: 'Different video content optimized for each device size',\n size: 'base',\n pcImage: {\n url: 'https://cdn.shopify.com/videos/c/o/v/159d37d62cef485fa14bf2491b6e8725.mp4',\n alt: 'PC background video',\n thumbnailURL:\n 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'video/mp4',\n },\n padImage: {\n url: 'https://cdn.shopify.com/videos/c/o/v/159d37d62cef485fa14bf2491b6e8725.mp4',\n alt: 'Tablet background video',\n thumbnailURL:\n 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'video/mp4',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n alt: 'Mobile background video',\n thumbnailURL:\n 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',\n mimeType: 'video/mp4',\n },\n iconArray: undefined,\n },\n },\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["SecondaryBanner", "baseData", "meta", "secondaryBanner_stories_default", "Default", "SmallSize", "LargeSize", "ExtraLargeSize", "WithButton", "TitleOnly", "FullContent", "DarkTheme", "WithVideosBackground"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"react";import t from"../biz-components/StockShelf/index.js";const o={title:"\u5E93\u5B58\u8D27\u67B6",description:"\u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6"},e={title:"Biz Components/StockShelf",component:t,parameters:{layout:"centered",docs:{description:{component:"\u5E93\u5B58\u8D27\u67B6 - \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6"}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E"}},args:{data:o}};var p=e;const s={args:{}};export{s as Default,p as default};
|
|
2
|
+
//# sourceMappingURL=stockShelf.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/stockShelf.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\n\nimport StockShelf, { type StockShelfData } from '../biz-components/StockShelf/index.js'\n\n// \u6A21\u62DF\u4E1A\u52A1\u6570\u636E\nconst mockData: StockShelfData = {\n title: '\u5E93\u5B58\u8D27\u67B6',\n description: '\u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6',\n // \u6839\u636E\u5B9E\u9645\u4E1A\u52A1\u9700\u6C42\u6DFB\u52A0\u66F4\u591A\u6570\u636E\u5B57\u6BB5\n}\n\nconst meta = {\n title: 'Biz Components/StockShelf',\n component: StockShelf,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: '\u5E93\u5B58\u8D27\u67B6 - \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u4E1A\u52A1\u6570\u636E',\n },\n },\n args: {\n data: mockData,\n },\n} satisfies Meta<typeof StockShelf>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {},\n}"],
|
|
5
|
+
"mappings": "AACA,MAAkB,QAElB,OAAOA,MAAyC,wCAGhD,MAAMC,EAA2B,CAC/B,MAAO,2BACP,YAAa,oHAEf,EAEMC,EAAO,CACX,MAAO,4BACP,UAAWF,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,+IACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,0BACf,CACF,EACA,KAAM,CACJ,KAAMC,CACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CAAC,CACT",
|
|
6
|
+
"names": ["StockShelf", "mockData", "meta", "stockShelf_stories_default", "Default"]
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "1.1.17-alpha.
|
|
3
|
+
"version": "1.1.17-alpha.1766030104268",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
"class-variance-authority": "^0.7.0",
|
|
110
110
|
"clsx": "^2.1.1",
|
|
111
111
|
"copy-to-clipboard": "^3.3.3",
|
|
112
|
+
"dayjs": "^1.11.19",
|
|
112
113
|
"decimal.js": "^10.6.0",
|
|
113
114
|
"embla-carousel": "^8.6.0",
|
|
114
115
|
"embla-carousel-autoplay": "^8.5.2",
|